# How to combine two uv transform matrices?

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

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.

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

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. Thank you Elias, I remeber your help on my other question before.

1 Like

`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 ?