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套制服。更多采样器留给其他东西（法线贴图等）。运行速度更快的简单着色器。