断更19个月，携 Three.js Shader 归来！（下）继续给大家介绍下 Shader 是什么、能做什么、在哪里有

原文：「断更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，在心里埋下种子，并且日后做出比肩这些作品的网站，那古柳也算是做回“引路人”了。

不过，截止目前在古柳的印象里还没怎么见到国內有类似网站用到 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 可视化的一本可视化书籍，没想到出中文版会和自己有些关系，至今觉得不可思议。