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

Three.js各种尺寸的颗粒

1 个答案: