Hello there,
This week end, I've got some time to explore once again HTML5 and the canvas. I was wondering if it could be possible to do some raytracing techniques directly into the web browser.
This ticket does not intend to explain raytracing theory, there is a dedicated area for that here
First of all, we always speak of what it possible to do with HTML5, but from a rendering approach, it's pretty basic. Here the only thing that I will use from HTML5 is to draw a pixel of a given color.
There are two ways to draw a pixel in the canvas.
- putImageData : You can create an image object and then it will be possible to draw a pixel into.
- fillStyle & fillRect : The first one is used to set a color and the other one to draw a rectangle. Basically to draw a pixel, you need to draw a 1 by 1 rectangle.
I did not know which one I was supposed to use so I have experimented both. From my benchmark, it seems that fillRect is the best candidate ! ( putImageData took 25s to draw the scene where fillRect took 11s )
Then after that, taking what I remember of my college memories about raytracing, I've started the implementation. I've checked my student project to remind me how algorithms work and after all those years in the industry, I have to admit that I've smiled when I've seen the coding style.
Like everything that supposed to execute code in a browser, it uses Javascript. To clarify stuff, I am C programmer and I do not master Javascript my implementation may not respect Javascript best practices but it looks similar to what I would have done in C.
So in the script you will find some work in progress code that defines vector class, sphere class, material class and so on. So far the scene is pretty simple, it's only a red sphere with a white light.
You just have to press the Raytrace button !
In this basic implementation, I am already facing performance issues. Maybe there is a better way to write the code, I will investigate later.