Three.js如何去除渐变效果中的体素化异常？

问题分析 #

你当前的实现是通过循环生成大量小矩形拼接成大矩形，每个小矩形的四个顶点都使用相同的颜色值，这就导致每个小方块颜色均匀，呈现出“体素化”的效果，而非顶点间的平滑颜色插值。

解决方案 #

改用单个矩形（由两个三角形组成），仅给四个顶点设置不同的目标颜色，让WebGL自动在顶点间进行颜色插值，就能实现平滑渐变效果。

修改后的核心代码示例：

// 顶点着色器
const vertexShaderSource = `
attribute vec2 a_position;
attribute vec4 a_color;
varying vec4 v_color;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
  v_color = a_color;
}
`;

// 片段着色器
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
void main() {
  gl_FragColor = v_color;
}
`;

// 单个大矩形的四个顶点位置
const positions = new Float32Array([
  -1.0, -1.0,
   1.0, -1.0,
  -1.0,  1.0,
   1.0,  1.0,
]);

// 四个顶点对应四种不同颜色，用于插值生成平滑渐变
const colors = new Float32Array([
  1.0, 0.0, 0.0, 1.0, // 左下红色
  0.0, 1.0, 0.0, 1.0, // 右下绿色
  0.0, 0.0, 1.0, 1.0, // 左上蓝色
  1.0, 1.0, 0.0, 1.0, // 右上黄色
]);

// 绘制时使用 TRIANGLE_STRIP 模式，一次绘制完成大矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

补充说明 #

WebGL的片段着色器会自动对顶点着色器传递的varying变量（比如示例中的v_color）进行插值计算，只要顶点颜色不同，就能在三角形内部生成自然的平滑颜色过渡。手动拆分小方块的做法会打断插值逻辑，反而造成色块化的问题。

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