Loading...
PortfolioUncategorizedWeb

Raytracer Version 3

A quick update the real-time ray-tracer I’ve been working on.

For the previous version please check here:

The latest system implements a method similar to differed shading to calculate lighting and reflections. This is done using for following process:

  1. For each bounce of light:
    1. First Draw Pass
      • Calculate the current eye position and ray vector.
      • If this not the first bounce pass, calculate the reflection amount.
    2. Second Draw Pass
      • Calculate the ray hits, ambient light, and normal’s.
    3. Third Pass:
      • Draw the ambient values
      • For each light calculate the specular and diffuse colours.
    4. Swap the draw buffers.
  2. Draw the result to the screen by merging the current and the previous frames.

The final result runs faster than the previous version, allows for more reflections and lights, and gives us access to modifying the lights dynamically. The difference is that this version uses 16-bit and 32-bit floating point textures to store values. This increases the need for a large video memory.

The next steps will be to add refraction, material textures, and complex models.

Give it a shot:

Open in new tab.

Keyboard Controls:
W, A, S, D - Movement
Left Arrow, Right Arrow - Rotate left and right.
1 - Show merged frame
2 - Show un-merged frame
3 - Show the last ambient light frame.
4 - Show the last point hit frame.
5 - Show the last ray frame.
6 - Show the last normals frame.
7 - Show the last eye location offest.

Note: This example requires a browser that supports WebGL2.

As always, please feel free to try out the code for yourself: