Custom outline shader

Questions
1

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

2

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

check line 77

1 Like
3

I guess you are pointing to a wrong PG

4

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

1 Like
5

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?

6

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

7

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

8

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

9

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

2 Likes
10

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.