From b91ab4b54767779c58a30a5ae05707cd9454b19e Mon Sep 17 00:00:00 2001
From: Brandon Dyck <brandon@dyck.us>
Date: Sun, 23 Oct 2022 09:56:44 -0600
Subject: [PATCH] Move vertex data out of the render loop

---
 panorama-viewer.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/panorama-viewer.js b/panorama-viewer.js
index 9f09a4e..1e2e691 100644
--- a/panorama-viewer.js
+++ b/panorama-viewer.js
@@ -106,9 +106,20 @@
 	viewer.addEventListener("mouseover", runPanState);
 	viewer.addEventListener("mousemove", runPanState);
 
+	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);
+	const positionLocation = gl.getAttribLocation(program, "position");
+
 	// Load texture
 	let image = document.getElementById("image");
-	let texture = loadTexture(gl, image);
+	loadTexture(gl, image);
 	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 	let textureCoordBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
@@ -119,32 +130,25 @@
 	]);
 	gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW);
 	const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
-	gl.enableVertexAttribArray(textureCoordLocation);
-	gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0);
 
 	const render = () => {
 		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 modelMatrix = mat4.create();
 		mat4.rotateX(modelMatrix, modelMatrix, θx);
 		mat4.rotateY(modelMatrix, modelMatrix, θy);
 		gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
 
-		let positionLocation = gl.getAttribLocation(program, "position");
+		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 		gl.enableVertexAttribArray(positionLocation);
 		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
 		gl.drawArrays(gl.TRIANGLES, 0, 3);
 
+		gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+		gl.enableVertexAttribArray(textureCoordLocation);
+		gl.vertexAttribPointer(textureCoordLocation, 3, gl.FLOAT, false, 4 * 2, 0);
+
 		requestAnimationFrame(render);
 	};