Currently, I am experimenting with a custom shader in three.js to create an animated and expanding texture. However, I have encountered an issue where multiplying vUv by a certain number results in unexpected behavior. Strangely, when the number is increased, the size of the painted result decreases instead of expanding as intended. For instance, multiplying by 0.1 makes the result appear 10 times larger, while multiplying by 10.0 makes it 10 times smaller.
Below are snippets of my shader code for better clarity:
//vertex shader
varying vec2 vUv;
uniform float uFixAspect;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
precision mediump float;
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;
uniform sampler2D uTex;
void main() {
// Despite wanting the result to be 10 times smaller than the original, it appears 10 times larger
mat2 newvUv = vUv * mat2(0.1, 0.0, 0.0, 0.1);
gl_FragColor= texture2D(uTex, newvUv);
}
This snippet showcases my implementation in three.js:
const loader = new THREE.TextureLoader();
loader.load(
"./assets/textures/tex.png",
tex => {
const geo = new THREE.PlaneGeometry(2, 2);
const mat = new THREE.ShaderMaterial({
uniforms: {
uTex: {
value: tex
},
time: {
type: "f",
value: 0.1
},
resolution: {
type: "vec2",
value: new THREE.Vector2(512, 512)
}
},
vertexShader: vert,
fragmentShader: frag,
});
const shaderObj = new THREE.Mesh(
geo,
mat
);
marker.add(shaderObj);
}
);
I am unsure if there is an error in my code or if this discrepancy is related to three.js itself. Your insights would be greatly appreciated. Thank you.