From 8a5d88dbf5acc0202197cb1939b14d707b626bf8 Mon Sep 17 00:00:00 2001
From: yugalkaushik <yugalkaushik14@gmail.com>
Date: Fri, 2 Jan 2026 15:36:43 +0000
Subject: [PATCH] =?UTF-8?q?WebGL:=20Apply=20per=E2=80=91vertex=20stroke=20?=
 =?UTF-8?q?color=20to=20POINTS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: yugalkaushik <yugalkaushik14@gmail.com>
---
 src/webgl/p5.RendererGL.Retained.js | 29 ++++++++++++++++++-----------
 src/webgl/p5.RendererGL.js          | 12 +++++++++++-
 src/webgl/shaders/point.frag        |  5 ++++-
 src/webgl/shaders/point.vert        |  8 ++++++++
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/webgl/p5.RendererGL.Retained.js b/src/webgl/p5.RendererGL.Retained.js
index 49f2dd772b..fc581a405a 100644
--- a/src/webgl/p5.RendererGL.Retained.js
+++ b/src/webgl/p5.RendererGL.Retained.js
@@ -244,24 +244,31 @@ p5.RendererGL.prototype._drawElements = function(drawMode, gId) {
   }
 };
 
-p5.RendererGL.prototype._drawPoints = function(vertices, vertexBuffer) {
+p5.RendererGL.prototype._drawPoints = function(vertices, pointBuffers) {
   const gl = this.GL;
   const pointShader = this._getImmediatePointShader();
   this._setPointUniforms(pointShader);
 
-  this._bindBuffer(
-    vertexBuffer,
-    gl.ARRAY_BUFFER,
-    this._vToNArray(vertices),
-    Float32Array,
-    gl.STATIC_DRAW
-  );
-
-  pointShader.enableAttrib(pointShader.attributes.aPosition, 3);
+  // Prepare position and optional per-vertex color buffers
+  if (Array.isArray(pointBuffers)) {
+    for (const buff of pointBuffers) {
+      buff._prepareBuffer(this.immediateMode.geometry, pointShader);
+    }
+  } else {
+    // Backward compatibility if a raw GL buffer is passed
+    this._bindBuffer(
+      pointBuffers,
+      gl.ARRAY_BUFFER,
+      this._vToNArray(vertices),
+      Float32Array,
+      gl.STATIC_DRAW
+    );
+    pointShader.enableAttrib(pointShader.attributes.aPosition, 3);
+  }
 
   this._applyColorBlend(this.curStrokeColor);
 
-  gl.drawArrays(gl.Points, 0, vertices.length);
+  gl.drawArrays(gl.POINTS, 0, vertices.length);
 
   pointShader.unbindShader();
 };
diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index d196e6b095..cac5528a62 100644
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -630,7 +630,10 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
           new p5.RenderBuffer(3, 'lineTangentsOut', 'lineTangentsOutBuffer', 'aTangentOut', this),
           new p5.RenderBuffer(1, 'lineSides', 'lineSidesBuffer', 'aSide', this)
         ],
-        point: this.GL.createBuffer()
+        point: [
+          new p5.RenderBuffer(3, 'vertices', 'pointVertexBuffer', 'aPosition', this, this._vToNArray),
+          new p5.RenderBuffer(4, 'vertexStrokeColors', 'pointColorBuffer', 'aVertexColor', this)
+        ]
       }
     };
 
@@ -2010,6 +2013,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
             'vec3 getLocalPosition': '(vec3 position) { return position; }',
             'vec3 getWorldPosition': '(vec3 position) { return position; }',
             'float getPointSize': '(float size) { return size; }',
+            'vec4 getVertexColor': '(vec4 color) { return color; }',
             'void afterVertex': '() {}'
           },
           fragment: {
@@ -2361,6 +2365,12 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
       'uPointSize',
       this.pointSize * this._pInst._pixelDensity
     );
+    // Enable per-vertex color for POINTS when available
+    const useVertexColor =
+      (this.immediateMode && this.immediateMode.geometry &&
+       this.immediateMode.geometry.vertexStrokeColors &&
+       this.immediateMode.geometry.vertexStrokeColors.length > 0);
+    pointShader.setUniform('uUseVertexColor', !!useVertexColor);
   }
 
   /* Binds a buffer to the drawing context
diff --git a/src/webgl/shaders/point.frag b/src/webgl/shaders/point.frag
index d87cbf0c61..52387a256b 100644
--- a/src/webgl/shaders/point.frag
+++ b/src/webgl/shaders/point.frag
@@ -1,6 +1,7 @@
 precision mediump int;
 uniform vec4 uMaterialColor;
 IN float vStrokeWeight;
+IN vec4 vColor;
 
 void main(){
   HOOK_beforeFragment();
@@ -24,6 +25,8 @@ void main(){
     discard;
   }
 
-  OUT_COLOR = HOOK_getFinalColor(vec4(uMaterialColor.rgb, 1.) * uMaterialColor.a);
+  // Use the interpolated vertex color (set in vertex shader)
+  vec4 baseColor = vColor;
+  OUT_COLOR = HOOK_getFinalColor(vec4(baseColor.rgb, 1.) * baseColor.a);
   HOOK_afterFragment();
 }
diff --git a/src/webgl/shaders/point.vert b/src/webgl/shaders/point.vert
index 6eeb741a64..aa69f1b1b0 100644
--- a/src/webgl/shaders/point.vert
+++ b/src/webgl/shaders/point.vert
@@ -1,6 +1,10 @@
 IN vec3 aPosition;
+IN vec4 aVertexColor;
 uniform float uPointSize;
+uniform bool uUseVertexColor;
+uniform vec4 uMaterialColor;
 OUT float vStrokeWeight;
+OUT vec4 vColor;
 uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;
 
@@ -15,5 +19,9 @@ void main() {
 
 	gl_PointSize = pointSize;
 	vStrokeWeight = pointSize;
+
+  // Choose per-vertex stroke color when available; otherwise use uniform stroke color
+  vec4 baseColor = uUseVertexColor ? aVertexColor : uMaterialColor;
+  vColor = HOOK_getVertexColor(baseColor);
   HOOK_afterVertex();
 }