文章更新（可能 ❌ / 一定 ✅）没那么频繁，欢迎加入
「可视化交流群」进行交流。加古柳微信「xiaoaizhj」备注「可视化加群」即可，也有机会围观古柳朋友圈，实时追踪最新动态！
前情回顾
上一篇文章「一个特别神奇的网站：Wayback Machine 网站时光机。还可以用来找 Shader 页面！」里，古柳给大家介绍了 Wayback Machine 网站时光机这个可以查看其他网站过去长啥样的神奇网站，哪怕是已下线打不开的网站同样能看到。
也讲到3年前古柳在油管上看 Yuri Artiukh 的 Shader 视频时，好几次碰到原网站已下线或改版，从而无法体验原作 Shader 效果，且缺少模型图片等资源影响学习等问题。
一直以为这种情况没啥办法，毕竟不可能穿越回到过去。
前不久知道网站时光机后，灵光一闪，想到当初那些"无缘一见的"网页效果没准能重新找出来。
于是拿改版了无数次的网站Milano Digital Week 米兰数字周试了下，真的找到了存档于2020年1月27日的这个类似"口红"的 Three.js Shader 效果，并且模型和图片资源都可正常下载，非常惊喜。（以后会教大家这个效果如何实现）
学 Shader 的必须安装上
网站时光机是古柳最近才知道的，而接下来要安利的一款同样很强大的插件 Spector.js，则是古柳3年前学 Shader 没多久后就安装了、到现在一直在用的。
这款插件可以把 WebGL 实现的网页里画面每帧渲染时的信息呈现出来。
虽然古柳只会 Three.js 不会原生 WebGL，里面很多信息看不懂，但由于能看到渲染时的着色器源码，所以常常拿它看各种酷炫3D页面的着色器到底怎么实现的，日积月累看得多了也就能在教程里举出那么多例子。
在群里或朋友圈，乃至去年的文章「没有前端能抵抗住的酷炫效果，带你用Three.js Shader一步步实现 - 20230427」里，古柳都提过这个插件，所以不少人应该早就安装了，但估计仍有很多人不知道这个插件，或不知道怎么用，所以古柳就正式安利下并演示下如何使用。
演示用法
为了方便演示，古柳用自己 Codepen 上的 Pepyaka 作为例子，这样看过上面那篇文章的人能熟悉些，没看过也没事不影响。
插件如何安装就不说了，想来大家都会。点击插件的图标（右上角红色六边形logo那个）后，页面会重新加载，然后图标会变绿。
接着再点击图标，看到插件框，点击红色按钮会对页面效果进行"录制"。
几秒后会自动跳到下面的页面，里面能看到所有渲染相关的信息。左边是"每帧"渲染的画面。
滚动左侧图片列表，放大仔细看这里的4个画面 ，会发现从上到下依次会多绘制出一些内容：中心球体、背景粒子、球形粒子、文字。
选择第1个画面后，中间会高亮到中心球体 对应执行的 draw 指令，还能看到 Vertex 和 Fragment。
点击 Vertex 就能看到顶点着色器代码，前面很多可能是 Three.js 自动加的，拉到底部就是自己写的 Shader 代码。
同样的点 Fragment 就能看到片元着色器代码。点击 Close 会关闭这个页面，回到之前的页面。
接着点击第2个新增了背景粒子 的画面，对应高亮指令里的 POINTS 表明这步确实绘制了粒子，同样能看到 Shader 代码。
第3个新增了球体粒子 的画面、第4个新增了文字的画面也都类似。
而文字当初是传入图片作为纹理图 uTexture 来实现的。
在右侧能看到更多信息，比如具体 Uniforms 各个参数和数值，以及 Texture 图片。
可以直接查看或下载纹理图片，非常方便。
多个画布
有的 WebGL 网页里会有多个画布绘制不同内容，这时候就需要先选择特定 Canvas 画布再点红色按钮录制。比如同样拿 Codepen 演示，画面中有6个画布，就需要先点 Choose Canvas 选择对应的画布。
这里录制 codepen 这个页面似乎会有问题，仅作为演示提下。大家以后碰到真实作品的网页时注意下要先选画布就行。
小结
有了这个强大的插件，以后看到任何酷炫的 Shader 页面，大家就可以顺手去看看源码学习下了。
毕竟只看网上简单的教程所能学到的还是有限，去学习那些实际作品里的 Shader 实现 ，也是个非常推荐的途径。虽然很多源码还蛮复杂的，但一点点啃下来，能学一点是一点，总归是好的。
当然古柳后续还会拆解更多优秀 Shader 作品里的实现并教给大家，敬请期待！
上文只是讲了些古柳最常用的 Spector.js 里的功能，更多用法大家可自行去了解。
照例
如果你喜欢本文内容，欢迎以各种方式支持，这也是对古柳输出教程的一种正向鼓励！
最后欢迎加入「可视化交流群」，进群多多交流，对本文任何地方有疑惑的可以群里提问。加古柳微信：xiaoaizhj，备注「可视化加群」即可。
欢迎关注古柳的公众号「牛衣古柳」，并设置星标，以便第一时间收到更新。