javascript - Three.js 各种大小的粒子

Question

我是 three.js 的新手，正在尝试找出添加 1000 个粒子的最佳方法，每个粒子的大小和颜色都不同。每个粒子的纹理都是通过绘制画布创建的。通过使用粒子系统，所有粒子的颜色和大小都相同。为每个粒子创建一个 ParticleSystem 效率非常低。有没有一种有效的方法来处理这个问题？

Answer 1

根据我的经验，最好的方法是创建自定义着色器材质；然后，您可以包含属性，这些属性是因粒子而异的属性。您的着色器代码如下所示：

顶点着色器：

attribute vec3 customColor;
attribute float customSize;
varying vec3 vColor;
void main() 
{
    vColor = customColor; // set color associated to vertex; use later in fragment shader
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = customSize * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

片段着色器：

uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
void main() 
{
    // calculates a color for the particle
    gl_FragColor = vec4( vColor, 1.0 );
    // sets particle texture to desired color
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}

对于类似的现场示例，请查看：

http://stemkoski.github.io/Three.js/ParticleSystem-Attributes.html