Webgl 缓冲区值不起作用

Question

我现在正在学习 WebGL，我从这个网站上看到了这个 WebGL 示例 http://webglfundamentals.org/webgl/webgl-3d-perspective-matrix.html , 他和我有相同的矩阵和相同的着色器计算，但我不能使用他的顶点数据来绘制相同的对象。此外，我只能使用 -1 和 -2000 之间的负 z 值，而他在他的顶点数据中使用正 z 值。为什么他可以使用正 z 值？

当我使用正 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>

Answer 1

您的视角在 z = 0，看向底片。将 z 设置为正值会将物体放在您身后。在您链接的网站上，滑块的 Z 值也不能为正值。

另外，由于mat4.perspective的最后一个参数是2000，你将无法看到距离你超过2000个单位的任何东西。这就是为什么 -2000 是这里的最大值。

我不完全确定你想做什么，对我来说你的代码是照常工作的。

我制作了一个 fiddle，包括您正在关注的教程中的 "F"：

https://jsfiddle.net/g69cdeza/1/

我添加了行 mat4.translate(matrix, matrix, [5, 0, -500]); 来移动对象。

还有什么事情你没能做到吗？

Webgl 缓冲区值不起作用

Webgl Buffer Values not working

webgl