From 07380c8c9170b6ea7a362bbf77be86459a1e799d Mon Sep 17 00:00:00 2001
From: Brandon Dyck <brandon@dyck.us>
Date: Sun, 23 Oct 2022 10:17:35 -0600
Subject: [PATCH] Make a rectangle

---
 panorama-viewer.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/panorama-viewer.js b/panorama-viewer.js
index 25142e3..e48043e 100644
--- a/panorama-viewer.js
+++ b/panorama-viewer.js
@@ -113,6 +113,7 @@
 		0, 0, 0, 0, 0,
 		1, 0, 0, 1, 0,
 		1, 1, 0, 1, 1,
+		0, 1, 0, 0, 1,
 	]);
 	const vertexStride = 4 * 5;
 	const positionOffset = 0;
@@ -122,6 +123,14 @@
 	const positionLocation = gl.getAttribLocation(program, "position");
 	const textureCoordLocation = gl.getAttribLocation(program, "textureCoord");
 
+	let indexBuffer = gl.createBuffer();
+	let indices = new Uint16Array([
+		0, 1, 2,
+		3, 0, 2,
+	]);
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+
 	// Load texture
 	let image = document.getElementById("image");
 	loadTexture(gl, image);
@@ -139,7 +148,7 @@
 		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 		gl.enableVertexAttribArray(positionLocation);
 		gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, vertexStride, positionOffset);
-		gl.drawArrays(gl.TRIANGLES, 0, 3);
+		gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
 
 		gl.enableVertexAttribArray(textureCoordLocation);
 		gl.vertexAttribPointer(textureCoordLocation, 2, gl.FLOAT, false, vertexStride, textureCoordOffset);