4 ms·

Superpacking JS Demos

63 points by daeken 15y ago

netnichols 15y ago
Craziness.
coderdude 15y ago
Superpacking provides performance penalties. (Say that three times fast.) Some of that code will run slower (like having to execute functions multiple times in a loop). It seems like the author would be more concerned with performance given the nature of the code he's writing (WebGL).
- daeken 15y ago
  This absolutely impacts performance for JS code in general, but has no performance impact whatsoever for WebGL demos like this. All of the work happens within the shader -- the entire goal of the WebGL code is to compile the shader, set parameters on it, and draw two triangles per frame. Everything else happens there. Removing all these tricks might get you -- at most -- a 1 fps boost.
- greyfade 15y ago
  Not when you're trying to hit a size limit. At that point, performance is only a secondary concern.
wccrawford 15y ago
The PNG bit was my favorite. That's just wild.
- psykotic 15y ago
  Yeah. The dual file format trick reminded me of the GIFAR exploit where you take advantage of the fact that GIFs are header-based and JARs are footer-based. In the present case, one format (PNG) is header-based and the other format (HTML) is headerless and generally tolerant of weird data.
tlrobinson 15y ago
Why not just give the globals single letter names instead of removing letters? The code is shorter and produces shorter names with no conflicts: a=65; for(k in g = z.getContext('experimental-webgl')) t[String.fromCharCode(a)] = t[k] = g[k].bind && a++ && g[k].bind(g); (this starts with uppercase "A", char code 65)
- daeken 15y ago
  That was my first thought, actually, but due to differences between Firefox and Chrome, you end up with different variable names, even sometimes between versions. I tried a few hacks, but couldn't work around it.
caf 15y ago
Have you tested if the < only confuses the browsers in the first position of the FourCC? Is it possible that x<im or xx<i is allowed? Also, just k.slice(6,9) would seem to give unique 3-letter names, including for uniform1f and uniform2f.
- daeken 15y ago
  I did try the < in different positions, to no avail. Great catch with the slice though!
eridius 15y ago
Very cool, but I can't run your demo in Safari. I get 'SyntaxError: Parse error' when I try. Any idea why?

63 points by daeken 15y ago

Craziness.

Superpacking provides performance penalties. (Say that three times fast.) Some of that code will run slower (like having to execute functions multiple times in a loop). It seems like the author would be more concerned with performance given the nature of the code he's writing (WebGL).

daeken 15y ago
This absolutely impacts performance for JS code in general, but has no performance impact whatsoever for WebGL demos like this. All of the work happens within the shader -- the entire goal of the WebGL code is to compile the shader, set parameters on it, and draw two triangles per frame. Everything else happens there. Removing all these tricks might get you -- at most -- a 1 fps boost.
greyfade 15y ago
Not when you're trying to hit a size limit. At that point, performance is only a secondary concern.

wccrawford 15y ago

The PNG bit was my favorite. That's just wild.

psykotic 15y ago
Yeah. The dual file format trick reminded me of the GIFAR exploit where you take advantage of the fact that GIFs are header-based and JARs are footer-based. In the present case, one format (PNG) is header-based and the other format (HTML) is headerless and generally tolerant of weird data.

tlrobinson 15y ago

Why not just give the globals single letter names instead of removing letters? The code is shorter and produces shorter names with no conflicts: a=65; for(k in g = z.getContext('experimental-webgl')) t[String.fromCharCode(a)] = t[k] = g[k].bind && a++ && g[k].bind(g); (this starts with uppercase "A", char code 65)

daeken 15y ago
That was my first thought, actually, but due to differences between Firefox and Chrome, you end up with different variable names, even sometimes between versions. I tried a few hacks, but couldn't work around it.

caf 15y ago

Have you tested if the < only confuses the browsers in the first position of the FourCC? Is it possible that x<im or xx<i is allowed? Also, just k.slice(6,9) would seem to give unique 3-letter names, including for uniform1f and uniform2f.

daeken 15y ago
I did try the < in different positions, to no avail. Great catch with the slice though!

eridius 15y ago

Very cool, but I can't run your demo in Safari. I get 'SyntaxError: Parse error' when I try. Any idea why?