5 ms·
Show HN: My first WebGL demo, the first self-extracting PNG ever?
- daeken 15y agoI'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/ 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 15y agoPretty 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.
- daeken 15y agoThanks! It isn't too be on the CPU for most people, but for some reason it's eating a massive chunk of CPU-time for some people -- seems to be only in the latest Firefox nightlies, but i'm not seeing it here, so I'm unsure of what it could be.
- ktsmith 15y agoJust to add another token data point. I have it up full screen at 1920x1200. CPU usage is sitting between 50 and 75% of one core and GPU usage jumps back and forth between 40% for a few seconds and then 80% for a few seconds. This is using Chrome 14.0.814.0 dev-m
- notJim 15y agoDo 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.
- p0nce 15y agoIf it's 1k, then it's a serious contender.
- sgrove 15y agoDaeken... you are, as usual, nothing short of amazing. Never fail to amaze :)
- carbocation 15y agoCan you give us a few details of what you did? This makes my i7 cry. Edit: Just saw your explanation. Cool - thanks!
- resnamen 15y agoVery 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 15y agoI like the demo on the "front page", as well: http://demoseen.com/ 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 15y agoThere 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
- geuis 15y agoApologies, 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 15y agoIf that's the case, then you don't have WebGL enabled, or your GPU is being blacklisted by your browser.
- redthrowaway 15y agoI 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 15y agoHmm, unusual. Can you see http://demoseen.com/windowpane/magister.test.html http://demoseen.com/windowpane/magister.test.html ?
- redthrowaway 15y agoI cannot, although all of the demos I've tried here work: http://www.khronos.org/webgl/wiki/Demo_Repository http://www.khronos.org/webgl/wiki/Demo_Repository
- daeken 15y agoOnly 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.
- 15y ago
- tsvk 15y agoHeh. 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 15y agoIt'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 15y agoAh. 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 15y agoWindows watchdog kills tasks running on a GPU after ~5 seconds (using CUDA) same might apply here
- yan 15y agoHey, 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.
- steveb 15y agoVery cool! I'd love to read how the PNG hack works. To see if your browser supports webgl, go to http://webglreport.sourceforge.net/ 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
- jrockway 15y agoSo, 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 15y agoYou 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 15y agoEven so, I think this is more of a Polyglot than a self extracting PNG.
- trotsky 15y agolooks like it was designed as a firewall bypass
- Emore 15y ago(Repeated) kernel panic on Macbook Air/Chrome I'm afraid.
- daeken 15y agoCan you post OS and browser versions along with the hardware revision? That sounds bad.
- brianwhitman 15y agoSame for me -- Chrome 12.0.742.122, MBA 2.13 GHz 13" latest, 4GB ram
- trotsky 15y agoweren't you recently searching for exploitable webgl driver bugs?
- daeken 15y agoIndeed 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.
- Emore 15y agoSorry for the late reply. Here are my details: Mac OS X 10.6.8 all updated / Google Chrome 12.0.742.122 / MacBookAir3,2 / 2.13 GHz / 4GB RAM Would be interesting to know if you have, indeed, found an exploitable driver bugs.
- gabbo 15y agoThis 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.
- hmottestad 15y agoRight-click and choose "view image" hangs firefox on a mac osx sl.
- nhebb 15y agoAside: 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.
- 5hoom 15y agoDaeken, you are a graphics/web wizard of the highest order. Congratulations :)
- woodall 15y agoI 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/ http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/ Example: https://github.com/christopherwoodall/ImgJs https://github.com/christopherwoodall/ImgJs
- daeken 15y agoThe 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.
- evilswan 15y agoExtraordinary.