panorama-viewer/panorama-viewer.js

"use strict";
(() => {
	window.addEventListener("load", () => {
		let viewer = document.getElementById("viewer");
		render(viewer);
	});

	const render = (canvas) => {
		let gl = canvas.getContext("webgl2");

		const vShaderSrc = `
			attribute vec3 position;

			void main() {
				gl_Position = 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);
		}
		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);
		
		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);
	};
})();