WebGL技术问题：如何固定大白色圆形尺寸，仅让小圆形动画放大

问题根源 #

你的顶点着色器里的u_SizeChange uniform是全局生效的——一旦调用draw_growing_circle设置了这个值，后续所有绘制的图形（包括白色大圆）都会应用这个缩放因子，这就是大圆跟着放大的原因。WebGL的uniform状态会持续保留，直到被重新修改，所以必须在绘制不同需求的图形时，显式重置对应的状态。

具体修复步骤 #

1. 给固定大小的大圆重置缩放因子 #

在draw_circle函数中，添加一行代码将u_SizeChange设为固定值1.0，确保大圆不受缩放影响：

function draw_circle() {
  // 原有代码：设置大圆的位置、颜色等属性
  // 新增：强制将缩放因子重置为1，消除之前小圆缩放的影响
  gl.uniform1f(u_SizeChange, 1.0);
  // 执行大圆的绘制
  gl.drawArrays(gl.POINTS, ...);
}

2. （可选）优化着色器逻辑，区分缩放开关 #

如果想让逻辑更清晰，可以给顶点着色器加一个开关uniform，控制是否应用缩放：

attribute vec4 a_Position;
uniform float u_SizeChange;
uniform bool u_ApplyScale; // 新增开关，标记是否启用缩放

void main() {
  gl_Position = a_Position;
  // 仅在开关开启时应用缩放
  if(u_ApplyScale) {
    gl_PointSize = gl_PointSize * u_SizeChange;
  }
}

然后在绘制时：

• 画小圆前设置u_ApplyScale = true，并传入currentSize
• 画大圆前设置u_ApplyScale = false，彻底屏蔽缩放逻辑

3. 避免WebGL状态污染 #

WebGL的所有渲染状态（包括uniform、顶点属性、着色器程序）都是全局的，绘制不同图形前一定要重置相关状态。比如如果你的绘制顺序是先画小圆再画大圆，必须在画大圆前覆盖掉小圆的缩放设置；如果先画大圆再画小圆，小圆的缩放不会影响已绘制的大圆，但显式设置状态依然是更稳妥的习惯。

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