Question

当我从opengl转向webgl

时，我发现了一些困难

三角形示例工作正常，直到我添加了统一矩阵，这就是为什么我只包含相关代码

希望你能发现错误

var gl;

function webGLStart()
{
var canvas = document.getElementById("glcanvas");
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, 500, 500);

if(!gl) 
    { alert("Could Not Initialize WebGL"); }

//initialize shaders
var Program = getShader("triangle_vert", "triangle_frag", false);

//initialize buffers
var triangleVBO = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVBO);
var vertices = [   //position           //color
                   -1.0, -1.0, -5.0,    1.0, 0.0, 0.0,
                   +0.0, +1.0, -5.0,    0.0, 1.0, 0.0,
                   +1.0, -1.0, -5.0,    0.0, 0.0, 1.0
               ];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var step = Float32Array.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, step * 6, 0);
gl.enableVertexAttribArray(0);

gl.vertexAttribPointer(1, 3, gl.FLOAT, false, step * 6, step * 3);
gl.enableVertexAttribArray(1);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


//setting matrices and uniforms
var Model = mat4.create();
var View = mat4.create();
var Projection = mat4.create();

mat4.identity(Model);
mat4.identity(View);
mat4.perspective(45, 500.0/500.0, 0.1, 100.0, Projection);

gl.useProgram(Program);

gl.uniformMatrix4fv(gl.getUniformLocation(Program, "Model"), false, Model);
gl.uniformMatrix4fv(gl.getUniformLocation(Program, "View"), false, View);
gl.uniformMatrix4fv(gl.getUniformLocation(Program, "Projection"), false, Projection);

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

顶点/片段着色器：

<head>
    <script id="triangle_frag" type="frag">
        precision mediump float;

        varying vec3 Col;

        void main(void) {
            gl_FragColor = vec4(Col, 1.0);
        }
    </script>


    <script id="triangle_vert"   type="vert">
        attribute vec3 aVertexPosition;
        attribute vec3 color;

        varying vec3 Col;

        uniform mat4 Model;
        uniform mat4 View;
        uniform mat4 Projection;

        void main(void) {
            gl_Position = Projection * View * Model * vec4(aVertexPosition, 1.0);
            Col = color;
        }
    </script>

//...

我正在使用gl-matrix-min.js并试图在Windows 7上使用firefox运行示例

WebGL示例不适用于提供的制服矩阵

0 个答案: