Hello everyone!

Last time, I wrapped up the basic rendering features by implementing the depth buffer.

Today, building on what I’ve learned so far, I tackled camera setup and shadow (lighting) rendering.

Ground and Cube Vertices

First, I defined the vertex data for a square ground plane and a cube.
You can find the vertex definitions here:

🔗 Ground and Cube Vertices (GitHub Gist)

Calculating Light and Camera Matrices

Next, I calculated the matrices for both the light source and the camera to render the scene properly.
Here’s a snapshot of the data I used:

Light

Camera

Render Passes and Shadow Rendering

With the shader pre-pass and main pass set up, I ran the renderer and was able to produce a scene where the cube casts a shadow onto the ground.

Here’s a short video demo of the result:

🎥 Watch on YouTube

You can also try it out in your browser:

• 🌐 WGPU Demo
• 🌐 WebGL Demo

Source Code

Here are the implementations for each graphics backend:

• Vulkan:
  https://github.com/erenengine/eren/tree/main/eren_vulkan_render_shared/examples/test_shadow
• WGPU:
  https://github.com/erenengine/eren/tree/main/eren_render_shared/examples/test_shadow
• WebGPU:
  https://github.com/erenengine/erenjs/tree/main/eren-webgpu-render-shared/examples/test-shadow
• WebGL:
  https://github.com/erenengine/erenjs/tree/main/eren-webgl-render-shared/examples/test-shadow

The result may look simple, but building everything from scratch was definitely a challenge — and a fun one at that.

Thanks for following along, and good luck with all your own projects too.
See you in the next update!