粒子 Particles

创建粒子的方式与网格Mesh是类似的，他需要：

• 几何体（BufferGeometry）
• 材质（PointsMaterial）
• 点Points实例（而不是网格Mesh）

创建第一个粒子

const particlesGeometry = new THREE.SphereBufferGeometry(1, 32, 32)
const particalesMaterial = new THREE.PointMaterial({
    size: 0.02, // 粒子大小
    sizeAttenuation: truetrue // 粒子衰减，远离相机变小，靠近相机放大
})
const particles = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(particles)

使用自定义几何体

const particlesGeometry = new THREE.BufferGeometry()
const count = 500
const positions = new Float32Array(count * 3)
for(let i = 0; i < count *3; i++) {
    position[i] = (Math.random() - 0.5) * 10
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))

颜色、贴图、透明度贴图

particlesMaterial.color = new THREE.Color('#ff88cc')

particlesMaterital.map = particleTexture

提供一些更多的粒子贴图：
https://www.kenney.nl/assets/particle-pack

particlesMaterial.transparent = true
particlesMaterial.alphaMap = particleTexture

处理透明对象的渲染

创建粒子时由于他们以相同的顺序被创建，因此WebGL不知道粒子在相机前的先后顺序，在设置透明贴图后你仍可以看到粒子的边缘，为了解决这个问题，有以下几种方法

使用alphaTest

alphaTest是一个材质属性，用于处理透明度的渲染，确定一个阈值来表示哪些像素将被渲染哪些像素将被丢弃。范围0到1，当材质像素的alpha值低于alphaTest时，这些像素将不会被渲染。

particlesMaterial.alphaTest = 0.001

使用depthTest

depthTest一个用于控制深度测试的材质属性。深度测试用于确定一个像素是否应当被绘制在场景中的某个特定位置，基于其他已渲染像素的深度信息。

• 确保正确的遮挡关系：通过比较当前像素与缓冲区中存储的深度值，决定该像素是否可见。
• 避免视觉错误：如物体穿透或重叠时，深度测试可以确保离相机较近的对象覆盖离相机较远的对象。

当设置为 true 时，启用深度测试。只有在当前像素的深度值小于缓冲区中已有的深度值时，当前像素才会被绘制。
当设置为 false 时，禁用深度测试，所有像素都会被绘制，无论其深度值如何

particlesMaterial.depthTest = false

将其设置为false虽然在仅有一种粒子的场景表现良好，但是当场景内还有其他物体时，在物体后的粒子也将被渲染，不会被物体遮挡

const cube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(),
    new THREE.MeshBasicMaterial()
)
scene.add(cube)

使用depthWrite

depthWrite 是一个用于控制深度缓冲区写入的材质属性。它主要决定了当前材质是否会向深度缓冲区写入数据。

• 记录物体的深度信息：当 depthWrite 设置为 true 时，材质会将其深度值写入深度缓冲区，以便进行后续的深度测试。
• 影响渲染顺序：通过控制哪些对象可以写入深度缓冲区，可以对渲染顺序和遮挡关系产生影响。

当设置为 true 时，启用深度写入。当前材质的像素深度值会被写入深度缓冲区。
当设置为 false 时，禁用深度写入。虽然仍然可以进行深度测试，但当前材质的深度信息不会被写入缓冲区，这通常用于某些特定效果，比如处理透明物体或创建特殊的视觉效果。

particlesMaterial.depthWrite = false

在渲染透明对象的时候，通常需要禁用该属性，避免深度缓冲区的值干扰随后对象的渲染，但渲染性能会相对降低。

使用Blending

blending 是一个用于控制材质混合模式的属性。混合模式决定了如何将当前渲染的像素与已有的 framebuffer（帧缓冲区）像素进行结合，以实现透明度和其他效果。

• 控制透明度：通过设置不同的混合模式，可以实现各种透明效果，例如渐变、半透明物体等。

• 创造视觉效果：混合可以用于创建一些特效，比如光晕、火焰、烟雾和特殊的图形效果。

• THREE.NoBlending: 不进行混合，直接覆盖。

• THREE.NormalBlending: 使用常规的 alpha 混合，适用于大多数透明材质。

• THREE.AdditiveBlending: 采用加法混合，常用于发光效果。例如，当颜色值相加时，会增加亮度。

• THREE.SubtractiveBlending: 采用减法混合，用于创造阴影或其他视觉效果。

• THREE.MultiplyBlending: 使用乘法混合，通常用于产生更暗的效果，如阴影或暗色调物体。

particlesMaterial.depthWrite = false
particlesMaterial.blending = THREE.AdditiveBlending