Javascript WebGL多纹理立方体

我需要为立方体的每一面制作不同的纹理，除非单面制作有好处。这是我的顶点着色器：

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

片段着色器：

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

最后，每次我渲染此运行时：

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

---

它给我错误信息。当我稍微修改代码时（当我试图修复代码时），它们就不同了，所以我没有确切的错误消息。如果你需要多维数据集的不同数组，我可以发布它们。我一直在网上学习如何实现这一点（一般来说），但很明显，正如你所看到的那样，这并没有起作用。

最常用的方法是使用一个纹理，在立方体的每一面都有一个不同的面。将所有面放在一个纹理中，并使用纹理坐标为每个面选择纹理的右侧部分

---

优点是有1个纹理。设置1个纹理单元。1套制服。剩下更多的采样器用于其他事情（法线贴图等），一个运行更快的简单着色器。

如果您需要有关特定错误的帮助，需要发布错误