草地风吹着色器:黄昏的草坡

高草和野花沿着长坡一直延伸到坡顶的一棵孤树,太阳低垂金黄,风浪一阵阵穿过草丛朝你涌来。由 WebGPU 程序在你的浏览器里实时画出。

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

请求原话

“贴着地面望出去,高高的草和野花一路长上山坡,坡顶一棵孤零零的树,背后是低垂的金色太阳。风把草浪一波波推过来,阳光穿透草叶。”

它是怎样画的

风吹过草地时呈现为一道道带子:一阵风经过,把草叶压倒、翻出颜色更浅的一面,这道带子再接着滚过整片草地。逆光的草在阳光透过薄叶的地方发亮。

每片草叶、每朵花、每片树叶和每根树枝都由显卡按编号生成。草叶成丛生长,每片都有收尖、弯曲,并在宽度方向上是圆的,一边亮一边暗;根部暗,叶尖在低垂的阳光透过时呈亮黄绿。近处的草叶分段更多,远处更少;往坡上草丛渐稀,成了一簇簇。

草叶只在程序初始化时种一次;之后每一帧只由风把它们吹弯。风是位置和时间的函数——宽宽的风带越过长长的起伏和细碎的抖动朝你移来——它的每一部分都每十秒重复一次,所以影片不需要在帧与帧之间保存任何东西就能循环。

它怎样运行

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

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

做你自己的

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

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

做动画用的着色器效果

接着看