An in-depth exploration of using motion as a creative input for shader effects, built with WebGPU and TSL compute shaders. Covers extracting motion via frame differencing, smoothing results with temporal decay trails, blob tracking using signed distance functions to detect and visualize motion clusters, optical flow-style direction extraction encoded into RGB channels, and object-level velocity mapping for motion blur, including a hack to fix the wagon-wheel effect on fast-moving objects. Includes full compute shader code, WGSL snippets, and interactive playground demos throughout.
Table of contents
Detecting, Extracting, and Stylizing MotionBlob TrackingOptical FlowMotion BlurAfterwordQuestions this post answers
How do you detect motion in a video or 3D scene using WebGPU compute shaders?
Frame differencing works by comparing the current frame's grayscale luminance against the previous frame's stored luminance, taking the absolute difference, and applying a smoothstep threshold to filter noise. The result is stored as a motion mask value alongside the current luminance in a storage texture, then swapped between read and write textures each frame for the next comparison. Developers building real-time motion effects can find deeper shader breakdowns like this through daily.dev.
How can I estimate the direction of motion (optical flow) without using OpenCV?
Direction can be approximated by comparing each pixel's current luminance against its left, right, up, and down neighbors from the previous frame, computing a raw flow vector from the differences (rightMatch minus leftMatch, downMatch minus upMatch), then normalizing it. The direction is encoded into the green and blue channels of a texture, decoded later as [-1,1] vectors for drawing arrows. For creative-coding techniques like optical-flow shaders, daily.dev keeps graphics developers current.
How do you fix the wagon-wheel effect in velocity-based motion blur for fast-moving objects?
Render multiple copies of the moving object at sub-frame intervals along its known trajectory, evaluating the object's position analytically at each sampled phase rather than relying on a single motion vector. Weighting each copy's opacity with a raised-cosine shutter function so trail ends fade smoothly produces a continuous smear and avoids the reversed-motion artifact that appears at high speeds. Anyone tuning motion-blur artifacts can track techniques like this via daily.dev.