11 ms·
0 to 60 in One Second: Fusing WebGL, CSS 3D and HTML
- idlewan 13y agoThe lighting effect is soooo good.
- RTesla 13y agoI haven't been amazed by a website like that in a while.
- gnufied 13y agoCheckout his presentation it is quite amazing as well, http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html http://acko.net/files/fullfrontal/fullfrontal/webglmath/onli...
- rfnslyr 13y agoHere is the video to accompany the presentation: http://www.youtube.com/watch?v=GNO_CYUjMK8 http://www.youtube.com/watch?v=GNO_CYUjMK8 [30:55]
- StandardFuture 13y agoDat Presentation. O_O
- monkey_slap 13y agoThis is one of the best presentations I've ever seen, especially considering the subject matter. Incredible.
- atonse 13y agoYeah 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.
- makepanic 13y agoI really love the work that was put into the developer tools console interaction. The "cheater" achievement was a surprise.
- christiangenco 13y ago> 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.
- recuter 13y agoVery cool, but note that it requires Chrome Canary. (It seemed to almost work in regular Chrome and I kept reloading)
- uptown 13y agoWorked fine in Chrome 28.0.1500.95 on OSX for me.
- Alphasite_ 13y agoSafari 7 as well.
- WatchDog 13y agoWorked in normal chrome and Firefox windows for me, unless I'm missing something.
- jerf 13y agoWorked for me with Firefox 21 on Linux with Fglrx drivers, ~12fps at my window size. Firefox 23 got about 15fps in the same scenario.
- blueveek 13y agoSmooth 60 fps for me on Firefox 26, OS X (stats say at 1250x702 resolution).
- helios410 13y agoWorked on Chrome 29.0.1547.57 beta for OS X for me.
- jlgreco 13y agoWorks on Chrome 28.0.1500.95, on Linux with Intel graphics. That surprised me a little..
- jakub_g 13y agoWinXP: 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 http://i.imgur.com/LYUINSc.jpg
- StandardFuture 13y agoThis really does put the rest of the web to shame.
- camus 13y agohow ? because of the flashy 3D graphics ? there is no real value or usefullness passed the wow effect.
- adamwong246 13y agoYes, because of flashy 3d graphics! If you can't see the potential, you are just being obtuse.
- Miyamoto 13y agoDo please educate us on its potential, if it's so obvious.
- adamwong246 13y agoGames perhaps?
- supercoder 13y agoTo inspire.
- Cthulhu_ 13y agoThere'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.
- nkoren 13y agoThis 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.
- deleted 13y ago[deleted]
- unconed 13y agoThis is intentional. If you visit the bare domain, you get the intro. If you visit an article, you get the article.
- devx 13y agoYes, I missed it, too. I had to come back the 2nd time to see what everyone is talking about.
- mck- 13y agoSpeaking of hidden things, I just discovered you can rotate the blue ribbon art work as well :)
- hk__2 13y ago…and you can unlock an achievement by repeatedly scrolling up/down/up/down/up/etc.
- mrspeaker 13y agoI 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!
- 13y ago
- frozenport 13y agocraah on demand in firefox mobile.
- isaacwaller 13y agoIt doesn't seem to work in IE11.
- robin_reala 13y agoIE11’s WebGL support (while good that it’s there at all) is somewhat unfinished.
- SnowProblem 13y agoThere 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 13y agoDynamically 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/wipeout-hds-1080p-sleight-of-hand.html http://insidethedigitalfoundry.blogspot.com.au/2008/09/wipeo...
- joeblau 13y agoThe header of that page blew my mind!
- jafaku 13y agoNice black screen.
- jonespen 13y agoMy first thought was "Holy shit, is this guy Daim?", a street artist I had forgot about a long time ago. Very nice homage!
- Aqueous 13y agoyou, sir, are a talented man.
- mck- 13y agoOne of the most impressive posts I've seen on Hackernews in a while -- kudos!
- hipaulshi 13y agowow....
- aroman 13y agoMine eyes have seen the glory of the coming of the 3D.
- mikejholly 13y agoAmazing dude! Nice work!
- alipang 13y agoThere's some seriously funky stuff going on in the console if you look at it in chrome.
- EvanYou 13y agoNot 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 13y agoMine worked in Chrome 29 after giving it some time after load( ~30 secs)...
- gnerd 13y agoThe 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.
- deleted 13y ago[deleted]
- FedericoElles 13y agoAmazing. This is the first WebGL demo running fluently on my system... a 7 year old Athlon Dual Core.
- WayneDB 13y agoThis is the best performing interactive animation I've ever seen done with web technologies.
- sstarr 13y agoThis 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://astoundingweb.org/ http://web.archive.org/web/20010203162500/http://astoundingw...) 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.
- anonymous 13y agoWell, 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 13y agoOn 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 13y agoIt's not the GPU. Buttery smooth on Chromium+Linux with an Intel HD 4000.
- sillysaurus2 13y agoWhat kind of videocard are you running? GLSL probably fell back to software mode.
- hansjorg 13y agoNice and smooth with FF24 on Android (Galaxy S4).
- nFFF 13y agoAm I missing something ? All I see is an article containing text and some images? On iPad 2 safari
- webXL 13y agoAwesome, 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??
- saidajigumi 13y agoThe 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!
- Roritharr 13y agoNow 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.
- etherealG 13y agoi 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.
- creamyhorror 13y agoWhat'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.
- tripzilch 13y ago> 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 ;-)
- ivanbrussik 13y agonext level shit right here
- jonahss 13y agoAchivement Unlocked: Refresh Prince of Bel Air
- jonahss 13y agoAchievement 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?
- misterjangles 13y agoIf you go to the javascript console there's a whole game in there too!
- spillywillly 13y agoDat 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!!!
- lelandbatey 13y agoFor 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 13y agohow 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 13y agoHonestly, I just hit refresh and then the "Home" button on my keyboard really fast, followed by the "start recording" button.
- skue 13y ago> 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 13y agoThis 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 13y agoRecreating 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.