From 49e611aaf76dd4bafed106c88cfa64da64e2ba1c Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 02:53:24 +0900
Subject: [PATCH 01/14]  Prepare flags and shaders for per-vertex coloring

Prepare a flag that determines whether the array that stores the color for each vertex contains an element.
Also, for retainedMode, prepare a shader for simply coloring with vertex colors only.
---
 src/webgl/p5.RendererGL.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index 4cfb73cec3..5ecbbfb8e6 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -111,6 +111,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this._useShininess = 1;
 
   this._useLineColor = false;
+  this._useVertexColor = false;
 
   this._tint = [255, 255, 255, 255];
 
@@ -139,6 +140,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this._defaultImmediateModeShader = undefined;
   this._defaultNormalShader = undefined;
   this._defaultColorShader = undefined;
+  this._defaultVertexColorShader = undefined;
   this._defaultPointShader = undefined;
 
   this.userFillShader = undefined;
@@ -1197,6 +1199,14 @@ p5.RendererGL.prototype._getColorShader = function() {
     );
   }
 
+  if (!this._defaultVertexColorShader) {
+    this._defaultVertexColorShader = new p5.Shader(
+      this,
+      defaultShaders.vertexColorVert,
+      defaultShaders.vertexColorFrag
+    );
+  }
+  if (this._useVertexColor) return this._defaultVertexColorShader;
   return this._defaultColorShader;
 };
 
