https://github.com/pmndrs/react-three-lightmap

In-browser lightmap/AO baker for react-three-fiber and ThreeJS
https://github.com/pmndrs/react-three-lightmap

ambient-occlusion ao ao-baker lightmap lightmap-baker r3f react react-three-fiber threejs

Last synced: about 13 hours ago
JSON representation

In-browser lightmap/AO baker for react-three-fiber and ThreeJS

• Host: GitHub
• URL: https://github.com/pmndrs/react-three-lightmap
• Owner: pmndrs
• License: mit
• Created: 2021-02-08T11:11:43.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-25T06:15:34.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T15:32:10.471Z (about 2 months ago)
• Topics: ambient-occlusion, ao, ao-baker, lightmap, lightmap-baker, r3f, react, react-three-fiber, threejs
• Language: TypeScript
• Homepage:
• Size: 669 KB
• Stars: 131
• Watchers: 9
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-three-fiber - react-three-lightmap

README

        
# @react-three/lightmap

**In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS.**

![example screenshot of lightmap baker output](./react-three-lightmap-example.png)

Example:

```jsx

  

    

    

  

  

    

    

  

```

**[Try it in this editable sandbox](https://codesandbox.io/s/github/pmndrs/react-three-lightmap/tree/v0.0.8/demo-sandbox)**.

NOTE: actual lightmap rendering is performed on a separate hidden canvas and WebGL context. If you are consuming any context in your lightmapped content, you will need to "bridge" that context.

To track when baking is complete, provide `onComplete` callback to `Lightmap` - it will be called with the resulting texture as the first argument. The library does automatically assign that texture as the lightmap on all the baked mesh materials too.

## Local Development

```sh

git clone [email protected]:pmndrs/react-three-lightmap.git

cd react-three-lightmap

yarn

yarn storybook

```

## Wishlist

- ~~onComplete callback~~

- proper denoising, calibrate the light sampler

- much more optimization

- composited multi-layer lightmap based on several distinct groups of light sources

  - e.g. for individual flickering lights, neon signs, etc

- rudimentary light probe support for dynamic meshes/sprites

  - can start with just omnidirectional total amounts collected in 2D grid textures

  - might want the light probe pattern to be customizable

- bake-only lights (turned off after bake)

  - useful for game levels - e.g. could have hundreds of lights baked in and then discarded

  - currently the lightmap is indirect-only, so this needs an extra step to sample direct light contribution

- saving/loading the generated lightmap texture (useful for game levels)

## Notes

Based on [original experimental implementation](https://github.com/unframework/threejs-lightmap-baker) by [@unframework](https://github.com/unframework).