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

Question

我想使用自定义着色器将纹理渲染到平面上。这个纹理有一个 'offset' 属性集，当我使用标准的 threejs material 时它可以正常工作。但是，我不知道如何在我的自定义片段着色器中访问这些偏移量。它只是在整个平面上渲染整个纹理：

着色器：

<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>

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

threejs: how to render a texture with custom shaders INCLUDING the textures UV offsets

three.js

shader

uv-mapping

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

threejs: how to render a texture with custom shaders INCLUDING the textures UV offsets

three.js

shader

uv-mapping

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