Friday, March 16th, 2007
JavaScript Ray-Tracing
<>p>Adam Burmister sent us what he calls “The Worst Application of JavaScript Ever”. Perfect for a Friday :)He has built something “nobody will ever need a JavaScript based ray-tracer. The point of the exercise was actually to learn more about the Canvas HTML element, and ray tracing techniques, not JavaScript.”

Related Content:











Dude… that is just absolutely sick…
Totally awesome!
Also, it proves that Opera is the fastest browser as for DHTML/JavaScript.
Really nice.
For the record, there’s been at least one good JS Raytracer before the advent of Canvas [1,2], and yours truly wrote a brutal and fake ( WRT to the lighting ) one for a 20 lines JS contest [3,4]
Again kudos for coding crazy things just for the fun of it.
[1] http://www.slimeland.com/raytrace/
[2] http://www.slimeland.com/raytrace/help.html
[3] http://www.p01.org/releases/DHTML_contests/files/20lines_raytracer/
[4] http://www.p01.org/releases/DHTML_contests/files/20lines_raytracer/index2.htm
Mm. Even cooler, you can minimise Opera when it is processing whereas Firefox just freezes…
When for all browser like IE7?
@p01 – thanks for the link to your site – a lot of great stuff there for me to deconstruct and learn from!
“When for all browser like IE7?”
When it stops sucking.
My opinion: the reason why Firefox sucks at this sort of thing is because the already-powerful JavaScript engines which Firefox uses (Rhino, Spidermonkey) are already being used to render the very GUI of the browser + extensions (hence XUL). Thus, having to render the GUI and load the Raytracer (JavaScript + Canvas) at the same time would place a heavy -but short-term- performance deficit on the entire browser.
Opera doesn’t have a JavaScript-dependent GUI, and also has its own up-to-par JavaScript engine, so rendering the raytracer should be a piece of cake.
Plus, Firefox shouldn’t have to suck at raytracing, considering that Mozilla is the current steward for JavaScript ( or “ECMAScript a la Netscape”). Just throw another JS engine -one for 3D rendering- onto the barbie, I suppose.
This is probably the best-looking raytracer I’ve seen thus far, and even the code looks really nice.
I wonder if doing the calculations en masse and then drawing pixels afterwards (ie. two separate operations) might help to speed up the process. You’d eat more RAM perhaps storing the data while doing calculations, but could then perhaps render the image more quickly at the end.
Again, great stuff.
I agree!
I agree again but did You never compare FireFox VS Opera during a fade effect? In this case, and probably only in this one, Opera really sucks (not as IE)
LOL!
OMFG! WHY?!?!
Scott: My small attempts at JS raytracing were twice faster when rendering the scene as a 24bits BMP image compared to the oldschool “one zillion” DIV technique.
We will have browser-based 3ds-max in 3 years :)
How about using webworkers? that at least would make it not block my browser ;-)