Texture goes brighten when resize it

[aswwwcom]

Hi, experties

Now I’m making lod system with texture resizing. If obstacle is far then texture resolution goes low.

I made texture width, height resize like this.

This is my mesh to LOD function for gltf scene

export function meshToLod(scene: THREE.Scene, mesh: THREE.Object3D, globalMatrix: THREE.Matrix4) {
  if (mesh instanceof THREE.Group) {
    const lowGroup = mesh.clone();
    // console.log(lowGroup);
    lowGroup.traverse(async (child) => {
      const lod = new THREE.LOD();
      if (child instanceof THREE.Mesh) {
        const clonedChild = child.clone();

        clonedChild.position.set(0, 0, 0);
        clonedChild.rotation.set(0, 0, 0);
        clonedChild.scale.set(1, 1, 1);
        lod.addLevel(clonedChild.clone(), 5);

        const simplified = clonedChild;

        const modifier = new SimplifyModifier();

        simplified.material = new THREE.MeshPhongMaterial({
          color: child.material.color,
          alphaMap: child.material.alphaMap,
          transparent: true,
          opacity: child.material.opacity,
          side: child.material.side,
        });
        simplified.material.flatShading = true;

        if (
          (child.material instanceof THREE.MeshStandardMaterial || child.material instanceof THREE.MeshPhongMaterial) &&
          child.material.map
        ) {
          const cm = child.material.map;

          simplified.material.map = new CanvasTexture(
            cm.image,
            cm.mapping,
            cm.wrapS,
            cm.wrapT,
            cm.magFilter,
            cm.minFilter,
            cm.format,
            cm.type
          );

          createImageBitmap(simplified.material.map.image, {
            resizeWidth: 64,
            resizeHeight: 64,
            resizeQuality: 'low',
          }).then((res) => {
            simplified.material.map.image = res;
            simplified.material.needsUpdate = true;
          });
        }

        lod.addLevel(simplified, 12);
        console.log(clonedChild, simplified);

        lod.applyMatrix4(clonedChild.matrixWorld);

        scene.add(lod);
      }
    });
  }
}

The 1k texture goes 64 pixel. the resizing function works well but, I have a issue with output

In scene It looks brighter then before! I can’t under stand…

Any way I change my material to MeshPhongMaterial before this meshToLodfunction

this is before (1k image)

and this is after (64pixel image)

Can I get some help about it? should I adjust

[donmccurdy]

You may need to make sure the .encoding on both textures match. Probably:

simplified.material.map.encoding = THREE.sRGBEncoding;

[aswwwcom]

That was magic code. Thanks! I thought It is enough just setting this below

            const cm = child.material.map;

            simplified.material.map = new CanvasTexture(
              cm.image,
              cm.mapping,
              cm.wrapS,
              cm.wrapT,
              cm.magFilter,
              cm.minFilter,
              cm.format,
              cm.type

thanks!