Depth of Field
June 10, 2009Mr.doob
- http://mrdoob.com
- Location:
- London, England
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
300 balls form a plane, a cube, a little universe, a sphere and then disappear.
Unfortunately this piece is shy and doesn't want to interact with you yet. But nothing stops you from watching it from any angle.
Technology:
threedoob, jstweener
Comments
hi.
this thing is amazing!
i wonder how to make the bubble stop going back and forth during the animation!?
can u help me a little?
Reply to this commentIn Opera, I'm experiencing a bug, the balls don't changes their size.
This is correctable:
Main.js row 220: particle.container.style['OTransform'] = 'scale( ' + scale + ' )';
to:
Main.js row 220: particle.container.style['OTransform'] = 'scale(' + scale + ')';
Reply to this commentChanged, thanks! :)
Reply to this commentTo the author of this:
I would like to try this out in IE9, please remove the user agent sniffing and look into why it is centered around the top-left corner in this browser.
Reply to this commentInvestigating...
Reply to this commentwow !! really amazing .
Reply to this commentlol, my firefox crash~~
Reply to this commentthis has been possible with Flash for...a decade? And this uses more CPU than Flash.... what's the big deal with HTML5 then?
Reply to this commentHe's not joking...
Reply to this commentThis isn't HTML5, it's Javascript. This site is all about promoting a more direct user experience, one where you don't need plugins upon plugins to see what the authors want you to see. Flash can burn in hell.
Reply to this commentHaha, good joke! :)
Reply to this commentworks even wth the IE9 preview (but there are some issues)
Reply to this commentmay i ask why you are using internet explorer? get a real browser! :p
Reply to this commentThis is great stuff! I think that the speed is great but as per the comments, a lot of people seem to be experiencing speed issues. I wonder why?
I was quite pleasantly surprised when the entire graphic moves when the mouse is moved. I tried zooming (both with the mouse and the keyboard) and yes it slows down horribly. But when the zoom is reset to normal, it plays well.
BTW, on zooming, I found that the balls seemed to have a real reflection of something. Is that true? It looks bloody good!
Code on!
Reply to this commentAwesome experiment, Could it go any faster? Its almost as awesome as CM Punk. I think firefox and IE are like Triple H and John Cena, but chrome is CM Punk, the coolest straight edge browser.
Reply to this commentWOW!!! WOW!!! WOW!!!
Reply to this commentjust .... insane.!
Reply to this commentgoodes
Reply to this commentwho really likes this anyway?
Reply to this comment???? hello
Reply to this commentawesome!! I like it!! it looks like a chemistry experiment~~
Reply to this commentNot too best. It moves by itself.
Reply to this commentMr. doob, 60fps introduced me to here. And you basically changed my life/perceptions.
Reply to this commentWOW, that was amazing
Reply to this commentmake it fast
Reply to this commentju-[pershendetje-te-gjthve-mir-se-arthne-nga-zemra-te-dj-argjedn
Reply to this commentWorks beautifully on Opera 10.50.
Reply to this commentTry it in google chrome and you will see that it doesn't work s it should ! the balls becoming bigger and smaller and in opera they are just the same size. (Or maybe google chrome doesn't show it as it should ?)
Reply to this commentHow do you do an experiment?
Reply to this commentVERRRRRY Slow
Reply to this commentsimply amazing, mind blowing
Reply to this commentAbsolutely, positively, most certainly the most impressive and beautiful Chrome Experiment :) The not being able to interact makes it all the better I think.
Reply to this commentsrsly
Reply to this commentm seeing d future .....whats itz gonna be...
loved it thoroughly..
keep rocking guys.
Reply to this commentI agree. It's like those 1980s Nickelodeon station identification animations (ations), and that Escher with Sphere self-portrait, and [i]Phantasm[/i], and Buckyballs. I hope somewhere down the road this is a screensaver that reflects whatever is in the user's webcam's field in each of the balls. That would be the Computerized Future that had my late-80s tween nerdette self lost in a reverie.
Reply to this commentcool? how did you add depth of field?
Reply to this commentHot!
Reply to this commentsmelllly
Reply to this comment...
Reply to this commentit's Awesome experiment
Reply to this commentHi, congratulation.. very cool. How to write for some plane with movieassetmaterial intercative (mc)?
ex. http://www.openspaces.it/2009/
thanks
Reply to this commentbeautiful
Reply to this commentincredible!!! the magic of javascript just amazing
Reply to this commentWow its Very Nice..cool ..How can i d/w it
Reply to this commentWhat does "d/w" stand for?
Reply to this commentDownload I think.
Reply to this commentno thats d/l
Reply to this commentInterested in what web worker threads can do here.
Reply to this commentI love it :)
Reply to this commentmr. groovy thinks mr. doob is very koolsville!
Reply to this commentTHIS IS SOO COOOOL.
ALMOST AS COOL AS BEING A VIRGIN AT 45 YEARS OLD JUST LIKE MR.DOOOB
Reply to this commentSays the guy trolling on here... lets see you achieve anything half as complex as this
Reply to this commentMR DOOB R TEH DUDE
Reply to this commentCan you add the tag to this so it works with Google Chrome Frame? Thanks :)
Reply to this commentDone :)
Reply to this commentthis is amazing!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Reply to this commentperfect you won
Reply to this commentIs it possible to do threading with this? Even more complex things could be done faster if it could be parallelized.
Reply to this commentHeh, actually I get the best performance of all in Konqueror using khtml. It seems to distribute load to all 8 of my i7 cores (with smp/HT). It renders slightly differently, a bit blurrier.
I tested webkit in konqueror and aurora, both of which performed the worst.
Chromium made it look smooth but ran single-threadded.
Reply to this commentVery good idia
Reply to this commentVery impressive. your flash version is impressive as well, though the blur effect seems to be exaggerated. Your javascript version 'looks' cleaner.
I noticed a lag issue with page zooming on Google Chrome. ( Ctrl + Mouse Scroll, for those that are wondering how to zoom a webpage that is essentially a dialog box. )
You wrote, "... Something to do with the resizing of elements and the bilinear(?) filter".
This seems to echo that claim.
Reply to this commentIt's important to note that if you set the zoom back to the default state, it runs smoothly again.
Reply to this comment(:
Reply to this commentlol! :D seemed to work fastest on Opera 10 ^^
but really nice thingy anyway!
Reply to this commentVery cool. It would be even cooler if it could scrape from a webcam and display it as a reflection on the mirror balls. Not sure if this is at all possible.
Reply to this commentThis may be possible by adapting the code from the 'wrap to sphere' plugin/feature in the GIMP, plus add rotation effects.
Reply to this commentNice application and consistent motion of grapghics. Would like to possaibly work on future projects with you
Reply to this commentInteresting! it will be more depth challenging if there were different color balls with some fluorescent colors for different depth perception and shape concepts
Reply to this commentneed to add
Reply to this commentI like it!
Reply to this commentnice .....yaar...
Reply to this commentyes
Reply to this commentReally amazing.
Reply to this commentBrilliant piece of work. Love it.
Reply to this commentWoooooooooooooo! Neat work!
Reply to this commentniceeeee
it moves your world :)
Reply to this commentactrully ,opera is more smoothly
Reply to this commentawesome man. this is called new generation pc things.
Reply to this commentAwesome. Google Chrome beats my old firefox by lengths on this one. :)
Reply to this commentMSIE8= No Go.....JS Error
Y am i not surprised ;(
Reply to this commentThis is kick ass... Now only if i could use this as a screen saver.
Reply to this commentThis would be amazing if it utilized webcams to create a kind of reflection.
Reply to this commentCongradulations, the experiment looks amazing.
Reply to this commentOpera 10b3 runs this more smoothly than Chrome 3.0.197.11! :p
Reply to this commentPretty cool. Although with my PM 1,5 GHz, 512 Mb the only browser which doesn't give me slideshow is Opera Beta 3. It renders whole expirement smoothly.
Perhaps something to do with SVG rendering speed?
Reply to this commentOn my old laptop looked great, Chrome and Mr doob really put on a show.
Tech of Mr doob makes Chrome Shine!
Reply to this commentSweet !
Awesomely done.
Reply to this commentCOOL! Need a dozen more moves and a random loop
Reply to this commentgreat experiment! whered u get your sphere images?
Reply to this commentThe original sprite comes from this amazing photo:
http://green.colorize.net/bubbles2.jpg
Taken by Marcus Wallinder:
http://green.colorize.net/
Reply to this commentthis is so fucking cool
Reply to this commentGreat comment. You obviously have a deep grasp of the language.
Reply to this commentQUESTION: HOW CAN I DOWNLOAD SOME OF THESE GOOGLE CHROME APPLICATIONS?
PLEASE REPLY: THANK YOU!
Reply to this commentMr doob,
I'm not reading source code yet but I think you did mimic DoF (= blur effect on each balls) by swapping static png file.
So I think you know well, that there are some flaws in CSS3 to implement rich interfaces like this example, using JavaScript.
1. There is no blur filter so we have to prepare static image file using Photoshop to express blur / DoF.
2. "background-image" is not transition(able) property. In other word we cannot do simple cross-fading. So if we want to swap image A to image B smoothly, in generally we need to write JavaScript code that will create multiple element for each effect.
Lacking blur filter and limited ability of transition effect is boundary made by Apple I feel, and that is currently not tiny issue for me when I try writing rich and web-compatible interface which fully produced dynamically from Javascript code.
If possible I hope Mr doob to help escalating this issue with this beautiful & excellent demo.
Reply to this commentBackground-image is scrollable tho... ;)
http://mrdoob.com/projects/chromeexperiments/depth_of_field/files/spriteBlur.png
Reply to this commentThanks & I checked the demo again.
Scrolling single background-image would be best way when we should change state of image instantly (your comment reminded me this point thanks). But it is difficult to specify transition effect like cross-fade between the change.. isn't it?
For instance property for example below assumes to specify transition type & properties for backgroun-image exclusively:
-webkit-background-image-transition: morph 0.3s linear;
or
-webkit-background-image-transition: fade 0.3s linear;
Transition specified here takes effect when scroll or change of image source happens. Maybe this example is flawed as specification but anyway I feel need browsers to support animation between the change of background-image.. (Blur effect is another issue to be discussed separately.)
Reply to this commentHey, I know this might seem dumb, but I love the look of this experiment and I would love to have it as a screen saver. Sometimes I just leave it on, full screen, when I have company, it looks amazing.
Reply to this commentI just started programming (using python). How can I understand the structure of the code for this experiment?
Reply to this commentI don't understand the question.
Reply to this commentstunning, thanks
Reply to this commentGreat demo! But, this reminds me a more cool demo written by Flash. Check it out!
http://www.adobe.com/jp/events/cs3_web_edition_tour/page6.html
You can increase the number of balls by clicking the [+] button.
Reply to this commentOnly difference is that your demo renders on little window, while this on is fullscreen.
Yeah, I knew Roxik's demo already, it came out at the same time (I think after) the flash version of this experiment last year. I've even decompiled it to see how it worked, and that's how I saw the limitations.
Reply to this commentThanx Mr.doob. Actually, I don't like a closed and vendor intrinsic application like a Flash. Hoping HTML5+JavaScript could overcome Flash some day. I appreciate your great work !
Reply to this commentWhy, what's happening next year?
Reply to this commentCool! I cant wait till next year...
Reply to this commentDepth-of-field via JavaScript?! Wow.
Reply to this commentHi! Its peter. It is so cool.
Reply to this commentThis is amazing. I really like it. The way the balls are moving is very natural and beautiful. Thank you, Mr. Boob.
Reply to this commentI am very sorry, Mr. doob. I made a misspelling of your name in above comment. I thank you once again. Your work is very interesting.
Reply to this commentDon't worry, it happens all the time.
Reply to this commentIt's the BORG!
Reply to this commentvery well designed as per user as well as engineer perspective. It's very difficult for a common engineer to do it.
Reply to this commentgoogle is goog
Reply to this commentthis is very interesting amazing experimental show!
Reply to this commentits ok, it could use a depth perception add in, so a 3-D like feel, but not too strong
Reply to this commentAH, i knew this looked familiar!
I saw the Flash version of this the other day there.
Flash version still beats this, but this alone is pretty damn good, JS has came a long way.
Reply to this commentWhat was the flash one's URL?
Reply to this commenthttp://mrdoob.com/lab/pv3d/dof/07/
Reply to this commentvery good one
Reply to this commentits good & fantastic i like it
Reply to this commentReally amazing, it runs smooth under windows with chrome. Very impressing demonstration, thank you!
Reply to this commentthis is more slow than flash on My MacPro 2009 :/
Reply to this commentYes, for some reason on MacOS this runs super slow. It runs fine in Windows/Linux tho. No idea what it can be. Something to do with the resizing of elements and the bilinear(?) filter?
Reply to this commentsick as always!
Reply to this commentIt's MINT!!!!
Reply to this commentPretty amazing stuff. On the Mac Opera 10.00 Beta is the only browser I tried (I tried Safari 4,Firefox 3.5,Chrome and Opera) where the rendering isn't choppy.
Reply to this commentPretty shiny... I wanna touch it....
Reply to this commentshiny
Reply to this commentgreat thanks google
Reply to this commentWould be interesting of the reflection on the balls would be taken live from our webcams.
Reply to this commentWith... javascript?
Reply to this commentThe future or whatever it looked like.
Reply to this commentDamn thing chopped my comment without warning...
video src="camera://" is supposed to go between "future .... or"
Reply to this commentthats dope .....I digg
Reply to this commentI don't understand the point of this.....
Reply to this commentAre you stupid?
Btw. great demonstration. One of my favorites.
Reply to this commentMrDoob,
longtime fan, brother. Love what you did - looks like Javascript is gaining some ground on Flash. Flash still blows it away in terms of performance though. Great work, all the same.
Reply to this commentI am still amazed at what you can do with javascript... Excellent work
Reply to this commenttotally!!
Reply to this commentgrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr8
Reply to this commentDoes any engine run this well? Safari 4 and Chrome 3 on the Mac are both pretty choppy.
Reply to this commentRuns great in Opera v10 for Mac.
Nicely done, MrDoob. (Wonder why IE doesn't work here? DOH!)
Reply to this commentIts broken in firefox 3.5 RC1... i submitted a report...
..but it does look awesome (in chrome & Firefox)
Reply to this commentThere are instances where blurry balls display above clear balls, which throws off the whole effect. Otherwise, its an amazing experiment, top notch.
Reply to this commenthttp://www.shortcourses.com/images/b5ch1/aperture.jpg
Reply to this commentNow that is what I call an excellent post, thanks...
Reply to this commentVery well done, Mr. Doob.
A suggestion for interactivity:
Allow the user to shake the browser (as with your older experiments) in order to jitter the structure of the bubbles, or introduce a "click to explode" feature that has limited range.
Otherwise, you could have an old-fashioned cursor chaser option.
I really like your work.
Reply to this commentHey, what you have so far looks great. I think once you have the interactive piece in it, it will be incredible. Very realistic. I stumbled onto the experiment section a couple of days ago and have been addicted ever since. :) Will be looking out for you next version... real good stuff.
Reply to this commentWell, first thing is to optimise it and improve the code so it works on Firefox and Opera (forget about IE). Then I'll think how can I introduce interactivity. I'm a bit lost to be honest...
Reply to this commentWhat is the reflection on each ball of?
Reply to this commentThe original sprite comes from this amazing photo:
http://green.colorize.net/bubbles2.jpg
Taken by Marcus Wallinder:
http://green.colorize.net/
Reply to this commentAwwwwwwwwwwwwwwwwwwwwwwww ya foolz first post................pretty awesome experiment!
Reply to this comment