ThreeJS bad material render

Questions
1

I have created an object in Blender, applied textures and exported as GLB file. Then I have imported it into a ThreeJS scene through GLTFloader. However, the textures look rather different to those from blender (pic attached). The metal texture is the most worrying one. Despite the color of the material is good, it has some big strips of different color. Even in the BabylonJS sandbox the final GLB looks amazing.

What I am missing? Is it the problem with Blender exported or ThreeJS scene code? Would really appreciate your help.

Bad one (in HTML)

bad
bad1101×727 298 KB

Good (in Sandbox)

good
good764×525 270 KB

And of course, you can see that even carbon texture is not as good as in Blender. Is it the same issue or something different?

Code:
semiFin - Copy.html (9.1 KB)

2

If sRGBEncoding then need for diffuse textures use

texture.encoding=THREE.sRGBEncoding;
texture.needsUpdate=true;

or maybe into exporter can select srgb encoding

3

Thanks, it got a bit better. But the low-quality marks still remain. Is there a chance it looses quality or something?

4

I think yes. Because in three.js example of gltf loader all good.
Need to see. Maybe metall texture have metalness texture which too have srgb encoding, but for good result metalness texture must have default encoding. Can u load here gltf file.
I was have bad output then use effectcomposer but found mugen solution

image
image1317×600 46.5 KB

5

You use three.js version 116 there ACESFilmicToneMapping have number 5. But at version 142 it have number 4 and may have many differenrs of encoding. Use new version of all
image

6

The problem is that RoughnessMipmapper is only valid up to version 136. It does not exist in 142. If I try to move to 142 (with RoughnessMipmapper being on R116 let say), it create an error

7

I used last version

image
image978×152 5.5 KB

I add defines into three.js: CUBEUV_MAX_MIP, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT

image
image709×448 56.2 KB

image
image1046×146 9.35 KB

8

Cool. I guess switching to newer versions made model to look much better. However, I did not get the bit with CUBEUV definitions? I am using CND’s so cant really change source code. Can i define then within the script?

9

Need modify THREE.ShaderChunk["cube_uv_reflection_fragment"]

10

Right. I managed to do that, and there are results:

Before fix (with an error as below) it still looks brilliant:

image
image778×369 11.1 KB

b ← GOOD ONE

Then, solved error by
THREE.ShaderChunk[“cube_uv_reflection_fragment”] = cube_uv_reflection_fragment2; (which includes CUBEUV_… stuff). but the picture not as good as before.
a ← DARK AND UNCLEAR

Whats the case? I tried editing mipmap values from 0 to 40, but still bad.

11

Maybe THREE.ShaderChunk[“cube_uv_reflection_fragment”] not change material as need. I dont know