My democrew (Ninjadev) has used this technique for multiple WebGL/Javascript productions over the last few years now.
You can see the final packed .PNG results here: Crankwork Steamfist https://stianj.com/crankwork-steamfist/, Everything is Fashion https://stianj.com/fashion/, and Inakuwa Oasis http://arkt.is/inakuwa-oasis/.
The tool used for creating both the demos and the packed .PNG is made by us and available on GitHub here https://github.com/ninjadev/nin/.
Also a Ninjadever. Daeken's blog post was one of the inspirations that led us to implementing this in our toolchain. p01's Matraka [1] was another. The PNG trick is pretty common in the js scene nowadays, with packing tools such as JsExe [2] readily available.
Oh man, I didn't know you guys released your tools. I'm a big fan of your stuff -- awesome to see such polished prods on the web. Happy to have helped enable some amazing work!
That first link froze my (rather old) computer - had to reboot!
Re:This JPEG is also a webpage
by chriswarbo on Wednesday August 10, 2016 @12:31PM
(#12262963)
Seems like some bits are missing on that page, e.g. I see nothing between "What is the bootstrap? Well, it's what turns our PNG into code and runs it. Here's the one I use:" and "The 4968 here is really the size of the decompressed data in bytes times 4"
Good catch -- thank you! Imported this from an older blog and must've lost that code block somehow.
Looks like some non-ascii characters didn't make the jump to hyperspeed, either, unless your friend really is named Nicolás Alvarez
It was looking fine on my end, but I realized I wasn't setting an encoding on the page. Should be UTF-8 now and not cause any more problems. Thanks for pointing it out!
Re:This JPEG is also a webpage
by enraged_camel on Wednesday August 10, 2016 @02:41PM
(#12263915)
This link at the beginning seems to be not working: https://demoparty.mozillalabs.com/
Re:This JPEG is also a webpage
by ChristianBundy on Wednesday August 10, 2016 @02:51PM
(#12263973)
Yep, it's inactive. New URL is http://www.mozillalabs.com/en-US/demo-party/
This is, at present, the most efficient way to pack demos on the web; a few characters of uncompressed bootstrap code, then the rest is deflated.