三.js 各种大小的粒子 [英] Three.js Particles of various sizes

问题描述

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

I'm new to three.js and am trying to figure out the best way to add a 1000 particles each being a different size and color. The texture for each particle is created by drawing a canvas. By using a ParticleSystem all the particles are the same color and size. Creating a ParticleSystem for each particle is very inefficient. Is there an efficient way to handle this?

推荐答案

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

The best way to go about this, in my experience, is to create a customized shader material; you can then include attributes, which are properties that vary from particle to particle. Your shader code would look something like this:

顶点着色器:

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 );
}

有关类似的现场示例，请查看:

For a similar live example, check out:

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

这篇关于三.js 各种大小的粒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！