I'm trying to learn the basics of webgl and following the MDN tutorial here.
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)
Here are the corresponding files.
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,
-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
If I remember correctly newer versions of glMatrix only expose the
glMatrixnamespace 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: