pmndrs / react-three-lightmap

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

@react-three/lightmap

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

Example:

<Lightmap>
  <mesh position={[0, 0, 0]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[3, 3, 1]} />
    <meshStandardMaterial attach="material" color="#ff6080" />
  </mesh>

  <mesh position={[0, 0, 1.8]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
    <meshStandardMaterial attach="material" color="#4080ff" />
  </mesh>
</Lightmap>

Try it in this editable 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

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 by @unframework.

react-three-lightmap's Issues

Rewrite to work with React's Concurrent Suspense mode

Concurrent Suspense completely changes the approach to how state management would work while lightmap is being computed. Need to start rebuilding for that.

scene not rendered in latest react-three/fiber

The latest version of @react-three/fiber prevents rendering

Modified the example sandbox to demonstrate

Tried solving the issue locally. There seems to be 2 issues:

• sceneRef.current isn't receiving a value
• runWorkflow method gets called twice and errors in the withLightScene method (line 91)

Update to work with latest r3f (^6) and drei (^4)

Expectation

• react-three-lightmap works with most recent r3f (6.0.13) and drei (5.1.17)

Actual

• react-three-lightmap doesn't work if r3f is above version 5 and if drei is above version 3

Notes

• r3f dependency for react-three-lightmap is currently set to react-three-fiber (legacy?)
• Drei dependency for react-three-lightmap is set to a much older v3 (current is v5)

Example

• This CodeSandbox works as expected
• Changing the r3f dependency on the above sandbox to 6 or above causes things to stop working
• Changing the drei dependency on the above sandbox to 4 or above causes things to stop working

AutoUV does not unwrap the sphere geometry well

The unwrapped UV looks like the sphere is projected directly onto a plane

Non react project

How would i use react-three-lightmap with a non react project

Question: What is the internal basis of the "generatePixelAreaLookup" function

I have been reading the source code of this repo recently and have some questions about the function used to generate probePixelAreaLookup data. What is the internal basis of the generatePixelAreaLookup function?

export function generatePixelAreaLookup(probeTargetSize: number) {
  const probePixelCount = probeTargetSize * probeTargetSize;
  const lookup = new Array(probePixelCount) as number[];

  const probePixelBias = 0.5 / probeTargetSize;

  for (let py = 0; py < probeTargetSize; py += 1) {
    // compute offset from center (with a bias for target pixel size)
    const dy = py / probeTargetSize - 0.5 + probePixelBias;

    for (let px = 0; px < probeTargetSize; px += 1) {
      // compute offset from center (with a bias for target pixel size)
      const dx = px / probeTargetSize - 0.5 + probePixelBias;

      // compute multiplier as affected by inclination of corresponding ray
      const span = Math.hypot(dx * 2, dy * 2);
      const hypo = Math.hypot(span, 1);
      const area = 1 / hypo;

      lookup[py * probeTargetSize + px] = area;
    }
  }

  return lookup;
}

Is there any calculation basis?