b/panorama-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rotate the triangle

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-22 13:41:00 -06:00
parent c83ea2e7c3
commit 0edc53d30a
2 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -1,7 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="./panorama-viewer.js"></script> <script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
crossorigin="anonymous"
defer
></script>
<script src="./panorama-viewer.js" defer></script>
</head> </head>
<body> <body>
<h1>Panorama Viewer</h1> <h1>Panorama Viewer</h1>

41
panorama-viewer.js
View File

@ -1,18 +1,13 @@
"use strict"; "use strict";
(() => { (() => {
window.addEventListener("load", () => { const initShaderProgram = (gl) => {
let viewer = document.getElementById("viewer");
render(viewer);
});
const render = (canvas) => {
let gl = canvas.getContext("webgl2");
const vShaderSrc = ` const vShaderSrc = `
attribute vec3 position; attribute vec3 position;
uniform mat4 viewMatrix;
void main() { void main() {
gl_Position = vec4(position, 1); gl_Position = viewMatrix * vec4(position, 1);
} }
`; `;
@ -44,6 +39,21 @@
if (!success) { if (!success) {
throw gl.getProgramInfoLog(program); 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); gl.useProgram(program);
let vertexBuffer = gl.createBuffer(); let vertexBuffer = gl.createBuffer();
@ -55,9 +65,22 @@
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 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"); let positionLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionLocation); gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3); gl.drawArrays(gl.TRIANGLES, 0, 3);
rotation += Δtime;
requestAnimationFrame(render);
}; };
requestAnimationFrame(render);
})(); })();