Question

我正在尝试对Three.js使用自定义着色器，以使单个纹理动画并扩展。这里的问题是，当我将vUv与某个数字相乘以使其扩展时，数字越大，绘制的结果显示的越小，这意味着它的工作与我的预期相反。例如，当我乘以0.1时，结果将变成10倍，而当我乘以10.0时，结果将变成10倍。

这是我的着色器代码（简化以使问题更清楚）：

//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() {

  // I want the result to be 10 times smaller than original, but it draws 10 times bigger than original
  mat2 newvUv = vUv * mat2(0.1, 0.0, 0.0, 0.1);
  gl_FragColor= texture2D(uTex, newvUv);

}

这是我的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);
        }
      );

我的代码有问题吗？还是three.js的问题？谢谢。

Answer 1

[...]当我将vUv与某个数字相乘以使其展开时，数字越大，结果画出现的越小[...]

当然，因为您缩放了查找的纹理坐标，但没有缩放纹理。
您想“缩小”纹理。纹理保持相同的大小，因此您必须将纹理像素置于“放大”位置。

使用比例因子的reciprocal：

float scale = 1.0/0.1; // reciprocal scale
mat2 newvUv = vUv * mat2(scale, 0.0, 0.0, scale);

在Three.js的自定义着色器中更改vUv比例的问题：要乘的数字越小，绘制的结果就越大

1 个答案: