WebGL Shader 魔法指南：创意图形编程入门--掘金小册课程推荐/优惠

作者介绍

alphardex，一个兴趣使然的前端魔法使。热衷于研究WebGL、three.js、Shader之类的前端可视化技术，CodePen 上的特效创作达人。

• 掘金专栏：某科学的 three.js
• GitHub：https://github.com/alphardex

小册介绍

作为一个前端工程师，你是否已经厌倦了开发那些千篇一律的仅仅由DOM驱动的普通网站？

是否想通过一定的技术，来做出一个与众不同、充满个性的网站？

让我们先来看个例子吧：

案例地址：https://aristidebenoist.com/

这是一个个人案例库的网站，但它的展现形式非常特殊，当你滑动浏览案例的时候，会有一种很微妙的扭曲感，它的交互体验可以说是比那些纯粹罗列展示内容的网站要新鲜得多了。

那么这种效果是怎么实现的呢？答案是——Shader！

Shader，用中文来讲就是着色器，可能大部分前端都没怎么接触过这门技术。

目前，前端最常用的图形技术是CSS、SVG和Canvas2D，这些技术的应用固然是非常广泛的，但是，如果你想要更进一步地创作出更高级、更炫酷的图形效果，光学这些是远远不够的。这个时候，你就可以考虑学习Shader了。跟传统的图形技术不同，尽管Shader有它另一套的绘图思维，但是创作出的效果可能会远超乎你的想象！

在国外，有越来越多的个人开发者、工作室和公司开始用Shader来创作网站，上面举的例子仅仅是沧海一粟，还有更多的优秀网站可以在 awwwards 上发现。但是，目前在国内还几乎没有看到过用Shader开发的网站，这里并不是说国内技术不行，而是大家的关注点可能过于偏向面试、算法、框架、性能、构建等要素，导致忽视了图形、视觉、创意等前端本应该关注的东西。

随着Web 3D、元宇宙等技术的迅速发展，学会如何构建一个视觉效果丰富多彩的3D场景成为了前端工程师应当考虑的课题之一，和这个紧密相关的技术既可以是当下流行的WebGL，也可以是以后可能会流行起来的WebGPU，但最根本的一点是——它们都离不开Shader！

如果你掌握了Shader，也就意味着你已经掌握了这些3D技术的关键点，将来这或许能成为你的核心竞争力！

令人感到可惜的是，国内Shader相关的学习资料实在是太少了。为了填补这个空洞，这本专注于Shader的小册就应运而生了。本小册将由浅入深、手把手地带你入门Shader，拿下这把图形学的“强力武器”。

小册的大纲如下：

你会学到什么？

• 从零开始，逐步掌握 WebGL Shader 的核心概念与技能；
• 以 UV 为画笔，带你领略程序化绘图之美；
• 灵活运用 Shader 技巧，打造独一无二的魔幻滤镜效果；
• 将前端与图形编程完美融合，开启创意无限的 Web 开发之旅。

你应该具备哪些知识？

• 基础的数学知识（初中级别即可）：了解坐标系、向量等概念。
• 基础的前端知识：了解 HTML、CSS、JavaScript。

适宜人群

任何想利用Shader强大的渲染能力编写视觉效果的开发者都可以，包括且不限于：

• 想做出一个与众不同、富有个性的网站的你；
• 利用WebGL、three.js等技术开发3D应用或游戏的你；
• 做过数据可视化，想让结果更加酷炫的你；
• 对创意编程、特效创作感兴趣的你。

本小册源代码

GitHub 代码仓库?：webgl-shader-book-code

代码主要分为 3 个部分：glsl、html和bonus。

• glsl部分纯粹就是本小册的所有代码块。

• html部分的作用是将代码块的渲染结果展示在网页上。

• bonus部分是随书附赠的额外代码，里面包含了一些特效的实现方式，尽管小册里没提到它们，但灵活运用小册所学的知识也能把它们写出来。

说明：阅读本小册时，我们专注于glsl部分即可。当然，也有例外情况：有部分章节（如“顶点着色器”“光照模型”）的代码是写在html文件里的，这一部分我们就看html。

注意：后面实战部分章节的代码不在此仓库内，都有各自单独的仓库。

效果预览

• 纹理：Shader 界的 img

• 开篇：Shader 究竟有什么魅力？

• GLSL：Shader 语言的行动纲领

• 推荐：Shader 相关资源

• 启程：为美好的世界献上 Shader！

• 随机与噪声：无序与混沌的轮舞曲

• UV：大触级的绘图高手

• 顶点着色器：网格与粒子与 3D 世界

• Raymarching：2D 平面造就 3D 图形

• 后期处理：我推的滤镜

• 实战篇：图片特效

• 光照模型：Shader 本来的用途

• 实战准备：Shader 项目模板搭建

• 实战篇：3D 图形特效

• 实战篇：Raymarching 特效

• 尾声：结束，亦是新的开始

• 后日谈：这本小册是如何炼成的