panorama-viewer/panorama-viewer.js

"use strict";
(() => {
	const initShaderProgram = (gl) => {
		const vShaderSrc = `
			attribute vec3 position;

			uniform mat4 viewMatrix;

			void main() {
				gl_Position = viewMatrix * vec4(position, 1);
			}
		`;

		const fShaderSrc = `
			void main() {
				gl_FragColor = vec4(0.5, 0.5, 0, 1);
			}
		`;

		const compileShader = (src, type) => {
			let shader = gl.createShader(type);
			gl.shaderSource(shader, src);
			gl.compileShader(shader);
			let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
			if (!success) {
				throw gl.getShaderInfoLog(vShader);
			}
			return shader;
		}

		let vShader = compileShader(vShaderSrc, gl.VERTEX_SHADER);
		let fShader = compileShader(fShaderSrc, gl.FRAGMENT_SHADER);

		let program = gl.createProgram();
		gl.attachShader(program, vShader);
		gl.attachShader(program, fShader);
		gl.linkProgram(program);
		let success = gl.getProgramParameter(program, gl.LINK_STATUS);
		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();
		let vertices = new Float32Array([
			0, 0, 0,
			1, 0, 0,
			1, 1, 0,
		]);
		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);
})();