glsl - THREE.js 在着色器中重复包裹纹理

Question

我想在 THREE.js 着色器中重复包装纹理。

原始纹理图像为：

我希望它重复 4x4 次，如下所示：

但是使用以下代码，结果是：

顶点着色器：

varying vec2 vUv;

uniform float textRepeat;

void main()
{    
    // passing texture to fragment shader
    vUv = uv * textRepeat;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器：

varying vec2 vUv;

uniform sampler2D texture;

void main() {
    // add origianl texture
    gl_FragColor = texture2D(texture, vUv);
}

uniforms在一个 JavaScript 文件中，其中textureRepeat给出了需要重复的时间：

uniforms: {
    texture: {
        type: 't', 
        value: THREE.ImageUtils.loadTexture('image/box.jpg')
    },
    textRepeat: {
        type: 'f',
        value: 8
    }
}

谁能告诉我这里出了什么问题？

Answer 1

默认情况下，纹理具有“Clamp To Edge”环绕模式，这意味着超过 1 的 u 或 v 仍将是 1，而不是环绕回 0。

要解决此问题，您需要将纹理的环绕模式设置为“重复”，如下所示：

uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping

Answer 2

另一个技巧可能是执行 fract(uv) 之类的操作并获取小数部分。（它总是在 0-1 之内）