
0 to 60 in One Second: Fusing WebGL, CSS 3D and HTML - co_pl_te
http://acko.net/blog/zero-to-sixty-in-one-second/
======
nkoren
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.

~~~
slacka
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.

~~~
puzzlingcaptcha
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.

------
skue
_> I realized it would make a pretty neat demo just by itself, so I built that
in too, to the dulcet tones of Selah Sue—whose last name I hope is not
indicative._

The demo and technology are amazing, and he should be proud of his hard work.
But I was a bit surprised by his appropriation of someone else's work to add a
soundtrack. Why not try to reach out to the artist and ask permission first?

Now before you hit the downvote icon, here's a thought exercise: What do you
think HN's reaction would be if a random musician used this web visualization
in a music video without asking permission first? How often do we get irate
about design theft, and why is doing the reverse in this case okay?

 _> The songs are used here entirely for educational purposes of course. Not
that it matters, since they're all on YouTube anyway._

This is simply untrue. Although the blog entry has educational value, the
music itself serves no purpose other than to provide a soundtrack. It's being
used for entertainment value, and if the developer does professional web
design and references this work on a resume or contract offerings, then it
arguably serves a commercial marketing purpose as well.

And saying that the video is available elsewhere? That's again no different
than appropriating images or artwork from elsewhere on the web and reusing
them for other purposes.

It's good that he credited the music, and I'm glad he thought about reuse
issues. But again, why not ask permission first? And if it can't be obtained,
why not find a musician who needs the exposure and would be happy to have
their music included?

~~~
marknutter
This is absurd. For demos of this nature people "rip off" we'll known designs
all the time. Think of every corporate logo "done entirely in CSS3" or
"Facebook style widget using angular.js" type demos, all of which don't bother
asking permission because _it 's a demo_. Derailing this thread because of a
pedantic point about copyright protection is unproductive and distracting.

~~~
skue
Recreating a logo is not the same as reusing a logo, especially when we are
talking about music. What you are describing would be akin to recreating a
song by using different sounds, instruments, algorithms, etc. In other words,
a new performance or "cover." That's very different than reusing the original,
unedited work wholesale.

------
Roritharr
Now this is something you won't be able to buy with money. True and simple. No
agency has talent able AND willing to produce something of that quality and
love in the budgets which are normally afforded to marketing campaigns...

It saddens me that i spend most of my professional time working for an agency.

~~~
tripzilch
> Now this is something you won't be able to buy with money. True and simple.
> No agency has talent able AND willing to produce something of that quality
> and love in the budgets which are normally afforded to marketing
> campaigns...

That's why we have the demoscene ;-)

------
RTesla
I haven't been amazed by a website like that in a while.

~~~
gnufied
Checkout his presentation it is quite amazing as well,
[http://acko.net/files/fullfrontal/fullfrontal/webglmath/onli...](http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html)

~~~
monkey_slap
This is one of the best presentations I've ever seen, especially considering
the subject matter. Incredible.

------
SnowProblem
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.

~~~
_frog
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...](http://insidethedigitalfoundry.blogspot.com.au/2008/09/wipeout-
hds-1080p-sleight-of-hand.html)

------
saidajigumi
The header animation is the obvious treat... but the thing that sent me
completely over the top is is how we camera-pan past the 3D illustration of
the disc-based occlusion model during scrolling. <3 <3 <3 I'm currently making
CGI-squee-noises worthy of the glory days of the SGI Magic Bus!

------
lelandbatey
For everyone who cannot run this demo (old machine or on mobile) I've put up a
recording of the main intro demo (there are actually a couple different ones)
here:

[http://www.youtube.com/watch?v=zjwA1VmuPnw](http://www.youtube.com/watch?v=zjwA1VmuPnw)

~~~
etherealG
how did you get that view on the page? mine seems to be off screen on load and
scrolling up doesn't have the same nice pan.

~~~
lelandbatey
Honestly, I just hit refresh and then the "Home" button on my keyboard really
fast, followed by the "start recording" button.

------
StandardFuture
This really does put the rest of the web to shame.

~~~
camus
how ? because of the flashy 3D graphics ? there is no real value or
usefullness passed the wow effect.

~~~
adamwong246
Yes, because of flashy 3d graphics! If you can't see the potential, you are
just being obtuse.

~~~
Miyamoto
Do please educate us on its potential, if it's so obvious.

~~~
adamwong246
Games perhaps?

------
anonymous
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.

~~~
saidajigumi
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.

~~~
gcr
It's not the GPU. Buttery smooth on Chromium+Linux with an Intel HD 4000.

------
aroman
Mine eyes have seen the glory of the coming of the 3D.

------
alipang
There's some seriously funky stuff going on in the console if you look at it
in chrome.

------
sstarr
This is incredible; it reminds me of the kind of stuff that sometimes used to
crop up on Astounding Websites
([http://web.archive.org/web/20010203162500/http://astoundingw...](http://web.archive.org/web/20010203162500/http://astoundingweb.org/))

It feels like there aren't as many people doing interesting things and
exploring new ideas on the web anymore but maybe I just don't know where to
look.

------
webXL
Awesome, but this almost drained my macbook battery dry, or at least that's my
suspicion. It was in a background tab, but I noticed the name of the playing
song had changed, even though my volume was down. Chrome should have some way
to prevent a background tab from playing music while the volume is down, and
web designers shouldn't expect you to have it turned up! Shouldn't there be an
HTML5 hardware API for that??

------
gnerd
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.

------
jonespen
My first thought was "Holy shit, is this guy Daim?", a street artist I had
forgot about a long time ago. Very nice homage!

------
FedericoElles
Amazing. This is the first WebGL demo running fluently on my system... a 7
year old Athlon Dual Core.

------
jonahss
Achievement Unlocked: Black Hole Sun

-from mousing-over the play button too many times

That's 2/8 for me and I see a couple others in this thread. Is anyone keeping
track somewhere?

~~~
spillywillly
Dat Parallax: From spinning the path or shadow plots, I think

All Glory to the Hypnotoad: Click play, let it run all the way through, or sit
in another window for 15+ mintues

I think the rest come from fiddling with js in the console. I've been twisting
knobs, like 'fov' and such, but haven't found anything yet.

Frickin brilliant, of course. /hat tip!!!

------
christiangenco
> 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.

------
EvanYou
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)

~~~
sahrizv
Mine worked in Chrome 29 after giving it some time after load( ~30 secs)...

------
recuter
Very cool, but note that it requires Chrome Canary. (It seemed to almost work
in regular Chrome and I kept reloading)

~~~
uptown
Worked fine in Chrome 28.0.1500.95 on OSX for me.

~~~
Alphasite_
Safari 7 as well.

------
isaacwaller
It doesn't seem to work in IE11.

~~~
robin_reala
IE11’s WebGL support (while good that it’s there at all) is somewhat
unfinished.

------
nFFF
Am I missing something ? All I see is an article containing text and some
images? On iPad 2 safari

~~~
corysama
Mobile Safari does not support WebGL (except in Apples i-ads)

------
idlewan
The lighting effect is soooo good.

------
mck-
One of the most impressive posts I've seen on Hackernews in a while -- kudos!

------
jonahss
Achivement Unlocked: Refresh Prince of Bel Air

------
joeblau
The header of that page blew my mind!

------
mikejholly
Amazing dude! Nice work!

------
jafaku
Nice black screen.

------
frozenport
craah on demand in firefox mobile.

------
Aqueous
you, sir, are a talented man.

------
ivanbrussik
next level shit right here

------
hipaulshi
wow....

------
WayneDB
This is the best performing interactive animation I've ever seen done with web
technologies.

