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

По умолчанию текстуры имеют режим обтекания "Зажим", что означает, что u или v больше 1 будут равны 1, а не оборачиваются обратно в 0.

Чтобы это исправить, вам нужно установить режим обтекания вашей текстуры на "Повторить", что происходит так:

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

Answer 2

Еще один трюк может заключаться в том, чтобы сделать что-то вроде fract(uv) и получить дробную часть. (это всегда будет в пределах 0-1)