emileclarkb/dobutterfliescry.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

webgl-demo remove view/projection matrices

Browse source
This commit is contained in:
Emile Clark-Boman 2025-07-28 13:15:55 +10:00
parent f00d7c60d3
commit 5bc7c97791
2 changed files with 6 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

49
www/draw-scene.js
View file

@ -1,61 +1,18 @@
function drawScene(gl, programInfo, buffers, time) { function drawScene(gl, programInfo, buffers, time) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Create a perspective matrix, a special matrix that is // NOTE: this is how width/height is taken
// used to simulate the distortion of perspective in a camera. // const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
// Our field of view is 45 degrees, with a width/height
// ratio that matches the display size of the canvas
// and we only want to see objects between 0.1 units
// and 100 units away from the camera.
const fieldOfView = (45 * Math.PI) / 180; // in radians
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = mat4.create();
// note: glMatrix always has the first argument
// as the destination to receive the result.
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
// Set the drawing position to the "identity" point, which is
// the center of the scene.
const modelViewMatrix = mat4.create();
// Now move the drawing position a bit to where we want to
// start drawing the square.
mat4.translate(
modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to translate
[-0.0, 0.0, -6.0],
); // amount to translate
// Tell WebGL how to pull out the positions from the position // Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute. // buffer into the vertexPosition attribute.
setPositionAttribute(gl, buffers, programInfo); setPositionAttribute(gl, buffers, programInfo);
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program); gl.useProgram(programInfo.program);
// Set the shader uniforms /* --- Set Uniform Variables --- */
gl.uniformMatrix4fv(
programInfo.uniformLocations.projectionMatrix,
false,
projectionMatrix,
);
gl.uniformMatrix4fv(
programInfo.uniformLocations.modelViewMatrix,
false,
modelViewMatrix,
);
// Time since page loaded in seconds // Time since page loaded in seconds
gl.uniform1f( gl.uniform1f(
programInfo.uniformLocations.time, programInfo.uniformLocations.time,

6
www/webgl-demo.js
View file

@ -69,8 +69,7 @@ function main() {
// Vertex shader program // Vertex shader program
const vsSource = ` const vsSource = `
attribute vec4 aVertexPosition; attribute vec4 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() { void main() {
gl_Position = aVertexPosition; gl_Position = aVertexPosition;
} }
@ -112,9 +111,6 @@ function main() {
vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
}, },
uniformLocations: { uniformLocations: {
projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"),
modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
// resolution: context.getUniformLocation(program, "uResolution"), // resolution: context.getUniformLocation(program, "uResolution"),
time: gl.getUniformLocation(shaderProgram, "uTime"), time: gl.getUniformLocation(shaderProgram, "uTime"),
}, },