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套制服。更多采樣器留給其他東西（法線貼圖等）。運行速度更快的簡單着色器。