## 前言之前在小红书上刷到上海「深空未来」展的图片，看到这个宇宙星球的粒子效果觉得挺酷的，也很多人喜欢。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b03557356da24967a29ff743037f8fdb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1440\&h=1080\&s=1140485\&e=jpg\&b=0b0b0a) 于是古柳想起曾经见过的这个 Three.js Shader 实现的粒子系统星系效果，它的形状、颜色、动画令人难忘，可惜当初水平有限，有些地方没有理解，这次重新勾起兴趣看了下源码，发现又搞懂不少地方，可以讲解下，因此想带大家一起手撸一个星系。 * 链接：https://actium.co.jp/ * 链接：https://codepen.io/prisoner849/pen/RwyzrVj ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e03fdddf20c4801907ba48fd881c76b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1895\&h=1080\&s=1857908\&e=jpg\&b=180117) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e65178828b22425d84fdddd3a4da5212~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2880\&h=1622\&s=1501053\&e=jpg\&b=160218) 当然像本文这样实现一个具体完整的 shader 效果的文章，和前面八篇[「手把手带你入门 Three.js Shader 系列」](https://juejin.cn/column/7222305161368469541)教程按部就班讲解一个个知识点还是不太一样，并且本文涉及的粒子系统、BufferGeometry、顶点上设置属性等也都是系列教程里还未涉及的（当然也不难），理想情况下在系列教程讲完那些内容后，再紧跟着来这么一篇完整效果的文章最好。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/056e523e4bc646efbf850b1a758260c2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2453\&h=1985\&s=1753007\&e=png\&b=fefefe) 但有时看到酷炫 shader 的效果、起了兴致就想和大家分享，就也顾不上许多（何况老是犯懒，等系列教程更新完基础内容还不知道要到什么时候）。再者之前说过后续会在本公众号出个24篇付费进阶系列类似这样讲完整效果的文章（欢迎➕我「`xiaoaizhj`」方便获取最新消息，也可进交流群），这样想写什么有趣的内容提笔就能写，因此不妨以这篇作为开篇让大家看看这类文章是啥样子的。言归正传，复现完这个星系效果后照旧套了下之前的 AR 模板，欢迎大家用`手机 Google Chrome 浏览器访问看看`（必须！电脑或手机其他浏览器均不行）。不过由于很多手机不支持 ARCore 可能不少人看不了，大家可以通过第二个链接看看自己的手机型号是否在支持列表里。 * 链接：https://desertsx.github.io/galaxy-particles-nova/ * 链接：https://developers.google.com/ar/devices?hl=zh-cn ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d44dbd657d364e6e889c8930087f49da~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2880\&h=1800\&s=747489\&e=jpg\&b=1a131a) 另外，本文代码已放到 Codepen 并将同步 GitHub，欢迎大家学习： * 链接：https://codepen.io/GuLiu/pen/WNWaNdJ * 链接：https://github.com/DesertsX/threejs-shader-tutorial [jcode](https://code.juejin.cn/pen/7358826804792000548) ## 最简单的粒子系统我们从显示一个白色、线框模式下的球体开始讲起。可以看到球体表面相交的位置就是一个个顶点。 ```js import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; let w = window.innerWidth; let h = window.innerHeight; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, w / h, 0.01, 1000); camera.position.set(0, 0, 24); camera.lookAt(new THREE.Vector3()); const renderer = new THREE.WebGLRenderer({ antialias: true, // alpha: true, }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(w, h); renderer.setClearColor(0x160016, 1); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); const geometry = new THREE.SphereGeometry(10); const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true, }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); const clock = new THREE.Clock(); function render() { const time = clock.getElapsedTime() * 0.5; mesh.rotation.y = time; renderer.render(scene, camera); requestAnimationFrame(render); } render(); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6605fb0c5ca49afb2cc39a2c45fbe73~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=1049646\&e=gif\&f=72\&b=160015) 想在 Three.js 里实现粒子系统，最简单的就是用现成的几何体如 SphereGeometry 搭配 `PointsMaterial` 材质，再丢给 `Points` 来替代 Mesh，即可在几何体顶点处放置粒子，默认粒子为方形。其中在 PointsMaterial 里可以统一设置粒子的颜色和大小。 * 链接：https://threejs.org/docs/api/en/materials/PointsMaterial.html ```js const geometry = new THREE.SphereGeometry(10); const material = new THREE.PointsMaterial({ size: 0.4, color: 0xffffff, }); const points = new THREE.Points(geometry, material); scene.add(points); function render() { // ... // mesh.rotation.y = time; points.rotation.y = time; } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ced1d44cacd64bc8b1c921e5c3755d71~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=367238\&e=gif\&f=72\&b=160015) 不过使用 SphereGeometry 有个很大的问题，粒子在球体两极密集、中间分散，空间上分布不均匀。一种解决办法是用 `IcosahedronGeometry` 正二十面体，传入半径和细分数两个参数，细分数越大顶点越多，此时粒子分布很均匀。 * 链接：https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry ```js const geometry = new THREE.IcosahedronGeometry(10, 6); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f4a8c59eb09413e8719aae087b8d165~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=417846\&e=gif\&f=72\&b=160015) ## 材质换成 ShaderMaterial 为了更灵活的控制粒子效果，可以把材质换成 ShaderMaterial，和此前系列文章里的 shader 不同之处在于这里可通过 `gl_PointSize` 另外设置粒子大小，如果用一个固定数值的话粒子都一样大。 ```js const vertexShader = /* GLSL */ ` uniform float uTime; varying vec2 vUv; void main() { vUv = uv; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = 7.0; // gl_PointSize = 100.0 / -mvPosition.z; gl_Position = projectionMatrix * mvPosition; } `; const fragmentShader = /* GLSL */ ` varying vec2 vUv; void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // gl_FragColor = vec4(vUv, 0.0, 1.0); } `; const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, }, vertexShader, fragmentShader, }); function render() { // ... material.uniforms.uTime.value = time; } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a0d60158ab44f929f2315cf905ef4a0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=574965\&e=gif\&f=72\&b=160015) 想要使靠近相机的粒子大、远离相机的粒子小，就需要对 mvPosition.z 值取倒数。经过 modelViewMatrix 后相机在原点处，3D物体顶点都在 z 轴负方向上，所以这里要加个负号，近大远小取倒数，再通过前面的数值调整大小即可。 ```C# / GLSL gl_PointSize = 100.0 / -mvPosition.z; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/053a10ce1863441cae66ec6e1aa86434~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=481977\&e=gif\&f=72\&b=160015) ## 方形粒子变成圆形我们还可以在 shader 里将粒子变成圆形。在[「手把手带你入门 Three.js Shader 系列（三） - 牛衣古柳 - 20230725」](https://juejin.cn/post/7259411780375314490)一文里，我们借助 uv 就能在一个 plane 上绘制圆形。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb1fad0c700e48088556a5f29313f657~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=7237\&h=5376\&s=248991\&e=png\&a=1\&b=e6fcf5) 粒子系统看起来像由许多小 plane 组成，如果每个粒子有自己单独的 uv 坐标事情就好办了。先直接用 uv 作为颜色看看，此时 uv 还是几何体上面的坐标而不是每个粒子单独的。 ```C# / GLSL gl_FragColor = vec4(vUv, 0.0, 1.0); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a08f244456be4e1c96bee8105a35ec6b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=1004337\&e=gif\&f=72\&b=160015) 幸运的是粒子系统里 `gl_PointCoord` 就是每个粒子上的(0,0)到(1,1)坐标，直接拿来替代 uv 就行，此时每个粒子上都是熟悉的青绿色。 ```C# / GLSL gl_FragColor = vec4(gl_PointCoord, 0.0, 1.0); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64a2dde9ed9a4de78a17a35555a2dd39~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=1153372\&e=gif\&f=72\&b=160015) 对 gl\_PointCoord 减去0.5将坐标范围变化到(-0.5,-0.5)到(0.5,0.5)进行居中，接着通过 length 计算离粒子中心的距离，再通过 step 使得距离小于0.5半径的值为1.0，大于0.5的为0.0，然后作为颜色即可绘制出圆形，但此时粒子半径之外是黑色的而不是透明的，可以通过 discard 丢弃、不绘制对应片元/像素。 ```C# / GLSL void main() { float mask = step(length(gl_PointCoord - 0.5), 0.5); if(mask < 0.5) discard; gl_FragColor = vec4(vec3(mask), 1.0); } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dfde446f71f4710b4d443f6cfd1a1f2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=562656\&e=gif\&f=72\&b=160015) ## 自定义几何体顶点坐标除了用 Three.js 现成的几何体外，我们还能通过 `BufferGeometry` 来自定义几何体的 position 顶点坐标，这样想在哪放粒子就能在哪放。 * 链接：https://threejs.org/docs/#api/en/core/BufferGeometry 下面演示用圆圈范围内随机出的顶点坐标组成几何体、再组成粒子系统的流程。在半径0-10、角度0-2xPI范围内随机出一个个顶点的 xy 坐标，将 z 统一设成0，依次放到数组里，再用 geometry.setAttribute 设置到顶点属性上，命名为 position，且通过 Float32BufferAttribute 表示该数组数据是三个为一组，组成 vec3，这样在顶点着色器里用 `attribute vec3 position` 就能声明和使用，只不过 ShaderMaterial 里 position 默认已经声明，所以直接用就行。这是设置顶点属性的惯用方式，后续还会用到。 ```js const geometry = new THREE.BufferGeometry(); const positions = []; for (let i = 0; i < 5000; i++) { const radius = 10 * Math.random(); const angle = Math.PI * 2 * Math.random(); const x = Math.sin(angle) * radius; const y = Math.cos(angle) * radius; positions.push(x, y, 0); } geometry.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3) ); const material = new THREE.ShaderMaterial({ ... }); const points = new THREE.Points(geometry, material); scene.add(points); // 适当调小粒子大小 // gl_PointSize = 30.0 / -mvPosition.z; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b11ead3a712049f69b2daa389c7a04ea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=400\&s=16122\&e=png\&b=160016) ## 开始复现原作以上，古柳带大家简单入门粒子系统，对于本身就会的朋友来说很简单，但肯定有人此前没接触过这块内容，而且目前更新的八篇`「手把手带你入门 Three.js Shader 系列」`教程里也还没讲到粒子系统、BufferGeometry、设置顶点属性等内容，因此有必要简单讲下，对齐一下颗粒度。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bdbfe390099452a9300b03aa76ec8ec~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=400\&h=232\&s=125476\&e=png\&b=2a3135) 有了上面的基础，接下来就可以进入正题，开始复现原作、手撸一个星系了。 * 链接：https://codepen.io/prisoner849/pen/RwyzrVj ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e52194d5f3043b88ce0c26be720b415~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2278\&h=1030\&s=627895\&e=jpg\&b=160219) 观察原作会发现星系由中心的球体和外面的圆盘/圆柱两部分组成。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a946080a0f2e46e1a9ab2c47bb54b5ff~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1340\&h=1212\&s=616773\&e=jpg\&b=160218) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3b0ca438ba94371a2b4ceef8594f997~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1888\&h=990\&s=501133\&e=jpg\&b=150218) ## 中心球体首先生成中心球体的顶点坐标。在 for 循环里分别生成5万个粒子的球体坐标、10万个粒子的圆盘坐标，统一放到 positions 数组里，再设置到一个 BufferGeometry 上，这里没有分成两个设置。原作里用 `THREE.Vector3().randomDirection()` 生成球体上的单位向量长度的顶点，然后设置向量长度到9.5-10作为球体半径。 * 链接：https://threejs.org/docs/api/en/math/Vector3.html ```js const count1 = 50000; const count2 = 100000; const geometry = new THREE.BufferGeometry(); const positions = []; for (let i = 0; i < count1 + count2; i++) { // 球体部分 if (i < count1) { let { x, y, z } = new THREE.Vector3() .randomDirection() .multiplyScalar(Math.random() * 0.5 + 9.5); positions.push(x, y, z); } else { // 圆盘/圆柱部分 } } geometry.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3) ); // gl_PointSize = 30.0 / -mvPosition.z; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faeb2ac20a4d457f81a2b9e009e36b3b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=186319\&e=png\&b=160016) 但后续在 shader 里会让粒子沿球体表面运动，原作的实现方式我觉得有些地方蛮困惑，因此自己用更好理解的方式去“改进”下。具体来说就是，球体顶点是由半径 r，方位角 theta 和极角 phi 的球坐标计算得到 xyz，并且后续会将 theta、phi 也设置到顶点属性上、传入 shader 里，这样每个顶点沿球体表面运动时，只需在 shader 里分别给 theta、phi 加上一定角度，再对新的 theta、phi 用球坐标算出新的 xyz，就是偏移后的顶点 position...... 和原作的关键区别就是这里的 theta 和 phi 串起了 position 顶点坐标和 shader 里运动，这样理解起来也更容易（后续写到粒子运动时才逐渐搞懂原作运动实现的逻辑，其实这里根本不需要 theta、phi 和初始 position.xyz 对应、新 position 也不是这么计算的，自己的方式还是有些问题但先保留，等粒子运动时再进行更正）。如果你不知道我在说些什么，不急，跟着文章看下去并结合代码理解即可。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e2bdc4f979d445e9594764548cb5c20~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=296\&h=298\&s=17549\&e=png\&b=ffffff) 我们用`0-2xPI 的方位角 theta、0-PI 的极角 phi、9.5-10的半径 r` 计算出球体上的任意顶点坐标 xyz，这里无需纠结 xyz 坐标系和上面配图不一样、哪个用 sin cos 等，直接按代码这么写效果ok就行。theta、phi 圆盘坐标里也用到所以写在 if 前面。 ```js const count1 = 50000; const count2 = 100000; const geometry = new THREE.BufferGeometry(); const positions = []; for (let i = 0; i < count1 + count2; i++) { let theta = Math.random() * Math.PI * 2; // let phi = Math.random() * Math.PI; // 两极密集 let phi = Math.acos(Math.random() * 2 - 1); // 分布更均匀 if (i < count1) { // let r = 10; let r = Math.random() * 0.5 + 9.5; let x = r * Math.sin(phi) * Math.cos(theta); let y = r * Math.cos(phi); let z = r * Math.sin(phi) * Math.sin(theta); positions.push(x, y, z); } else { // 圆盘/圆柱部分 } } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5473fec1a7c54fbf9b124ef9de673bc9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=185811\&e=png\&b=160016) 需要注意的是 phi 是通过反余弦函数 acos 对-1-1求出角度得到，这样顶点分布更均匀，直接通过 `Math.random() * Math.PI` 的话会不均匀、两极更密集。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41e66acf92804715bb86cf538c1e7e11~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=178072\&e=png\&b=160016) ## 粒子大小更随机目前中心球体的粒子效果大致出来了，但靠近球体表面细看时会发现粒子大小都差不多大，此时粒子大小仅取决于离相机的距离，而粒子在球体半径范围9.5-10之间和相机距离差别不大，所以大小也差不多。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/199cffebae54442eb88842baca3c7836~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=339622\&e=png\&b=150015) 为了使粒子大小更随机，可以给每个顶点设置一个随机值属性，这样在顶点着色器里就能使用。这里 size 值为0.5-2（具体范围可自行调整），对于球体和圆盘上的顶点都生成一个数值，通过 setAttribute 设置到几何体顶点属性上，在 Float32BufferAttribute 里表明一个顶点一个数值。然后在顶点着色器里通过 `attribute float aSize` 就能拿到数值，乘到 gl\_PointSize 上即可。 ```js const positions = []; const sizes = []; for (let i = 0; i < count1 + count2; i++) { let theta = Math.random() * Math.PI * 2; let phi = Math.acos(Math.random() * 2 - 1); // 分布更均匀 let size = Math.random() * 1.5 + 0.5; // 0.5-2.0 sizes.push(size); // ... } geometry.setAttribute("aSize", new THREE.Float32BufferAttribute(sizes, 1)); const vertexShader = /* GLSL */ ` attribute float aSize; uniform float uTime; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); // gl_PointSize = 30.0 / -mvPosition.z; gl_PointSize = aSize * 30.0 / -mvPosition.z; gl_Position = projectionMatrix * mvPosition; } `; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83a42792b5cf445ebe5bf46ae9e69011~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=379761\&e=png\&b=150015) 咋看起来可能变化并不明显，但所以小的细节累加起来才能达到漂亮、令人满意的效果。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cf74d1364f644ecb8401ab0def3bd68b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=210169\&e=png\&b=160016) ## 应用颜色中心球体形状确定后，我们接着应用颜色让效果更出彩。原作里用顶点离中心距离去 mix 插值下面两种颜色。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53fb5b45efb8443d8cf1ff5d6405fd51~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=420\&h=200\&s=16566\&e=png\&b=e39700) 目前球体上下 position.y 的范围是-10-10，我们不妨将其除以10变到-1-1，再乘0.5加0.5变到0-1，然后在上下方向插值不同颜色。将颜色传给片元着色器并进行使用，此时 mask 仅用于 discard 舍弃掉圆圈外围的像素。 ```C# / GLSL // vertexShader attribute float aSize; uniform float uTime; varying vec3 vColor; void main() { // rgb(227, 155, 0) #E39B00 // rgb(100, 50, 255) #6432FF vec3 color1 = vec3(227., 155., 0.); vec3 color2 = vec3(100., 50., 255.); float d = position.y / 10.0 * 0.5 + 0.5; vColor = mix(color1, color2, d) / 255.; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = aSize * 30.0 / -mvPosition.z; gl_Position = projectionMatrix * mvPosition; } // fragmentShader varying vec3 vColor; void main() { float mask = step(length(gl_PointCoord - 0.5), 0.5); if(mask < 0.5) discard; // gl_FragColor = vec4(vec3(mask), 1.0); gl_FragColor = vec4(vColor, 1.0); } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9518631ee0f4ed68f261e118856c5c7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=255787\&e=png\&b=160016) 也可以 abs 取绝对值后，使得中间0、上下1，此时效果看起来就和原作接近了。 ```C# / GLSL float d = abs(position.y) / 10.0; vColor = mix(color1, color2, d) / 255.; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7572efe40b4426f8418c81fec46689a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=263750\&e=png\&b=160016) ## 原作的设置虽然接近，但还是不同。我们不妨改成原作的设置方式，原作里对顶点坐标除以一个 vec3(40.,10.,40.) 再用 length 计算距离 d，其中这里的10是中心球体的半径，也是圆盘的内半径，40是圆盘的外半径；通过 clamp 截取到0-1，超过1的都为1，小于0的都为0，再 mix 插值两种颜色。具体这里为什么要除以这个 vec3、对颜色的变化效果如何产生影响，我也不太理解，有待高手解答吧，总之先把整体效果跑通再说！另外把粒子大小再调大些。 ```C# / GLSL float d = length(abs(position) / vec3(40., 10., 40.)); d = clamp(d, 0., 1.); vColor = mix(color1, color2, d) / 255.; gl_PointSize = aSize * 50.0 / -mvPosition.z; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caf89d6f8d604f099052004467fe9b62~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=301589\&e=png\&b=160016) 在片元着色器里，计算每个顶点上的像素离自身中心的距离，然后大于0.5的舍弃，通过 smoothstep 设置透明度，距离小于0.1的取1，0.1-0.5的从1平滑过渡到到0，大于0.5的为0且会舍弃。这样粒子圆圈就会是模糊朦胧的效果。 ```C# / GLSL // fragmentShader varying vec3 vColor; void main() { float d = length(gl_PointCoord - 0.5); if (d > 0.5) discard; gl_FragColor = vec4(vColor, smoothstep(0.5, 0.1, d)); } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc76061cf38647428693ff247a48b717~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=399158\&e=png\&a=1\&b=160016) 此时颜色很怪，因为透明度没生效，设置 transparent 为 true 颜色就正常了；设置 blending 为 THREE.AdditiveBlending 这样粒子重叠后的颜色会变白发亮，可以看到球体边缘一圈微微发亮。 ```js const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 }, }, vertexShader, fragmentShader, transparent: true, blending: THREE.AdditiveBlending, depthTest: false, }); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6718d30dc8e490fb0dced09df3020a3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=292507\&e=png\&b=170017) 另外设置 depthTest 为 false 以避免左侧粒子黑边的效果，最终放大后的粒子效果如右图所示，圆圈朦胧、重叠变白发亮。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b772f70d4cd457a871a98c46fa431f6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=620\&h=300\&s=391004\&e=png\&b=1b021b) ## 让粒子动起来（纠正错误）中心球体的效果更加漂亮了，现在让粒子动起来。在2D里想让粒子在圆圈上运行，需要不断改变角度 angle，同样3D里想让粒子在球体上运动，需要改变 theta 和 phi 两个角度，就像地球仪上从一点到另一点要改变经度和纬度一般。让我们再给顶点属性上设置和运动相关的数值。theta 和 phi 可以定位出粒子初始位置，angle 为很小的随机角度值表示移动的角度大小或速率，strength 为0.1-1类似运动幅度，将这4个数值设置到每个顶点上。 ```js const positions = []; const sizes = []; const shifts = []; for (let i = 0; i < count1 + count2; i++) { let theta = Math.random() * Math.PI * 2; let phi = Math.acos(Math.random() * 2 - 1); let angle = (Math.random() * 0.9 + 0.1) * Math.PI * 0.1; let strength = Math.random() * 0.9 + 0.1; // 0.1-1 shifts.push(theta, phi, angle, strength); let size = Math.random() * 1.5 + 0.5; sizes.push(size); // ... } geometry.setAttribute("aShift", new THREE.Float32BufferAttribute(shifts, 4)); ``` 在顶点着色器里可以通过 xyzw 分别拿到 aShift 里的4个值。aShift.x 是原始 theta，加上 aShift.z \* uTime 就是角度不断变化，mod 对 2xPI 取余数使角度不断在 0-2xPI 之间变化，从而得到新的 theta 角度；同理得到新的 phi 角度，注意这里 phi 也是要对 2xPI 取余数，虽然不太理解，但换成 PI 就会出现粒子闪烁的效果。 ```C# / GLSL attribute float aSize; attribute vec4 aShift; uniform float uTime; varying vec3 vColor; const float PI = 3.1415925; void main() { vec3 color1 = vec3(227., 155., 0.); vec3 color2 = vec3(100., 50., 255.); float d = length(abs(position) / vec3(40., 10., 40.)); d = clamp(d, 0., 1.); vColor = mix(color1, color2, d) / 255.; vec3 transformed = position; float theta = mod(aShift.x + aShift.z * uTime, PI * 2.); float phi = mod(aShift.y + aShift.z * uTime, PI * 2.); transformed += vec3(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta)) * aShift.w; // vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.0); gl_PointSize = aSize * 50.0 / -mvPosition.z; gl_Position = projectionMatrix * mvPosition; } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ddf4938457e4f5caf1aab0f46af561f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=300\&h=300\&s=1545869\&e=gif\&f=48\&b=170211) 这是原作粒子运动逻辑的代码，如上所说，一开始古柳以为要让粒子在球体表面运动，是需要更新 theta、phi 后像 JS 里设置顶点坐标时一样根据球坐标算出新的 position/transformed 坐标。 ```C# / GLSL vec3 transformed = position; float theta = mod(aShift.x + aShift.z * uTime, PI * 2.); float phi = mod(aShift.y + aShift.z * uTime, PI * 2.); transformed += vec3(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta)) * aShift.w; vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.0); ``` 那么新的顶点坐标这里应该用 = 而不是 +=，然后 aShift.w 应该是半径 9.5-10.0，而不是0.1-1，这就对不上了。虽然上面粒子也已经动起来，但有必要搞清楚这里代码的逻辑。 ```C# / GLSL transformed = vec3(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta)) * aShift.w; // * 10.0 ``` 一番思索后古柳逐渐明白是之前自己的理解出了偏差，被粒子要在球体表面运动然后就得通过更新 theta phi 来计算新顶点这一想法所“遮蔽”。其实运动的逻辑并非如此，对于一维的点如x=10，加减一个速度值如0.1，然后乘时间就是 `x+0.1*t` 点就能运动起来；二维的点如 (x=10,y=20) 可以沿自身为中心周围一圈的任意方向去移动，可以通过`(cos(a), sin(a))`单位向量表示方向，同样乘时间就是 `(x,y)+(cos(a), sin(a))*t` 点就能运动起来；三维的点如 (x=10,y=20,z=30) 可以沿自身为中心周围一圈球体的任意方向去移动，可以通过 `sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta)` 单位向量表示方向，同样乘时间就是 `(x,y,z)+(sin(phi) * cos(theta), cos(phi), sin(phi) * sin(theta))*t` 点就能运动起来。所以这里的 theta、phi 其实是每个顶点处单位球体上的运动方向，而不是一开始中心球体的两个角度，两者根本不需要对齐、不需要相关，甚至不相关可能更好。shader 里直接对每个顶点坐标加上自己的运动方向乘以 aShift.w 运动幅度0.1-1，只不过因为该值较小，所以看起来粒子还像是在球体上运动，这就是运动的逻辑。因而 JS 里生成中心球体坐标的代码切换回原来 randomDirection 的方式。 ```js if (i < count1) { let r = Math.random() * 0.5 + 9.5; // let x = r * Math.sin(phi) * Math.cos(theta); // let y = r * Math.cos(phi); // let z = r * Math.sin(phi) * Math.sin(theta); let { x, y, z } = new THREE.Vector3() .randomDirection() .multiplyScalar(r); positions.push(x, y, z); } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fcabccd36fe94694a7ddb6de4f082965~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=300\&h=300\&s=1994370\&e=gif\&f=48\&b=1b0214) ## 圆盘粒子粒子的颜色和运动都搞定后，最后把外围的圆盘粒子也补全，幸运的是上述颜色和运动都能沿用，所以很方便。圆盘粒子在半径10-40之间，通过 `THREE.Vector3().setFromCylindricalCoords()` 设置半径、角度、高度来随机生成。 ```js const count1 = 50000; const count2 = 100000; const geometry = new THREE.BufferGeometry(); const positions = []; const sizes = []; const shifts = []; for (let i = 0; i < count1 + count2; i++) { let theta = Math.random() * Math.PI * 2; let phi = Math.acos(Math.random() * 2 - 1); let angle = (Math.random() * 0.9 + 0.1) * Math.PI * 0.1; let strength = Math.random() * 0.9 + 0.1; // 0.1-1.0 radius shifts.push(theta, phi, angle, strength); let size = Math.random() * 1.5 + 0.5; sizes.push(size); if (i < count1) { // 中心球体粒子 let r = Math.random() * 0.5 + 9.5; let { x, y, z } = new THREE.Vector3() .randomDirection() .multiplyScalar(r); positions.push(x, y, z); } else { // 圆盘粒子 let r = 10; let R = 40; let rand = Math.pow(Math.random(), 1.5); let radius = Math.sqrt(R * R * rand + (1 - rand) * r * r); let { x, y, z } = new THREE.Vector3().setFromCylindricalCoords( radius, Math.random() * 2 * Math.PI, (Math.random() - 0.5) * 2 ); positions.push(x, y, z); } } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/feae8593dec04ef998611645b8c7bf5c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=672668\&e=png\&b=190119) 唯一需要注意的是这里半径 radius 的生成稍微多了些步骤。 // 圆盘粒子 let r = 10; let R = 40; let rand = Math.pow(Math.random(), 1.5); let radius = Math.sqrt(R * R * rand + (1 - rand) * r * r); let { x, y, z } = new THREE.Vector3().setFromCylindricalCoords( radius, // 半径 Math.random() * 2 * Math.PI, // 角度 (Math.random() - 0.5) * 2 // 高度y -1-1 ); positions.push(x, y, z); ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ff06f441b634ded8eb43e3ec9d9fe9b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=608147\&e=png\&b=1c021e) 用 random=0-1 取 pow，再作为0-1的数值去插值内外半径的平方，取平方根后作为最后的半径，这里大概是为了让粒子在圆盘上分布更均匀，半径平方相当于按面积大小来采样，不至于越靠近中心粒子越多。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/311c5d76c6ae4cbab1174fd9e1387b64~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1974\&h=1288\&s=291261\&e=jpg\&b=fbfbfb) 但似乎直接用 random 10-40 的效果看起来也差不多，没想象中那么不均匀，可能是粒子足够小的缘故，总之原作里的方式大家也可以学学，万一用得上呢！ ```js let radius = Math.random() * 30 + 10; let { x, y, z } = new THREE.Vector3().setFromCylindricalCoords( radius, Math.random() * 2 * Math.PI, (Math.random() - 0.5) * 2 ); positions.push(x, y, z); ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1aa3bd6168fc44e7af1ae750c272fa9b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=600\&h=600\&s=612627\&e=png\&b=1d021f) ## 最后优化细节最后调整相机角度；使粒子系统沿z轴的稍微倾斜，并随时间不断沿y轴旋转，这里还更改旋转顺序为 ZYX 轴。 * 链接：https://threejs.org/docs/#api/en/math/Euler.order ```js camera.position.set(0, 3, 24); const points = new THREE.Points(geometry, material); points.rotation.order = "ZYX"; points.rotation.z = 0.2; scene.add(points); const clock = new THREE.Clock(); function render() { const time = clock.getElapsedTime(); points.rotation.y = time * 0.01; material.uniforms.uTime.value = time; } ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/291943ad461e4bc2bc607c3882299834~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=300\&h=300\&s=2084806\&e=gif\&f=48\&b=1a0215) ## 小结最终我们手撸出了一个非常漂亮的粒子系统星系效果（当然受限 GIF 导出后上传文章里的文件大小所限上面看着有些糊，大家可去 Codepen 看效果），大家还可以根据自己需要去调整参数、改改配色等。 * 链接：https://codepen.io/GuLiu/pen/WNWaNdJ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e0bceb80fb846eab17559f2a91117e0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2880\&h=1624\&s=1632070\&e=jpg\&b=160217) 虽然源码里仍有几处设置古柳没完全吃透，但不妨碍我们整体跑通整个流程。记得最初不理解源码里的顶点设置和粒子怎么运动的、不懂 theta/phi/moveS/moveT/cos/sin 球坐标等用途、不知道 material 里的 onBeforeCompile 是什么东西和一般自己写 shader 有什么区别......（下面就是源码里 material 部分的代码，本次复现时也改成了更好里记得方式） * 链接：https://codepen.io/Gu-Liu/pen/YzMOWNp ```js let m = new THREE.PointsMaterial({ size: 0.125, transparent: true, depthTest: false, blending: THREE.AdditiveBlending, onBeforeCompile: shader => { shader.uniforms.time = gu.time; shader.vertexShader = ` uniform float time; attribute float sizes; attribute vec4 shift; varying vec3 vColor; ${shader.vertexShader} `.replace( `gl_PointSize = size;`, `gl_PointSize = size * sizes;` ).replace( `#include `, `#include float d = length(abs(position) / vec3(40., 10., 40)); d = clamp(d, 0., 1.); vColor = mix(vec3(227., 155., 0.), vec3(100., 50., 255.), d) / 255.; ` ).replace( `#include `, `#include float t = time; float moveT = mod(shift.x + shift.z * t, PI2); float moveS = mod(shift.y + shift.z * t, PI2); transformed += vec3(cos(moveS) * sin(moveT), cos(moveT), sin(moveS) * sin(moveT)) * shift.w; ` ); //console.log(shader.vertexShader); shader.fragmentShader = ` varying vec3 vColor; ${shader.fragmentShader} `.replace( `#include `, `#include float d = length(gl_PointCoord.xy - 0.5); //if (d > 0.5) discard; ` ).replace( `vec4 diffuseColor = vec4( diffuse, opacity );`, `vec4 diffuseColor = vec4( vColor, smoothstep(0.5, 0.1, d)/* * 0.5 + 0.5*/ );` ); //console.log(shader.fragmentShader); } }); ``` 幸运地是时过境迁后，终于能大致搞懂并复现以前看过的 shader 效果，很是欣慰。希望看完本文大家也能有所收获。最后完整源码附上。 * 链接：https://codepen.io/GuLiu/pen/WNWaNdJ [jcode](https://code.juejin.cn/pen/7358826804792000548) ## 相关阅读「手把手带你入门 Three.js Shader 系列」目录如下： * [「断更19个月，携 Three.js Shader 归来！（上）- 牛衣古柳 - 20230416」](https://juejin.cn/post/7222410870675439673) * [「断更19个月，携 Three.js Shader 归来！（下）- 牛衣古柳 - 20230421」](https://juejin.cn/post/7224314619865628709) * [「手把手带你入门 Three.js Shader 系列（八）- 牛衣古柳 - 20240229」](https://juejin.cn/post/7340909611098554409) * [「手把手带你入门 Three.js Shader 系列（七）- 牛衣古柳 - 20230206」](https://juejin.cn/post/7332305149589225483) * [「手把手带你入门 Three.js Shader 系列（六）- 牛衣古柳 - 20231220」](https://juejin.cn/post/7314572755696189494) * [「手把手带你入门 Three.js Shader 系列（五）- 牛衣古柳 - 20231126」](https://juejin.cn/post/7305371899138654235) * [「手把手带你入门 Three.js Shader 系列（四）- 牛衣古柳 - 20231121」](https://juejin.cn/post/7303797715393183796) * [「手把手带你入门 Three.js Shader 系列（三）- 牛衣古柳 - 20230725」](https://juejin.cn/post/7259411780375314490) * [「手把手带你入门 Three.js Shader 系列（二）- 牛衣古柳 - 20230716」](https://juejin.cn/post/7256039179087380535) * [「手把手带你入门 Three.js Shader 系列（一）- 牛衣古柳 - 20230515」](https://juejin.cn/post/7233359844974182437) ## 照例如果你喜欢本文内容，欢迎以各种方式支持，这也是对古柳输出教程的一种正向鼓励！最后欢迎加入`「可视化交流群」`，进群多多交流，对本文任何地方有疑惑的可以群里提问。加古柳微信：`xiaoaizhj`，备注`「可视化加群」`即可。欢迎关注古柳的公众号`「牛衣古柳」`，并设置星标，以便第一时间收到更新。