WebGL的缓冲器值不工作

我正在学习的WebGL现在，我看到从该网站 http://webglfundamentals.org/webgl/webgl-3d-perspective-matrix.html，在那里他有相同的矩阵和相同的着色器的计算为我这个WebGL的例子，但我不能用自己的顶点数据绘制同一个对象。另外，我只能使用-1和-2000之间的负Z值，而他在顶点数据中使用正Z值。为什么他可以使用正z值？WebGL的缓冲器值不工作

当我使用正z值，然后我看不到三角形绘制。对不起，我的英语不好。

这里是我的代码：

var canvas = document.getElementById("canvas"); 
 
var gl = canvas.getContext("webgl"); 
 

 
var fs_str = " void main() { \n " 
 
      + "gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" 
 
      + "} \n"; 
 
      
 
var vs_str = "attribute vec3 a_position;\n" 
 
      + "uniform mat4 u_matrix;\n" 
 
      + " void main() { \n " 
 
      + "vec4 position = u_matrix * vec4(a_position,1.0);\n" 
 
      + "gl_Position = position;\n" 
 
      + "}"; 
 
      
 
gl.clearColor(0.0,0.0,0.0,1.0); 
 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
 
gl.viewport(0,0,canvas.clientWidth,canvas.clientHeight); 
 

 

 
var program = gl.createProgram(); 
 

 
var fs = gl.createShader(gl.FRAGMENT_SHADER); 
 
gl.shaderSource(fs,fs_str); 
 
gl.compileShader(fs); 
 
gl.attachShader(program,fs); 
 

 
var vs = gl.createShader(gl.VERTEX_SHADER); 
 
gl.shaderSource(vs,vs_str); 
 
gl.compileShader(vs); 
 
gl.attachShader(program,vs); 
 

 
gl.linkProgram(program); 
 
gl.useProgram(program); 
 

 

 
var vertices = [-1.0, -1.0, -1.0, 
 
       1.0, 1.0, -1.0, 
 
       1.0, -1.0, -1.0 
 
       ]; 
 

 
    
 

 
var matrix = mat4.create(); 
 
mat4.perspective(matrix, (60 * Math.PI/ 180), canvas.clientWidth/canvas.clientHeight, 1, 2000); 
 

 

 
var matrixLocation = gl.getUniformLocation(program,"u_matrix"); 
 
gl.uniformMatrix4fv(matrixLocation,false,matrix); 
 

 
var vbo = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 
 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
 
var positionLocation = gl.getAttribLocation(program,"a_position"); 
 
gl.enableVertexAttribArray(positionLocation); 
 
gl.vertexAttribPointer(positionLocation,3,gl.FLOAT,false,0,0); 
 

 
gl.drawArrays(gl.TRIANGLES, 0, 3);

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.2/gl-matrix-min.js"></script> 
 
</head> 
 

 
<body> 
 
    <canvas id="canvas" width="400" height="300"></canvas> 
 
    <script src="index.js"></script> 
 
</body> 
 

 
</html>

来源

2016-05-31 borat22