THREE.js在着色器中重复包装纹理 [英] THREE.js repeat wrapping texture in shader

问题描述

我想在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);
}

JavaScript文件中的

uniforms，其中textureRepeat给出了时间，需要重复:

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

有人可以告诉我这是怎么回事吗?

解决方案

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

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

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

I want to repeat wrapping texture in THREE.js shader.

The original texture image is:

I want it to repeat 4x4 times which will looks like:

But with the following code, it turns out to be:

Vertex shader:

varying vec2 vUv;

uniform float textRepeat;

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

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

Fragment shader:

varying vec2 vUv;

uniform sampler2D texture;

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

uniforms in a JavaScript file, in which textureRepeat gives the times need to be repeated:

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

Could anyone tell me what's going wrong here?

解决方案

By default, textures have "Clamp To Edge" wrapping mode, which means u or v over 1 will still be 1 instead of wrapping back to 0.

To fix this, you need to set the wrapping mode of your texture to "Repeat", which happens like this:

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

这篇关于THREE.js在着色器中重复包装纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！