WebGL绘制随机颜色顶点圆环出现规律图案的原因排查

问题描述 #

我想绘制一个每个顶点都带有随机颜色的圆环，已经为1500个顶点分配了随机颜色，但最终绘制出的圆环颜色却呈现出规律的图案。这是什么原因导致的？Math.random()的逻辑应该没问题吧？WebGL着色背后的逻辑是什么？

原因分析 #

问题和Math.random()完全无关，核心出在WebGL的颜色插值渲染机制上：

你用gl.TRIANGLES绘制了500个扇形三角形（每个三角形由圆心点+圆环上的相邻两点组成），每个三角形的三个顶点都有独立的随机颜色，但WebGL在渲染三角形时，会对三个顶点的颜色做线性平滑插值——也就是说，三角形内部的每一个像素颜色，都是三个顶点颜色的加权混合值。

而你的扇形三角形是连续排列的，相邻三角形共享圆环上的顶点，这些共享顶点的随机颜色会让相邻三角形的插值区域颜色产生关联，最终形成了看起来有规律的渐变图案，而非你预期的完全随机的点状效果。

WebGL着色核心逻辑 #

WebGL的着色流程分为四个关键步骤：

1. 顶点着色器：处理每个顶点的位置、颜色数据，通过varying变量将颜色传递给片元着色器。
2. 图元装配：将顶点组合成你指定的图元（这里是TRIANGLES）。
3. 光栅化：把图元转换成屏幕上的像素（片元）。
4. 片元着色器：对每个片元，自动对varying变量传递的颜色进行插值计算，得到该像素的最终颜色。

这里的关键是varying变量的特性——它会在图元内部进行线性插值，所以即使顶点颜色是随机的，三角形内部的颜色也会平滑过渡，多个连续三角形的过渡区域就会形成规律的视觉效果。

修复方案 #

如果想实现“每个顶点对应区域颜色独立随机”的效果，有两种常用方法：

方法一：绘制独立顶点（无插值） #

直接用gl.POINTS绘制顶点，而非三角形。这样每个顶点会被渲染成独立的点，颜色不会被插值。
修改main函数中的绘制代码：

// 原代码
// gl.drawArrays(gl.TRIANGLES, 0, n);
// 修改后
gl.drawArrays(gl.POINTS, 0, n);

可以根据需求调整顶点着色器中的gl_PointSize数值，改变点的大小。

方法二：给每个三角形分配单一随机颜色 #

让每个三角形的三个顶点使用同一个随机颜色，这样插值后整个三角形的颜色会完全一致，不会出现过渡效果。修改initVertexBuffers中的颜色生成逻辑：

// 原代码
// var vertexColors = [];
// for (var i = 1; i <= 1500; i++){
//   vertexColors.push(Math.random(),Math.random(),Math.random(),1)
// }

// 修改后
var vertexColors = [];
for (var i = 1; i <= 500; i++){
  // 为当前三角形生成一组随机颜色
  var r = Math.random(), g = Math.random(), b = Math.random(), a = 1;
  // 给三角形的三个顶点都使用这组颜色
  vertexColors.push(r, g, b, a);
  vertexColors.push(r, g, b, a);
  vertexColors.push(r, g, b, a);
}

这样绘制出的圆环会由500个颜色随机的扇形块组成，每个块颜色统一。

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