gl-matrix 未正确包含在 webgl 应用程序中

问题描述

我正在尝试学习 webgl 的基础知识并遵循 MDN 教程 here。

但是，我的渲染脚本 (render.js) 无法识别包含的 gl-matrix 脚本。在 Chrome 中运行 index.html（版本 88.0.4324.150（官方版本）（64 位））我希望看到黑色背景下的红色方块。相反，我得到了黑色背景和以下控制台错误：

render.js:80 Uncaught ReferenceError: mat4 is not defined
    at DrawScene (render.js:80)
    at main (render.js:177)

这里是对应的文件。

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas" width=640 height=480></canvas>
<script type="text/javascript" src="gl-matrix.js"></script>
<script type="text/javascript" src="render.js" ></script>
</body>
</html>

render.js


let loadShader= (gl,type,src) =>
{
    const shader = gl.createShader(type);
    gl.shaderSource(shader,src);
    gl.compileShader(shader);

    if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
    {
        alert("An error occured during shader compilation: "+ gl.getShaderInfoLog(shader))
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}


let initShaderProgram= (gl,vertShaderSrc,fragShaderSrc) =>
{
    const vertexShader=loadShader(gl,gl.VERTEX_SHADER,vertShaderSrc);
    const fragShader=loadShader(gl,gl.FRAGMENT_SHADER,fragShaderSrc);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram,vertexShader);
    gl.attachShader(shaderProgram,fragShader);
    gl.linkProgram(shaderProgram);

    if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
    {
          alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
          return null;
    }

    return shaderProgram;
}

let initBuffers = (gl) =>
{
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);

    const positions = [
                       1.0,1.0,-1.0,-1.0
                      ];


    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
    return {positions:positionBuffer};
} 




 let DrawScene = (gl,programInfo,buffers) =>
{
    gl.clearColor(0.0,0.0,1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

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


    const fieldOfView = 45*Math.PI/180;
    const aspectRatio = gl.canvas.clientWidth/gl.canvas.clientHeight;
    const zNear = 0.1;
    const zFar = 100;
    const projectionMatrix = mat4.create();

    mat4.perspective(projectionMatrix,fieldOfView,aspectRatio,zNear,zFar);

    let modelViewMatrix = mat4.create();
    mat4.translate(modelViewMatrix,modelViewMatrix,[0.0,-6.0]);


    {
        const numComponents = 2;
        const type = gl.FLOAT;
        const normalize=false;
        const stride=0;
        const offset=0;
        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition,numComponents,normalize,stride,offset
            );
        gl.enabLevertexAttribArray(programInfo.attribLocations.vertexPosition);
    }

    gl.useProgram(programInfo.program);
    gl.uniformMatrix4fv(programInfo.uniformlocations.projectionMatrix,false,projectionMatrix);
    gl.uniformMatrix4fv(programInfo.uniformlocations.modelViewMatrix,modelViewMatrix);

    {
        const offset = 0;
        const vertexCount=4;
        gl.drawArrays(gl.TRIANGLE_STRIP,offset,vertexCount);
    }


};  



 let main = () =>
{
    const canvas =document.querySelector("#canvas")
    const gl =canvas.getContext("webgl")
    if(gl==null)
    {
        alert("gl is null")
        return;
    }



const  vsSource = 
`
attribute vec4 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main()
{
    gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition;
} 
`;


const  fsSource = 
`
void main()
{
    gl_FragColor=vec4(0.7,0.11,1);
} 
`;

const shaderProgram=initShaderProgram(gl,vsSource,fsSource);


const ProgramInfo={
    program:shaderProgram,attribLocations: {vertexPosition:gl.getAttribLocation(shaderProgram,'aVertexPosition')},uniformlocations:{projectionMatrix: gl.getUniformlocation(shaderProgram,'uProjectionMatrix'),modelViewMatrix: gl.getUniformlocation(shaderProgram,'uModelViewMatrix')
                      }
};



    buffers= initBuffers(gl);

    DrawScene(gl,ProgramInfo,buffers);

}

 window.onload=main

解决方法

如果我没记错的话，glMatrix 的较新版本只公开 glMatrix 命名空间而不是单个类。因此，在您的情况下，我认为最简单的方法是通过在 render.js 的顶部对其进行解构来使其可用：

const { vec2,vec3,mat3,mat4 } = glMatrix;

gl-matrix html javascript