Lightmap not applying correctly

Questions
1

Hi all, im trying to set up my lightmap in three js. I can get it to display, but it appears to not be wrapping correctly. I’ve included a photo of the output.

Here is the code im using:


const loaderTexture = new THREE.TextureLoader();
const lightmapT = loaderTexture.load("3d/textures2/bakedtx.png");
lightmapT.flipY = true;

lightmapT.channel = 1;
lightmapT.encoding = THREE.sRGBEncoding;

loader.load("3d/test 2.glb", function (gltf) {
  scene.add(gltf.scene);
  gltf.scene.scale.set(1, 1, 1);
  gltf.scene.traverse(function (child) {
    console.log(child.name, "test");

    if (child.material) {
      child.material.lightMap = lightmapT;
      child.material.lightMapIntensity = 2;
    }
  });
});

Is it possible I exported it wrong from blender? ive attached a zip with full examples

image
image1284×862 72.8 KB

untitled.zip (292.5 KB)

  • List item
1 Like
2

When working with light maps - be sure to use r151 or newer, since it adds better support for multiple UV sets exported from Blender.

3

Any other ideas? That doesn’t seem to be the issue. I will be posting an example of it not working

4

Might need to set .flipY = false/true on the lightmap texture?

5

Need to use second uv for lightMap, aoMap etc.

6

Based on your code, it seems like you are exporting your lightmap correctly from Blender. The only thing I can think of is that the UVs for your lightmap are not wrapping correctly. To check this, you can try enabling UV visualization in Blender. If you see that the UVs for your lightmap are not wrapping around the model correctly, then you will need to adjust them.

Another possibility is that your lightmap is not loading correctly in three.js. To check this, you can try printing the lightmap to the console. If you see that the lightmap is not loaded correctly, then you can try reloading it or using a different loader.

Here is an example of how to print the lightmap to the console:

const loaderTexture = new THREE.TextureLoader();
const lightmapT = loaderTexture.load("3d/textures2/bakedtx.png");

loaderT.load("3d/test 2.glb", function (gltf) {
  scene.add(gltf.scene);
  gltf.scene.scale.set(1, 1, 1);
  gltf.scene.traverse(function (child) {
    console.log(child.name, "test");

    if (child.material) {
      child.material.lightMap = lightmapT;
      child.material.lightMapIntensity = 2;

      // Print the lightmap to the console
      console.log(child.material.lightMap);
    }
  });
});

If you are still having trouble getting your lightmap to work, then you can try posting a question on the three.js forum.

Example

Here is an example of how to enable UV visualization in Blender:

  1. Go to the Window menu and select Toggle System Console .
  2. In the system console, type the following command and press Enter:

bpy.ops.object.editmode_toggle() bpy.ops.uv.view_show()

  1. You should now see the UVs for your model in the viewport.

To check if the UVs for your lightmap are wrapping correctly, select the lightmap texture in the UV Editor and look at the UVs. The UVs should wrap around the model without any gaps or overlaps.

If the UVs for your lightmap are not wrapping correctly, you can adjust them by dragging them around in the UV Editor . You can also use the following tools to help you adjust the UVs:

  • Unwrap: This tool unwraps the UVs for your model and spreads them out onto a flat plane.
  • Project From View: This tool projects the UVs for your model from the current viewport view.
  • Scale: This tool scales the UVs for your model.
  • Rotate: This tool rotates the UVs for your model.

Once you are satisfied with the UVs for your lightmap, you can exit edit mode and save your fil

7

Hi, this is great advice. I sent the blender advice to my friend to see if it would help (hes the one creating the model), and in the meantime I set up a three js example in codepen.

I logged out the lightmap, and I do see it, I also flippedY (i even tried flipping X and alternating Y). But nothing I do seems to work. Do you think you could take a quick look at my provided example and find what i’m doing wrong? This problem has plagued me for a couple days, would love to find a solution.

1 Like
8

Is this the intended result:

image
image1033×578 84.7 KB

I have the following observation: the Three.js release is rather old, so some of the texture stuff might not be available (e.g. channels). Also, the uv and uv2 coordinates are different.

Here is the just light map based on uv coordinates (not uv2):

image
image948×520 28.7 KB

So, what I did is:

  • commented line 10 with flipY:
// lightmapT.flipY = true; // commented
  • added manual copy of uv2 into uv (from line 48)
if (child.material) {
   child.geometry.deleteAttribute( 'uv2' ); // added
   child.geometry.setAttribute( 'uv2', child.geometry.getAttribute('uv') ); // added
   child.material.lightMap = lightmapT;
   child.material.lightMapIntensity = 1;
}
1 Like
9

Hi, i’ve updated the scene but I can’t get it to work. I copied your code exactly and updated to a more recent version of three js (158).

Is it possible theres another step to be done, or is it more likely the issue is taking place with blender?

10

Hi,
Please try these changes:

script tag open
async src=“https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js”>
script tag close

script tag open
type=“importmap”>
{
“imports”:{
“three”:“https://unpkg.com/three@0.156.0/build/three.module.js”,
“three/addons/”:“UNPKG - three”
}
}
script tag close

import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

…

   // child.material.map = null;
   // child.geometry.deleteAttribute("uv2"); // added

I made these changes in Your codepen and…

lightmap2

I hope that made some help !

PS: script tag open is "<script " and script tag close is “<” and “/script>”

2 Likes
11

Something has changed (e.g. the model has changed UVs). Here is a modified version:

https://codepen.io/boytchev/full/ZEwRJxq

image

3 Likes
12

Thanks! that looks to be it. Thank you so much. How did you know the channel to use? I guess you just experimented between 0 and 1 and then toggled flipY? Strange, I thought I had 100% tried that combination.

13

I didn’t. It was just a random change until it worked. BTW once it worked, it worked for a combination of parameters that I’m sure I had already tested before … and had failed. So, there is still some mystery.

A more systematic approach would be for someone with sufficiently good skills in Blender and Three.js to advice how to define/export things from Blender, so that they show up well in Three.js. There were many threads in this forum about models from Blender that cannot be immediately rendered well in Three.js, because of incompatibilities of geometries, materials, lights, maps, etc.

1 Like