From f8d0132e8b25d278e975d94712563c89309a49d5 Mon Sep 17 00:00:00 2001
From: Muffin <muffin@muffin.ink>
Date: Thu, 15 Aug 2024 18:30:52 -0500
Subject: [PATCH 1/3] fix some mistakes I caused

---
 src/PenSkin.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/PenSkin.js b/src/PenSkin.js
index b646fbde2..25e2c4100 100644
--- a/src/PenSkin.js
+++ b/src/PenSkin.js
@@ -106,13 +106,14 @@ class PenSkin extends Skin {
             const instancedArraysExtension = gl.getExtension('ANGLE_instanced_arrays');
             if (instancedArraysExtension) {
                 this.instancedRendering = true;
-                this.glDrawArraysInstanced = instancedArraysExtension.drawElementsInstancedANGLE.bind(
+                this.glDrawArraysInstanced = instancedArraysExtension.drawArraysInstancedANGLE.bind(
                     instancedArraysExtension
                 );
                 this.glVertexAttribDivisor = instancedArraysExtension.vertexAttribDivisorANGLE.bind(
                     instancedArraysExtension
                 );
             } else {
+                // Inefficient but still supported
                 this.instancedRendering = false;
             }
         }
@@ -390,13 +391,13 @@ class PenSkin extends Skin {
             this.attribute_index++;
             this.attribute_data[this.attribute_index] = penColor[3];
             this.attribute_index++;
-    
+
             this.attribute_data[this.attribute_index] = lineThickness;
             this.attribute_index++;
-    
+
             this.attribute_data[this.attribute_index] = lineLength;
             this.attribute_index++;
-    
+
             this.attribute_data[this.attribute_index] = x0;
             this.attribute_index++;
             this.attribute_data[this.attribute_index] = -y0;
@@ -440,13 +441,13 @@ class PenSkin extends Skin {
             this.glVertexAttribDivisor(this.a_lineColor_loc, 1);
             this.glVertexAttribDivisor(this.a_lineThicknessAndLength_loc, 1);
             this.glVertexAttribDivisor(this.a_penPoints_loc, 1);
-    
+
             this.glDrawArraysInstanced(
                 gl.TRIANGLES,
                 0, 6,
                 this.attribute_index / PEN_ATTRIBUTE_STRIDE
             );
-    
+
             this.glVertexAttribDivisor(this.a_lineColor_loc, 0);
             this.glVertexAttribDivisor(this.a_lineThicknessAndLength_loc, 0);
             this.glVertexAttribDivisor(this.a_penPoints_loc, 0);

From d6052fd7965cf891095a2ba808ae53377d5060cd Mon Sep 17 00:00:00 2001
From: Muffin <muffin@muffin.ink>
Date: Thu, 15 Aug 2024 20:07:20 -0500
Subject: [PATCH 2/3] simplify part that is always the same

---
 src/PenSkin.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/PenSkin.js b/src/PenSkin.js
index 25e2c4100..a523ab12a 100644
--- a/src/PenSkin.js
+++ b/src/PenSkin.js
@@ -90,12 +90,16 @@ class PenSkin extends Skin {
         this.a_position_glbuffer = gl.createBuffer();
         this.a_position_loc = gl.getAttribLocation(this._lineShader.program, 'a_position');
 
-        this.attribute_glbuffer = gl.createBuffer();
-        this.attribute_index = 0;
         this.a_lineColor_loc = gl.getAttribLocation(this._lineShader.program, 'a_lineColor');
         this.a_lineThicknessAndLength_loc = gl.getAttribLocation(this._lineShader.program, 'a_lineThicknessAndLength');
         this.a_penPoints_loc = gl.getAttribLocation(this._lineShader.program, 'a_penPoints');
 
+        this.attribute_glbuffer = gl.createBuffer();
+        this.attribute_index = 0;
+        this.attribute_data = new Float32Array(PEN_ATTRIBUTE_BUFFER_SIZE);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.attribute_glbuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, this.attribute_data.length * 4, gl.STREAM_DRAW);
+
         if (gl.drawArraysInstanced) {
             // WebGL2 has native instanced rendering
             this.instancedRendering = true;
@@ -128,10 +132,6 @@ class PenSkin extends Skin {
                 0, 0,
                 0, 1
             ]), gl.STATIC_DRAW);
-
-            this.attribute_data = new Float32Array(PEN_ATTRIBUTE_BUFFER_SIZE);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.attribute_glbuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, this.attribute_data.length * 4, gl.STREAM_DRAW);
         } else {
             const positionBuffer = new Float32Array(PEN_ATTRIBUTE_BUFFER_SIZE / PEN_ATTRIBUTE_STRIDE * 2);
             for (let i = 0; i < positionBuffer.length; i += 12) {
@@ -150,10 +150,6 @@ class PenSkin extends Skin {
             }
             gl.bindBuffer(gl.ARRAY_BUFFER, this.a_position_glbuffer);
             gl.bufferData(gl.ARRAY_BUFFER, positionBuffer, gl.STATIC_DRAW);
-
-            this.attribute_data = new Float32Array(PEN_ATTRIBUTE_BUFFER_SIZE);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.attribute_glbuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, this.attribute_data.length * 4, gl.STREAM_DRAW);
         }
 
         this.onNativeSizeChanged = this.onNativeSizeChanged.bind(this);

From 368cd4ddfe6bdce7931cfec3bc22636188af18ca Mon Sep 17 00:00:00 2001
From: Tacodiva <27910867+Tacodiva@users.noreply.github.com>
Date: Fri, 16 Aug 2024 13:30:15 +1000
Subject: [PATCH 3/3] Switch to TRIANGLE_STRIP

---
 src/PenSkin.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/PenSkin.js b/src/PenSkin.js
index a523ab12a..762bfbe91 100644
--- a/src/PenSkin.js
+++ b/src/PenSkin.js
@@ -128,8 +128,6 @@ class PenSkin extends Skin {
                 1, 0,
                 0, 0,
                 1, 1,
-                1, 1,
-                0, 0,
                 0, 1
             ]), gl.STATIC_DRAW);
         } else {
@@ -439,8 +437,8 @@ class PenSkin extends Skin {
             this.glVertexAttribDivisor(this.a_penPoints_loc, 1);
 
             this.glDrawArraysInstanced(
-                gl.TRIANGLES,
-                0, 6,
+                gl.TRIANGLE_STRIP,
+                0, 4,
                 this.attribute_index / PEN_ATTRIBUTE_STRIDE
             );