@@ -1270,6 +1280,7 @@ p5.RendererGL.prototype._setFillUniforms = function(fillShader) {
   fillShader.bindShader();
 
   // TODO: optimize
+  fillShader.setUniform('uUseVertexColor', this._useVertexColor);
   fillShader.setUniform('uMaterialColor', this.curFillColor);
   fillShader.setUniform('isTexture', !!this._tex);
   if (this._tex) {

From e189a45f07b6a0e5dc418bb44a5dc513be6c8f6b Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 02:56:45 +0900
Subject: [PATCH 02/14] Calculate flag for per-vertex coloring

Computes a flag that determines whether to do per-vertex coloring in immediateMode.
This will always be true, but just in case we do the math.
---
 src/webgl/p5.RendererGL.Immediate.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webgl/p5.RendererGL.Immediate.js b/src/webgl/p5.RendererGL.Immediate.js
index 9da349f494..726023d651 100644
--- a/src/webgl/p5.RendererGL.Immediate.js
+++ b/src/webgl/p5.RendererGL.Immediate.js
@@ -368,6 +368,7 @@ p5.RendererGL.prototype._tesselateShape = function() {
  */
 p5.RendererGL.prototype._drawImmediateFill = function() {
   const gl = this.GL;
+  this._useVertexColor = (this.immediateMode.geometry.vertexColors.length > 0);
   const shader = this._getImmediateFillShader();
 
   this._setFillUniforms(shader);

From 863e153f223979371587eb857939a5d2d774062c Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 03:02:26 +0900
Subject: [PATCH 03/14] Calculate flag for per-vertex coloring

Computes a flag for per-vertex coloring in retainedMode. This will be false for drawing primitives, for example.
It becomes true when color information is stored in vertexColors such as drawing with p5.Geometry.
This flag is used to retrieve the shader, so it must be calculated ahead of time.
---
 src/webgl/p5.RendererGL.Retained.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webgl/p5.RendererGL.Retained.js b/src/webgl/p5.RendererGL.Retained.js
index 05b9673f45..1cea90431c 100644
--- a/src/webgl/p5.RendererGL.Retained.js
+++ b/src/webgl/p5.RendererGL.Retained.js
@@ -130,6 +130,7 @@ p5.RendererGL.prototype.drawBuffers = function(gId) {
   }
 
   if (this._doFill) {
+    this._useVertexColor = (geometry.model.vertexColors.length > 0);
     const fillShader = this._getRetainedFillShader();
     this._setFillUniforms(fillShader);
     for (const buff of this.retainedMode.buffers.fill) {

From 8c588964cac66b41fbbadf746026e350960f5160 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 03:05:30 +0900
Subject: [PATCH 04/14] Make it use vColor instead of uMaterialColor

Instead of uMaterialColor, we calculate vColor with vertex shader and use the value passed by varying.
---
 src/webgl/shaders/phong.frag | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webgl/shaders/phong.frag b/src/webgl/shaders/phong.frag
index 6f848f861c..497669965e 100644
--- a/src/webgl/shaders/phong.frag
+++ b/src/webgl/shaders/phong.frag
@@ -6,7 +6,6 @@ uniform vec4 uSpecularMatColor;
 uniform vec4 uAmbientMatColor;
 uniform vec4 uEmissiveMatColor;
 
-uniform vec4 uMaterialColor;
 uniform vec4 uTint;
 uniform sampler2D uSampler;
 uniform bool isTexture;
@@ -15,6 +14,7 @@ varying vec3 vNormal;
 varying vec2 vTexCoord;
 varying vec3 vViewPosition;
 varying vec3 vAmbientColor;
+varying vec4 vColor;
 
 void main(void) {
 
@@ -24,7 +24,7 @@ void main(void) {
 
   // Calculating final color as result of all lights (plus emissive term).
 
-  vec4 baseColor = isTexture ? texture2D(uSampler, vTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;
+  vec4 baseColor = isTexture ? texture2D(uSampler, vTexCoord) * (uTint / vec4(255, 255, 255, 255)) : vColor;
   gl_FragColor = vec4(diffuse * baseColor.rgb + 
                     vAmbientColor * uAmbientMatColor.rgb + 
                     specular * uSpecularMatColor.rgb + 

From 65e56cd03d82306818e9da222dfd78950f670b29 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 03:08:08 +0900
Subject: [PATCH 05/14] Use vColor instead of uMaterialColor

Instead of uMaterialColor, we calculate vColor with vertex shader and use the value passed by varying.
---
 src/webgl/shaders/light_texture.frag | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webgl/shaders/light_texture.frag b/src/webgl/shaders/light_texture.frag
index 11e5db5520..be31c6d732 100644
--- a/src/webgl/shaders/light_texture.frag
+++ b/src/webgl/shaders/light_texture.frag
@@ -1,6 +1,5 @@
 precision highp float;
 
-uniform vec4 uMaterialColor;
 uniform vec4 uTint;
 uniform sampler2D uSampler;
 uniform bool isTexture;
@@ -9,13 +8,14 @@ uniform bool uEmissive;
 varying highp vec2 vVertTexCoord;
 varying vec3 vDiffuseColor;
 varying vec3 vSpecularColor;
+varying vec4 vColor;
 
 void main(void) {
   if(uEmissive && !isTexture) {
-    gl_FragColor = uMaterialColor;
+    gl_FragColor = vColor;
   }
   else {
-    vec4 baseColor = isTexture ? texture2D(uSampler, vVertTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;
+    vec4 baseColor = isTexture ? texture2D(uSampler, vVertTexCoord) * (uTint / vec4(255, 255, 255, 255)) : vColor;
     gl_FragColor = vec4(gl_FragColor.rgb * vDiffuseColor + vSpecularColor, 1.) * baseColor.a;
   }
 }

From 3e0b8dd083a56da3ca0d0fc7d9f2fc9df7dd256a Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 03:12:23 +0900
Subject: [PATCH 06/14] Calculate vColor

Determines whether to use per-vertex color or solid color depending on whether uUseVertexColor is ON/OFF
---
 src/webgl/shaders/light.vert | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/webgl/shaders/light.vert b/src/webgl/shaders/light.vert
index 5a756684c7..b79713cd26 100644
--- a/src/webgl/shaders/light.vert
+++ b/src/webgl/shaders/light.vert
@@ -3,14 +3,19 @@
 attribute vec3 aPosition;
 attribute vec3 aNormal;
 attribute vec2 aTexCoord;
+attribute vec4 aVertexColor;
 
 uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;
 uniform mat3 uNormalMatrix;
 
+uniform bool uUseVertexColor;
+uniform vec4 uMaterialColor;
+
 varying highp vec2 vVertTexCoord;
 varying vec3 vDiffuseColor;
 varying vec3 vSpecularColor;
+varying vec4 vColor;
 
 void main(void) {
 
@@ -27,4 +32,6 @@ void main(void) {
       vDiffuseColor += uAmbientColor[i];
     }
   }
+  
+  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
 }

From c4b5fafbe77a876852c6051f508fb43b8d1a23dd Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Fri, 6 Jan 2023 03:15:25 +0900
Subject: [PATCH 07/14] Calculate vColor

Determines whether to use per-vertex color or solid color depending on whether uUseVertexColor is ON/OFF
---
 src/webgl/shaders/phong.vert | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/webgl/shaders/phong.vert b/src/webgl/shaders/phong.vert
index af6ab4fd2f..4a6a7f1400 100644
--- a/src/webgl/shaders/phong.vert
+++ b/src/webgl/shaders/phong.vert
@@ -4,6 +4,7 @@ precision highp int;
 attribute vec3 aPosition;
 attribute vec3 aNormal;
 attribute vec2 aTexCoord;
+attribute vec4 aVertexColor;
 
 uniform vec3 uAmbientColor[5];
 
@@ -12,10 +13,14 @@ uniform mat4 uProjectionMatrix;
 uniform mat3 uNormalMatrix;
 uniform int uAmbientLightCount;
 
+uniform bool uUseVertexColor;
+uniform vec4 uMaterialColor;
+
 varying vec3 vNormal;
 varying vec2 vTexCoord;
 varying vec3 vViewPosition;
 varying vec3 vAmbientColor;
+varying vec4 vColor;
 
 void main(void) {
 
@@ -35,4 +40,6 @@ void main(void) {
       vAmbientColor += uAmbientColor[i];
     }
   }
+  
+  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
 }

From 948a5d59cac8bda70c726c08d2bf9fc8729cfeb1 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 7 Jan 2023 01:37:35 +0900
Subject: [PATCH 08/14] Decided not to use _defaultColorShader

Instead of having a new shader, I decided to rewrite the existing shader.
---
 src/webgl/p5.RendererGL.js | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index 5ecbbfb8e6..a805b4708d 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -140,7 +140,6 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this._defaultImmediateModeShader = undefined;
   this._defaultNormalShader = undefined;
   this._defaultColorShader = undefined;
-  this._defaultVertexColorShader = undefined;
   this._defaultPointShader = undefined;
 
   this.userFillShader = undefined;
@@ -1198,15 +1197,6 @@ p5.RendererGL.prototype._getColorShader = function() {
       defaultShaders.basicFrag
     );
   }
-
-  if (!this._defaultVertexColorShader) {
-    this._defaultVertexColorShader = new p5.Shader(
-      this,
-      defaultShaders.vertexColorVert,
-      defaultShaders.vertexColorFrag
-    );
-  }
-  if (this._useVertexColor) return this._defaultVertexColorShader;
   return this._defaultColorShader;
 };
 

From 2f0e4bb5e46b7784ee6a7618e719746f380e7391 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 7 Jan 2023 01:40:17 +0900
Subject: [PATCH 09/14] Make it receive vColor instead of uMaterialColor

Instead of uMaterialColor, we calculate vColor with vertexShader and use the received value.
---
 src/webgl/shaders/basic.frag | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webgl/shaders/basic.frag b/src/webgl/shaders/basic.frag
index fa6646fa2a..be191e1c34 100644
--- a/src/webgl/shaders/basic.frag
+++ b/src/webgl/shaders/basic.frag
@@ -1,5 +1,5 @@
 precision mediump float;
-uniform vec4 uMaterialColor;
+varying vec4 vColor;
 void main(void) {
-  gl_FragColor = vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a;
+  gl_FragColor = vec4(vColor.rgb, 1.) * vColor.a;
 }

From 54cc685b3338a0b72a56e277e8191abeb4a4929e Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sat, 7 Jan 2023 01:44:11 +0900
Subject: [PATCH 10/14]  Calculate vColor

Computes vColor, the color variable passed to basicFrag, in normalVert, the vertexShader used for solid color drawing in retainedMode.
This will draw based on per-vertex colors if vertexColors contains colors.
---
 src/webgl/shaders/normal.vert | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/webgl/shaders/normal.vert b/src/webgl/shaders/normal.vert
index 9727a77eaf..8a94e83ed1 100644
--- a/src/webgl/shaders/normal.vert
+++ b/src/webgl/shaders/normal.vert
@@ -1,17 +1,23 @@
 attribute vec3 aPosition;
 attribute vec3 aNormal;
 attribute vec2 aTexCoord;
+attribute vec4 aVertexColor;
 
 uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;
 uniform mat3 uNormalMatrix;
 
+uniform vec4 uMaterialColor;
+uniform bool uUseVertexColor;
+
 varying vec3 vVertexNormal;
 varying highp vec2 vVertTexCoord;
+varying vec4 vColor;
 
 void main(void) {
   vec4 positionVec4 = vec4(aPosition, 1.0);
   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
   vVertexNormal = normalize(vec3( uNormalMatrix * aNormal ));
   vVertTexCoord = aTexCoord;
+  vColor = (uUseVertexColor ? aVertexColor : uMaterialColor);
 }

From d885e18d0912cd40db2dcb6f39c3f9899e6058f8 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Sun, 8 Jan 2023 23:47:18 +0900
Subject: [PATCH 11/14]  Test for interpolating vertex colors

Added some tests to make sure that vertex color interpolation in immediate mode and retained mode performs properly even when lighting shaders are enabled.
---
 test/unit/webgl/p5.RendererGL.js | 141 +++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js
index 2fe395c1fd..38317cc476 100644
--- a/test/unit/webgl/p5.RendererGL.js
+++ b/test/unit/webgl/p5.RendererGL.js
@@ -1108,6 +1108,147 @@ suite('p5.RendererGL', function() {
       done();
     });
   });
+  
+  suite('interpolation of vertex colors', function(){
+    test('immediate mode uses vertex colors (noLight)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      // upper color: (200, 0, 0, 255);
+      // lower color: (0, 0, 200, 255);
+      // expected center color: (100, 0, 100, 255);
+
+      myp5.beginShape();
+      myp5.fill(200, 0, 0);
+      myp5.vertex(-128, -128);
+      myp5.fill(200, 0, 0);
+      myp5.vertex(128, -128);
+      myp5.fill(0, 0, 200);
+      myp5.vertex(128, 128);
+      myp5.fill(0, 0, 200);
+      myp5.vertex(-128, 128);
+      myp5.endShape(myp5.CLOSE);
+
+      assert.equal(renderer._useVertexColor, true);
+      assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);
+      done();
+    });
+
+    test('immediate mode uses vertex colors (light)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      myp5.directionalLight(255, 255, 255, 0, 0, -1);
+      // diffuseFactor:0.73
+      // so, expected color is (73, 0, 73, 255).
+
+      myp5.beginShape();
+      myp5.fill(200, 0, 0);
+      myp5.vertex(-128, -128);
+      myp5.fill(200, 0, 0);
+      myp5.vertex(128, -128);
+      myp5.fill(0, 0, 200);
+      myp5.vertex(128, 128);
+      myp5.fill(0, 0, 200);
+      myp5.vertex(-128, 128);
+      myp5.endShape(myp5.CLOSE);
+
+      assert.equal(renderer._useVertexColor, true);
+      assert.deepEqual(myp5.get(128, 128), [73, 0, 73, 255]);
+      done();
+    });
+    
+    test('geom without vertex colors use curFillCol (noLight)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      // expected center color is curFillColor.
+
+      myp5.fill(200, 0, 200);
+      myp5.rectMode(myp5.CENTER);
+      myp5.rect(0, 0, myp5.width, myp5.height);
+
+      assert.equal(renderer._useVertexColor, false);
+      assert.deepEqual(myp5.get(128, 128), [200, 0, 200, 255]);
+      done();
+    });
+
+    test('geom without vertex colors use curFillCol (light)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      directionalLight(255, 255, 255, 0, 0, -1);
+      // diffuseFactor:0.73
+      // so, expected color is (146, 0, 146, 255).
+
+      myp5.fill(200, 0, 200);
+      myp5.rectMode(myp5.CENTER);
+      myp5.rect(0, 0, myp5.width, myp5.height);
+
+      assert.equal(renderer._useVertexColor, false);
+      assert.deepEqual(myp5.get(128, 128), [146, 0, 146, 255]);
+      done();
+    });
+    
+    test('geom with vertex colors use their color (noLight)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      // upper color: (200, 0, 0, 255);
+      // lower color: (0, 0, 200, 255);
+      // expected center color: (100, 0, 100, 255);
+
+      const myGeom = new p5.Geometry(1, 1, function() {
+        this.gid = 'vertexColorTestWithNoLights';
+        this.vertices.push(myp5.createVector(-128, -128));
+        this.vertices.push(myp5.createVector(128, -128));
+        this.vertices.push(myp5.createVector(128, 128));
+        this.vertices.push(myp5.createVector(-128, 128));
+        this.faces.push([0, 1, 2]);
+        this.faces.push([0, 2, 3]);
+        this.vertexColors.push(
+          200/255, 0, 0, 1,
+          200/255, 0, 0, 1,
+          0, 0, 200/255, 1,
+          0, 0, 200/255, 1
+        );
+        this.computeNormals();
+      });
+
+      myp5.noStroke();
+      myp5.model(myGeom);
+
+      assert.equal(renderer._useVertexColor, true);
+      assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);
+      done();
+    });
+    
+    test('geom with vertex colors use their color (light)', function(done) {
+      const renderer = createCanvas(256, 256, myp5.WEBGL);
+
+      const myGeom = new p5.Geometry(1, 1, function() {
+        this.gid = 'vertexColorTestWithLighs';
+        this.vertices.push(myp5.createVector(-128, -128));
+        this.vertices.push(myp5.createVector(128, -128));
+        this.vertices.push(myp5.createVector(128, 128));
+        this.vertices.push(myp5.createVector(-128, 128));
+        this.faces.push([0, 1, 2]);
+        this.faces.push([0, 2, 3]);
+        this.vertexColors.push(
+          200/255, 0, 0, 1,
+          200/255, 0, 0, 1,
+          0, 0, 200/255, 1,
+          0, 0, 200/255, 1
+        );
+        this.computeNormals();
+      });
+
+      myp5.directionalLight(255, 255, 255, 0, 0, -1);
+      // diffuseFactor:0.73
+      // so, expected color is (73, 0, 73, 255).
+      myp5.noStroke();
+      myp5.model(myGeom);
+
+      assert.equal(renderer._useVertexColor, true);
+      assert.deepEqual(myp5.get(128, 128), [73, 0, 73, 255]);
+      done();
+    });
+  });
 
   suite('setAttributes', function() {
     test('It leaves a reference to the correct canvas', function(done) {

From bac0afc7f96fccfa255931a8ef755a1495dc0f77 Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Mon, 9 Jan 2023 00:11:25 +0900
Subject: [PATCH 12/14] erase several trailing spaces

erase several trailing spaces.
---
 test/unit/webgl/p5.RendererGL.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js
index 38317cc476..3eac8cd27c 100644
--- a/test/unit/webgl/p5.RendererGL.js
+++ b/test/unit/webgl/p5.RendererGL.js
@@ -1108,7 +1108,7 @@ suite('p5.RendererGL', function() {
       done();
     });
   });
-  
+
   suite('interpolation of vertex colors', function(){
     test('immediate mode uses vertex colors (noLight)', function(done) {
       const renderer = createCanvas(256, 256, myp5.WEBGL);
@@ -1155,7 +1155,7 @@ suite('p5.RendererGL', function() {
       assert.deepEqual(myp5.get(128, 128), [73, 0, 73, 255]);
       done();
     });
-    
+
     test('geom without vertex colors use curFillCol (noLight)', function(done) {
       const renderer = createCanvas(256, 256, myp5.WEBGL);
 
@@ -1185,7 +1185,7 @@ suite('p5.RendererGL', function() {
       assert.deepEqual(myp5.get(128, 128), [146, 0, 146, 255]);
       done();
     });
-    
+
     test('geom with vertex colors use their color (noLight)', function(done) {
       const renderer = createCanvas(256, 256, myp5.WEBGL);
 
@@ -1217,7 +1217,7 @@ suite('p5.RendererGL', function() {
       assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);
       done();
     });
-    
+
     test('geom with vertex colors use their color (light)', function(done) {
       const renderer = createCanvas(256, 256, myp5.WEBGL);
 

From e30f44ce7b9a97bcf8d4127ce4a6787474609a1f Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Mon, 9 Jan 2023 00:20:03 +0900
Subject: [PATCH 13/14] fix "createCanvas" to "myp5.createCanvas"

Instead of writing "myp5.createCanvas", I wrote "createCanvas" directly. So I fixed it.
---
 test/unit/webgl/p5.RendererGL.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/unit/webgl/p5.RendererGL.js b/test/unit/webgl/p5.RendererGL.js
index 3eac8cd27c..a46d0b2103 100644
--- a/test/unit/webgl/p5.RendererGL.js
+++ b/test/unit/webgl/p5.RendererGL.js
@@ -1111,7 +1111,7 @@ suite('p5.RendererGL', function() {
 
   suite('interpolation of vertex colors', function(){
     test('immediate mode uses vertex colors (noLight)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
       // upper color: (200, 0, 0, 255);
       // lower color: (0, 0, 200, 255);
@@ -1134,7 +1134,7 @@ suite('p5.RendererGL', function() {
     });
 
     test('immediate mode uses vertex colors (light)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
       myp5.directionalLight(255, 255, 255, 0, 0, -1);
       // diffuseFactor:0.73
@@ -1157,7 +1157,7 @@ suite('p5.RendererGL', function() {
     });
 
     test('geom without vertex colors use curFillCol (noLight)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
       // expected center color is curFillColor.
 
@@ -1171,9 +1171,9 @@ suite('p5.RendererGL', function() {
     });
 
     test('geom without vertex colors use curFillCol (light)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
-      directionalLight(255, 255, 255, 0, 0, -1);
+      myp5.directionalLight(255, 255, 255, 0, 0, -1);
       // diffuseFactor:0.73
       // so, expected color is (146, 0, 146, 255).
 
@@ -1187,7 +1187,7 @@ suite('p5.RendererGL', function() {
     });
 
     test('geom with vertex colors use their color (noLight)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
       // upper color: (200, 0, 0, 255);
       // lower color: (0, 0, 200, 255);
@@ -1219,7 +1219,7 @@ suite('p5.RendererGL', function() {
     });
 
     test('geom with vertex colors use their color (light)', function(done) {
-      const renderer = createCanvas(256, 256, myp5.WEBGL);
+      const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);
 
       const myGeom = new p5.Geometry(1, 1, function() {
         this.gid = 'vertexColorTestWithLighs';

From 9876932e95c4fa4b9589257e4e657829e61c9e6e Mon Sep 17 00:00:00 2001
From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com>
Date: Mon, 9 Jan 2023 00:46:13 +0900
Subject: [PATCH 14/14] insert a space

When I stopped modifying the code, it ended up with one line of space omitted, so I put it back.
---
 src/webgl/p5.RendererGL.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index a805b4708d..ccfac0df9c 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -1197,6 +1197,7 @@ p5.RendererGL.prototype._getColorShader = function() {
       defaultShaders.basicFrag
     );
   }
+
   return this._defaultColorShader;
 };