Change UVs in the shader, three.js v151+

Questions
, , ,
1

Hello everyone,

I’m currently working with three.js version v156 and I’m facing a challenge in changing UVs for a given image from within the shader.

In previous versions, such as before v151, the aoMap utilized the second UV set, but now it’s using the first one. In the Shader Chunk “aomap_fragment.glsl.js”, the reference to vUv2 has been replaced with vAoMapUv, thus requiring the material property channel to be set to 1 instead of 0.

What I’m attempting to achieve is to blend two maps, where one uses the first UV set and the other uses the second UV set. Previously, I was able to accomplish this using vUv and vUv2. Could someone assist in how to achieve this with the updated changes?

Thank you!

1 Like
3

You can use:

https://ycw.github.io/three-shaderlib-skim/dist/#/latest/basic/vertex

To see the unrolled source code for the built in materials to determine which chunks / where you need to inject your changes to achieve the effect you want.

once you’ve identified what you need to change, you can use material.onBeforeCompile to hack the shader for a given material before it’s compiled, and inject your own functionality.

4

" * aoMap and lightMap no longer use uv2. Set material.lightMap.channel to 0 for uv and 1 for uv2. Consequently, the uv2_* shader chunks have been removed."

You juste have to specify to your material which uvMap must be used by aoMap and lihgtMap
myStandardMaterial.aoMap.channel = 1