sckorpio/Babylon_Image_Outline

Babylon_Image_Outline

Build Instructions

• Clone the Repo
• Open the folder in VS Code
• Run the index.html file in browser

Implementation

• Rendering the object outlines are not that easy
• There are multiple ways to do that
• I have used the "Post Processing method"
• It used multiple FrameBuffers( RenderTargetTexture in Babylon )

Steps:

1. The whole scene is rendered on a RenderTargetTexture(Simple)
2. Using Ray casting the selected object is picked
3. Only the selected object is rendered on another RenderTargetTexture(Mask) using custom "MASK shader"
4. Inside the custom MASK shader only white color is used to render the selected object
5. Then a plane is rendered on the whole screen using a custom "OUTLINE shader"
6. Inside the custom OUTLINE shader the textures A & B are used
7. The intensity of outline is calculated by considring the nearby pixels (number of px= thickness)
8. If Intensity = 0 , then fragment from Simple RenderTargetTexture is used
9. If Intensity > 0, then fragcolor = outlineColor is used
10. if The fragment in Mask RenderTargetTexture is white, then the fragment color is discarded and Simple is used