Fragments：一个通过着色器学习创意编程的平台

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

一切如何开始

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

那时我第一次了解到图形编程和着色器，并对此产生了终生的热情。

我花了多年时间尝试学习它们的工作原理，成功程度不一——大多是失败。编写着色器可能非常困难，特别是当你不知道自己在做什么时。我坚持度过了困难时期，最终开始掌握它。

我能够制作一些很酷的东西，也大致了解它们的工作原理，但随后我面临另一个问题：我很难找到正确的方式，将学到的机械部分转化为多年前就想创造的惊人创意作品。

整个过程中缺少了一个环节，一种心理障碍。我需要找到一些东西来帮助我解决这个创意编码的问题。

顿悟时刻

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

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

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

对于我尝试的每个提示，我开始简单地玩弄代码：更改变量，将值用作其他变量的输入，并以与我过去不同的方式循环事物。事情开始变得顺利起来。

到第11天，我正在尝试受Sunnk作品启发的可视化，这是我一直想制作但从未有信心尝试的东西。

这是一个完全的突破。我终于创造了我一直想要的那种东西，并真正开始探索可能性空间。每天有一个新的提示让我保持一致性，保持参与，并帮助我弄清楚自己的过程。

这对我来说是一个改变游戏规则的因素，我相信对其他人也是如此。我想进一步发挥这种灵感并分享它，这就是Fragments诞生的方式。

创意编码平台

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

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

它是我学习、实验和研究的一切成果的 culmination，反映了我自己的旅程。

它的不同之处

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

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+带注释源码的草图，帮助开发者将基础知识转化为独特的生成艺术。