How to tint the scene with a color and be able to animate its intensity?

I want to indicate to the player that they are taking on “damage” by “pulsing” a red tint over everything they see. And if the player dies I want to tint everything in a pale green or perhaps desaturate everything they see.

What I’ve tried so far is to invoke an animation on the value of the scene’s fog setting. The damage a player is taking, pulses on and off if they are attacked by animating the fog from 0 to 1 and back to 0 over a second when the hit occurs. This works well and gives me a lot of control. However, the fog only colors objects, it doesn’t tint background where there are no objects.

Is there a better way to do this?

You could try using a custom post process like this for a simple example. I just mixed in some red for simplicity, but you could also try converting to hsv and back to isolate the hue. :slight_smile:

2 Likes

Thank you for this example! I have a few questions at large:

  1. How does this line here var tintPostProcess = new BABYLON.PostProcess("tintPostProcess", "tint", ["tintColor", "time"], null, 1, camera); reference the fragment shader you defined at BABYLON.Effect.ShadersStore["tintFragmentShader"] = ... ? Nothing really matches to identify and connect the two, except for the string “tint”. Is it convention to name the ShadersStore key that way?

  2. Once the post process is applied, the edges around the sphere seem to be more pixelated compared to when no post process is applied. Is there a way to smoothen that up? Maybe some kind of anti-aliasing is required?

  3. How do I get a post process effect to work with XR? https://playground.babylonjs.com/#DAC1WM#125 When I click the glasses to enter immersive vr mode, I bind the effect to the active camera but only one eye gets the effect. How do I apply the effect to both eyes? (If you close one eye then the other you’ll see the aliasing difference I’m talking about in question #2)

  4. This link you provided https://doc.babylonjs.com/divingDeeper/postProcesses/usePostProcesses#custom-postprocesses has a link at the bottom “read more about shaders”, which links to https://web.archive.org/web/20190904224946/https://www.eternalcoding.com/what-do-you-mean-by-shaders-learn-how-to-create-shaders-with-babylon-js/. This post has one of the best articles I’ve ever read about shaders, BUT the article is cut-off mid subject. 2 of it’s 4 points aren’t expanded upon, which is a real tragedy. :sob: Is there no way to port those web archive articles into the babylon forum or docs?

1 Like

About 2 MSAA could help https://playground.babylonjs.com/#DAC1WM#127 :slight_smile: I let @Blake answer the other questions.

2 Likes
  1. Yep that’s the way to do it using the ShaderStore: the first part of the string before “FragmentShader” matches the fragmentUrl parameter. The doc says you can also pass a script element or the URL for a separate file, but I’ve never done it that way for post processes…

  2. For WebGL2 @sebavan’s example using MSAA works great. If you need a WebGL1-supported solution, FxaaPostProcess can help: PG.

  3. I’m not at all familiar with VR :frowning: I think @RaananW is the best person to ask for help with that. :slight_smile:

  4. CC @PirateJC about the article linked in the doc, which gets cut off half way though on the web archive. Also CC @Deltakosh who wrote the article. :slight_smile:

1 Like

About 4. All credits to @Deltakosh :slight_smile: I learnt to write shaders with it lol

yeah this is on my abandoned website

@PirateJC: any chance you feel motivated enough to drop the content from the webarchive to your doc?
I can invite you to the repo where the md file is (with all the text)

3 Likes

Sure thing. I’m happy to grab the text and resurrect this doc to breathe again!

3 Likes

I kinda hate jumping in on a 4 day old topic, but here goes. Have you considered “animating” something in BABYLON.ImageProcessing?

I played with this a lot a while back. Do not have a published scene using it right now, but I get decent results for both Vignette:

and Color Curve density changes:

The first changes the outer edges, while 2nd the entire scene. If you are going the XR route, the vignette method is not recommended.

1 Like

no i haven’t. At least not yet. The post process effect is working well for me now

1 Like