WebGL多物体绘制技术咨询：无外部库实现原子3D模型的困惑

嘿，我完全懂你这种卡在单个物体到多个物体的瓶颈感——毕竟我当初刚摸WebGL时也在这儿卡了好久！既然你已经能熟练画单个球体、写着色器，那搞定多电子模型其实没你想的那么复杂，核心思路就是复用现有资源，只传递每个物体的差异数据，不用瞎折腾多缓冲区、多VAO或者多着色器程序。

我给你拆解下具体怎么弄，完全不用依赖外部库：

你的所有电子都是球体，形状、顶点数据完全一致，所以不需要为每个电子新建顶点缓冲区、索引缓冲区或者VAO——一套球体的几何体数据就能给所有电子用。

1. 循环绘制（新手首选，改动最小） #

这是最容易理解的方式，逻辑就是：每次画一个电子前，把它的位置、缩放、旋转通过uniform传给着色器，然后调用一次绘制命令。

具体步骤： #

• 修改顶点着色器：新增一个u_modelMatrix的uniform矩阵，用来控制单个电子的变换。原来的顶点位置计算要加上这个矩阵：

attribute vec3 a_position;
attribute vec3 a_normal;

uniform mat4 u_projectionMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_modelMatrix; // 新增：单个物体的模型矩阵

varying vec3 v_normal;

void main() {
  vec4 worldPos = u_modelMatrix * vec4(a_position, 1.0);
  gl_Position = u_projectionMatrix * u_viewMatrix * worldPos;
  v_normal = mat3(u_modelMatrix) * a_normal; // 法线也要跟着变换
}

• JavaScript端逻辑：绑定好你的球体VAO和着色器程序后，循环遍历每个电子，计算它的模型矩阵并传入，然后绘制：

// 假设你已经准备好了球体的VAO、索引数量、着色器程序
const electronNum = 8;
const orbitRadius = 2; // 电子轨道半径
const nucleusPos = [0, 0, 0];

// 绑定着色器和VAO
gl.useProgram(yourShaderProgram);
gl.bindVertexArray(sphereVAO);

// 获取uniform位置（只需要获取一次）
const modelMatrixLoc = gl.getUniformLocation(yourShaderProgram, 'u_modelMatrix');
const viewMatrixLoc = gl.getUniformLocation(yourShaderProgram, 'u_viewMatrix');
const projMatrixLoc = gl.getUniformLocation(yourShaderProgram, 'u_projectionMatrix');

// 设置视图、投影矩阵（全局设置，一次就行）
gl.uniformMatrix4fv(viewMatrixLoc, false, yourViewMatrix);
gl.uniformMatrix4fv(projMatrixLoc, false, yourProjectionMatrix);

// 循环绘制每个电子
for (let i = 0; i < electronNum; i++) {
  // 计算电子的轨道角度（加上时间让它动起来）
  const angle = (i / electronNum) * Math.PI * 2 + Date.now() * 0.001;
  // 计算电子当前位置：绕原子核做圆周运动
  const x = nucleusPos[0] + Math.cos(angle) * orbitRadius;
  const y = nucleusPos[1] + Math.sin(angle) * orbitRadius;
  const z = nucleusPos[2];

  // 创建模型矩阵：平移到目标位置 + 缩放成电子大小
  const modelMatrix = mat4.create(); // 用你自己的矩阵工具或者手动创建
  mat4.translate(modelMatrix, modelMatrix, [x, y, z]);
  mat4.scale(modelMatrix, modelMatrix, [0.2, 0.2, 0.2]);

  // 把模型矩阵传给着色器
  gl.uniformMatrix4fv(modelMatrixLoc, false, modelMatrix);
  // 绘制单个球体
  gl.drawElements(gl.TRIANGLES, sphereIndexCount, gl.UNSIGNED_SHORT, 0);
}

// 解绑资源
gl.bindVertexArray(null);
gl.useProgram(null);

这种方式的好处是几乎不用改你现有绘制单个球体的代码，加个循环和矩阵计算就行，适合快速验证效果。

2. 实例化渲染（性能优化，适合大量物体） #

如果你的电子数量特别多（比如上百个），循环绘制会频繁在JS和WebGL之间通信，性能会下降。这时候可以用实例化渲染，把所有电子的变换数据一次性传给WebGL，让它批量绘制。

核心思路： #

• 创建一个实例属性缓冲区，把每个电子的位置、缩放或模型矩阵存进去。
• 在顶点着色器里用in变量接收这个实例属性，并用gl.vertexAttribDivisor告诉WebGL：这个属性每绘制一个实例才取一次值（而不是每个顶点取一次）。
• 最后调用gl.drawElementsInstanced或gl.drawArraysInstanced批量绘制所有实例。

这种方式性能更好，但需要你对VAO和属性配置更熟悉，等你把循环绘制玩明白了再上手也不迟。

• VAO：不管用哪种方式，你只需要一个VAO——绑定球体的顶点、法线等属性就行，循环或实例化时复用它。
• 着色器程序：所有电子用同一个着色器程序就够了，因为它们的渲染逻辑（比如光照、材质）完全一致。只有当某个物体需要特殊效果时，才需要单独的着色器。

先从循环绘制开始试，很快就能看到多个电子绕原子核转的效果了！

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