Merge pull request #8380 from yugalkaushik/7839-fix

WebGL: Apply per‑vertex stroke color to POINTS

Author: davepagurek

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();
 };

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

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();
 }

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();
 }