From 0edc53d30a50cb8cf55626f3ec7be46da505b50d Mon Sep 17 00:00:00 2001 From: Brandon Dyck Date: Sat, 22 Oct 2022 13:41:00 -0600 Subject: [PATCH] Rotate the triangle --- index.html | 8 +++++++- panorama-viewer.js | 41 ++++++++++++++++++++++++++++++++--------- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 2961c6e..fe62ffc 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,13 @@ - + +

Panorama Viewer

diff --git a/panorama-viewer.js b/panorama-viewer.js index 3d9cb81..1a96c65 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -1,18 +1,13 @@ "use strict"; (() => { - window.addEventListener("load", () => { - let viewer = document.getElementById("viewer"); - render(viewer); - }); - - const render = (canvas) => { - let gl = canvas.getContext("webgl2"); - + const initShaderProgram = (gl) => { const vShaderSrc = ` attribute vec3 position; + uniform mat4 viewMatrix; + void main() { - gl_Position = vec4(position, 1); + gl_Position = viewMatrix * vec4(position, 1); } `; @@ -44,6 +39,21 @@ if (!success) { throw gl.getProgramInfoLog(program); } + return program; + }; + + let viewer = document.getElementById("viewer"); + let gl = viewer.getContext("webgl2"); + let program = initShaderProgram(gl); + let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix"); + + let rotation = 0; + let then = 0; + const render = (now) => { + const Δtime = (now - then) * 0.001; + then = now; + + gl.useProgram(program); let vertexBuffer = gl.createBuffer(); @@ -54,10 +64,23 @@ ]); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); + + // Create the transformation matrix. + let viewMatrix = mat4.create(); + mat4.rotateX(viewMatrix, viewMatrix, 0.25); + mat4.rotateY(viewMatrix, viewMatrix, rotation); + gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix); + let positionLocation = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); + + rotation += Δtime; + + requestAnimationFrame(render); }; + + requestAnimationFrame(render); })(); \ No newline at end of file