ORM texture doesn't work properly

Questions
1

Hello everybody,

I have a .glb file
Mac_KTX2.glb (869.7 KB)
with 3 embedded KTX2 textures (normal, color and ORM).
Everything works properly, but when I try to load textures manually and map the ORM texture to roughnessMap, metalnessMap and AoMap respectively, the result isn’t right.

Any thoughts?
Thanks in advance!

2

Please share details. How are you loading the textures, mapping them, and in what way is the result not right?

3

I am using the KTX2 loader

        this.KTX2Loader = new KTX2Loader()
        this.KTX2Loader.setTranscoderPath('/basis/')
        this.KTX2Loader.detectSupport( this.renderer )

and then I create a PBR material

        this.macPBRmaterial = new THREE.MeshStandardMaterial({
            map: this.macColor,
            roughnessMap: this.macORM,
            aoMap: this.macORM,
            metalnessMap: this.macORM,
            normalMap: this.macNormal,
            envMap: this.envMapTexture,
        })

and this is the result:

image
image727×367 35.4 KB

EDIT Same thing happens with png textures and the texture loader

4

The code above looks fine. Textures have settings, which GLTFLoader configures for you but which you need to know about if assigning them yourself. For PNG and JPEG textures, use texture.flipY = false. For all textures, you need to assign the correct colorspace, wrapS, wrapT, minFilter, magFilter, etc.

5

@donmccurdy I think he was asking specifically why the ORM texture isn’t working. Is it that easy? Just assign a multi-channel texture (a single image with ao, roughness, and metalness values all in one) and it simply works? I couldn’t find a mention of this in the docs, but maybe I don’t know how to search for it.

EDIT: Upon further investigation, it looks like separate Texture instances need to be created, but they can all share the same Image, so ImageLoader should first be used to get the image and then the textures created with that same Image instance. Then for each texture instance, set the .channel property to define which channel will be accessed for each pixel of Image.

6

It’s fine to use a single THREE.Texture instance for ORM. The .channel property sets the UV channel, not the RGBA channel. In three.js the .aoMap / .roughnessMap / .metalnessMap textures use the corresponding RGB channels by default, you don’t have to configure that.

The other configuration you might need would be colorSpace=NoColorSpace (default), .flipY=false (depending on UV mapping. use flip=false for glTF files.), and setting .aoMapIntensity/.roughness/.metalness all to 1.0 so that the texture takes full effect. Nothing unique to ORM textures though, these would apply for other non-color data textures too.

1 Like