Screen fade/motion blur effect

[erixon]

Hello!

Is it easy to mix current rendered screen with last to get a motion effect, for example like if you draw a screen with 80% alpha, you will get small trails from earlier ones.

Kind regards
Tomas

[Guest]

Motion blur is already supported out of the box: http://doc.babylonjs.com/how_to/using_standard_rendering_pipeline#setting-up-the-motion-blur

Regarding the overall question, you can use custom render target to render the scene to a texture and then use it as you wish (combining it with other frames, etc...)

 

Here is a demo about render targets: https://www.babylonjs-playground.com/#CJWDJR#0

[NasimiAsl]

hi @erixon

https://www.babylonjs-playground.com/#40Y6CY#23

https://www.babylonjs-playground.com/#40Y6CY#24

 

less quality for mobile

https://www.babylonjs-playground.com/#40Y6CY#27

[QuintusHegie]

Hmm.

I've been experimenting with the Motion Blur postprocess myself too.

I pasted the code from the docs http://doc.babylonjs.com/how_to/using_standard_rendering_pipeline#setting-up-the-motion-blur

For some reason changing

pipeline.MotionBlurEnabled = true;

while running doesn't have any effect?!?

When I set it back to false then still I get a postprocessed final image: with less 'motion blur', but still a postprocess (color distorted) image that differs from the original unprocessed rendered image.

I'm trying to increase motion blur effect when first person player gets more groggy/sedated; and decrease when player heals and feels well again. When player is healed then no motion blur at all needed any more.

Q

[erixon]

Thanks for the answers.

I'm not sure I get the effect I wanted with motion-blur-feature, when camera follow an object it still get motion-blur, and hard to control, increased motion blur look unnatural.

So I guess I have to learn about render targets then.

[Guest]

Pinging @Luaacro for the motionBlurEnabled question

[julien-moreau]

@erixon can you share a playground for MotionBlurEnabled ? I cannot reproduce the bug, it works here 

Anyway, it looks like you are more interested by an object-based motion blur which is not yet supported

[julien-moreau]

In this demo https://www.babylonjs-playground.com/#X3XD2C#1 everything works well

[Pryme8]

23 minutes ago, Luaacro said:

In this demo https://www.babylonjs-playground.com/#X3XD2C#1 everything works well

Im on chrome and I see no motion blur even with everything cranked to the max.

[julien-moreau]

Same for this one with motion blur set to the max value ? https://www.babylonjs-playground.com/#X3XD2C#4

[Pryme8]

That one did it.

[julien-moreau]

Weird, can you share your screen resolution when it doesn't work ?

[Pryme8]

1280 by 1040. What were the changes?
I went back to the first one and it seems to work now when I crank it to max but very very minimal, I might have missed it the first time looking.
 

[julien-moreau]

 You reassure me ^^

[erixon]

Late conclusions

Motion blur can be annoying and dizzy, so often skip it

Builtin motion-blur seems to be useful only for camera movements or maybe single object moving

My case where the camera chase a car, I don't get the wanted speed effect with motion blur on environment and not the car

I achieved the effect partly with not clear buffer and alpha on objects, but maybe annoying also...so have to think about it..

[julien-moreau]

I still think that your solution is to have a motion blur which is object based. More the object moves, more the blur is high for and only for the object moving

I'll try to implement one by using the multiple render targets and see the effect

[QuintusHegie]

On 8/27/2018 at 6:04 PM, Deltakosh said:

Pinging @Luaacro for the motionBlurEnabled question

@Deltakosh here's what happens at my system (using GPU):

Picture #1 no pipeline at all (commented out)

/*          this.pipeline = new BABYLON.StandardRenderingPipeline("MotionBlur", scene, 1.0, null, [cameras[1]]);

            this.pipeline.MotionBlurEnabled = true;

            this.pipeline.motionStrength = 1;

            this.pipeline.motionBlurSamples = 32.0;*/ // 64.0 default

Result = very nice default scene with antialiassing etc.

