
Show HN: My first WebGL demo, the first self-extracting PNG ever? - daeken
http://demoseen.com/windowpane/magister.html
======
daeken
I've been working on this for a couple weeks, attempting to get it looking
perfect and get it to 1kb. It's going to be going on stage at
<http://solskogen.no/> shortly, so I figured now is the perfect time to post.

As far as I know, this is the first ever case of a self-extracting PNG -- the
file is a PNG that first is interpreted as HTML, which then unpacks the
compressed code within the PNG to start the second stage. I plan to write a
blog post about how I got the size down as far as it is, but feel free to ask
any questions you may have, as I'd love to see this technique spread!

Edit: Requires Chrome and Firefox -- has been tested heavily on Windows and OS
X, but this will eat your CPU and GPU alive.

~~~
robflynn
Pretty cool hack! I'm looking forward to the blog post.

It doesn't seem to eat my processor too much. In Chrome with AMD processor
it's sitting at about 25% CPU usage.

~~~
notJim
Do you have a quad core CPU by chance? 25% is the max that a single-threaded
process would use. (Someone please correct me if this is wrong, but at least
this is the behavior I've observed.)

That being said, this uses only 10-12% CPU on my quad-core machine.

~~~
inportb
It depends on what you use to report CPU usage. Many monitoring tools stick
with 100%/core, but some normalize it.

~~~
notJim
Good point. I believe Windows' task manager reports it the way I said, while
OS X's Activity Monitor reports each core up to 100%.

~~~
chc
In general, *nixes report 100% capacity per core, not just OS X.

------
jrockway
So, it the header makes it look like a PNG:

    
    
        magister.html: PNG image data, 1242 x 1, 8-bit grayscale, non-interlaced
    

If you look at this in an image viewer, it's as advertised: a long black bar.

So what this is is some garbage data with a PNG header, a token PNG image, and
some HTML that bootstraps a javascript program whose main body looks like
binary garbage. But it's not a self-extracting PNG, it's a very strange HTML
document with a PNG header.

That's not to say it's not impressive, but the running demo looks nothing like
the PNG data.

~~~
daeken
You were right up until saying it was garbage data. The image data is the demo
code itself. This is a real PNG, even if it looks random.

~~~
simcop2387
Even so, I think this is more of a Polyglot than a self extracting PNG.

------
geuis
Apologies, but nothing happens when I view it. Running Chrome 12.0.742.122. I
see the initial raw PNG splat, but get nothing but a lot of high cpu and a
blank browser screen after running a couple minutes.

~~~
daeken
If that's the case, then you don't have WebGL enabled, or your GPU is being
blacklisted by your browser.

~~~
redthrowaway
I have the same issue in Chrome on OSX, and WebGL is enabled for me. I've
played some of the WebGL demo games, so I doubt it's due to my GPU being
blacklisted.

~~~
daeken
Hmm, unusual. Can you see <http://demoseen.com/windowpane/magister.test.html>
?

~~~
redthrowaway
I cannot, although all of the demos I've tried here work:
<http://www.khronos.org/webgl/wiki/Demo_Repository>

~~~
daeken
Only thing I can think of at this point is that you have an extension
inserting something into the body before the canvas. While on Magister, drop
javascript:alert(document.body.firstChild) into the address bar and see if you
get the canvas -- if not, that's the problem.

~~~
redthrowaway
The tab crashes after a while when I try that. Weird. Even with all extensions
disabled, it hangs without ever finishing loading.

~~~
catch23
Old version of chrome perhaps? Works fine on my chrome on osx here.
12.0.742.122 here. (I'm technically out of date too, mostly because I haven't
restarted chrome in a while)

~~~
redthrowaway
Nope, I'm on the same version as you, although it tells me that's the latest
version.

------
resnamen
Very neat. I'm happy to see that the demo scene magic still exists. I thought
the days of seeing an animated ray traced scene from a 256 byte EXE were over.

This runs fluidly on my Chrome/Sandy Bridge/Ubuntu setup.

~~~
redthrowaway
I like the demo on the "front page", as well: <http://demoseen.com/>

It crashes though, when you run it with this hash: 0FP$9jj!i1!!!DPD!t!!!!!~ It
spun up 5M threads before it died, which was admittedly fun to watch.

~~~
daeken
There are a dozen or so different demos and experiments sitting on the site
now, but no way to get to any of it, so the front page is soon to be a demo in
itself, with the others nested inside it. A nice little interactive portfolio.
But I'm glad you dig the langton hack

------
yan
Hey, congrats on finally getting it out there! Saw how much work you poured
into it and glad it's finally done. Also, mind-bending implementation.

------
woodall
I can't get this to work; low end laptop with low end gpu. But is it anything
like what Rsnake posted on ha.ckers.org?

Link: <http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/>

Example: <https://github.com/christopherwoodall/ImgJs>

~~~
daeken
The bootstrap code (which unpacks the second stage, compressed in the PNG
image data) does indeed work this way. The key difference is that in addition
to the code at the top level of the image, there's the second stage inside.

------
steveb
Very cool! I'd love to read how the PNG hack works.

To see if your browser supports webgl, go to
<http://webglreport.sourceforge.net/>

On a pokey mac mini, I get a few frames per second and about 5-15% CPU use in
Firefox and chrome

------
tsvk
Heh. Screen went black for a while, after which: "Display driver nvlddmkm
stopped responding and has successfully recovered."

Using an old NVIDIA GeForce 6200 with driver 8.17.12.7533 on a 32-bit Windows
Vista SP2, browser was Google Chrome 12.0.742.122.

~~~
daeken
It's fairly GPU intensive, and if Windows Vista/7 don't get a response from
the GPU after a short period of time, it'll restart the drivers. Happens every
once in a while even on newer GPUs, unfortunately.

~~~
tsvk
Ah. So your interpretation is not that the driver actually crashed, but that
it simply was overwhelmed by the workload, and didn't respond properly within
the timeout limit as set by the OS?

~~~
GreySyntax
Windows watchdog kills tasks running on a GPU after ~5 seconds (using CUDA)
same might apply here

------
5hoom
Daeken, you are a graphics/web wizard of the highest order. Congratulations :)

------
nhebb
Aside: anyone know why Chrome doesn't release the memory after the page is
exited? Looking at Chrome's stats for nerds (about:memory) I still see 57k
allocated to GPU Process.

------
gabbo
This is very cool, but when running it on Chrome 13 beta it was extremely
choppy and basically locked up my PC. It took 2 minutes to move my mouse to
the "close tab" button.

------
carbocation
Can you give us a few details of what you did? This makes my i7 cry.

 _Edit:_ Just saw your explanation. Cool - thanks!

------
hmottestad
Right-click and choose "view image" hangs firefox on a mac osx sl.

------
Emore
(Repeated) kernel panic on Macbook Air/Chrome I'm afraid.

~~~
daeken
Can you post OS and browser versions along with the hardware revision? That
sounds bad.

~~~
trotsky
weren't you recently searching for exploitable webgl driver bugs?

~~~
daeken
Indeed I am. In the development of this demo (and the framework which built
it), I've found more bugs than while actually attempting to attack WebGL; I
don't know whether to be happy or sad about this.

------
evilswan
Extraordinary.

