阴影运动

If you are a long-time reader of this blog, you may have noticed that many of my recent explorations related to graphics programming topics involves some flavor of screen-space shaders. They are incredibly versatile, as we’ve seen through the many effects we’ve studied, ranging from simple pixel manipulation, such as paint or halftone, to more advanced use cases, such as volumetric lighting or atmospheric scattering. Yet, all have one thing in common here. They all treat the underlying image, or frame, as a spatial medium: sampling color, luminance, depth, and neighboring pixels, and use it as the main input for the effect.

如果你是本博客的长期读者，你可能已经注意到，我最近许多与图形编程相关的探索都涉及某种形式的屏幕空间着色器。它们具有令人难以置信的多功能性，正如我们通过研究的许多效果所看到的那样，从简单的像素操作（如 绘画 或 半色调），到更高级的用例（如 体积光 或 大气散射）。然而，它们在这里都有一个共同点。它们都将底层图像或帧视为一种空间媒介：对颜色、亮度、深度和相邻像素进行采样，并将其用作该效果的主要输入。

This made me wonder: what if, instead, we used motion within the scene as the input to our effects?

这让我不禁思考：如果我们反过来，将场景内的运动作为效果的输入，会怎样呢？

I was eager to find a way to extract motion and explore the many ways we could visually interpret it with shaders, even more so after seeing friends experiment with motion-based effects such as blob tracking and optical flow in tools like TouchDesigner. The list of things I wanted to try out and build only grew longer as I dug deeper into this topic, finding novel solutions to edge cases I was encountering or stumbling upon new visuals I wanted to recreate. This new temporal input kept me tinkering creatively for the better part of two months now.

我一直渴望找到一种提取运动的方法，并探索我们使用着色器在视觉上诠释它的多种方式，尤其是在看到朋友们在 TouchDesigner 等工具中尝试斑点追踪和光流等基于运动的效果后，这种渴望更加强烈。随着我深入探讨这个主题，发现遇到边缘情况的新颖解决方案，或者偶然发现想要重现的新视觉效果，我想尝试和构建的内容清单变得越来越长。这个新的时间输入让我在过去两个多月里一直进行着创造性的摸索。

My goal for this article is to introduce you to motion as a new creative medium and explore several ways of representing it with shaders, or simply put, “how to shade motion”, hence the title. Using WebGPU compute shaders, we’ll build a small pipeline to extract motion through frame differencing and encode it into masks and veloci...