三个js：如何使用自定义着色器渲染纹理包括纹理UV偏移

Question

我想使用自定义着色器将纹理渲染到平面。这个纹理有一个'offset'属性集，当我使用标准的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>