96 comments

[ 3.2 ms ] story [ 201 ms ] thread
The lighting effect is soooo good.
I haven't been amazed by a website like that in a while.
Yeah the amazing part for me is how seamless it all is, and just doesn't get in the way of reading the content, but just enhances it in subtle ways.
I really love the work that was put into the developer tools console interaction.

The "cheater" achievement was a surprise.

> at times a mess of ad hoc demo formulas and spaghetti, though robust enough in the parts that count.

The story of my development career.

Very cool, but note that it requires Chrome Canary. (It seemed to almost work in regular Chrome and I kept reloading)
Worked fine in Chrome 28.0.1500.95 on OSX for me.
Worked in normal chrome and Firefox windows for me, unless I'm missing something.
Worked for me with Firefox 21 on Linux with Fglrx drivers, ~12fps at my window size. Firefox 23 got about 15fps in the same scenario.
Smooth 60 fps for me on Firefox 26, OS X (stats say at 1250x702 resolution).
Worked on Chrome 29.0.1547.57 beta for OS X for me.
Works on Chrome 28.0.1500.95, on Linux with Intel graphics. That surprised me a little..
WinXP: Fine in Chrome, but in Firefox (23/25) on my machine there's a flickering massacre when scrolling [0]. Maybe it's sth with my GPU drivers though (but then it's weird that in Chrome it's ok).

[0] http://i.imgur.com/LYUINSc.jpg

What GPU? Modern drivers? That's definitely a driver mess, pretty hard to cause something like that to happen if you're just feeding WebGL buffers to the driver...
5-year-old ATI Mobility Radeon, drivers not so modern because they stopped issuing new drivers tens of months ago.
Smooth as silk on Windows 8 + Firefox 25 at 2560x1600 full-screen. Amazing.
This really does put the rest of the web to shame.
how ? because of the flashy 3D graphics ? there is no real value or usefullness passed the wow effect.
Yes, because of flashy 3d graphics! If you can't see the potential, you are just being obtuse.
There's potential, sure, but at the same time, animations like this don't come cheap - it takes a lot of knowledge, time, effort, and artistic insight to build something like that, which is a rare combination in any one person. But mostly time, and time equals money, and money is something a lot of people-facing companies aren't willing to pay for visuals like these.

Even if the could, that is. I can see gaming companies investing in visuals like this to enhance their game's web pages, or even delegate parts of the game's UI to a browser. Battlefield 3 (and probably 4) does this for its server browser, removing the need for a large chunk of UI from its game, and removing the need to update the whole game in a patch if they want to make changes to their server browser. No fancy 3D effects or animations in there though. At least, not yet. iirc, they've outsourced development of that server browser to a third party.

Seconding Miyamoto's question. Is there a use case for mixing 3D graphics and HTML, as opposed to showing 3D graphics in a box on the page? I don't count "making fancy website intros" as a very important use case, because everyone hated such intros the last time around.
Definitely! This is really just a demo, so I can see how people are complaining that it "doesn't really do anything." But that shows such a startling lack of vision and imagination. We are supposed to see the potential in new tech and then push it further. Or at least, that's how I see myself. Cranks and nay-sayers have no business in this industry, in my not-so-humble opinion.

HTML was originally a document, but today we've stretched it to do so much. And that's great! There's no need to draw a line around fancy webgl stuff. Your whole page can twist and flow and sparkle and whatever. You can make styling prettier sure but also make you content deeper. It will take time work out the kinks but hey, it's an adventure! That's pretty cool! Boring is never good. And there will be those with poor taste no matter the medium. This isn't a fad and it isn't superficial. This can totally change our experience on the web. Why wouldn't you want to take advantage of such cool stuff?

Can't tell if satire or sincere. Maybe that was your intention though.
This is an astonishing demo -- and I very nearly missed it, because I thought the scrolly graphic at the top was just a fancy animated header, followed by a bunch of text that seemed to be refering to something else. I only discovered the full demo when I accidentally scrolled up, and found it lurking there well above the start-point for the page. I can't help but think that a lot of other viewers must be missing it entirely.

So a note to web-masters: please put any content you want your users to see below the top of the page, not above it.

