在编程教学视频浩如烟海的 YouTube 上，有一条视频长期霸占着“最惊艳编程演示”的位置：它没有名人站台、没有热点话题，仅凭一块网页画布和几十行代码，就实时画出了流动的、金属质感的、大理石纹般的抽象艺术——而这一切的源头，只是初中水平的正弦函数。很多程序员看完后的第一反应是：“我写了这么多年代码，第一次觉得数学是美的。”
这条视频就是 kishimisu 的《An Introduction to Shader Art Coding》。它完美诠释了什么叫“信息密度极高的一期内容”：27 分钟里，观众跟着作者从一片空白页面起步，逐层叠加数学技巧，最终抵达一个足以刷屏社交媒体的视觉效果。更重要的是，它背后串起的是 GPU 编程、信号处理、分形几何、光线步进等一整套真实工业技术——这些正是今天 AI 时代图形学与并行计算的底层根基。本文将带你完整拆解这条视频的叙事脉络、知识源流与争议之处，让你没看过视频也能懂，看过视频能懂得更深。
| 项目 | 内容 |
|---|---|
| 视频标题 | An Introduction to Shader Art Coding（着色器艺术编程入门） |
| 频道 | kishimisu（专注着色器与图形编程的教学频道） |
| 发布时间 | 2023 年 2 月（据频道页面） |
| 观看量 | 数百万人次级别，为该频道播放量最高的视频之一（据频道页面公开显示；本篇撰写环境网络核验受限，准确数字请以视频页为准） |
| 时长 | 约 27 分钟 |
| 形式 | 实时敲代码演示（code-along），配英文讲解 |
数据来源说明：本篇撰写环境的实时抓取工具受限，上表中动态数据（观看量）仅作定性描述并标注来源，未作精确化虚构；视频标题、频道名、发布时间与内容结构均基于该视频的公开信息整理。
这条视频最厉害的地方在于叙事设计。它不是“知识点列表”，而是一条层层递进的技术栈隧道——每一层的输出成为下一层的输入，观众亲眼看着丑陋的圆圈一步步变异成艺术品。按视频的叙事顺序，可以拆成六个要点。
视频开篇，kishimisu 先播放了几个令人惊艳的着色器艺术作品，然后说了本视频最重要的一个“思维转变”：着色器编程不是你熟悉的那种编程。
传统程序是一行行指令顺序执行，CPU 一个核心算完再算下一个；而着色器（Shader）是跑在 GPU 上的一小段程序，你的代码会被同时复制到屏幕上的每一个像素，数百万个像素在同一毫秒内并行执行同一个函数。你写的不是“画一个圆”的命令，而是一个回答“我现在这个像素应该是什么颜色”的函数。
这是整条视频的认知地基。对大多数只接触过顺序编程的人来说，这是第一次真正触碰 GPU 的思维方式——而这种思维方式正是深度学习训练、大模型推理的底层逻辑：让几万个核心同时对几百万个数据做同样的事。
接下来是最基础的脚手架：把每个像素的坐标归一化成 0 到 1 之间的二维向量，通常叫 uv。左下角是 (0,0)，右上角是 (1,1)。kishimisu 还演示了新手必踩的坑：如果不管画面宽高比，圆会被拉成椭圆——所以要按画布比例缩放横坐标。
这个细节看似琐碎，却是全视频的方法论缩影：着色器编程的全部游戏，就是围绕“坐标”做变换。你之后看到的每一次视觉魔术，本质都是在问同一个问题——“我能不能把 uv 这个坐标，用数学方式揉捏一下？”
有了坐标，画圆只需两步：length(uv) 算出每个像素到原点的距离；再写 0.1 - length(uv)，距离小于 0.1 的地方就是正数（圆内），大于就是负数（圆外）。
但此时圆的边缘是锯齿状的黑白数字边界。于是引出了本视频第一个“点石成金”的函数：smoothstep。它把生硬的非黑即白变成平滑过渡，圆的边缘立刻有了抗锯齿的柔和感。kishimisu 在这里顺便讲了一个通用心法：图形学里几乎所有“质感”，都来自把跳变的边界函数替换成平滑的过渡函数。
接下来是视频的“爆点段”。kishimisu 把坐标乘以系数后塞进正弦函数 sin()，屏幕上出现周期性条纹；再用 fract()（取小数部分）把波形反复折叠，条纹变成锯齿状的重复图案。他随即调几个常数——条纹变密、旋转、扭曲——观众第一次看到：调参数就像拧万花筒，一个公式可以产生无穷图案。
这里藏着全视频最反直觉的知识点：那些在社交媒体上疯传的、看起来“生成式艺术”的迷幻花纹，配方可能简单到令人发笑——sin 和 fract 的组合。这源于一个数学事实：正弦函数的周期性、叠加与折叠，天然产生类分形的重复结构。
如果说前四点是“配方”，这一步才是“菜”。kishimisu 展示了真正让画面质变的两个手法：
多层叠加（layers）：把同一图案复制多份，每份用不同的缩放、相位（时间偏移）和透明度，像油画罩染一样叠起来，画面立刻有了深度和呼吸感。
坐标扭曲（domain warping）：这是全视频的技术核心。做法是——用上一层的图案值作为“偏移量”，去修改下一层的输入坐标。也就是说，uv 不再直接进函数，而是先被别处的噪声“揉”一下再进。经过几次迭代揉捏，规整的几何条纹彻底融化，变成流动的、有机的、类似液态金属或大理石纹理的图案——也就是视频开头那些“哇”声一片的作品的真实身份。
视频最后十分钟是进阶预览：kishimisu 把 2D 图案的值当作“高度场”，用光线步进（ray marching）技术在网页里实时渲染出 3D 地形——你的视线变成一根根射线，射进高度场，撞到哪里就在哪里取色。最终彩蛋则把每个像素的颜色映射成 ASCII 字符，整幅 3D 画面全部由字符组成，致敬了早期终端艺术。
他明确告诉观众：这部分只是入门预览，真正的 3D 着色器世界在 Shadertoy 上，那里聚集了全球最强的一批“用代码画画的人”。
这条视频的价值不止于演示，它是一条浓缩的技术史脉络。以下是它对应的真实理论与工程实践。
kishimisu 在视频中反复引用的灵感来源，几乎都指向同一个生态：Shadertoy（shadertoy.com），由传奇图形程序员 Inigo Quilez（社区尊称 "iq"）与 Pol Jeremias 等人创建的在线着色器社区。iq 本人是 demoscene 出身的西班牙程序员，曾参与 Pixar 的渲染工具开发，他撰写的距离场函数库（Distance Functions，见 iquilezles.org）和《Rendering Worlds with Two Triangles》等技术文章，是整个 ray marching 社区的圣经。kishimisu 视频里画圆用的 length - radius、平滑边界用的 smoothstep，全部源自 iq 多年前整理并免费公开的教程体系。可以说，这条视频是 iq 开创的“着色器平民教育”路线在 YouTube 时代的一次成功转译。
视频结尾的 3D 部分，学名叫“球体追踪”（Sphere Tracing），学术源头是 John C. Hart 1996 年发表在《The Visual Computer》期刊上的论文《Sphere tracing: A geometric method for the antialiased ray tracing of implicit surfaces》。它的思想极其优雅：与其求光线和曲面的精确交点（解方程），不如让光线每次向前走“当前距离场的值”那么远——因为距离场保证了这一步之内绝不会穿模。反复迭代直到足够贴近表面。这个“用保守估计代替精确解”的思想，近十年因为 GPU 算力溢出而彻底翻红，成为程序化生成 3D 场景的主流技术之一。
domain warping 这种“用噪声揉坐标”的手法，祖师爷是 Ken Perlin。他 1985 年在 SIGGRAPH 发表《An Image Synthesizer》，提出程序化噪声，最初用于电影《Tron》的特效制作，并因此在 1997 年获得奥斯卡科技成果奖；2002 年他又发表《Improving Noise》改进算法（即 Simplex 噪声的前身）。今天所有“流动的、有机的、看起来像云和大理石”的程序化纹理，几乎都站在 Perlin 的工作之上。kishimisu 视频里用 sin 图案代替噪声做扭曲，本质上是用最廉价的周期函数模拟了 Perlin 噪声的角色——这正是它作为入门教学的聪明之处：不引入任何库，只用数学。
视频里实际写的语言是 GLSL（OpenGL Shading Language），它随 OpenGL 2.0 于 2004 年标准化（OpenGL 本身 1992 年由 Silicon Graphics 发布）。而“百万像素同时执行”的执行模型叫 SIMT（单指令多线程），现代消费级 GPU 拥有数千个计算核心。这条知识脉络的另一头连着今天最热的产业：NVIDIA 的 CUDA 生态、深度学习的张量核心、乃至大模型推理优化，底层都是同一种“把同一函数铺满海量数据”的并行哲学。kishimisu 视频的副线价值正在于此——它是最无痛的 GPU 并行思维入门。
“用几 KB 的代码画出震撼画面”这件事，不是 YouTube 时代的发明，而是欧洲 demoscene 文化的核心传统——这个始于 1980 年代家用电脑破解圈的社群，以实时演算的音画演示（demo）竞技为乐，强调极小体积内的极限创造力。2020 年前后，芬兰已将 demoscene 列入其国家非物质文化遗产清单。Shadertoy 社区的主力正是 demoscene 老兵，kishimisu 这条视频可视为这一古老“代码艺术”传统面向大众的一次破圈。
视频的全部技术演示都是可复现的实况操作：观众可以逐行跟随敲出同样的效果，不存在剪辑魔术。sin/fract 产生花纹、smoothstep 抗锯齿、多层叠加与坐标扭曲的因果链清晰透明。它引用的 Shadertoy 生态、iq 的教程体系均为真实存在且免费公开的资源，学习者可以直接验证。
第一，“几行代码画出艺术”是教学简化。 视频里那些“随手一调就很美”的参数，背后其实是 kishimisu 大量试错后的经验值。初学者照抄结构后自己调参，大概率得到的是一坨难看的条纹——参数敏感性是这类程序化艺术的真实门槛，视频没有过分渲染这一点。
第二，Shadertoy 风格 ≠ 工业图形管线。 着色器艺术和游戏引擎的实际渲染管线（光栅化、延迟渲染、PBR 材质系统）是两个分支。看完视频觉得“我会做游戏画面了”是错觉——但作为图形学直觉训练，它的价值是真实的。
第三，节奏门槛。 这是 code-along 视频，语速不慢，且需要极基础的 JavaScript/HTML 常识（视频前几分钟要搭网页环境）。零基础观众更适合把它当二刷材料：先看一遍感受流程，再跟敲。
第四，性能视角的省略。 视频没有讨论优化。真实的 ray marching 场景里，距离场求值次数直接决定帧率，社区里大量论文和帖子在讲步数与精度的权衡。入门阶段不知道这些没问题，但读者应知道这扇门后还有很深的工程纵深。
1. 把“并行思维”装进脑子，这是 AI 时代的通用素养。 试着用一句话概括你从这条视频拿到的第一性原理：不要写“对一百万个东西挨个处理的循环”，要写“对任意一个东西该怎么处理的函数”。无论你之后是写 CUDA 核函数、用 PyTorch 写张量运算，还是设计数据处理管道，这个思维转换都在给你复利。
2. 用“改常数”启动创造回路。 视频示范了一种被低估的学习法：不从理论开始，从一个能跑的最小例子开始，只改参数，观察变化，形成“预测—验证”回路。下一个你想入门的新领域（音频合成、物理模拟、生成模型），都可以复制这个模式：找到能实时反馈的最小画布，先玩起来，再补理论。
3. 动手清单（今天就能做）： 打开 shadertoy.com，任选一个作品点进去，只改一个数字看画面如何变化；或者按 The Book of Shaders（thebookofshaders.com）的前几章走一遍——那是 Patricio González Vivo 与 Jen Lowe 写的免费在线教材，与这条视频的知识线完美互补。
flowchart TD
A[开场: 展示惊艳的着色器艺术作品] --> B[思维转换: 代码同时运行在每个像素上]
B --> C[脚手架: UV坐标归一化与宽高比修正]
C --> D[画第一个圆: length 减半径]
D --> E[质感入门: smoothstep 平滑边界]
E --> F[混沌配方: sin 周期条纹 + fract 折叠]
F --> G[多层叠加: 不同相位与缩放的图层罩染]
G --> H[核心技巧: Domain Warping 用图案值揉捏坐标]
H --> I[成品: 流动的液态大理石纹抽象艺术]
I --> J[进阶预览: 2D高度场 + 光线步进做3D地形]
J --> K[彩蛋: 颜色映射为ASCII字符渲染]
K --> L[指路: Shadertoy 社区与 Inigo Quilez 教程]
本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵爱卫生（微信ID: gprshome201101）维护，聚焦5G/6G核心网、3GPP标准解读、通信前沿技术深度分析。 出版作品有《5G核心网原理与实践》《IMS原理与实践》等4本通信专业书籍。知识星球「51学通信」提供深度技术答疑和行业洞察。
[!tip] 51学通信知识星球 星主：爱卫生（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 星球定位：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 当前规模：5200 篇主题 / 990 个回答，198 元/年。 加入福利：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 AI 加持：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。