问题描述

Webgl画6个颜色不同的面的正方体

学WebGL的时候照着书上打了一段代码，结果发现运行到网页上只有背景颜色，没有正方体，看控制台也没有错误信息输出，实在是不知道哪里错了...
js的代码
var VSHADER_SOURCE=
'attribute vec4 a_Position;n'+
'attribute vec4 a_Color;n'+
'uniform mat4 u_MvpMatrix;n'+
'varying vec4 v_Color;n'+
'void main(){n'+
' gl_Position=u_MvpMatrix*a_Position;n'+
' v_Color=a_Color;n'+
'}n';

var FSHADER_SOURCE=
'#ifdef GL_ESn'+
'precision mediump float;n'+
'#endifn'+
'varying vec4 v_Color;n'+
'void main(){n'+
' gl_FragColor=v_Color;n'+
'}n';

function main(){

var canvas =document.getElementById('webgl');
var gl=getWebGLContext(canvas);
if(!gl){
 console.log('Failed to get the rendering context for WebGL');
return;

}

// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}

// Set the vertex information
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
return;
}
// Set the clear color and enable the depth test
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

var u_MvpMatrix=gl.getUniformLocation(gl.program,'u_MvpMatrix');
if(!u_MvpMatrix){
console.log('fail to get the storage Location of u_MvpMatrix');
return ;
}

var mvpMatrix=new Matrix4();
mvpMatrix.setPerspective(30,1,1,100);//设置透明投影可视空间
mvpMatrix.lookAt(3,3,7,0,0,0,1,0);//创建视图矩阵
//传递数据
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);

gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

gl.drawElements(gl.TRIANGLES,n,gl.UNSIGNED_BYTE,0);
console.log(''+n);
}

function initVertexBuffers(gl) {
// Create a cube
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
//创建方式创建6个面，对每个面的顶点指定相同的颜色
var vertices = new Float32Array([ // Vertex coordinates
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
-1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back
]);

var colors = new Float32Array([ // Colors
0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)
0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)
1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)
1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down
0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back
]);

//通过索引找到对应点位,这种方式好像只是为了减小画的点个数
var indices = new Uint8Array([ // Indices of the vertices
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9,10, 8,10,11, // up
12,13,14, 12,14,15, // left
16,17,18, 16,18,19, // down
20,21,22, 20,22,23 // back
]);

var indexBuffer=gl.createBuffer();
if(!indexBuffer)
return -1;

if(!initArrayBuffer(gl,vertices,3,gl.FLOAT,'a_Position'))
{
return -1;
}

if(!initArrayBuffer(gl,colors,3,gl.FLOAT,'a_Color')){
return -1;
}

//将索引写入缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);

return indices.length;
}

//定义缓冲区对象的创建，绑定，数据写入，开启等操作
function initArrayBuffer(gl,data,num,type,attribute){
var buffer=gl.createBuffer();
if(!buffer){
console.log('fail to create a buffer');
return false;
}

gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
// Assign the buffer object to the attribute variable

var a_attribute = gl.getAttribLocation(gl.program, attribute);
if (a_attribute < 0) {
console.log('Failed to get the storage location of ' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
// Enable the assignment of the buffer object to the attribute variable
gl.enableVertexAttribArray(a_attribute);

return true;
}

html的代码
<!DOCTYPE html>

Draw cube with specification of face color

Please use a browser that supports "canvas"

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="ColoredCube.js"></script>

希望哪位前辈有时间的帮我看看哪里出错了...谢谢了