shader实现发亮的粒子 + 透明度渲染可能出现的坑
shader小白的学习之路。
3D可视化就是为了更好地展示效果，谁会拒绝一个闪闪发光的星空呢。说起发光，第一想到的肯定是three.js 自带的后处理的辉光效果，这个在我自己之前的博客中也有讲过。
我没有剖析过相关源码，也没有那个能力，今天只是分享一个让粒子发光的另一种方法。
一、粒子发光
首先，构建出一个基本的粒子系统，模拟星空：
const fireShader = {uniforms: {uTime: time,},vertexShader: `uniform float uTime;attribute float size;void main() {vec3 newPos = position;vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);gl_PointSize = size * 70.0 / -mvPosition.z;gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `void main() {gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}`,
};const fireCount = 1000;
const firePositions = new Float32Array(fireCount * 3);
const fireSizes = new Float32Array(fireCount);
const r = 10;
for (let i = 0; i < fireCount; i++) {fireSizes[i] = Math.random() + 0.5;firePositions[3 * i] = (Math.random() - 0.5) * 2 * r;firePositions[3 * i + 1] = (Math.random() - 0.5) * 2 * r;firePositions[3 * i + 2] = (Math.random() - 0.5) * 2 * r;
}
const fireGeo = new Three.BufferGeometry();
fireGeo.setAttribute("position", new Three.BufferAttribute(firePositions, 3));
fireGeo.setAttribute("size", new Three.BufferAttribute(fireSizes, 1));
const fireMat = new Three.ShaderMaterial({...fireShader,transparent: true,
});
const fireMesh = new Three.Points(fireGeo, fireMat);
scene.add(fireMesh);一个很丑的粒子组成的立方体就出现了：
然后我们就让其发光。这个发光的要点在于透明度的控制，通过某一段透明度的快速变化形成模糊发光的视觉效果。
函数为：
上述公式的曲线如图所示：
大概在len=0.045的时候，y=1；len=0.5时，y=0。在这个区间内，y值迅速下降，可以用来模拟透明度的快速变化。
其中，len表示每一个PointCoord到中心点的距离。len值越小，说明距离中心点越近。
写到片元着色器中：
/* GLSL frgmentShader */void main() {float len = length(gl_PointCoord - vec2(0.5));float strength = clamp(0.05 * (1.0 / len - 2.0), 0.0, 1.0);gl_FragColor = vec4(1.0, 1.0, 1.0, strength);}实现的效果如下：
可以看到粒子散发出了明媚的光芒，哈哈。
二、透明渲染有时失效
在有多个透明度物体时，可能会出现透明度失效的问题。
一种表现形式是，设置了透明度是0.5，但只表现为颜色暗淡，却无法透过去看见背后的mesh；另一种则表现为完全将背后的模型投过去，直接看见更背后的mesh：
这两种情况用共同的解决方法：手动控制mesh的renderOrder属性。
mesh.renderOrder = 10;有事还可以通过设置混合模型和禁止深度写入来解决：
const fireMat = new Three.ShaderMaterial({...fireShader,transparent: true,blending: Three.AdditiveBlending,depthWrite: false,
});
原因或者说原理就需要了解three.js中渲染顺序的问题：
-
不透明物体：按照从前往后的顺序渲染（即先渲染距离相机较近的物体）。
-
透明物体：按照从后往前的顺序渲染（即先渲染距离相机较远的物体）。
针对透明物体：
-
先渲染距离相机较远的透明物体：这样可以确保它们的像素先被写入到帧缓冲区中。
-
再渲染距离相机较近的透明物体：这些物体的像素会与已经渲染的较远物体的像素进行混合，从而实现正确的透明效果。
renderOrder越小，理论上渲染顺序越靠前。所以有时需要手动控制渲染的顺序，尤其是两者位置距离很近的时候。