Glsl 几何体缺乏深度

使用WebGL+GLSL，我尝试使用以下顶点索引渲染棱镜：

不过，到目前为止，我还没能用它来渲染棱柱体——我得到的是一个三角形平面：

var画布，
德国劳埃德船级社，
财政司司长，
vs，
GLP计划，
顶点缓冲区，
vertexIndexBuffer，
颜色缓冲区，
位置VAL，
科洛瓦尔，
mvMatrix=mat4.create（），
pMatrix=mat4.create（），
角度=0.01；
函数initWebgl（）{
canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
试一试{
gl=canvas.getContext（'webgl'）
总帐启用（总帐深度测试）
总图清除（总图颜色缓冲区位总图深度缓冲区位）
}捕捉（错误）{
警报（'您的浏览器不支持Webgl'）
返回；
}
//设置默认背景色
gl.clearColor（0.9,0.9,0.9,1.0）
总账清除（总账颜色\u缓冲\u位）
}
函数initCamera（）{
//设置相机区域、视野、近距离剪辑、远距离剪辑和平移
总图视口（0，0，canvas.width，canvas.height）
mat4.透视图（45，canvas.width/canvas.height，0.1100，pMatrix）；
mat4.恒等式（mvMatrix）；
翻译（mvMatrix，[0,0，-2.0]）；
}
函数initShaders（）{
vs=构建着色器（“#着色器vs”，gl.VERTEX_着色器）
fs=buildShader（“#着色器fs”，gl.FRAGMENT_着色器）
}
函数buildShader（选择器，类型）{
var src=document.querySelector（selector.innerHTML）；
var shader=gl.createShader（类型）
gl.shaderSource（着色器，src）
gl.compileShader（着色器）
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
console.warn（'Shader error'，选择器，gl.getShaderInfoLog（Shader））
}
返回着色器；
}
函数initProgram（）{
glProgram=gl.createProgram（）
总帐附加shader（总帐计划，vs）
总帐附加shader（总帐计划，财政司司长）
总账链接程序（glProgram）
if（！gl.getProgramParameter（glProgram，gl.LINK_状态））{
console.warn（'程序链接错误'）
}
gl.useProgram（glProgram）
}
函数updatePositions（）{
mat4.标识（mvMatrix）
翻译（mvMatrix，[-1.0，-1.0，-7.0]）
mat4.旋转（mvMatrix，角度[0.0,1.0,0.0]）
角度+=0.01；
}
函数getBuffers（）{
//顶点缓冲区
var vertexData=新的Float32Array([
//正面
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0, 0.5, 0.0,
//背
-0.5, -0.5, 5,
0.5, -0.5, 5,
0, 0.5, 5,
])
vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（vertexData）、gl.STATIC\u DRAW）
//顶点索引缓冲区-创建棱柱
var vertexIndices=新UINT16阵列([
//正面
0, 1, 2,
//对
1, 2, 4,
2, 4, 5,
//背
3, 4, 5,
//左
2, 3, 5,
0, 2, 3,
//底部
0, 1, 3,
1, 3, 4,
])
vertexIndexBuffer=gl.createBuffer（）
顶点索引xBuffer.number\u vertex\u points=顶点索引.length；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，vertexIndexBuffer）
总账缓冲数据（总账元素\数组\缓冲区、顶点索引、总账静态\绘图）
//颜色缓冲区
colorVal=colorVal | | 0.5；
colorVal+=0.01；
var colorData=新的Float32Array([
Math.sin（colorVal）+1，Math.cos（colorVal）+1，1，
1，数学sin（colorVal）+1，0，
cos（colorVal）+1,1,0，
Math.sin（colorVal）+1，Math.cos（colorVal）+1，1，
1，数学sin（colorVal）+1，0，
cos（colorVal）+1,1,0，
])
colorBuffer=gl.createBuffer（）
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）
gl.bufferData（gl.ARRAY\u BUFFER、colorData、gl.DYNAMIC\u DRAW）
}
函数drawBuffers（）{
//识别和绑定顶点位置属性
var aVertexPosition=gl.getAttributeLocation（glProgram，“aVertexPosition”）
gl.EnableVertexAttributeArray（默认值）
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，vertexIndexBuffer）
gl.VertexAttributePointer（1，3，gl.FLOAT，false，0.0，0.0）
//识别和绑定顶点颜色属性
var aVertexColor=gl.getAttribLocation（glProgram，'aVertexColor'）
gl.EnableVertexAttributeArray（颜色）
gl.bindBuffer（gl.ARRAY\u BUFFER，colorBuffer）
gl.VertexAttributePointer（aVertexColor，3，gl.FLOAT，false，0.0，0.0）
//绘制数据
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，vertexIndexBuffer）
总图抽屉元件（总图三角形、顶点索引缓冲区、编号、顶点点、，
gl.无符号（短，0）
}
函数getMatrixUniforms（）{
glProgram.pMatrixUniform=gl.getUniformLocation（glProgram，'uPMatrix'）
glProgram.mvMatrixUniform=gl.getUniformLocation（glProgram，“uMVMatrix”）
}
函数setMatrixUniforms（）{
gl.uniformMatrix4fv（glProgram.pMatrixUniform，false，pMatrix）
gl.uniformMatrix4fv（glProgram.mvMatrixUniform，false，mvMatrix）
}
函数render（）{
更新位置（）
getBuffers（）
drawBuffers（）
setMatrixUniforms（）
requestAnimationFrame（渲染、画布）
}
initWebgl（）
initCamera（）
initShaders（）
initProgram（）
getMatrixUniforms（）
render（）

*{
保证金：0；
填充：0；
}
正文，html{
身高：100%；
宽度：100%；
溢出：隐藏；
背景：天蓝色；
}

属性向量3；
属性向量3；颜色；
均匀mat4-uMVMatrix；
一致mat4上矩阵；
可变高分辨率vec4彩色；
void main（）{
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
vColor=vec4（aVertexColor，1.0）；
}
可变高分辨率vec4彩色；
void main（）{
gl_FragColor=vColor；
}

哎呀，我正在将vertexIndexBuffer传递给着色器以指定位置属性，但我应该传递vertexBuffer以指定位置属性。这是预期的结果：

var画布，
德国劳埃德船级社，
财政司司长，
vs，
GLP计划，
顶点缓冲区，
vertexIndexBuffer，
颜色缓冲区，
位置VAL，
科洛瓦尔，
mvMatrix=mat4.create（），
pMatrix=mat4.create（），
角度=0.01；
函数initWebgl（）{
canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
试一试{
gl=罐