search

excaliburjs / sample-jelly-jumper

Jelly Jumper! High Fidelity Platformer Sample
http://excaliburjs.com/sample-jelly-jumper/
BSD 2-Clause "Simplified" License
5 stars 0 forks source link

Samle not working on firefox #5

Closed JumpLink closed 3 months ago

JumpLink commented 3 months ago

The sample isn't running on Firefox, the sounds play but the screen is black.

On Chrome and Epiphany (WebKit) it works fine.

Error message in the forefox web console:

[Fatal] :  Error: The attribute named: a_screenuv size 2 not found in the shader source code:
 #version 300 es
in vec2 a_position;

in vec2 a_uv;
out vec2 v_uv;

in vec2 a_screenuv;
out vec2 v_screenuv;

uniform mat4 u_matrix;
uniform mat4 u_transform;

void main() {
  // Set the vertex position using the ortho & transform matrix
  gl_Position = u_matrix * u_transform * vec4(a_position, 0.0, 1.0);

  // Pass through the UV coord to the fragment shader
  v_uv = a_uv;
  v_screenuv = a_screenuv;
}
    initialize https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:360
    set shader https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:360
    draw https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:743
    flush https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:744
    _draw https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:841
    _mainloop https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:841
    update https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
    t https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825
 initialize@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:360:1607
set shader@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:360:1261
draw@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:743:4258
flush@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:744:4128
_draw@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:841:4849
_mainloop@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:841:6385
update@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9021
t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9376
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
FrameRequestCallback*t@https://excaliburjs.com/sample-jelly-jumper/assets/index-zEAVlOe_.js:825:9346
index-zEAVlOe_.js:309:34775

Screenshot:

image

eonarheim commented 3 months ago

@JumpLink Thanks for the issue!

Seems to work on windows FF for me, you wouldn't happen to be on a linux platform?

I've seen linux FF behave differently with shaders before with uniforms so I wouldn't be surprised ☹️

eonarheim commented 3 months ago

I'm booting up an Ubuntu VM to poke around now

eonarheim commented 3 months ago

I can reproduce on Ubuntu! image

eonarheim commented 3 months ago

Okay v0.29.3 fixes the issue! I'll push a fix to the sample soon soon

image

JumpLink commented 3 months ago

Interesting, I've never had a JavaScript error under Firefox only under Linux before. Thank you!

Edit Oh, about shader in WebGL, that makes more sense

eonarheim commented 3 months ago

@JumpLink it's super wild. My theory is that shader compilation is delegated to a graphics driver in the browser in FF which is why the behavior is different.