WebGL和mat4.perspective功能不起作用

时间:2014-10-28 13:34:54

标签: javascript webgl

我的代码有问题,试图显示一个简单的三角形对象和简单的方形对象。当我运行代码时,两个对象都不会出现。问题在于mat4.perspective功能和可能的参数。这是带错误的代码:

    function drawScene() {
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        var rads=45*(Math.PI/180);
        mat4.perspective(pMatrix, rads, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0);
        alert("this works");
        mat4.identity(mvMatrix);
        mat4.translate(mvMatrix, mvMatrix [-1.5, 0.0, -7.0]);
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
        setMatrixUniforms();
        gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);


        mat4.translate(mvMatrix, mvMatrix [3.0, 0.0, 0.0]);
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
        setMatrixUniforms();
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
    }

我添加的JS警告在mat4.perspective行之前工作,但之后没有,所以我知道问题出在这一行。对于我做错了什么以及如何纠正问题的任何建议?

1 个答案:

答案 0 :(得分:1)

我有一个工作设置,我放置了你的代码......这条线是可疑的

mat4.perspective(pMatrix, rads, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0);

这是我可以尝试的我的

mat4.perspective(FoV , gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

其中

var FoV = 20.0;

控制视野

这是我写的一个实现键盘+鼠标的WebGL项目 相互作用缩放/平移/滑动...随意掠夺随意 注意 - 这是我第一次使用javascript / WebGL,所以带上一粒盐,但它确实尖叫!

https://github.com/scottstensland/webgl-3d-animation