Add Per-object Motion Blur Pass example - #14510

This is very cool, but I feel like we might have to put an epilepsy warning on the example! 😆

Ha I kinda figured the flying spheres might be be a bit much. I wanted show impact on something a bit further away and fast moving but the character and knots probably do a fine job of showing the effect.

I was expecting something like this. I'm not really seeing that here -- unless I'm missing something...

@WestLangley The example you posted looks like it just handles camera motion blur. This example effect applies motion blur per-object even if the camera isn't moving. It handles camera motion blur, as well, though. It can be pretty subtle but it helps blend fast moving objects between frames -- it's pretty common in games now. The effect is easier to see if you stop the animation:

@gkjohnson Maybe it is that I would expect the silhouettes to be blurred...

Tip: avoid calling clone() and 'new' inside the render loop.

@WestLangley I added an option that lets you interpolate the geometry between the current frame and the previous frame. That coupled with bloating the geometry does allow for sampling outside the silhouette of the geometry, but of course there are some artifacts:

There are other approaches to blurring the silhouette but those seem to just have different artifacts and are more intensive.

Tip: avoid calling clone() and 'new' inside the render loop.

Thanks! I missed the color clones. Unfortunately these material clones can't be removed but are only called when new geometry is encountered. And due to some issues with renderBufferDirect I can't reuse the velocity materials for different geometry.

@gkjohnson I was looking for this has some time for threejs, thanks!

@mrdoob I find this PR awesome. This is equivalent the Unreal Bloom of @bhouston for MotionBlur. Unreal, Unity and others AAA engines they use very similar approach.

hey, I used this pass in a project, it is really awesome!!

I'm gonna close this since it's a bit out of date now and it doesn't seem there's interest in merging it here -- there's a slightly more up to date version over here for those who are interested in checking it out:

https://github.com/gkjohnson/threejs-sandbox/tree/master/motionBlurPass

It has a couple fixes and new features including using noise in the blur so you can get by with fewer samples:

There is interest, but the whole transition to es modules, pointer events, ... really made me scaring of adding more code to the repo that we'd have to convert 😕

There is interest, but the whole transition to es modules, pointer events

Definitely understand. The code was getting out of date as I worked on it in another repo so I figured it would be best to point people to the latest stuff. Perhaps in the future this can be reintroduced. There are some other PRs / issues in the pipe for three.js that would make this a more viable effect, anyway.

If there's still any interest, I was able to get the motion blur up and running in r174, thanks to changes to renderer.compile() and using the new version of the boneTexture code:

Live WebGL Example

Users of WebGPURenderer can use: https://threejs.org/examples/webgpu_postprocessing_motion_blur.

We do not want to add more passes for the older EffectComposer though.

Users of WebGPURenderer can use: https://threejs.org/examples/webgpu_postprocessing_motion_blur.

We do not want to add more passes for the older EffectComposer though.

My contentions:

1. This is a very popular effect that already has a working implementation that just hasn't been updated.
2. MotionBlurNode lacks many of the features of the original motionBlurPass.
3. Not everyone uses WebGPURenderer, especially since it's still 'experimental'.

I understand the need to focus development resources on the WebGPURenderer, but the changes to the original implementation are very minor.