three.js：使纹理在边界外为零

Question

目前three.js中有3种包装方式：

THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping

例子：

var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

我在着色器中使用纹理来进行 gpgpu 计算，出于我的目的，我希望纹理在其边界之外为零。例如，如果您使用 ClampToEdge，则在纹理边界之外查找值将产生边界内最近像素的颜色。在坐标 (1.3, .5) 处查找一个值将给出 (1., .5) 处的颜色，因为 1.3 对于纹理坐标来说太大了

所以我希望它在边界之外产生零，或者如果这不可能，我希望能够不断地将边缘设置为零。最好的方法是什么？

Answer 1

在您的着色器中检查纹理坐标

vec4 value = vec4(0);
if (texcoord.x >= 0. || texcoord.x <= 1. ||     
    texcoord.y >= 0. || texcoord.y <= 1.) 
  value = texture2D(someSampler, texcoord);
}