gl-matrix 未正确包含在 webgl 应用程序中 [英] gl-matrix is not included properly in webgl application
问题描述
我正在尝试学习 webgl 的基础知识并遵循 MDN 教程 此处.
I'm trying to learn the basics of webgl and following the MDN tutorial here.
但是，我的渲染脚本 (render.js) 无法识别包含的 gl-matrix脚本.在 Chrome (Version 88.0.4324.150 (Official Build) (64-bit)) 中运行 index.html我希望看到黑色背景下的红色方块.相反，我得到了黑色背景和以下控制台错误:
However, my rendering script (render.js) does not recognize the included gl-matrix
script. Running index.html in Chrome(Version 88.0.4324.150 (Official Build) (64-bit))
I expect to see a red square against a black background. Instead, I get a black background and the following console error:
render.js:80 Uncaught ReferenceError: mat4 is not defined
at DrawScene (render.js:80)
at main (render.js:177)
这里是对应的文件.
<!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,
-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,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,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,
type,
normalize,
stride,
offset
);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}
gl.useProgram(programInfo.program);
gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix,
false,
projectionMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix,
false,
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.0,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 的顶部对其进行解构来使其可用:
If I remember correctly newer versions of glMatrix only expose the glMatrix namespace rather than the individual classes. So in your case I think it's easiest if you make them available by destructuring it at the top of your render.js:
const { vec2, vec3, mat3, mat4 } = glMatrix;
这篇关于gl-matrix 未正确包含在 webgl 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
