threejs:如何使用自定义着色器渲染纹理,包括纹理 UV 偏移
threejs: how to render a texture with custom shaders INCLUDING the textures UV offsets
我想使用自定义着色器将纹理渲染到平面上。这个纹理有一个 '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);
?也许那会奏效。但显然这会引发错误。
更新:
所以我将纹理偏移量作为制服发送进来并且有效。不知道为什么我没想到。
如果我对你的问题的理解正确,那么答案应该是向你的片段着色器添加和使用 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>
我想使用自定义着色器将纹理渲染到平面上。这个纹理有一个 '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);
?也许那会奏效。但显然这会引发错误。
更新: 所以我将纹理偏移量作为制服发送进来并且有效。不知道为什么我没想到。
如果我对你的问题的理解正确,那么答案应该是向你的片段着色器添加和使用 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>