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;制服。

在将纹理渲染到几何图形时，三个将使用纹理转换（包括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>