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? :(

added on the 2022-02-20 16:03:14 by PauloFalcao

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

added on the 2022-02-20 16:20:03 by PauloFalcao

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

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

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

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

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.

added on the 2022-02-20 19:27:11 by PauloFalcao

Condition works fine using a local server, the error was because I just "double clicked" the html.

added on the 2022-02-20 19:32:28 by PauloFalcao

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

added on the 2022-02-20 19:36:12 by PauloFalcao

I've tried running a more small js demos and many work, only a few have problems.

added on the 2022-02-20 20:31:00 by PauloFalcao

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.

added on the 2022-02-20 23:41:01 by PauloFalcao

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

@ps: That's about desktop GL, not WebGL.

added on the 2022-02-21 09:01:32 by 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...

added on the 2022-02-21 12:18:07 by PauloFalcao

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

I did try to warn them at the time, but did they listen? tch.

added on the 2022-02-21 15:57:40 by gasman

@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"

added on the 2022-02-21 17:40:16 by PauloFalcao

@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.

added on the 2022-02-21 17:52:55 by PauloFalcao

Nothing learned from the "import by ordinal" 4k desaster. Yay.

added on the 2022-02-21 19:54:33 by T$

@ferris A more correct name should be "Mechanized Abbreviation" from https://marijnhaverbeke.nl/js1k/

added on the 2022-02-21 20:15:25 by PauloFalcao

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

@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

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

Ouch. It's pretty good that it took ~12 years to break, though!

added on the 2022-02-23 11:54:42 by 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

pouët.net

PNG packed js demos don't work now on chrome

login