5

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);
}

uniformsJavaScriptファイルでtextureRepeatは、時間を繰り返す必要があります。

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

誰かがここで何が悪いのか教えてもらえますか？

4

2 に答える 2

11

デフォルトでは、テクスチャには「Clamp To Edge」ラッピング モードがあります。つまり、1 を超える u または v は 0 に戻るのではなく 1 のままです。

これを修正するには、テクスチャのラッピング モードを「繰り返し」に設定する必要があります。これは次のようになります。

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

于 2013-03-06T07:23:25.763 に答える
1

追加のトリックの 1 つは、fract(uv) などを実行して小数部分を取得することです。(常に 0 ～ 1 の範囲内になります)

于 2014-06-26T18:42:44.713 に答える