Add Per-object Motion Blur Pass example

[gkjohnson]

Add a new per-object motion blur postprocessing pass and an associated example!

Here's a demo.

The motion blur effect works for camera movement, object position / rotation / scale transform updates, and skinned animation movement. It does not work with displacement map animation or morph targets.

Here's a description of the options. Most options can be overridden per object:

{
	// How many steps to samples to take when smearing the motion blur
	// More samples is smoother. This option is only available globally
	// and not overrideable.
	samples: 30,

	// How much to expand the geometry by along the motion vector
	// This can cause cracks in geometry with hard normals
	expand: 1,

	// How intensely to blur the models
	smearIntensity: 1,

	// What the maximum amount of smear is to apply to a model. This is good
	// for limiting smear in fast camera moves or when models are moving and
	// nearly disappear
	maxSmearFactor: 0.05,

	// Whether or not to blur transparent objects
	blurTransparent: false,

	// Whether or not to account for camera motion in the blur
	renderCameraBlur: true
}

[looeee]

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

[gkjohnson]

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.

[WestLangley]

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

[gkjohnson]

@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:

[WestLangley]

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

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

[gkjohnson]

@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.

[sunag]

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

[sunag]

@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.

[marcofugaro]

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

[gkjohnson]

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:

[mrdoob]

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 😕

[gkjohnson]

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.