threejs：如何使用自定义着色器渲染纹理，包​​括纹理 UV 偏移

Question

我想使用自定义着色器将纹理渲染到平面。这个纹理有一个“偏移”属性集，当我使用标准的threejs材料时它可以正常工作。但是，我无法弄清楚如何在我的自定义片段着色器中访问这些偏移量。它只是在整个平面上渲染整个纹理：

着色器：

<script id="vertex_shader" type="x-shader/x-vertex">
    varying vec2 vUv;

    void main() {
        vUv = uv;
        gl_Position = projectionMatrix *
            modelViewMatrix *
            vec4(position,1.0);
    }

    </script>

    <script id="fragment_shader" type="x-shader/x-fragment">

    uniform sampler2D texture1;
    varying vec2 vUv;

    void main()
    {
        gl_FragColor = texture2D(texture1, vUv); 
    }

    </script>

如果我能以某种方式说：

gl_FragColor = texture2D(texture1, vUv + texture1.offset); 

？也许那会奏效。但显然这会引发错误。

更新： 所以我将纹理偏移作为制服发送，并且有效。不知道为什么我没有想到。

Answer 1

如果我正确理解您的问题，那么答案应该是在片段着色器中添加和使用 uniform mat3 uvTransform; 制服。

在将纹理渲染到几何体上时，THREE 将查找并使用纹理转换（包括 texture1.offset）填充该制服。

您应该能够访问和提取提供给texture1.offset 的数据以抵消您的纹理采样，如下所示：

<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;

void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

</script>

<script id="fragment_shader" type="x-shader/x-fragment">

    // [UPDATE] The uv offset uniform we defined below
    uniform vec2 uvOffset;
    // [UPDATE] The texture uniform we defined below
    uniform sampler2D texture;

    varying vec2 vUv;

    void main()
    {
        // [UPDATE] Apply offset to texture lookup
        gl_FragColor = texture2D(texture, vUv + uvOffset); 
    }

</script>

然后，您将伴随上面的顶点和片段着色器，以及以下THREE.ShaderMaterial：

<script>
  var material = new THREE.ShaderMaterial({
  uniforms: THREE.UniformsUtils.merge([
    {
      //Declare texture uniform in shader
      texture: { type: 't', value: null }, 
      //Declare texture offset in shader
      uvOffset : { type : 'v', value : new THREE.Vector2(0,0) } 
    }
  ]),
  vertexShader: 
  document.getElementById('vertexshader').textContent,
  fragmentShader: 
  document.getElementById('fragmentshader').textContent
});

// Shader uniforms can be updated like so
material.uniforms.map.value = yourTexture;
material.uniforms.uvOffset.value = yourTextureOffsetVector2;
</script>