🍞 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
- Pass all the geomerty into XAtlas-Three (UV unwrapping library). This will generate a "UV2" attribute on the geometry.
- 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).
- These two texture are effectivly a 2D array of World Position & Normals covering the entire geomerty.
- 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