Friday, March 16th, 2007

JavaScript Ray-Tracing

Category: Canvas, Showcase

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.”

Posted by Dion Almaer at 7:21 am

4.4 rating from 49 votes


Comments feed TrackBack URI

Dude… that is just absolutely sick…

Comment by SchizoDuckie — March 16, 2007

Totally awesome!

Also, it proves that Opera is the fastest browser as for DHTML/JavaScript.

Comment by Dean Edwards — March 16, 2007

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.


Comment by p01 — March 16, 2007

Mm. Even cooler, you can minimise Opera when it is processing whereas Firefox just freezes…

Comment by Dean Edwards — March 16, 2007

When for all browser like IE7?

Comment by Giovambattista Fazioli — March 16, 2007

@p01 – thanks for the link to your site – a lot of great stuff there for me to deconstruct and learn from!

Comment by Peter Mularien — March 16, 2007

“When for all browser like IE7?”

When it stops sucking.

Comment by The Hater — March 16, 2007

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.

Comment by Rayne Van-Dunem — March 16, 2007

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.

Comment by Scott Schiller — March 16, 2007

Totally awesome!

I agree!

Also, it proves that Opera is the fastest browser as for DHTML/JavaScript.

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)

“When for all browser like IE7?”
When it stops sucking.


Comment by Andrea Giammarchi — March 16, 2007


Comment by KevBurnsJr — March 17, 2007

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.

Comment by Mathieu 'p01' Henri — March 18, 2007

We will have browser-based 3ds-max in 3 years :)

Comment by Vote for the worst — March 19, 2007

How about using webworkers? that at least would make it not block my browser ;-)

Comment by mvcoile — June 4, 2010

Leave a comment

You must be logged in to post a comment.