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