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.
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)
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. Is there no way to port those web archive articles into the babylon forum or docs?
About 2 MSAA could help https://playground.babylonjs.com/#DAC1WM#127 I let @Blake answer the other questions.
About 4. All credits to @Deltakosh 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)
Sure thing. I’m happy to grab the text and resurrect this doc to breathe again!
I kinda hate jumping in on a 4 day old topic, but here goes. Have you considered “animating” something in
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.
no i haven’t. At least not yet. The post process effect is working well for me now