Javascript Canvas Raytracer
March 24, 2009
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Renders a static scene of textured spheres, discs, cylinders and planes.
Chrome Experiments Not your mother's JavaScript.
X
Hey! We highly recommend you launch this experiment in Google Chrome. It may run slower, or not at all, in other browsers.
Okay, I'll download Google Chrome I'm willing to risk it
X
Report This Experiment
Comments
Hi Mark
I was trying to contact you by email about a JavaScript/HTML5 2D engine but failed.
Please email me at alex at scriptoid dot com
Thanks
Alex
Reply to this comment-
Reply to this commentDang, double post!
I guess this makes it a triple post.
Reply to this commentRendered at 1680x1050 (URMENTAL!) in less than 2 minutes in Chrome 5.0.375.99 beta.
Reply to this commentThis is amazing. A javascript raytracer that is so amazing, and even rather quick compared to other raytracers.
Reply to this commentLol, one of the shapes's texture is a pic from this vid: http://www.youtube.com/watch?v=F3jFTzhdZF4
Name of video: Crabs
Reply to this commentI wrote a JS raytracer for a graphics homework awhile back, though it only handled spheres and planes. My prof thought I was crazy. Glad to see I'm not alone. :-)
Also, regarding the parallel processing comment below, I've heard Chrome can use a new thread for each tab. Maybe the raytracer can take advantage of this somehow, if the user was willing to let it open several new windows, for example? Or maybe even hidden iframes?
Reply to this commentWhat you're talking about doing involves web Workers. Check out this post: http://ejohn.org/blog/web-workers/
Reply to this commentwow lol
Reply to this commentI see that only one core is being used during rendering, while the others are mostly idling..
I think that's an area that needs to be worked on for high performance applications inside of the browser.
Reply to this commentJavascript has no language provisions for concurrent processing, so this is not likely to ever happen. In fact, most browsers do *all* javascript processing across all the tabs in a single thread, and therefore on a single core.
Reply to this commentWhat is this disinformation? Haven't you used workers yet?
Reply to this commentJust tried in Opera10.5.
Works fine, renders in about 3927ms on the default settings.
The one on the benchmark page renders in just 476ms though O_O
Reply to this commentwow cool
Reply to this commentso nice i love it much do more!!@!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Reply to this commentis wired, slower here an nvidia gforce mx/mx 400 :S
Reply to this commentURMENTAL! Anti-alias: true
Time: 958559ms
Reply to this commentOpera 10.50 renders URMENTAL in less than a minute.
Reply to this commentVery nice work. Impressive how complex the scenes can be for a javascript raytracer. I am working on a little experiment, far less exclusive than this one and am already having performance issues. I was wondering how far this raytracer could be simplified to tune for speed. Maybe someone feels like giving me a hint or two ;) ... http://jsray.user2dev.com/
Reply to this commentGuess you guys need to try the new Opera 10.50 alpha with carakan
http://my.opera.com/desktopteam/blog/2009/12/22/from-all-of-us-to-all-of-you
Reply to this commentWow! UBER COOL!!!
Holy S***! 4 mins on URMENTAL in chrome on an old dell inspiron!
Moore's law (flawed, but reasonably good as a guide):
2009: 4 mins
2013: 1 min
2017: 15 seconds
2021: 4 seconds
2025: 1 second
2029: 0.25 seconds
2033: 0.08is seconds
2035 DAMN CLOSE TO REALTIME!!!
Take into account the improvements in GPUs and JS interpreters, and we're looking at less than 20 years to realtime raytracing!
Reply to this commentIt's not so much the GPU improvements that matter... it's using the GPU to hardware-accelerate JavaScript where 3D games and rendering really can take off using HTML5.
Reply to this commentI agree this is "cool". But realtime raytracing is possible today (optimized C/C++). In a few years it will be possible in RIA frameworks like Flash and Silverlight. This HTML5/Javascript hype is stupid. It's a dead end. There are better technologies (not necessarily the ones mentioned above).
Why wait untill 2035?!
Reply to this commentFlash and Silverlight(witch pretty much doesn't exist) is closed frameworks that are total crap
With a decent 3d backend powered by the gpu we will have 3d and realtime raytrace on web in no time while using javascript for scripting
Reply to this commentI don't agree, xml for rendering, json for data and javascript (or something close to it) for coding is not a dead end.
Reply to this commentHahahaha
Reply to this commentI rendered the "1680x1050 URMENTAL!" in 11 minutes under Firefox 3.5.2 (Mac) on my MacBook Mid 2009 computer my MacBook was at 185 degrees Fahrenheit and fan speed at 6200 RPMs (MAX)
Reply to this commentAt that time I was also using Chromium version 26074 from
Mac OS X: http://build.chromium.org/buildbot/snapshots/chromium-rel-mac/
Windows XP: http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/
INDEX of all builds: http://build.chromium.org/buildbot/snapshots/
This javascript raytracer is cool!
Reply to this commentNice renderer. I'm curious what sort of lighting effects it supports among other effects (reflection clearly, and perhaps refraction?). It would be nice to see some improved anti-aliasing as you work on this. Will there eventually be an editor gui?
Reply to this commentIt's just "high school" diffuse and phong direct lighting - no refraction or photon mapping or GI or anything fancy.
Heh, I have been perversely tempted to make it interactive somehow, but what's the point? Although I am currently working on a CSG version with an "object" builder... I may never finish it though
Reply to this commentSo slow, man! SO SLOW! Listen to us!! Listen!!
Reply to this commenthowdo i get this as my googel crome page
Reply to this commentg
Reply to this commentOMG Suckers this is slow to load a .png file
Reply to this commentmy firefox version is 1.5.0.4 and it took 3 minutes to render. i didnt expect it to work at all in any firefox before 2.0.0.0
Reply to this commentUm, why are you using such an old browser? Unless you're trolling, I'd seriously consider getting a newer version....
Reply to this commentAre you kidding or just an idiot?
This is not loading a PNG image, this image is generated by a ray tracing
program which is written entirely in Javascript.
It is rendering an 3D scene based on light and geometry of objects and
enviroment. Task like this used to take days on a main frame computer!
this is the greatest experiment I have seen here.
Reply to this commentwhy so slow??? I don't know how 3D engine works ,but it will run fast in 3D web
Reply to this commentIt won't. This is not a rastering 3D engine, it's raytracing. There's a huge difference.
Reply to this commentCan we get some moderation in here to prevent the fucktards from posting uselessness? Thanks.
Reply to this commentIMPOSSIBLE 2 WORK!!!
Reply to this commentI like to be gem
Reply to this commentwow its so cool and all but what is it supposed 2 do???
Reply to this commenthttp://en.wikipedia.org/wiki/Rendering_(computer_graphics)
Reply to this commentdidn´t work
Reply to this commentjava
Reply to this commentthis is cool
Reply to this commentYEAH THIS COOL WONDER IF IT WILL BE OUR PICTURE WHEN WE SIGN ON TO GOOGLE CHROME
Reply to this commentHoi! Glad to see this on Google 'speriments. Was rad when we first saw it -- still is rad. Good on ya (:
Reply to this commentHey D000000D
I remember you writing a Ray tracer in Qbasic / GWbasic once over lunch back at Super Diamond days.
Nice one W00t
Reply to this commentawesome
Reply to this commentHey racheal back off my friend.
Reply to this commentFuckk u not this!!
Reply to this commentshut up kidd cz dat dnt even mak no sense( u r a fuck and a bitch and sht!!) WHAT DA FUCKKKKKKKKKKK!! LOL
Reply to this commentFuck uuuuuu
not this u bitch
Reply to this commentCan't you kids take your comment spamming to some other site, and give some legitimate feedback for the developers? Stop wasting peoples time.
Reply to this commentphotos
Reply to this commenttheli kanis na ta ftiaxoume
Reply to this commenten poli varilatiko, en mou aresei, esi sou arese?
Reply to this commentgamaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Reply to this commentReally sweet rendering! Took forever to get the huge one rendered though... XD
Keep it up!!
Reply to this commentThis is amazing! It's faster in JS than the raytracing I did as a kid on my 486
Reply to this comment:D
Reply to this commenteww!! nasttyy i love it!! <33 but one question WTF is it?
Reply to this commenthttp://en.wikipedia.org/wiki/Ray_tracing_(graphics)
Reply to this commentnicee i love it it's tottaly different
Reply to this commentvery cool
Reply to this commentkeep up the good work on your programs i think they are pretty helpful
Reply to this commentthis is really cool and I like it alot
Reply to this commentreally kewl n ofcourse sumthing different...
Reply to this commentthis page on goggle
this is right page
Reply to this commentfd
Reply to this commentthts well kl
Reply to this commentgood work..
Reply to this commenthey thats realy cool i like what you did with the background of the whole thing
Reply to this commentGreat........................................
Reply to this commentFirefox 3.5b much slower than Chrome: 19 seconds vs 5.5 !!
After so much tracemonkey hype
Reply to this commentThis is weird....
Reply to this commenti dont have a word for this work.......
Reply to this commentyou have to have somthing to have someyhimg to say at one thing tell me one thing
Reply to this commentlol
Reply to this commentVery much amazing.
U did it !!!!!!!!!
Reply to this commentawesome
Reply to this commentwowwwwww...
great....
Reply to this commentThis is incredible!
Reply to this commentCan you please add radiosity? :-)
Very cool benchmark!
Reply to this commentWOWWWwwww
Reply to this commentDoesnt work. Bandwidth exceeded .. :(
Reply to this commentYeah sorry about that, I've been trying to get them to update the link:
http://jupiter909.com/mark/jsrt.html
Reply to this commentgreat work!
Reply to this commentBandwidth was exceeded. I will try again later :P
Reply to this commentdidnt work
Reply to this commentpara teste
Reply to this commentpara tste
Reply to this commentOMG! Raytracing in a browser!
Reply to this commentniiiiiiiice
Reply to this commentWell... holy crap. What else am I supposed to say?
Seeing something like this run *inside* a webpage only with Javascript--this fast--not using any external plugins is, quite simply, amazing.
I can only imagine where this technology is going to go.
Reply to this commentVery impressive.
Good job!
Reply to this commentCool on OWB for AmigaOS4.1 :) WOW Amiga Back for future!
Reply to this commentgooglepages bandwidth fail
Reply to this commentYup that'll learn him
http://jupiter909.com/mark/jsrt.html
Reply to this commentAwesome!!!
Reply to this commentLooks like my google pages ran outta bandwidth, sorry. There's a copy here for now:
http://jupiter909.com/mark/jsrt.html
Reply to this commentexcelente !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Reply to this commentmeu como é que eu faço para testar as aplicações em Java
alguém do google fala português, não fala?
eu respostas em português tudo bem
Good By
Reply to this commentNot a great idea in Firefox 2.0! It's shiny but very computationally intensive. Chrome and other very recent browsers are the only way
Reply to this commenthahah
Reply to this commentVery cool.
Reply to this comment