Merge branch 'faster-pen' into webgl2-only

Author: GarboMuffin

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;
@@ -107,7 +111,7 @@ 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(
@@ -125,14 +129,8 @@ class PenSkin extends Skin {
                 1, 0,
                 0, 0,
                 1, 1,
-                1, 1,
-                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) {
@@ -151,10 +149,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);
@@ -444,8 +438,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
             );