From bf1856c84cb6e1d74ab977823671333405a07a3a Mon Sep 17 00:00:00 2001
From: Brandon Dyck <brandon@dyck.us>
Date: Mon, 22 Jul 2024 16:01:28 -0600
Subject: [PATCH] Give some things better names

---
 TODO.txt           |  3 ---
 panorama-viewer.js | 49 +++++++++++++++++++++-------------------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index e8f9883..71aa7ed 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -16,6 +16,3 @@ Add licenses
 Add instructions
 Fix up code locality
 Give the uniforms simpler names
-Delete the defunct view matrix
-Rename the model matrix as the view matrix, because that's really what it is.
-Consider better names for the angle variables
diff --git a/panorama-viewer.js b/panorama-viewer.js
index 9a75c76..559c52e 100644
--- a/panorama-viewer.js
+++ b/panorama-viewer.js
@@ -1,6 +1,6 @@
 "use strict";
 (() => {
-	const makeCylinder = (meridians = 3, parallels = 3) => {
+	const makeSphere = (meridians = 3, parallels = 3) => {
 		// The number of meridians dividing the sphere's surface.
 		// Two meridians would make an XZ plane.
 		if (meridians < 3) {
@@ -71,14 +71,13 @@
 			attribute vec3 position;
 			attribute vec2 textureCoord;
 
-			uniform mat4 modelMatrix;
+			uniform mat4 viewMatrix;
 			uniform mat4 projectionMatrix;
-			// uniform mat4 viewMatrix;
 
 			varying highp vec2 vTextureCoord;
 
 			void main() {
-				gl_Position = projectionMatrix * modelMatrix * vec4(position, 1);
+				gl_Position = projectionMatrix * viewMatrix * vec4(position, 1);
 				vTextureCoord = textureCoord;
 			}
 		`;
@@ -137,13 +136,12 @@
 	let viewer = document.getElementById("viewer");
 	let gl = viewer.getContext("webgl2");
 	let program = initShaderProgram(gl);
-	let modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix");
+	let viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
 	let projectionMatrixLocation = gl.getUniformLocation(program, "projectionMatrix");
-	const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");
 
 	// Set up mouse-panning state machine.
-	let θy = 0;
-	let θx = 0;
+	let yaw = 0;
+	let pitch = 0;
 	const PanState = Object.freeze({
 		idle: (event) => {
 			if (event.type === "mousedown") {
@@ -161,12 +159,12 @@
 					}
 					break;
 				case "mousemove":
-					θy += event.movementX * 0.005;
-					θx += event.movementY * 0.005;
-					if (θx < -Math.PI / 2) {
-						θx = -Math.PI / 2;
-					} else if (θx > Math.PI / 2) {
-						θx = Math.PI / 2;
+					yaw += event.movementX * 0.005;
+					pitch += event.movementY * 0.005;
+					if (pitch < -Math.PI / 2) {
+						pitch = -Math.PI / 2;
+					} else if (pitch > Math.PI / 2) {
+						pitch = Math.PI / 2;
 					}
 					break
 			}
@@ -191,17 +189,17 @@
 	});
 
 	gl.useProgram(program);
-	const cylinder = makeCylinder(24, 24);
+	const sphere = makeSphere(24, 24);
 
 	let vertexBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-	gl.bufferData(gl.ARRAY_BUFFER, cylinder.vertices, gl.STATIC_DRAW);
+	gl.bufferData(gl.ARRAY_BUFFER, sphere.vertices, gl.STATIC_DRAW);
 	const positionLocation = gl.getAttribLocation(program, "position");
 	const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
 
 	let indexBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cylinder.indices, gl.STATIC_DRAW);
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sphere.indices, gl.STATIC_DRAW);
 
 	gl.enable(gl.CULL_FACE);
 
@@ -214,26 +212,23 @@
 		gl.useProgram(program);
 
 		// Create the transformation matrix.
-		const modelMatrix = mat4.create();
-		mat4.rotateX(modelMatrix, modelMatrix, θx);
-		mat4.rotateY(modelMatrix, modelMatrix, θy);
-		gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
+		const viewMatrix = mat4.create();
+		mat4.rotateX(viewMatrix, viewMatrix, pitch);
+		mat4.rotateY(viewMatrix, viewMatrix, yaw);
+		gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
 
 		const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
 		const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
 		gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
 
-		// const viewMatrix = mat4.lookAt(mat4.create(), [0, 0, 0], [0, 0, 1], [0, 1, 0]);
-		// gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);
-
 		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 		gl.enableVertexAttribArray(positionLocation);
-		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, cylinder.vertexStride, cylinder.positionOffset);
+		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, sphere.vertexStride, sphere.positionOffset);
 		gl.enableVertexAttribArray(textureCoordLocation);
-		gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, cylinder.vertexStride, cylinder.textureCoordOffset);
+		gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, sphere.vertexStride, sphere.textureCoordOffset);
 
 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-		gl.drawElements(gl.TRIANGLES, cylinder.indices.length, gl.UNSIGNED_SHORT, 0);
+		gl.drawElements(gl.TRIANGLES, sphere.indices.length, gl.UNSIGNED_SHORT, 0);
 		requestAnimationFrame(render);
 	};