烟雾着色器:光束里的线香烟

线香的烟细细一缕升起,散成卷曲,只在穿过一束暖光时发亮。由 WebGPU 程序在你的浏览器里实时画出。

在你的显卡上边看边画。这段程序是为本站手写的,不是 Agent 做的。

请求原话

“暗室里一炷香在燃着。烟细细地升起,慢慢卷成涡旋,只有穿过那一束暖光的地方亮起来;光的上下几乎看不见。”

它是怎样画的

热空气还慢的时候,线香的烟升得平滑;越往上越快、越转,就散成卷曲。烟只在光照到它、被它散射的地方才看得见,所以暗室里只有一束光时,烟在光里发亮,光的上下几乎看不见。

空气是保存在网格上的三维流体,网格由宿主在帧与帧之间保存:速度沿自身输运,涡度约束让卷曲一直转着,压力求解让空气既不堆积也不变空,烟和热的输运带一步修正,保持清晰。热往上抬,烟往下坠,一股缓慢的穿堂风让烟带轻轻摇摆。

你看到的是从香头放出、被这股空气带着走的几十万个示踪粒子,它们被拉成真实烟雾那种细丝。光从窗口一路穿过网格里的烟,所以烟会给自己和后面的雾气投下阴影,迎着光看时烟最亮。最后一秒影片淡回第一帧,因此循环。

它怎样运行

它是一个画面程序:用 WebGPU⁠ (外部网站,在新标签页打开) 画出画面的 JavaScript 模块,和编辑器里画面程序效果运行的程序是同一种。它在这里的播放方式和编辑器一样,在画面沙箱⁠ (在新标签页打开)里:另一个源上的页面,碰不到本页、你的存储和网络,只被告知要画哪一帧。

它没有时钟,也不用随机数,所以同一帧不论怎样到达都画得一样,最后一帧接回第一帧。设备太慢时停在静帧;没有 WebGPU 的地方,画面上会说明。

做你自己的

在编辑器里,着色器、模拟或画面程序效果接受你编写或粘贴⁠ (在新标签页打开)的程序,先在你的电脑上检查并试跑,再写进项目。程序声明的设置会成为可以在时间轴上打关键帧的属性;这件作品没有声明设置,你的可以有。

Agent⁠ (在新标签页打开) 也能按上面这样的请求写出程序,作为草稿交给你审核。这属于 Agent 订阅,订阅即将开放;自己写是免费的。

做动画用的着色器效果

接着看