How to combine two uv transform matrices?

Questions
,
1

Hi,
My material has a uvTransform matrix include translation and rotation made by other software, and the repeat\rotation\offset will be changed by users based on my modification. I’m not using uvTransform matix or map.repeat which Three.js made for me because my textures are reused.
Now I’m using this in uv_vert.glsl:

vUv = (userUvTransform * vec3(uv, 1)).xy;
vUv = (myUvTransform * vec3(vUv, 1)).xy;

Before I allow users to modify offset, it works fine as it’s a matrix multipliction of TR(myUvTransform)*RS(userUvTransform).
But now users can modify offset too according to PM’s demand, I think this can’t work as it is TR*TRS.
Should I make a tanslation matrix separately and multiply them by T*TR*RS?
like this:

vUv = (userUvTransform * vec3(uv, 1)).xy;
vUv = (myUvTransform * vec3(vUv, 1)).xy;
vUv = (translationUvTransform * vec3(vUv, 1)).xy;

Or should I detach repeat\offset information from myUvTransform and make a new matrix with user’s modification? If that, how to detach them?
Thanks.

1 Like
2

To solve this problem temporarily, I add a vec2 uniform uvTranslation and add it to vUv after applying matrices. I think I will have to detach informations when myUvTransform contains scaling data. At least the result is right now. Looking forward to a better solution.

3

Isn’t it much better to combine the transforms into one in JavaScript, and just do:

vUv = (combinedUvTransform * vec3(uv, 1)).xy;

in the shader? To construct the combined transform (including scale, rotation and translation), you could use methods of THREE.Matrix3. Hm, actually only Matrix3.setUvTransform is available, but I suppose you can multiply two matrices constructed with that method.

1 Like
4

Yes, actually it’s the last paragraph in my question. I know setUvTransform and I get userUvtransform by it. myUvTransform is a matrix given by others however, I want to know how to detach information from a given transform matrix in JavaScript. :hugs:Thank you Elias, I remeber your help on my other question before.

1 Like
5

Matrix4 has many more methods than Matrix3. The policy is that functionality is strictly limited to graphics use cases. (E.g. My suggestion of introducing Matrix4.add was rejected, since most uses of Matrix4 are for homogeneous transforms, where addition makes little sense.)

I suspect the (relatively) new texture matrix functionality may warrant introducing some more helpers into Matrix3 too. What do you think, @Mugen87 ?