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.
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.
Thank you for this example! I have a few questions at large:
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?
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?
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)
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…
For WebGL2 @sebavan’s example using MSAA works great. If you need a WebGL1-supported solution, FxaaPostProcess can help: PG.
I’m not at all familiar with VR I think @RaananW is the best person to ask for help with that.
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.
@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)