JavaScript Ray-Tracing: or The Worst Application of JavaScript Ever @ Flog, by Adam Burmister

JavaScript Ray-Tracing: or The Worst Application of JavaScript Ever

Let me preface this post with the statement that this experiment has probably been a complete waste of time, 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.

I picked up a particular fondness for ray-tracing during my University years while studying Computer Science, majoring in Computer Graphics. Ray Tracing is quite a simple idea which produces quite impressive results with relatively little work.

One of the first things I like to do with a language is crack out a simple ray tracer. It’s a good test of the language (as I understand it), as well as the computing power of the system it’s running on, and I suppose in this case, it’s a good test of the browser’s JavaScript engine.

Ray-tracing is a very intensive algorithm. Abstracting the maths away a bit, it basically casts a ray (yep, hence “ray tracing”) over the scene (a collection of shapes and lights all represented in 3D space) for every pixel of the image, bouncing the ray around the scene multiple times as it hits objects (this is how reflections work, etc).

Most good ray-tracers use a number of optimisation techniques in order to speed up these expensive operations. For instance, integer bit shifting is a common source of speed-boosts. JavaScript’s everything-is-a-float is obviously not going to provide anywhere near good performance.

The Canvas

As I said, the main point of this exercise was to learn more about the Canvas element. If you want to learn more about Ray Tracing, there are a number of great resources on the the net.

The canvas element has a pretty simple API: simply get the 2D context and render to it. I was thinking of documenting my usage of it, but it’s already done so well on other sites that I figure I’ll just link you off to them to learn more.

The Flog.RayTracer in action

Click here to open the no-frills ray-tracer interface in a new window

If you’re really keen feel free to go ahead and download the ray-tracer. It’s probably very buggy (I know of a couple of big ones already), but it’ll give you hours of fun trying to fix it.

Welcome to The Web, Chrome!
Prototype URI Parser class
Scripts
My First WP Plugin – Per Post CSS & JS
ARC – Adam’s Radio/Checkbox customisation

About this entry

You’re currently reading “JavaScript Ray-Tracing: or The Worst Application of JavaScript Ever,” an entry on Flog, written by Adam Burmister.

Published:: 12.03.07 @ 3pm

Category:: javascript, opensource, programming

About Adam Burmister

Born naked and unable to fend for himself, Adam Burmister managed to overcome these obstacles to become a trained computer-scientist and achieve gainful employment as a web/software engineer. He has traveled widely, and is now living in London.

Adam maintains a profile page for those curious folk or prospective employers, as well as an RSS feed for regular readers of his diatribes.

You can also email Adam with all your hate/love mail.

Jagtesh Chadha 15.05.08 / 10pm

Hi Adam!

This post was rather fascinating, since I too share a curiosity for ray-tracing (ever since I first used pov-ray a few years back). But seeing a working ray-tracer in JavaScript, my oh my..you’ve blown my mind off completely!

I like your blog. Keep up the good work :)

Ahmed Hilali 09.09.08 / 2pm

What made you switch to web developement after majoring in computer graphics? More jobs, etc?

adam 16.09.08 / 8pm

@Ahmed – Actually I walked into my first post-uni job interview with the intention of being a grown up Java programmer, working on enterprise systems and doing the hard core programming thing.

I interviewed with the company CEO, who saw my prior web-dev experience, and walked me over to the web-dev team within the company and said here’s your new boss, you start next week.

At that point I decided that I love the internet so much I might as well go with it :)

Mark 22.10.08 / 9am

Excellent stuff! Ray-tracing is awesome. I fell in love with it 16-17 years ago when I stumbled across a computer magazine in the school library which contained a C program that rendered some spheres with different material properties (including refraction!). It would take half an hour to render a 320×200 image. Over the years I wrote a few of my own (rubbish) engines but I haven’t even thought about it for nearly a decade.

At the weekend I also decided to play with the Canvas element, and discovered the getImageData / putImageData methods which are supported in Firefox 2.0+, Opera 9.x and now in the latest nightly Safari builds. It’s a pretty cool way to do pixel-wise graphics. I spent the weekend writing a javascript raytracer (thinking I might be the first), purely to benchmark browser javascript speed. Looks like you were the first, by a long way :)

http://mark.webster.googlepages.com/jsrt.html

Marc Breuer 31.12.09 / 6am

Nice work on the raytracer. I’ve started working on something similar, but on a much simpler level. I am trying to find ways to boost performance to get spheres and shadows rendered in something like real time. could be too ambitious though :) … I wonder how far your raytracer could be simplified to improve performance. My current results aren’t all that positive.

Flog — Web super–hero in training