Building on the previous tutorial of storing the rendered output to a texture - we can store a few past frame to create a motion blur effect. Averaging these stored textures creates a `blur` effection if the object is moving around.
Quad if flying around - with motion blur begin shown - we show the motion blur on the right side, and without on the left - just so you can compare.
The scene is reguarly rendered to an offscreen texture - however, the texture is copied and saved (keep 4 past copies). This is stored in an 'offscreen' rendering pass. It renders takes the average of the 4 stored textures.
The off screen quad that stores 4 textures and renders full screen. Just to emphasis the differences - the left and right side of the screen are drawn with and without motion blue. We also draw a small black line down the middle of the screen.
This is all done in the fragment shader - using the UV coordinates. As it's a full screen quad - the uv coordinates go from (0,0) to (1,1) for the full screen so we can easily calculate the middle.
fullscreenquad = function() {
const s = 1.0; this.positions = new Float32Array([-s, s, 0, -s, -s, 0, s, -s, 0, s, s, 0 ]);
this.indices = new Uint32Array([ 0,1,2, 2,3,0 ]);
this.uvs = new Float32Array([0,0, 1,0, 1,1, 0,1 ]);
var fragWGSL = ` @group(0) @binding(0) var mySampler: sampler; @group(0) @binding(1) var myTexture0: texture_2d<f32>; @group(0) @binding(2) var myTexture1: texture_2d<f32>; @group(0) @binding(3) var myTexture2: texture_2d<f32>; @group(0) @binding(4) var myTexture3: texture_2d<f32>;
@fragment fn main( @location(0) uvs : vec2<f32> ) -> @location(0) vec4<f32> { let texCol0 = textureSample(myTexture0, mySampler, uvs ).xyz; let texCol1 = textureSample(myTexture1, mySampler, uvs ).xyz; let texCol2 = textureSample(myTexture2, mySampler, uvs ).xyz; let texCol3 = textureSample(myTexture3, mySampler, uvs ).xyz;
let texCol = texCol0*0.25 + texCol1*0.25 + texCol2*0.25 + texCol3*0.25;
// draw a small black line down the middle of the screen. if ( uvs.y >0.499 && uvs.y < 0.50 ) { return vec4<f32>(0,0,0,1.0); } // only draw half the screen using motion blur to compare with and without if ( uvs.y < 0.5 ) { return vec4<f32>(texCol0, 1.0); }
The method of using past renders (stored to texture) to create a blur motion effect is an accumulation buffer technique. Each frame is rendered with a lower opacity and added to the previous frames in the accumulation buffer. The result is a blurred image that represents the motion of the scene. The advantage of this method is that it is simple and easy to implement. The disadvantage is that it requires a lot of memory and bandwidth, and it can produce ghosting artifacts if the motion is too fast or irregular.
Things to Try
• Add another object to the scene which is not moving (so you can confirm only the moving objects have 'motion blur')
• Try and refactor the offscreen code so it's more flexible (i.e., define a constant to say how many past textures to store)
• Try and keep track of which is the most recent/oldest in the fragment shader and scale the textures non-linearly (more recent texture has higher priorty than older ones)
• Try and mix colors - so the old textures are 'gray scale' - or converted to red/blue - to create a psychedelic effect.
• Use texture transforms - so past echos can be twisted, rotated and stretched slightly (even if not moving - mixed with colors so it's mezmorizing)
• Edge detection - determine which pixels have changed - but focus on ones which are on the edge (i.e., one side is changes and the other isn't - then add some color emphasis)
Not the only way to create a motion blue - you could also use a velocity buffer (store the velocity of the object in the render target pixel). The velocity is calculated by comparing the positions of the vertices in the previous and current frames, using a vertex shader. The velocity is then used to sample the previous frame in the direction and magnitude of the movement, using a fragment shader. The result is a blurred image that follows the motion of the scene. The advantage of this method is that it is more efficient and flexible than the accumulation buffer. The disadvantage is that it requires more shader calculations and it can produce noise or artifacts if the velocity is inaccurate or inconsistent.
Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.
