Fragments：用着色器学习创意编程的平台

一种动手学习着色器的方式：探索技术、调整现成的实用工具，并重新混合120多个草图，将基础知识转化为独特的生成艺术。

一切如何开始

在我20多岁时，也就是很久以前，我突然灵光一现想要构建一个音频可视化工具。就像是Winamp的MilkDrop插件（这可能暴露了我的年龄）。我沉迷于这个想法，但我不知道如何实际实现它。

那是我第一次了解图形编程和着色器，并对此产生了终生的热情。我花了多年时间尝试学习它们的工作原理，经历了不同程度的成功——主要是失败。它们可能非常难以编写，特别是当你不知道自己在做什么时。我坚持度过了这段艰难时期，最终开始掌握它。

顿悟时刻

感到有些迷茫后，我决定尝试一些不同的东西，去年年底我参加了Genuary 2025挑战。我以前从未做过类似的事情；我总觉得这太难了，但我真的只是想看看我是否能做到。开始时有点艰难。

我的第一次尝试是一场灾难。我试图创建一个有趣的图案并将其与一些流体运动结合起来，但最终得到了一个静态、毫无生气的三角形。它缺乏灵感且无聊。

说实话，我觉得自己失败了。这通常是项目戛然而止的时候，我决定搁置事情并转向其他事情，但这次，无论出于什么原因，我只是继续前进——几乎立即就发生了变化。

创意编码平台

Genuary之后，我意识到我偶然发现了一些重要的东西，一种弥合学习着色器基础知识和实际创作原创作品之间差距的方法。我开始记录一切：有效的技术、我经常使用的实用工具，以及教会我新东西的草图。

Fragments成为了我希望在开始时拥有的平台，不是另一个课程，而是创意策略和构建块的集合。

它的独特之处

我想构建一些不同的东西：一本创意编码技术手册，包含深入的实验策略。以下是您将找到的内容：

10种创意编码技术

如使用数百万粒子构建流场以创建令人惊叹的有机图案；让我在2D空间中构建不可能的3D形状的光线行进技术；或让我从静态图像创建美丽、超凡脱俗图案的像素排序技术。

15+实用工具

一系列实用工具，通过可复制粘贴的实现来简化您的TSL工作流程。从噪声函数到SDF，再到程序化调色板——大量真正有用的东西。

120+草图

包含我为每件艺术品编写的带注释的完整源代码，并分解了我认为它们有趣的原因。了解艺术品背后的内容，然后利用现有内容重新混合，使其成为您自己的！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


export const dawn1 = Fn(() => {
  // 获取屏幕的宽高比校正UV
  const _uv = screenAspectUV(screenSize).toVar()
  const uv0 = screenAspectUV(screenSize).toVar()

  // 颜色累加器
  const finalColor = vec3(0.0).toVar()

  // 调色板设置
  const a = vec3(0.5, 0.5, 0.5)
  const b = vec3(0.5, 0.5, 0.5)
  const c = vec3(1.0, 1.0, 0.5)
  const d = vec3(0.8, 0.9, 0.3)

  // 使用余弦调色板的动画垂直渐变
  const col = cosinePalette(uv0.y.add(0.5).add(time.mul(0.01)), a, b, c, d)

  // Y轴重复锯齿图案，软化处理
  const repeatedPattern = fract(_uv.y.mul(24)).mul(0.3)

  // 将图案添加到颜色，使用pow增强效果
  finalColor.assign(col.add(pow(repeatedPattern, 2.0)))

  // 添加颗粒纹理
  const _grain = grainTextureEffect(_uv).mul(0.2)
  finalColor.addAssign(_grain)

  return finalColor
})

样板项目

完全可克隆的起始项目，包含您开始所需的所有实用工具。您可以在这里找到它们：

React Three Fiber的样板项目
原生Three.js的样板项目

基于Three.js着色语言（TSL）构建

我选择TSL是因为它处于一个理想的位置——足够成熟可靠，但又足够现代以探索像WebGPU这样的尖端功能。此外，Three.js社区非常棒。

展望未来

从一个个人实验开始的东西，已经变成了我真正兴奋地想要分享的东西。我发现的每一个新技术都会打开数十种新的可能性，我喜欢看到其他人拿这些构建块并将其变成自己的创作时所创造的东西。

如果您曾经感到在学习基础和创作原创作品之间陷入困境，也许Fragments也可以帮助您弥合这个差距。

用着色器学习创意编程的Fragments平台

Fragments是一个专注于着色器学习的创意编程平台，提供10+创意编码技术、15+实用工具和120+带注释源码的草图，帮助开发者将基础知识转化为独特的生成艺术。平台基于Three.js着色语言构建，支持WebGPU等前沿特性。