Rotate the triangle
This commit is contained in:
parent
c83ea2e7c3
commit
0edc53d30a
@ -1,7 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>
|
||||
<body>
|
||||
<h1>Panorama Viewer</h1>
|
||||
|
@ -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);
|
||||
})();
|
Loading…
Reference in New Issue
Block a user