erixon

Screen fade/motion blur effect

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

babylonsj-model-train-simulator-no-pipeline.jpg

babylonsj-model-train-simulator-pipeline-motionblur-false.jpg

babylonsj-model-train-simulator-pipeline-motionblur-false-after-true.jpg

babylonsj-model-train-simulator-pipeline-motionblur-true.jpg

Share this post


Link to post
Share on other sites
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:

anti-alias-gone.jpg.e6f20783d800e16402598b20c3bff56b.jpg

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.