(comment deleted)
This is intentional. If you visit the bare domain, you get the intro. If you visit an article, you get the article.
Yes, I missed it, too. I had to come back the 2nd time to see what everyone is talking about.
Speaking of hidden things, I just discovered you can rotate the blue ribbon art work as well :)
…and you can unlock an achievement by repeatedly scrolling up/down/up/down/up/etc.
I think they intended this (if you don't notice it it just looks like a nice header. If you DO notice it...)

Though even once you see it, easy to miss is the "settings" cog in the top right. EGA mode!

Exactly. It's like a cool easter egg.
I stared at it and played around for too long....

Little badge popped up on the bottom of the screen: Achievement Unlocked - All Glory to the Hypnotoad

I almost gave up also - until I scrolled down to Turn Right Past The Header - then scrolled back up :)

Also reload the page with the javascript console on.

Make sure to click the "play" button in the header for the full experience.
Yes, the demo was not obvious until I scrolled back to the top. It is beautiful, and I'm sure it took a lot of hard work. After trying it both FF and Chrome, it's frustrating that a 3 year old machine with a decent dedicated Radeon 4670 GPU, can't run such a simple demo at full 60 FPS.

As cool as it is, am I the only one that thinks the "web penalty" is ridiculous? From Crysis to StarCraft, I can play most new games no problem, but not a simple web demo like this.

That's interesting, I run it on Pentium G860 with Radeon 7770 (so current hardware but pretty low-end) and had butter-smooth 60fps with Firefox 23, Windows 7, CPU usage ~15%, GPU usage ~5%. Perhaps you could check if your hardware acceleration in Firefox is enabled (about:support)? Try webgl.force-enabled in about:config as well.
Yeah same here: sucking at 6-11FPS.. nuff, going to compile ffx v23
Runs fine on my 3 year old laptop with a mobile Radeon 5730.
What's ridiculous is that we're fawning over something we've always been able to do, just because it's now done over the hundreds of useless layers of indirection that the web imposes.

"The computer revolution hasn't happened yet"...

The thing about acko.net is that's the way it has looked all along.

So the rewrite simply added a cool multiplier.

It doesn't seem to work in IE11.
IE11’s WebGL support (while good that it’s there at all) is somewhat unfinished.
There are so many impressive things going on here. The starting animation. Ambient occlusion. Integrating CSS 3D and WebGL. Even the achievements.

Notice he scales down the resolution when there are several frames dropping below 45 FPS. I've been thinking about how to solve the performance problem in voodoo.js, and this could be it. Good stuff.

Dynamically rendering at a lower resolution and then upscaling it to get a consistent 60fps is such a cool technique. The first example I ever saw of using a dynamic frame buffer in that way came in the form of WipEout HD on the PS3 back in 2008 or so[1], totally blew me away.

[1]: http://insidethedigitalfoundry.blogspot.com.au/2008/09/wipeo...

The header of that page blew my mind!
My first thought was "Holy shit, is this guy Daim?", a street artist I had forgot about a long time ago. Very nice homage!
you, sir, are a talented man.
One of the most impressive posts I've seen on Hackernews in a while -- kudos!
Mine eyes have seen the glory of the coming of the 3D.
There's some seriously funky stuff going on in the console if you look at it in chrome.
Not working for me in Chrome 29.0 on OS X 10.7 - it seems to assume my setup does not support WebGL (which obviously does)
Mine worked in Chrome 29 after giving it some time after load( ~30 secs)...
The second I saw the arrow style I thought of Daim and when I scrolled down, sure enough, there was a piece by Daim. Very nicely done. Props.
(comment deleted)
Amazing. This is the first WebGL demo running fluently on my system... a 7 year old Athlon Dual Core.
This is the best performing interactive animation I've ever seen done with web technologies.
Well, I don't know what browsers you guys are using, but on my laptop running linux and firefox 22 with an Intel Core2 Duo, my browser became completely unresponsive for some seconds and then only responded extremely jerkily until I closed the tab.

I just hope this practise doesn't spread outside of artsy demos.

On FF 23 on OS X, my quad-proc Core i7 is barely whirring the CPUs at all. Granted, this laptop does have a real GPU which I seriously doubt is the case for your C2D system.
It's not the GPU. Buttery smooth on Chromium+Linux with an Intel HD 4000.
What kind of videocard are you running? GLSL probably fell back to software mode.
Nice and smooth with FF24 on Android (Galaxy S4).