Custom outline shader

I am trying to implement custom outline shader in babylon.
I have progressed with the outline as a Post process using Sobel.
How can I compose the scene with it.
The goal is to pick an object in the scene and it shows outline along with the original scene rendering.
I have to somehow compose the scene texture and the post process texture into final render. Need help

You need to mix the source texture with what’s computed in the shader like this :

check line 77

1 Like

I guess you are pointing to a wrong PG

I don’t think so. PF shows scene rendering with postprocess applied.

1 Like

This one of my PG only haha.
What I meant is I want to render screen in texture.
Then render screen in another texture after a post processing pipeline using sobel.
Then combine these two texture and render the final scene with the blended texture.
How can I achieve that?

This is kind of a hacky way I was trying just to make it work. But this will outline every mesh on screen. I want to pick and select particular meshes and get the outline. Thus I need the other approach. But It is getting hard to figure out

Maybe this will work for you: Highlighting Meshes | Babylon.js Documentation

No actually this is what I am trying to achieve using custom shaders.

I’ve change the PP to use the other RTT:


You can do it like this:

  • renderTarget is used to render the objects you want to outline. Note that it uses a non lit shader for this pass, as you did in your PG (line 112)
  • when the meshes have been rendered into renderTarget, the Sobel post-process is applied on the target in the onAfterUnbindObservable observable.
  • another “Merge” post-process is used to merge the scene with the result of the Sobel post-process

[EDIT] @Cedric solution is better as it doesn’t need an additional post-process.