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.
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.
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.
> 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?
The Seba track is chosen for its 80s style synths (itself a reuse of Vangelis' Blade Runner soundtrack), which separates cleanly in the FFT and enables the audio response to follow individual notes.
The Selah Sue track is chosen for its low bpm and jazz style vocals, which can easily be synced to a 6 DOF camera running at a constant speed on spline tracks without causing significant motion sickness. Trust me, you don't want to ride that thing on dubstep.
Neither demo could be accomplished without specific requirements in music, whether it's these songs or others, and each is a novel demonstration of web technology. The full source is on github, there's commentary and accurate, live diagrams of the internal mechanisms.
I don't deny that this is skirting the rules a bit, but the educational goal is genuine. I'm a DSP engineer. What's the difference between me slapping a commercial MP3 on a research project involving real-time graphics and audio processing, and a colleague using a copyrighted Playboy centerfold (1) to demonstrate their image processing algorithm? Also chosen for specific purposes: it contains a complex mix of textures that shows flaws in algorithms well, and is a plausible real world use case too.
For an encore, the server is configured to make pirating the songs from me as inconvenient as possible without compromising the demonstration.
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.
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.
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.
> 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...
What's also of note is that the creator, Steven Wittens, was also one of the core Drupal developers. I was wondering why his name seemed familiar. Looks like genius doesn't stop working.
i feel your pain. wish more companies had the foresight to use webgl, and focus on proper graphics coders not just 'html5' when all they really mean is gradients and rounded corners.
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.
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!
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:
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?
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 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.
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??
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).
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...
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.