Amazing work. This reminds me of those PC demos that pushed the limits of the environment and eventually found their way into the gaming engines of the time.
Seems to require FF4 (WebGL-enabled Chrome pops up error messages).
IE9 is looking pretty dated at this point. 2D acceleration when the competition is doing this?
Just some retrospective: Microsoft introduced DirectAnimation in IE4, which can do JScript/VBScript based hardware accelerated animation. They abandoned it in IE7 for their Silverlight.
For "No Comply", yes it's cool, but it's far from pushing limits. Tons of ogg and webm have to be downloaded to play this demo.
IE9 is looking pretty dated at this point. 2D acceleration when the competition is doing this?
On the positive side, it shouldn't be too hard for them to add this functionality to IE10. They just have to choose between showing a blank page (FF4) or popping up an error message (Chrome).
Ok... it downloads 22MB of ogg and webm files and then does nothing for me. Just a black screen after clicking on continue. FF4 with GeForce 9600 GT on Windows XP 32-bit
Worked flawlessly for me on a 2009 non-unibody MBP. I'd suggest checking Activity Monitor for something consuming lots of CPU, or check that you aren't using the low-power GPU.
I restarted Firefox and it worked well until the last minute or so then it started getting choppy again. Neither my memory or CPU was spiking much and I was on discrete graphics the whole time.
I ran this in FF4 on my 2009 Unibody MBP. No other programs open, no significant background processes, with the dedicated graphics card active. Choppiness throughout, including some pretty bad stalls.
Wouldn't work in the Webkit nightly (Safari) or Chrome. At least, I don't think it would. There were no UI elements to show loading progress or any errors, so I gave up after a bit of waiting.
Oh, it did throw an error on my iPad. Two of them, in fact.
The web page of the future! Only works for certain people on certain machines, but without any clear causes of failure. Looks an awful lot like Wolfenstein 3D, but with some sort of interlaced-squiggly effect like you're watching this on an old cathode TV. Contains no interactive elements — a staple of the future (long live physical media!). Takes an awful lot of time and energy to make a relatively simple point.
This demo should only be interesting to developers - normal users are going to say "What's the point?". Developers, creative thinkers, and creators are going to look at this and say "Wow!" and develop something the average consumer will enjoy.
I'm sorry, but this demo took a lot of work, a lot of invention, and a lot of talented people. 8 people 4 months of their free time, 4 new javascript libraries, and patches for both Firefox and Blender, to be exact. It isn't the demo that's the problem (if that's what you're saying in your sarcastic comment), it's you.
In the latest version of Chrome and Firefox, I only get a black screen, so I can't comment on the effort it took them for something a very small portion of the online public will see (funny, I heard "HTML5" was supposed to about making things easier to access across a variety of browsers and platforms).
But I guess that's just me and developers, creative thinkers, and creators will think that black box is the coolest thing ever.
I've been making 3d animations since 1996, websites since 1998, and compiled software since 2005. I've been employed in these capacities for the majority of my working life. So I'm speaking as a developer familiar with every aspect of a project like this. I know the amount of work that goes in to pioneering new technologies and the practical methodologies that capitalize on them. I realize that WebGL (et al.) is new, and presents challenges both technical and artistic surpassed only by the their afforded opportunities for new creative expression.
I can clearly see the tremendous amount of effort that went into realizing this. But given that effort, shouldn't there have been greater regard given to the quality of the finished product? For instance, there's no technical limitation which accounts for the length of the demo, nor is there any benefit to that length. If the piece had been of a more concise focus, the artists involved may have been able to create imagery was as visually stunning as it was technically impressive. Instead, the graphical elements feel quite unpolished, dated, and they detract from the impact of the project. This is but one of many examples of how I feel this piece is a failure to deliver on this technology's potential.
Certainly, the content of the work isn't as important as the technical systems needed to realize it. But if the purpose of such a demo is to show off what many splendours await us in this new era of the internet, wouldn't it be prudent to ensure that this demo actually works as expected? Why are so many people with Firefox 4 failing to run it? Why did it take me 5 tries to load the page? This isn't progress.
It bothers me that so much effort went into something that comes very close to a level where the average consumer would be impressed, but falls short because of a lack of ability to execute. If this were a commercial product, the market would slaughter you. And while I realize that tech demos aren't commercial products in and of themselves, they're still marketing something. A technology, a technique, a browser.
The recent advances in the web (CSS3, WebGL, HTML5, etc) are focused on improving online experiences. The biggest part of this is that they make it ever easier for all developers to create beautiful work. So it just bothers me to no end that people working on the forefront of this movement have such little regard for the beauty of their work. They're the ones carving the path. They should be showing us the new highs we may hit, on every level. They should be leading by example. There's no reason this tech demo couldn't have been as visually stunning as, say, the websites for 2advanced were back in the early days of Flash.
As long as a Flash solution like Papervision3D would provide a superior realtime 3d experience to a majority of web surfers (if this demo is anything to go by), we're not yet at the Web Page Of The Future.
I don't have any comment on your subjective criticism of the demo as art or some kind of advertisement, since I don't see it as either. I see it as an impressive demo. I understand your point and respect it, I simply see it differently.
However, you then state:
As long as a Flash solution like Papervision3D would provide a superior realtime 3d experience to a majority of web surfers (if this demo is anything to go by), we're not yet at the Web Page Of The Future.
Excuse me but have you seen Papervision stuff? It's pretty lousy by comparison. No real-time video textures, no realtime shaders, no fancy lighting. Yes, flash is going to get 3D support (I worked at Adobe on Flash stuff, since we're flaunting our credentials) but this is at least 10 times as technically impressive, even to users. Did you notice there was a pause button? Can't do that in Flash without a major overhaul of the broken timeline system. Did you notice the beat detection? It was awesome. It would be a huge CPU hog in flash (if you have the security rights to access the audio stream) - no problem in Javascript with the Firefox Audio API. Oh, and your browser still acted like a browser, with all the preferences you had set.
Excuse me but have you seen Papervision stuff? It's pretty lousy by comparison. No real-time video textures,
One absolutely can have real-time video textures, even using an outdated technology like PaperVision (and more so with the new, still not gpu accelerated, 3d software renderer).
Did you notice there was a pause button? Can't do that in Flash without a major overhaul of the broken timeline system.
The "timeline system" is not used in any real animation project.
Did you notice the beat detection? It was awesome. It would be a huge CPU hog in flash (if you have the security rights to access the audio stream) - no problem in Javascript with the Firefox Audio API.
It's not a CPU hog, and audio spectrum analysis features have been present in Flash for a long time - google "AS3 SoundMixer.computeSpectrum" for a specific, player-based API for that. And if you want to compare AS3 speed to JS -- you're dreaming if you think JS is that fast compared to AS3.
On top of it all, Flash 11 beta already supports GPU-accelerated 3d on top of OpenGL (or DirectX or OpenGL ES, and a software renderer if all of these are unavailable). If you want to present features like the ones from this demo - that only a handful of people will see - then compare to the next version of Flash Player too instead, and let's see who doesn't support enough shaders.
You clearly don't work with Flash, or hasn't looked at Flash in the past 5 years. The timeline is only good for hand-drawn, keyframed animation. No serious rich media work use it; the most complex animation you'll see will use code instead. And if you do use the timeline? "stop()" will pause, and "play()" will resume. Why you think a play/pause button is something so hard is beyond me.
You're right that demo wasn't made with Papervision. It's because it's not fair of you to talk about Papervision (a framework that hasn't been updated in a very long time, and was made for a Flash Version 2 versions prior) if you're comparing to Webgl, something that is barely supported nowadays. What now, should I compare equivalent demos in Flash 10 vs HTML 1.0 then use the same lame excuse? If you wanna compare the same result in both technologies, use examples created in the same time range.
Finally, both FF4 and Flash 11 are available for installation now. You say I need to have a specific browser, turn on an specific config setting, using specific cards, and a specific amount of memory; I say you need to install the public Flash 11 beta. Both are here now.
Or maybe not now, because this demo is still not working on my second machine, also using FF4, Windows 7, plenty of memory, and a great video card; nor on Chrome, latest dev build. I had to go to youtube and watch a video in Flash to understand what the demo was even about. Go standards.
Whatever, dude! I concur with everything you've said. Especially the bit about not using the timeline. The web is for interactive content, people, not timeline-based animation. Flash shifted focus to the former long, long ago.
I want to clarify why I mentioned Papervision. Papervision will achieve a similar effect to WebGL (you get textured polygons in your browser), and it won't require installing anything that 90% of users don't already have.
For developers and creative types (of the sort called out in response to my initial post), we need solutions that work today. There's no sense in getting us excited about tech we can't use; it's just showing-off that your particular platform has more bling. Tech demos are impressive when the technology is available to everyone. What we're seeing with these demos is as indicative of what can be done on the internet, now or in the near future, as a pre-rendered cinematic is indicative of the graphics in a video game. They're boastful and deceptive.
Very impressive. I really like the vintage feel of this demo! Runs very well on 2010 MBP with FF4.
For those that didn't make it to the end, here is the list of applications, libraries and file formats used:
BeatDetektor.js, Beat Detection Library (@ccliffe)
Blender, 3D Modelling and Animation
Burst.js, JS Animation Engine (@F1LT3R)
COLLADA, Asset Exchange Format
CubicVR.js, 3D Engine (@ccliffe)
DSP.js, Signal Processing (@corban)
HTML5 <audio>, <canvas>, <video>
JSON, Data Encapsulation Format
Mozilla Audio Data API
mozRequestAnimationFrame :-)
OGG Vorbis, Audio Format
Processing.js, Visualization Library
SpriteViking.js, Sprite Engine (@F1LT3R)
GML, Graffiti Markup Language
WebGL,3D API
WebM, Video Format
MBP works fine in FireFox only - Chrome is a no go. <3 Kraddy as the audio. It's a nice throwback to the c64 Demo Scene. I think it lacks some interactivity though, nice to watch by rather see how I can interact past the load screen.
Awesome work. Wouldn't say 'available now!', but definitely a glimpse into the future. Absolutely cannot wait until we get some broad mobile WebGL support.
My big complaint about switching to something like Chrome OS was playing immersive games in a browser. Appears the recent development effort in browsers has heard my griping.
This demo fails using mozilla.com's Firefox 4 build on my very vanilla core i5 Linux PC with Intel graphics. It's certainly not going to run on e.g. cr48, which has considerably less power to work with.
"Unfortunately, while your browser supports WebGL, your video drivers may be too old. To view any of the demos tagged with WebGL, try updating your drivers at NVIDIA, AMD, and Intel."
That's the great thing about standards: even if you choose the right standard, there may not be any usable implementations.
Firefox unfortunately has an explicit whitelist on Linux for drivers it allows for WebGL, because they didn't want to hit driver/GL bugs that crashed the browser. More unfortunately, the whitelist in Firefox 4 doesn't include the Intel driver, even though it works fine and doesn't crash. I worked with upstream to provide the necessary information about the driver, and Firefox 5 should have the Intel driver on the whitelist. In the meantime, try running "MOZ_GLX_IGNORE_BLACKLIST=1 firefox" from the command line.
The important part is the direction. I have always been a naysayer for the "browser is the platform", but this is convincing in terms of potential. Finally.
Seems to require FF4 (WebGL-enabled Chrome pops up error messages).
IE9 is looking pretty dated at this point. 2D acceleration when the competition is doing this?