如何从Three.js向顶点着色器传递百万级大数组？

首先明确：WebGL的uniform数组存在硬件限制，你遇到的4075大小上限是普遍情况，没法直接通过uniform传递100万规模的vec3数组。要实现你的星系模拟需求，用纹理存储粒子数据是标准解决方案。

核心思路：用纹理替代uniform数组 #

纹理可以承载远大于uniform的数据量，比如一张1024x1024的纹理就能存储1,048,576个vec3数据（每个像素的RGB通道对应vec3的x/y/z分量），完全满足你的100万粒子需求。

示例实现步骤 #

1. JS端准备纹理数据
   把粒子位置数组转换成浮点数组，创建并上传纹理：

// 假设particles是包含100万vec3的数组，每个元素为[x,y,z]
const data = new Float32Array(particles.flat());
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 用RGB32F格式存储高精度浮点位置数据
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB32F, 1024, 1024, 0, gl.RGB, gl.FLOAT, data);
// 设置纹理参数，避免不必要的过滤和重复
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

2. 着色器中采样纹理获取粒子数据
   在着色器中，将粒子索引转换为纹理UV坐标，采样得到对应粒子的位置：

precision highp float;
uniform sampler2D particleTexture;
// 纹理的尺寸（此处为1024x1024）
uniform vec2 textureSize;
// 当前粒子的索引
attribute float particleIndex;

void main() {
    // 将粒子索引转为纹理UV坐标
    float col = mod(particleIndex, textureSize.x);
    float row = floor(particleIndex / textureSize.x);
    vec2 uv = vec2(col / textureSize.x, row / textureSize.y);
    
    // 采样获取粒子位置
    vec3 particlePos = texture2D(particleTexture, uv).rgb;
    
    // 在这里执行粒子位置比较与受力计算
    // ...
    
    gl_Position = ...;
}

性能优化建议 #

直接遍历100万粒子计算相互作用力无法实时运行，建议做以下优化：

• 空间分区：把粒子划分到网格中，每个粒子只和同一网格或相邻网格的粒子计算作用力
• 近似算法：采用Barnes-Hut这类N体模拟优化算法，减少不必要的计算量
• GPGPU离屏计算：用帧缓冲对象（FBO）做离屏计算，将每帧的粒子位置结果渲染到纹理中，作为下一帧的输入数据

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