原文：「断更19个月，携 Three.js Shader 归来！（下） - 牛衣古柳」 有很多视频例子，编程只能放图片，所以大家可以去原文看看！
前文回顾及补漏
上篇文章「断更19个月，携 Three.js Shader 归来！（上） - 牛衣古柳」讲到古柳虽然也曾做过3D可视化的作品，但其实一直有意回避不想碰 Three.js 和图形学等3D内容；后来因为看群友分享了 TikTok 上很火的 3D+AR/VR 可视化视频，因此终于一时兴起学起 Three.js；
然后古柳在油管偶然发现了 Yuri 的宝藏频道，并从他复现 Pepyaka 效果的教程了解到 Shader 并光速入坑。
何为 Shader ？
但讲到现在可能大家还是不知道 Shader 到底是啥？
一言以蔽之，Shader/着色器就是一段给 GPU 执行的程序，我们可以通过 Vertex Shader/顶点着色器来改变几何体的顶点坐标以及通过 Fragment Shader/片元着色器来改变每个片元的颜色，片元可以粗略地理解成像素。
对应到 Three.js 就是 ShaderMaterial 里 vertexShader 和 fragmentShader 两部分的代码，其使用类C语言的 GLSL 编程语言，即 OpenGL Shading Language 进行编写。这里大家先有个印象即可，后续教程会讲解更多内容带大家入门。
const vertex = `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const fragment = `
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;
const material = new THREE.ShaderMaterial({
vertexShader: vertex,
fragmentShader: fragment,
uniforms: {
uTime: { value: 0 },
},
});
于是在将3D物体渲染到屏幕画布的过程中，我们可以通过 Shader 在中间改变物体顶点坐标与像素颜色，这样就能像使用“魔法”一样做出各种其他技术所无法实现的、超酷炫超丝滑、令人印象深刻的效果。
Chris 的 Shader 介绍视频
这里推荐大家看下“猛男♂小哥” Chris 的2分钟 Shader 介绍视频 「Three.js Shaders in 2 Minutes - Chris Courses - YouTube」，以便有更多直观了解。
最初是看 Chris 的 Canvas 教程发现讲解地超好，然后意外地发现这肌肉太帅了，于是瞎叫他“猛男♂小哥” doge，老群友应该记得。
亿点点 GPU 带来的震撼
扯回来。上面的讲解还是比较粗浅、偏科普，想更深入了解的朋友，可以搜索关键词渲染管线/Render Pipeline/Graphic Pipeline等。
正因为有 GPU 并行计算的加持，即使在一张有上百万像素的图片上添加动画“特效”，也能在确保60FPS的同时实现丝滑效果，而如此多的像素每秒还更新60次，这是一般 CPU 下 Canvas 里遍历图片所有像素进行改变所无法想象的。
NVIDIA/英伟达有个视频「Mythbusters Demo GPU versus CPU - YouTube」直观地展示 CPU 和 GPU 绘图的不同。如果 CPU 是一个像素一个像素绘制的话，那么 GPU 就是一次性绘制所有像素，电光火石间一切就完成了。看完这个视频估计大家再难忘记 GPU 所带来的亿点点震撼了。
- 链接：视频 IT从业者基础：CPU和GPU工作有啥不同，看看这个现场DEMO - B站搬运
Photomosh 神器
而说到给图片加“特效”，就不得不提下之前古柳在某个平面设计课程里了解到的 photomosh 这个神器。
课程里讲点线面的面时，讲到随机面具有自然和个性的特点，然后演示了使用 photomosh 里的 wobble/摇晃 功能对黑底白字的文字图片进行扭曲变形，最后将具有随机面效果的文字放到海报中使用。
当时古柳第一反应就觉得这网站应该用了 Shader，但毕竟那会接触的还不多，不敢打包票，想着没准用了其他不知道的技术实现的。于是跑去体验一番，并看了下网页源码......发现果然就是 Shader！
对于这个神器，设计师朋友可以将其纳入工具箱、应用到生产实践里；程序员朋友则可以好好研究下这些 Shader 效果分别怎么实现的，毕竟这么多效果整齐地罗列着，不学习一番岂不是暴殄天物。后续古柳应该也会从中选择一些效果拆解给大家讲讲，敬请期待！
Photoshop 等软件同理
讲到这，有用过 Photoshop、Adobe Illustrator 的朋友，是不是觉得上面一些扭曲变形等操作很眼熟，这些软件也可以做出类似效果，因为它们也是支持 GPU 模式的，可以确定多半也用到 Shader。
再比如前些天，古柳看到的这个用 PS 做长虹玻璃质感海报的教程，里面这些黑白渐变、渐变重复、纹理、扭曲度/平滑度/缩放等概念，学过 Shader 后就很熟悉。后续复现试试看，再写成教程教大家。
越来越多获奖的、酷炫网站里用到 Shader
上面讲了这么多，但古柳最爱的还是很多国外 Studio/工作室用 Three.js Shader 等技术做的令人印象深刻的网站，而且这些网站许多也在 Awwwards 上获奖。
比如 Yuri 在他的多个教程里提到的带他入坑 Shader 的网站 Tao Tajima | Filmmaker——这是日本公司 ホムンクルス / homunculus Inc. 制作的于2017年12月上线的网站——其中的图片和视频上有波浪、翻页过渡等交互效果，非常的与众不同。
- 链接：www.awwwards.com/sites/tao-t…
不论是对此前没接触过这类网站的朋友，还是对看过不少用到 Shader 的网站的 Yuri 还是古柳自己，这样的网站都是令人觉得惊艳、印象深刻。
同样的 homunculus 的官网也用到许多 Shader 效果，大家也可以去体验一番。
类似的网站还有很多，古柳也难以一一介绍，但还是精选了一些供大家前去感受下开开眼。如果有人因此迷上 Shader，在心里埋下种子，并且日后做出比肩这些作品的网站，那古柳也算是做回“引路人”了。
- 链接：mathis-biabiany.fr/
- 链接：aristidebenoist.com/
- 链接：robin-noguier.com/
- 链接：www.pola.co.jp/wecaremore/…
- 链接：designembraced.com/
- 链接：www.heleneblanck.fr/
- 链接：tismes.com/
- 链接：www.utsubo.co/
不过，截止目前在古柳的印象里还没怎么见到国內有类似网站用到 Shader，相较之下上述就有好几个网站是日本的，甚至 taotajima 是2017年底就有的，如此看来虽然已经2023年，但国内在这方面仍略显“荒漠”。
记得之前有人从小红书过来提到想做类似网站，但问了国内一些工作室都说难度太大......希望将来能看到更多国内的类似网站。
可视化里也有用到
毕竟古柳之前输出的都是 D3.js 数据可视化方面内容，很多人也是因为可视化而关注我的。那么可视化里能用到 Shader 吗？
虽然本身3D的数据可视化相较2D的就少些，用到 Shader 的3D可视化就更少，但巧的是古柳还真知道几个，这里介绍给大家。
Shirley Wu 的 Legends 作品
首先是古柳安利过很多次的 Nadieh Bremer 和 Shirley Wu 的 「Data Sketches」 里的 Legends 这个作品就有用到 Shader。
- 源码链接：sxywu/legends - GitHub
这是 Shirley Wu 为纪念1901年以来51位获得诺贝尔奖的传奇女性而以水晶为视觉元素所作的可视化作品，其中的水晶就是基于一般的球体几何体改变顶点坐标并且通过 fragment shader 应用上不同渐变颜色以区分自然科学与人文社会科学而得到的。
还记得当时古柳还没入坑 Three.js Shader，觉得可能一辈子都看不懂也做不出类似的作品，没想到没多久就去入坑学了起来，虽然至今有些地方不明白，但却更靠近了一步，也是蛮感慨的！
值得一提的是 「Data Sketches」 这书之前古柳和出版社的编辑推荐过，没想到后来真的会引进出中文版。而一晃也两年过去了，3月份时听说4月会上市，虽然目前还没明确消息，但应该也快了。古柳自己超喜欢的书、也是带自己入坑 D3.js 可视化的一本可视化书籍，没想到出中文版会和自己有些关系，至今觉得不可思议。
详情见：独家号外！「Data Sketches」确认引进将会有中文版！ - 牛衣古柳 - 20210528。
澎湃美数课的作品
再比如澎湃美数课2020年9月有个关于新冠百万逝者的可视化作品——「一百万，一个全球悲剧」，其中的3D面积图上实现黑白渐变就用到了 Shader。
一开始古柳觉得这个作品像连绵起伏的群山，后来想起美籍华裔建筑师、林徽因的侄女林璎21岁时还在耶鲁大学读本科期间就在全美国众多参与者之中脱颖而出，并最终设计了华盛顿越战纪念碑这件事。于是又觉得美数课的作品更有纪念碑的感觉。
- 链接：林璎：强烈而清晰的洞察力 纪录片中文字幕版
言归正传
杂七杂八讲了不少，可能大家都看烦了。其实本篇文章主要还是带大家初步了解 Three.js Shader，知道它是什么、能做什么、哪里有用到，并且为后续古柳开始写 Shader 相关教程做个引子。
不论是去年4月5月初学 Shader（那时还红码被拉去酒店隔离，疫情也是恍如隔世），还是今年年初重新啃了好多期 Yuri 频道的教程，输入或多或少在进行着，而输出却一直没开始。这次也是终于行动起来，趁着对 Shader 的热爱还在，不如就此开始写写教程，也希望能帮到想学习这方面内容的朋友。
当然 Shader/GLSL 代码和一般编程还是很不同的，理解起来也蛮抽象。古柳自身也还没多厉害仅仅入门水平而已、也依旧对后续能写出什么样的教程没那么大信心。
但就像大家都知道的王安石《游褒禅山记》那段话所说的一样：“而世之奇伟、瑰怪，非常之观，常在于险远，而人之所罕至焉”。
Shader 有多酷想来大家也有所了解了，希望大家也能和古柳一样有极大的热情一起来开启这段充满未知的 Three.js Shader 之旅。
照例
最后欢迎加入「可视化交流群」，进群多多交流，对本文任何地方有疑惑的可以群里提问。加古柳微信：xiaoaizhj，备注「可视化加群」即可。
欢迎关注古柳的公众号「牛衣古柳」，并设置星标，以便第一时间收到更新。