diff --git a/www/draw-scene.js b/www/draw-scene.js index 57b212f..f407c6d 100644 --- a/www/draw-scene.js +++ b/www/draw-scene.js @@ -1,61 +1,18 @@ function drawScene(gl, programInfo, buffers, time) { gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque - 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.clearDepth(1.0); // Clear everything gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - // Create a perspective matrix, a special matrix that is - // used to simulate the distortion of perspective in a camera. - // 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 - + // NOTE: this is how width/height is taken + // const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; + // Tell WebGL how to pull out the positions from the position // buffer into the vertexPosition attribute. setPositionAttribute(gl, buffers, programInfo); - // Tell WebGL to use our program when drawing gl.useProgram(programInfo.program); - // Set the shader uniforms - gl.uniformMatrix4fv( - programInfo.uniformLocations.projectionMatrix, - false, - projectionMatrix, - ); - gl.uniformMatrix4fv( - programInfo.uniformLocations.modelViewMatrix, - false, - modelViewMatrix, - ); - + /* --- Set Uniform Variables --- */ // Time since page loaded in seconds gl.uniform1f( programInfo.uniformLocations.time, diff --git a/www/webgl-demo.js b/www/webgl-demo.js index 1b3fe83..9f46772 100644 --- a/www/webgl-demo.js +++ b/www/webgl-demo.js @@ -69,8 +69,7 @@ function main() { // Vertex shader program const vsSource = ` attribute vec4 aVertexPosition; - uniform mat4 uModelViewMatrix; - uniform mat4 uProjectionMatrix; + void main() { gl_Position = aVertexPosition; } @@ -112,9 +111,6 @@ function main() { vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), }, uniformLocations: { - projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"), - modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), - // resolution: context.getUniformLocation(program, "uResolution"), time: gl.getUniformLocation(shaderProgram, "uTime"), },