3

カスタム3Dシェイプでテクスチャをレンダリングするのに問題があります。

次のパラメータを使用します。

gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);

それは私にこの結果を与えます：

結果

次のパラメータを変更します。

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

それは私にこれを与えます：

result2

そしてこれらのパラメータで：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

result3

テクスチャの座標を変更しようとしましたが、ここで各面に使用されたものは成功しませんでした。 0.0, 0.0, 0.0, 10.0, 10.0, 10.0, 10.0, 0.0

1つの三角形（実際には平行な面にある2つの三角形）が奇妙に動作する理由はありますか？

4

1 に答える 1

1

問題は、さまざまな量のポイントを持つ面を使用していることですが、面には固定数 (4) のテクスチャ座標を使用しています。一部の面には 5 つのポイントがあるため、ある時点でテクスチャ座標が「シフト」されます。

代わりに、頂点と同じように追加する必要があります。

for (var j=0; j < face.length; j++){
    vertices...

     //generate texture coords, they could also be stored like the points
     textureCoords.push(points[face[j]][0] / 4);
     textureCoords.push((points[face[j]][1]+points[face[j]][2]) / 4);

http://jsfiddle.net/bNTkK/9/

于 2013-04-25T17:57:48.703 に答える