Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic Demo

Creating engaging web experiences often requires sophisticated rendering techniques. In this blog post, we’ll explore the development of a monolithic project featuring 13 distinct scenes, demonstrating the power of composable rendering systems using React Three Fiber.

Overview of the Project

To construct this expansive project, several reusable and composable components were developed:

Key Systems Utilized

1. Deferred Rendering & Outlines
2. Composable Materials
3. Composable Particle System
4. Scene Transition System

Watch the demo here.

Concept Art and Team Collaboration

Concept Development

Kehan reached out to us with a vision, having engaged Lin to illustrate several scenes. Our team expanded to include talented freelancers passionate about bringing this project to life.

Lin’s illustrations inspired us to translate them into 3D with endless collaboration, resulting in a collection of over 50 shared references.

1. Deferred Rendering & Outlines

Colored Outlines

Creating colored outlines was vital for the art style. We explored three methods for implementing outlines:

• Edge detection based on depth and normals
• Inverse hull
• Edge detection based on material IDs

We chose the first method to maintain consistent outline thickness across varying camera distances.

Key Normals Implementation

To incorporate deferred rendering in Three.js, we configured WebGLRenderTarget to set a G-Buffer for storing normals. An effective memory optimization technique, octahedron normal vector encoding, allows the encoding of normals into fewer bits.

2. Composable Materials

Material Architecture

This project relies heavily on a GBufferMaterial component, a ShaderMaterial enhanced with useful uniforms and insertion points for modules to add shader code.

Example Code

javascript
uniform float uTime;
void main() {
vec2 st = vUv;
// insert