Hey all,
Curious if anyone has any advice on a potential post processing idea. I want to create something like this image but am extremely new to creating custom post processing:
Essentially what I am wanting to happen is the user will be able to pick which entity they want to highlight and everything else in the scene will fade to black and white while the chosen entity will have their normal color from the base render show through.
Anyone have any thoughts on this? Thanks in advance.
Two ways:
add small shader chunk to all materials (if they use standard shaders) - probably overwrite end fragment shader chunk to do desaturation directly during rendering. So no need for postprocessing, which would make it cheaper on mobile.
set stencil parameters on the mesh you want to highlight to for example increment stencil buffer. And then use this mask during postprocessing to apply changes only to what is not masked. In a way similar to PlayCanvas Examples (read comments in the code to see how the stencil buffer is used)
That’s quite a powerful and simple system. @mvaligursky how would you handle the skybox mesh/material in this case so it gets the same treatment?
Would there be a way to specify between specific instances of materials using the shader chunk method? I have 20+ entities but only two materials (two different teams) for optimization purposes but I need to pick out only one entity’s instance of a shared material.
Also… do yall have a good example of adding shader chunks within PlayCanvas?
Here are two examples on how to override the default shader chunks:
https://developer.playcanvas.com/en/tutorials/tutorial-plasma-shader-chunk/
https://developer.playcanvas.com/en/tutorials/warp-a-sprite-with-glsl/
Note shader chunks is still an unofficial API and it’s subject to change.
Do you know if there are changes coming down the pipe soon? Would hate to make this and have it change quickly.
I have not investigated in detail, but skybox shader is generated here and perhaps some chunk replacement could be done: https://github.com/playcanvas/engine/blob/dev/src/graphics/program-lib/programs/skybox.js but maybe not as easily.
Alternatively, you could likely use inverted sphere / box with standard shader and use the same solution.
You’d need to duplicate material for the grey scaling, and swap it on the mesh as needed, or back to normal material.
You could also set some uniform on the mesh instance directly and use that to control desaturation.
Yes, there are changes coming as we’re working on integrating Shader Node System - but this is a change you’d easily be able to port to new system when ready.
@mvaligursky @Leonidas
Okay one last question on this topic… What is the difference then in this instance having 3 materials, looping through setting everything to grey except for the selected entity. Then on deselect, looping through and resetting the entities to their original materials. Why would I need shader chunks for that? Would shader chunks only be for if I am animating the desaturation instead of it being binary?
well I assume you have textures with colors set on materials, and so the final pixels are colored. You could swap textures to greyscale, and then you don’t need any chunk (assuming you don’t have for example a yellow sun light).
So the chunk is responsible for converting RGB colors to RGB greyscale.