Picture #2 pipeline but with motionBlurEnabled to false

            this.pipeline = new BABYLON.StandardRenderingPipeline("MotionBlur", scene, 1.0, null, [cameras[1]]);

            this.pipeline.MotionBlurEnabled = false;

            this.pipeline.motionStrength = 0;

            this.pipeline.motionBlurSamples = 32.0; // 64.0 default

Result = default scene colors, poor to no antialiassing, colors distorted even when not moving (see lower right grass brightness).

Picture #3 pipeline with motionBlurEnabled first set to true and then set to false thereafter

            this.pipeline = new BABYLON.StandardRenderingPipeline("MotionBlur", scene, 1.0, null, [cameras[1]]);

            this.pipeline.MotionBlurEnabled = true;

            this.pipeline.motionStrength = 1;

            this.pipeline.motionBlurSamples = 32.0; // 64.0 default

...drive around... and then...

                    this.pipeline.MotionBlurEnabled = false;

Result = wierd "dirt marks" start to show up on the camera (see lower right bright circles)

Picture #4 pipeline with motionBlurEnabled set to true

            this.pipeline = new BABYLON.StandardRenderingPipeline("MotionBlur", scene, 1.0, null, [cameras[1]]);

            this.pipeline.MotionBlurEnabled = true;

            this.pipeline.motionStrength = 1;

            this.pipeline.motionBlurSamples = 32.0; // 64.0 default

Result = motion blur in effect (but still i have the idea that some colors become too bright)

These are the only changes I make in the default scene (picture 1).

Any idea where I can look for the cause of these weird visual artifacts when using a pipeline? ?

Q

P.S. My scene uses multiple camera's. When I switch to another camera while in-game then the visuals restore completely (luckily). So the visual artifacts only happen for the camera I set the pipeline for.

[Guest]

@Luaacro any thoughts?

[julien-moreau]

Good catch for the third image! Will fix that even if I don't reproduce for instance in this example https://www.babylonjs-playground.com/#X3XD2C#4

If I understand, you would like to have only motion blur enabled. By default, the bloom is enabled so you have to "this.pipeline.BloomEnabled = false". Is that ok for you ?

[Pryme8]

Are you looking for Object Based Motion Blur?

[TomaszFurca]

How to enabled object based motion blur? I want to see motion blur on objects with move without camera move.

[Pryme8]

Is Julien Moreau-Mathis on the forum?
 

[Guest]

Yes: @Luaacro is Julien

[julien-moreau]

Yeah I did a try ! But modified the geometry buffer renderer to get a velocity map, so only webgl 2 compatible

Will consider the object based motion blur And try to find an elegant solution to work webgl 1 and webgl 2

[QuintusHegie]

18 hours ago, Luaacro said:

Good catch for the third image! Will fix that even if I don't reproduce for instance in this example https://www.babylonjs-playground.com/#X3XD2C#4

If I understand, you would like to have only motion blur enabled. By default, the bloom is enabled so you have to "this.pipeline.BloomEnabled = false". Is that ok for you ?

Yes, setting the BloomEnabled to false worked. Whoohoo!

It's no problem for me to set this to false. It's just that the documentation didn't mention some effects would be set to ON by default so how could I know. ?

Talking about default pipeline setting... although the bloom effect is gone now, I'm missing the anti-aliassing thingee when setting the standard pipeline.

Check the ugly cropped snapshot:

Normally the transition between plane colours is more smoothly instead of solid pure pixel. E.g. when looking through the window of the blue locomotive object the white-to-blue edge would be somewhat light-blueish gradient.

It would be nice (for me at least) if the standard rendering pipeline initially had all settings as if you didn't use a pipeline. That would make more sense, since it is called StandardRenderingPipeline probably for a reason?

If you know the effects/setting of the default one (when not using the pipeline) then I can set those settings temporarily for now...

As for the question of Object Based Motion Blur. Sure I'm interested ?

As I have different cameras in the same scene (world view, driver's eye view, train follow view etc.), one type of motion blur special effect fits one camera better over the other.

Some of these effects I'll be using temporarily in the game; e.g. when the player picks-up a speed-boost item or something similar. The current locomotive player then gets the full screen motion effect, while another observing player sees the temporarily boosted locomotive only in motion blur etc.

Q