如何为WebGL单个点添加颜色渐变而非单一颜色？

我已通过以下极简顶点着色器创建了包含位置与大小信息的2D点网格：

precision mediump float;
uniform int size;
attribute vec2 position;
attribute vec3 color;
varying vec3 vcolor;
void main() {
    gl_PointSize = float(size);
    gl_Position = vec4(position.x, position.y, 0.0, 1.0);
    vcolor = color;
}

目前可通过该片元着色器为点设置单一颜色：

precision mediump float;
varying vec3 vcolor;
void main() {
    gl_FragColor = vec4(vcolor, 1.0);
}

能否像三角形渐变示例那样，为单个WebGL点实现跨点的颜色渐变？

当然可以实现单个点的颜色渐变 #

WebGL的点精灵（Point Sprite）支持通过内置变量gl_PointCoord获取当前片元在点内的相对坐标（范围为(0,0)到(1,1)，左上角为原点），借助这个变量就能轻松实现点内的颜色渐变效果。

核心实现步骤： #

1. 调整顶点着色器（可选）
   如果需要每个点使用自定义的渐变颜色范围，可以新增颜色属性来传递渐变的起始色与结束色，让效果更灵活：

   precision mediump float;
   uniform int size;
   attribute vec2 position;
   attribute vec3 colorStart; // 渐变起始色
   attribute vec3 colorEnd;   // 渐变结束色
   varying vec3 vColorStart;
   varying vec3 vColorEnd;
   void main() {
       gl_PointSize = float(size);
       gl_Position = vec4(position.x, position.y, 0.0, 1.0);
       vColorStart = colorStart;
       vColorEnd = colorEnd;
   }
   

2. 修改片元着色器实现渐变
   利用gl_PointCoord作为渐变插值因子，就能生成不同方向或类型的渐变：

   • 线性渐变（从左到右）

     precision mediump float;
     varying vec3 vColorStart;
     varying vec3 vColorEnd;
     void main() {
         // 用x轴坐标作为插值因子，从左到右混合两种颜色
         vec3 gradientColor = mix(vColorStart, vColorEnd, gl_PointCoord.x);
         gl_FragColor = vec4(gradientColor, 1.0);
     }
     

   • 径向渐变（中心到边缘）

     precision mediump float;
     varying vec3 vColorStart;
     varying vec3 vColorEnd;
     void main() {
         // 计算当前片元到点中心的相对距离
         float dist = distance(gl_PointCoord, vec2(0.5));
         // 基于距离实现从中心到边缘的渐变
         vec3 gradientColor = mix(vColorStart, vColorEnd, dist * 2.0);
         gl_FragColor = vec4(gradientColor, 1.0);
     }
     

额外说明： #

• gl_PointCoord是WebGL 1.0及以上版本的内置变量，无需额外配置即可使用。
• 如果需要更复杂的渐变效果（比如多色分段渐变、角度渐变），可以基于gl_PointCoord扩展数学计算，或是通过纹理采样的方式将预定义渐变纹理贴到点上。

内容的提问来源于stack exchange，提问作者Blee