Javascript Ray Marcher v0.9

Unfortunately, the code for this version no longer works. I took a detour to see if I could render models created by other programs. The answer turned out to be yes, but it takes too much work to tune and maintain.

I used a MD2 converter to take a model of an alien from the free XCOM project, and render it in this raytracer. The attempt started rather badly. I tried to use thin triangles to render the alien, much like OpenGL does. This did not work for several reasons. Many of the triangles were not properly displayed, because they were too thin and the rays stepped right through them without triggering a "hit" in the raycaster. I was also not handling the format correctly, so there were many mis-aligned triangles sticking out of the figure.

{{% thumbnail src="/projects/javascriptraymarcher/9.1.png" scale="50" %}}

Ignoring all the actual problems, I work on getting the shading correct. It's still a mess, but now it's a well shaded mess.

{{% thumbnail src="/projects/javascriptraymarcher/9.2.png" scale="50" %}}

I lower the step distance for the raycaster. This slows the render, but helps the rays to hit more triangles. It's still not great.

{{% thumbnail src="/projects/javascriptraymarcher/9.3.png" scale="50" %}}

I correct the file loader. Now there are no stray triangles, and the legs have appeared!

{{% thumbnail src="/projects/javascriptraymarcher/9.4.png" scale="50" %}}

Upper half in shadow, for no good reason that I can recall.

{{% thumbnail src="/projects/javascriptraymarcher/9.5.png" scale="50" %}}

More shadow, but now I have also changed the triangles into tetrahedrons. This provides the necessary thickness for the rays to hit the model, and suddenly we have a model with no gaps in it.

{{% thumbnail src="/projects/javascriptraymarcher/9.6.png" scale="50" %}}

Finally a good render. No stray shadows, no holes in the model, and no stray triangles.

{{% thumbnail src="/projects/javascriptraymarcher/9.7.png" scale="50" %}}

And here's our final model, silhouetted against the moon. Spooky, no?

{{% thumbnail src="/projects/javascriptraymarcher/9.8.png" scale="70" %}}