WebGLマルチテクスチャキューブ

Question

片面で効果を上げない限り、テクスチャが異なるキューブを各面にテクスチャ加工する必要があります。これは私の頂点シェーダです..

precision mediump float; 

attribute vec3 vertPosition; 
attribute vec2 vertTexCoord; 
attribute float aFace; 
uniform mat4 mWorld; 
uniform mat4 mView; 
uniform mat4 mProj; 

varying vec2 fragTexCoord; 
varying float vFace; 

void main() 
{ 
    fragTexCoord = vertTexCoord; 
    vFace = aFace; 
    gl_Position = mProj * mView * mWorld * vec4(vertPosition, 1.0); 
} 

フラグメントシェーダ：..私はレンダリングを開始する前に

precision mediump float; 

uniform sampler2D front; 
uniform sampler2D back; 
uniform sampler2D top; 
uniform sampler2D bottom; 
uniform sampler2D right; 
uniform sampler2D left; 

varying vec2 fragTexCoord; 
varying float vFace; 

void main() 
{ 
    if(vFace < 0.1) 
    gl_FragColor = texture2D(front, fragTexCoord); 
    else if(vFace < 1.1) 
    gl_FragColor = texture2D(back, fragTexCoord); 
    else if(vFace < 2.1) 
    gl_FragColor = texture2D(top, fragTexCoord); 
    else if(vFace < 3.1) 
    gl_FragColor = texture2D(bottom, fragTexCoord); 
    else if(vFace < 4.1) 
    gl_FragColor = texture2D(right, fragTexCoord); 
    else 
    gl_FragColor = texture2D(left, fragTexCoord); 
}totorials 

はその後、これが実行されます。 （変数がグローバルに定義されている）..

cubeVertexBufferObject = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBufferObject); 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW); 

cubeIndexBufferObject = gl.createBuffer(); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBufferObject); 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeIndices), gl.STATIC_DRAW); 

textureLookUpBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, textureLookUpBuffer); 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lookUpArray), gl.STATIC_DRAW); 

cubeVertexTextureCoordBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); 

positionAttributeLocation = gl.getAttribLocation(program, 'vertPosition'); 
gl.vertexAttribPointer(
    positionAttributeLocation, 
    3, 
    gl.FLOAT, 
    gl.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT, 
    0 
); 

texCoordAttributeLocation = gl.getAttribLocation(program, 'vertTexCoord'); 
gl.vertexAttribPointer(
    texCoordAttributeLocation, 
    2, 
    gl.FLOAT, 
    gl.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT, 
    3 * Float32Array.BYTES_PER_ELEMENT 
); 

textureLookUpAttribute = gl.getAttribLocation(program, "aFace"); 
gl.vertexAttribPointer(
    textureLookUpAttribute, 
    1, 
    gl.FLOAT, 
    false, 
    0, 
    0 
); 

faces.front = gl.getUniformLocation(program,"front"); 
faces.back = gl.getUniformLocation(program,"back"); 
faces.top = gl.getUniformLocation(program,"top"); 
faces.bottom = gl.getUniformLocation(program,"bottom"); 
faces.right = gl.getUniformLocation(program,"right"); 
faces.left = gl.getUniformLocation(program,"left"); 
// 
cubeMatWorldUniformLocation = gl.getUniformLocation(program, 'mWorld'); 
cubeMatViewUniformLocation = gl.getUniformLocation(program, 'mView'); 
cubeMatProjUniformLocation = gl.getUniformLocation(program, 'mProj'); 

worldMatrix = new Float32Array(16); 
viewMatrix = new Float32Array(16); 
projMatrix = new Float32Array(16); 

mat4.identity(worldMatrix); 
mat4.lookAt(viewMatrix, [0, 0, -8], [0, 0, 0], [0, 1, 0]); 
mat4.perspective(projMatrix, glMatrix.toRadian(45), Canvas.width/Canvas.height, 0.1, 1000.0); 

gl.uniformMatrix4fv(cubeMatWorldUniformLocation, gl.FALSE, worldMatrix); 
gl.uniformMatrix4fv(cubeMatViewUniformLocation, gl.FALSE, viewMatrix); 
gl.uniformMatrix4fv(cubeMatProjUniformLocation, gl.FALSE, projMatrix); 

は最後に、私はこれをレンダリングするたびに実行されます..

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); 
gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0); 

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBufferObject); 
gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0); 

gl.bindBuffer(gl.ARRAY_BUFFER, textureLookUpBuffer); 
gl.vertexAttribPointer(textureLookUpAttribute, 1, gl.FLOAT, false, 0, 0); 

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBufferObject); 

gl.activeTexture(gl.TEXTURE0); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.uniform1i(faces.front, 0); 

gl.activeTexture(gl.TEXTURE1); 
gl.bindTexture(gl.TEXTURE_2D, grass); 
gl.uniform1i(faces.back, 1); 

gl.activeTexture(gl.TEXTURE2); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.uniform1i(faces.top, 2); 

gl.activeTexture(gl.TEXTURE3); 
gl.bindTexture(gl.TEXTURE_2D, grass); 
gl.uniform1i(faces.bottom, 3); 

gl.activeTexture(gl.TEXTURE4); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.uniform1i(faces.right, 4); 

gl.activeTexture(gl.TEXTURE5); 
gl.bindTexture(gl.TEXTURE_2D, grass); 
gl.uniform1i(faces.left, 5); 

gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); 

それは私にエラーメッセージを提供します。彼らは私が正確なエラーメッセージを持っていないように、私はコードを少し変更したとき（私はそれを修正しようとしていたとき）異なる。あなたがキューブのために異なる配列を必要とするなら、私はそれらを掲示することができます。私はこれを行う方法（一般的には）についてオンラインチュートリアルを休んでいましたが、明らかにそれがうまくいかないことがわかるようになりました。

Answer 1

各面に異なる顔の立方体をテクスチャする最も一般的な方法は、texture atlasを使用することです。すべての面を1つのテクスチャに置き、テクスチャ座標を使用して各面のテクスチャの右部分を選択します。

See the bottom of this article

利点は1つのテクスチャがありますされています。 1テクスチャユニットをセットアップします。 1を均一に設定する。より多くのサンプラーが他のもののために残しました（通常のマップなど）。より速く走るシンプルなシェーダー。