LudoGL

LudoGL

LudoGL is a WebGL2-only renderer built from scratch for learning purposes. The renderer and its APIs are primarily inspired by Three.js and OGL.

Disclaimer

This library is a personal learning project focused on understanding deferred rendering and post-processing effects in WebGL2. It is not intended to be a production-ready or maintained rendering engine.

Important limitations to note:

• This is WebGL2-only with no fallbacks for unsupported extensions or older devices
• No scene graph implementation
• Limited WebGL feature detection and error handling
• Missing many common developer tools and utilities
• May not work on many devices/GPUs due to high requirements
• Some post-processing passes have been customized for the demo scene and may require modifications for general use

The goal is purely educational - to learn modern rendering techniques through implementation. This is not meant to be a lightweight alternative to established libraries like Three.js, OGL, Babylon.js, etc

Motivation

While reading articles about deferred rendering in AAA games, I came across this fascinating breakdown of Resident Evil’s rendering pipeline:

Behind the Pretty Frames: Resident Evil

Initially intimidated by such a complex rendering pipeline, I decided to challenge myself to implement it from scratch, step by step. This project represents my learning journey - combining knowledge from various tutorials, studying other implementations, and adapting techniques from more experienced developers.

The codebase borrows from various great resources and implementations I studied (thanks to all the original authors!).

Features

Rendering Pipeline

The renderer implements a modern deferred rendering pipeline with the following stages:

1. Environment Map Generation Pass

   • Creates three essential textures for image-based lighting (IBL):
     • Environment cube map (256x256 per face)
     • Diffuse irradiance cube map (64x64 per face)
     • BRDF LUT (256x256) for specular IBL
   • Uses a cube camera to capture the scene from six directions
   • Generates mipmaps for the specular environment map based on roughness levels

2. G-Buffer Pass

   • Stores geometry information in multiple render targets:
     • Albedo + metalness (RGBA8 - 8x4 = 32 bits)
     • View Normal + packed(roughness + shadow + bloom intensity) (RGBA16F - 16x4 = 64 bits)
     • Emissive + AO Baked (RGBA8 - 8x4 = 32 bits)
     • TAA velocity (RG16F - 16x2 = 32 bits)
     • Depth (DEPTH_COMPONENT24 - 24 bits)
   • Shadowmap (DEPTH_COMPONENT16 - 16 bits)

3. Lighting Pass

   • Processes all lights in the scene
   • Applies lighting calculations using the G-Buffer data

4. Post-Processing Effects The renderer includes several high-quality post-processing effects:

   • Temporal Anti-Aliasing (TAA)

     • Based on multiple industry-standard implementations:
       • Temporal Anti-Aliasing Tutorial
       • TAA Step by Step
       • TAA and the Quest for the Holy Trail
     • Uses Halton sequence for sub-pixel jittering
     • Implements velocity-based history reprojection
     • Includes clipping and anti-ghosting techniques

   • FXAA (Fast Approximate Anti-Aliasing)

     • Based on Three.js FXAA implementation
     • Fast and efficient post-process anti-aliasing
     • Minimal performance impact

   • GTAO (Ground Truth Ambient Occlusion)

     • Based on:
       • Asylum Tutorials GTAO
       • Three.js GTAO Pass
     • Includes color bounce for more realistic ambient lighting

   • TransparentForwardPass

     • Handles transparent objects like glass orbs
     • Includes blur pass for frosted glass effect
     • Properly handles depth testing with opaque geometry

   • Screen Space Reflections (SSR)

     • Based on:
       • Casual Effects
       • Will PGfx
       • Babylon.js SSR
       • Hi-Z Tracing Method
       • gkjohnson Three.js SSR Pass
     • Implements Hi-Z tracing for better performance (not used in this demo)
     • Includes blur pass for smooth reflections

   • Bloom

     • Based on:
       • John Chapman’s Pseudo Lens Flare
       • Postprocessing Bloom Effect
       • UE4 Custom Bloom
       • Screen Space Lens Flare
     • Implements lens flare and ghost effects
     • Includes starburst and gradient effects

   • Motion Blur

     • Based on:
       • Realism Effects Motion Blur
       • Motion Blur Implementation
     • Velocity-based motion blur using motion vectors
     • Tiled velocity buffer with neighbor max sampling for better performance

   • Output Pass

     • Barrel lens distortion
     • Sharpening
     • Vignette effect
     • ACES Filmic tone mapping
     • Color space conversion (Linear to sRGB)
     • Blue noise dithering

Getting Started

1. Clone the repository
2. Install dependencies:

   pnpm install
   

3. Start the development server:

   pnpm dev
   

Dependencies

• Vite for build tooling
• WebGL2 for rendering
• npm/pnpm/whatever for package management