🍞 Three Lightmap Baker

Basic example of lightmapping in ThreeJS

✨ Big Thanks for Three Mesh BVH, Three GPU Pathtracer & XAtlas-Three for been excellent libraries ✨

Live Demo

Todo

• Progressive renderer
• Convert to an API
• NPM Package
• Add denoiser options
• High casts can cause the WebGL context to timeout
• Import & Export models & lightmaps
• Bounce lighting
• Albedo & Emissive textures
• Only denoise indirect light & AO
• Denoise offline (using Optix)
• Try import/use more GPU Pathtracer logic
• Multiple lights, light types, light colour
• Downscaling
• Seperate AO map
• Generate & export light probes

Examples

How it works

1. Pass all the geomerty into XAtlas-Three (UV unwrapping library). This will generate a "UV2" attribute on the geometry.
2. Render the geomerties vericies in the UV2 space. Create two textures (resolution being the lightmap resolution), using the gl_FragColor to encode world position and the normal. This is packing Vec3 data into a texture using the RGB channel.

Visual reference: Using these textures as the lightmap (using UV2).

3. These two texture are effectivly a 2D array of World Position & Normals covering the entire geomerty.
4. Itterate through each World Position & Normal. Cast rays at each position to calculate incoming light.

Visual reference: Creating arrows for each world positon & the normal

5. The Three Mesh BVH library helps improve the performance of raycasting, it also allows raycasting on the GPU (this is super fast). 6. Using A LOT of copy & pasted code from Three GPU Pathtracer to generate light

Further Reading / Watching

• I made a better Ray-Tracing engine
• High level overview of a lightmapping generation process
• Baking artifact-free lightmaps on the GPU
• Radiosity Baker
• Lightmapping in Anomaly 2 mobile

Credit

• Level Blockout Model - DJMaesen