Three.js: DRACOLoader: Incorrect UVs in r108

[kevor]

Description of the problem

After updtating from r107 to r108 I'm not able anymore to import correctly the same .drc file.
I think has something to do with the UV

All the code is the same except for

const dracoLoader: DRACOLoader = new DRACOLoader();
dracoLoader.setDecoderPath(EnvConfig.GetStaticFilesBaseUrl() + "draco/");
dracoLoader.setDecoderConfig({ type: "js" });

instead of

const dracoLoader: DRACOLoader = new DRACOLoader();
DRACOLoader.setDecoderPath(EnvConfig.GetStaticFilesBaseUrl() + "draco/");
DRACOLoader.setDecoderConfig({ type: "js" });

due to functions no static anymore.

Using TypeScript

r107:

r108:

Three.js version

• [ ] Dev
• [x] r108

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

Can you please share the mentioned drc file?

[kevor]

Can you please share the mentioned drc file?

Hi,
thanks for replying, I sent you an email with the .drc

[Mugen87]

Indeed, the uv data are messed up. With R107 texture coordinates were in the range [0,1]. With R108 the values are in a much bigger range.

The last release added web worker support for DRACOLoader. Could be a regression...

[Mugen87]

I'll redirect your mail to @donmccurdy. He made the latest changes to the loader.

[kevor]

Ok, thanks for your support @Mugen87 .
For now I'll stick to r107 👍

[donmccurdy]

The rewrite for r108 doesn't include dequantization, as I wasn't able to figure out how/if that was being used. I haven't checked the specific file yet, but am guessing that's what's missing here.

@kevor Would you be able to share more of the code used to render this model? Are you patching the material to handle dequantization, like this?

https://github.com/google/draco/blob/dd5aaf0ae4d6fc7dcf1809aafe3c58bf7940f1f9/javascript/example/webgl_loader_draco_advanced.html#L204-L220

If you weren't doing that in r107 and it worked, then certainly don't bother with it now. But it would be helpful for me to know if you were, or if there's other processing of the file after loading.

[donmccurdy]

In the meantime you can also upgrade to r108 while using a copy of DRACOLoader from r107.

[kevor]

The rewrite for r108 doesn't include dequantization, as I wasn't able to figure out how/if that was being used. I haven't checked the specific file yet, but am guessing that's what's missing here.

@kevor Would you be able to share more of the code used to render this model? Are you patching the material to handle dequantization, like this?

https://github.com/google/draco/blob/dd5aaf0ae4d6fc7dcf1809aafe3c58bf7940f1f9/javascript/example/webgl_loader_draco_advanced.html#L204-L220

If you weren't doing that in r107 and it worked, then certainly don't bother with it now. But it would be helpful for me to know if you were, or if there's other processing of the file after loading.

Hi @donmccurdy , Nothing like in the example you linked.
Inside the dracoLoader.load( geometry => { ... } ) I simply create a MeshStandardMaterial with the following maps: map, normalMap, aoMap, roughnessMap, metalnessMap. All the textures except for the aoMap are with .repeat = (2, 2) and obviously the .wrapS = .wrapT = RepeatWrapping. In order to use the aoMap I also clone the uv1 to uv2 because the .obj from where the .drc came out didn’t support a second uv map. Other parameters of the standardMaterial that I use are: normalMapScale, envMap, envMapIntensity and color. After that I create a Mesh with the geometry and the standardMaterial.

Sorry for not pasting code, but I can’t access the project files at the moment. I’ll do it tomorrow!

[kevor]

Here the code I use to load the model

        dracoLoader.load(EnvConfig.GetStaticFilesBaseUrl() + "models/KAO_2.drc", ( geometry ) => {
          geometry.computeVertexNormals();

          //Cloning uv in uv2
          const uvs2: any = geometry.attributes.uv.array;
          geometry.addAttribute( "uv2", new BufferAttribute( uvs2, 2 ) );

          const mat: MeshStandardMaterial = new MeshStandardMaterial();

          mat.setValues(
            {
              aoMap: material.aoMap.val,
              aoMapIntensity: material.aoMap.intensity,
              normalMap: material.normalMap.val,
              normalScale: material.normalMap.intensity,
              map: material.diffuseMap.val,
              metalnessMap: material.metalRoughnessMap.val,
              roughnessMap: material.metalRoughnessMap.val,
              color: new Color(0xffffff),
              envMap: pmremCubeUVPacker.CubeUVRenderTarget.texture,
              envMapIntensity: 1,
              side: DoubleSide
            }
          );

          const mesh: Mesh = new Mesh( geometry, mat );
          mesh.castShadow = true;
          mesh.receiveShadow = true;
          mesh.scale.multiplyScalar(0.01);

          //Adding mesh to scene
          this.sceneManager.getScene().add( mesh );

        } );

[donmccurdy]

Thanks – that all looks OK. I'll have to debug further what's going on here.

[donmccurdy]

Opened PR for a fix: https://github.com/mrdoob/three.js/pull/17501.