pouët.net

Go to bottom

PNG packed js demos don't work now on chrome

category: general [glöplog]
I was running my old 1k js webgl demo, and nop... I does not work now on chrome.
http://www.backtothepixel.com/demos/js/webgl/704webgl1k.html

I tried it on firefox, and it was ok, also on my iPhone it is ok.
But on an Android tablet did not work.

I also tried Condition by FMS_Cat and same problem.

Are you also having this problem? Did Chrome and all browsers like Chromium/webkit kill the PNG hack? :(
I guess that just some break...
Magister by Straylight still works.

BTW here is that PNG stuff explained https://web.archive.org/web/20151121005049/http://daeken.com/superpacking-js-demos

For my 704.2 I used
JsExe by adinpsz
hmm... http://psenough.github.io/leviathan_sun/ mine seem to still work fine, you have to click on the window while it's loading to get sound though.

i used gasman's pnginator script instead of jsexe though if i remember correctly. eitherway, sourcecode is available if you want to check the difference.
added on the 2022-02-20 16:48:39 by psenough psenough
checking yours on debug console, seems to still be wanting to do the webgl instructions, just didn't apply the canvas on the screen by some reason.
added on the 2022-02-20 16:50:29 by psenough psenough
condition also works fine on desktop chrome, just the link on pouet is 404 since fms-cat.com no longer exists, but if you find the repo and it's proper github.io page, it works.
added on the 2022-02-20 16:57:04 by psenough psenough
Quote:
I was running my old 1k js webgl demo, and nop... I does not work now on chrome.
http://www.backtothepixel.com/demos/js/webgl/704webgl1k.html

Code:VM8:1 WebGL: INVALID_OPERATION: useProgram: program not valid eval @ VM8:1 onload @ 704webgl1k.html:4 VM8:1 WebGL: INVALID_OPERATION: getUniformLocation: program not linked eval @ VM8:1 onload @ 704webgl1k.html:4 254WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use VM8:1 WebGL: too many errors, no more errors will be reported to the console for this context.
added on the 2022-02-20 17:12:48 by Gargaj Gargaj
hum... there is some happening, some demos still work, true.
I didn't change anything in both demos, of course, and I confirm the errors that Gargaj said.

When running the 64k version of Condition I get this errors:
Code:Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

The dev version of Condition runs fine.

So maybe is something not related with the PNG, but related with another compression technique, like the webgl function hashing, or something else.

But I confirm, that on all my machines I have this problem, and every thing works fine in Firefox.
Condition works fine using a local server, the error was because I just "double clicked" the html.
Nop.. lol... I just assumed that after the "Wait a moment..." everything was ok.

I also have error messages on Condition, even using a local server.

Code:The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu Eo @ VM8:2 Wo @ VM8:2 Wo @ VM8:2 eval @ VM8:2 eval @ VM8:2 eval @ VM8:2 eval @ VM8:2 onload @ condition_1280x720_final.html:243 36WebGL: INVALID_VALUE: uniform2fv: no array 71WebGL: INVALID_VALUE: uniform3fv: no array 35WebGL: INVALID_VALUE: uniform4fv: no array 35WebGL: INVALID_VALUE: uniformMatrix4fv: no array 35WebGL: INVALID_VALUE: uniform1iv: no array condition_1280x720_final.html:1 [.WebGL-00002C50000A7F00] GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs. condition_1280x720_final.html:1 [.WebGL-00002C50000A7F00] GL_INVALID_OPERATION: Two textures of different types use the same sampler location. 42performance warning: READ-usage buffer was read back without waiting on a fence. This caused a graphics pipeline stall. VM8:2 WebGL: too many errors, no more errors will be reported to the console for this context. eval @ VM8:2 bind @ VM8:2 useProgram @ VM8:2 W @ VM8:2 eval @ VM8:2 Vn @ VM8:2 ao @ VM8:2 Kn @ VM8:2 update @ VM8:2 eval @ VM8:22 requestAnimationFrame (async) e @ VM8:2
I've tried running a more small js demos and many work, only a few have problems.
Examples of webgl JS demos that don't wotk now on chrome.

Hypersonic Mandelbulb

ANDES
HBC-00016: Core Critical
704.2
Condition by FMS_Cat


Condition psenough said that it works, but on my pc I also get the same errors

But the problem it's not the PNG hack, is something else.
i think it's the same bug that i had with latest drivers during inércia. ie: gl_FragColor being deprecated and drivers only now starting to complain about it not being legal. from couple checks i think those intros use gl_FragColor

https://stackoverflow.com/questions/51459596/using-gl-fragcolor-vs-out-vec4-color
added on the 2022-02-21 01:07:46 by psenough psenough
@ps: That's about desktop GL, not WebGL.
added on the 2022-02-21 09:01:32 by kusma kusma
@ps, The uncompresed demo works fine.
Like @kusma said that is not a problem on webGL code, and it's not a Chrome problem.
The problem is the webgl function hash tecnique that does not work, in new versions... as it was expected...
With more recent webgl and browsers, there are more functions and names will colide.

Here is the uncompressed code of by 704.2
Code:X=F.width=innerWidth;Y=F.height=innerHeight;for(x in g=F.getContext("webgl"))g[x[i=0]+x[6]]=g[x];with(g)p=cP(),s=cS(k=35633),sS(s,"attribute vec4 a;void main(){gl_Position=a;}"),ce(s),aS(p,s),s=cS(--k),sS(s,"precision highp float;uniform float s;float n(vec3 n){return min(length(vec3(sin(n.x)+sin(s),n.y,sin(n.z)+cos(s)))-1.5-sin(length(n)-s*4.),n.y+3.);}void main(){float m,y;vec3 l=vec3(sin(s*.7),0,cos(s*.9))*10.,v=vec3(sin(s*.7)*20.+20.,(sin(s)*4.+7.),cos(s*.6)*20.+14.)+l,c=normalize(l-v),x=normalize(cross(vec3(sin(s),1,0),c)),d=normalize(c+(-1.+2.*gl_FragCoord.x/"+X+".)*x*"+X+"./"+Y+".+(-1.+2.*gl_FragCoord.y/"+Y+".)*cross(c,x)),z,g=vec3(.1,0,0);m=.1;z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);if(z.y<2.5)c=z.y<-2.5?vec3(0,1,0):normalize(n(z)-vec3(n(z-g.xyy),n(z-g.yxy),n(z-g.yyx))),x=z.y<-2.5?(fract(z/4.).x>.5?fract(z/4.).z>.5?vec3(0):vec3(1):fract(z/4.).z>.5?vec3(1):vec3(0))*max(n(z+vec3(0,1,0)),.5):vec3(sin(length(z)/4.-s*4.),sin(s),sin(length(z)-s*4.))*.5+.5,l=(dot(c,normalize(v-z))+.2)*x*.7+pow(dot(c,normalize(v-z)),54.)*.7,g.z=1.-m*.01,d=reflect(d,c),v=z,y=z.y;m=.1;z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);z=v+d*m;m+=n(z);if(z.y<2.5&&abs(y)<2.5)c=z.y<-2.5?vec3(0,1,0):normalize(n(z)-vec3(n(z-g.xyy),n(z-g.yxy),n(z-g.yyx))),x=z.y<-2.5?(fract(z/4.).x>.5?fract(z/4.).z>.5?vec3(0):vec3(1):fract(z/4.).z>.5?vec3(1):vec3(0))*max(n(z+vec3(0,1,0)),.5):vec3(sin(length(z)/4.-s*4.),sin(s),sin(length(z)-s*4.))*.5+.5,l+=(dot(c,normalize(v-z))+.2)*x*.3;gl_FragColor=vec4(l*g.z,1);}"),ce(s),aS(p,s),vA(lo(p),2,5126,eV(ug(p)),bf(k-=670,cB()),bD(k,new Float32Array([1,1,1,-3,-3,1]),k+82)),t=gf(p,"s"),m=.001*Date.now(),(k=function(){dr(4,uniform1f(t,.001*Date.now()-m),3);requestAnimationFrame(k)})()


I compared the functions list and this specific hash where F is the Canvas element:
Code:for(x in g=F.getContext("webgl"))g[x[i=0]+x[6]]=g[x]


Colides in this names:


  • ce: function [c]ompil[e]Shader() -> ce: function [c]learD[e]pth()
  • vA: function [v]ertex[A]ttribPointer() -> vA: function [v]ertex[A]ttrib4f()


"It works on the compo machine!" -> DONE lol

I guess we will have to say something like, "It works on Chrome 95." because we never know what new webgl versions will bring. So future generations will know that that specific demo works on a specific version of Chrome, or browsers from a specific period...
wait wait WAit, you're telling me you all were calculating function name hashes which included only the first and 6th letters of each function name?
added on the 2022-02-21 15:36:39 by ferris ferris
@gasman nice! True, it was something that was predictable
@ferrisWell it's definitely not a "hash" function like SHA-256 LOL It's more like "let's try to get lucky and only use 2 positions of the function name"
@gasman Again, very very cool I didn't remember that thread.
Some JS1K prods don't work now. The winner "Legend Of The Bouncing Beholder for example, does not work now probably for the same reason.
Nothing learned from the "import by ordinal" 4k desaster. Yay.
added on the 2022-02-21 19:54:33 by T$ T$
@ferris A more correct name should be "Mechanized Abbreviation" from https://marijnhaverbeke.nl/js1k/
gasman, that must be the best "told you so!" i've seen in a long time. also props to finding back a 12 year old post.
added on the 2022-02-22 09:01:09 by skrebbel skrebbel
@T$: It's not really comparable with import by ordinal. It's just import by hash with a really, really poor hash function.
added on the 2022-02-23 10:18:55 by KeyJ KeyJ
A hash function so poor that the final outcome is extremely close to that of the import by ordinal disaster?
Sounds totally comparable with respect to the outcome - if you ask me. ;)
added on the 2022-02-23 10:31:56 by las las
Ouch. It's pretty good that it took ~12 years to break, though!
added on the 2022-02-23 11:54:42 by sagacity sagacity
Quote:
It's pretty good that it took ~12 years to break, though!


My thoughts :D
added on the 2022-02-23 16:01:46 by Moerder Moerder

login

Go to top