From 54ff9106db1e926a0100ca3da27c72947bcd6cd6 Mon Sep 17 00:00:00 2001
From: Brandon Dyck <brandon@dyck.us>
Date: Sun, 23 Oct 2022 10:03:32 -0600
Subject: [PATCH] Combine vertex buffers

---
 panorama-viewer.js | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/panorama-viewer.js b/panorama-viewer.js
index 1e2e691..25142e3 100644
--- a/panorama-viewer.js
+++ b/panorama-viewer.js
@@ -109,27 +109,23 @@
 	gl.useProgram(program);
 	let vertexBuffer = gl.createBuffer();
 	let vertices = new Float32Array([
-		0, 0, 0,
-		1, 0, 0,
-		1, 1, 0,
+		// x, y, z, u, v
+		0, 0, 0, 0, 0,
+		1, 0, 0, 1, 0,
+		1, 1, 0, 1, 1,
 	]);
+	const vertexStride = 4 * 5;
+	const positionOffset = 0;
+	const textureCoordOffset = 4 * 3;
 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 	const positionLocation = gl.getAttribLocation(program, "position");
+	const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
 
 	// Load texture
 	let image = document.getElementById("image");
 	loadTexture(gl, image);
 	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-	let textureCoordBuffer = gl.createBuffer();
-	gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
-	const textureCoords = new Float32Array([
-		0, 1,
-		1, 0,
-		1, 1,
-	]);
-	gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW);
-	const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
 
 	const render = () => {
 		gl.useProgram(program);
@@ -142,12 +138,11 @@
 
 		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 		gl.enableVertexAttribArray(positionLocation);
-		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4 * 3, 0);
+		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, vertexStride, positionOffset);
 		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);
+		gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, vertexStride, textureCoordOffset);
 
 		requestAnimationFrame(render);
 	};