![screenshot1](https://private-user-images.githubusercontent.com/26852658/266567124-46fa46e5-6b90-4045-a8bf-f70232624c3a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2NjQ2MzMsIm5iZiI6MTcyNDY2NDMzMywicGF0aCI6Ii8yNjg1MjY1OC8yNjY1NjcxMjQtNDZmYTQ2ZTUtNmI5MC00MDQ1LWE4YmYtZjcwMjMyNjI0YzNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDA5MjUzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdhZjQ5MmM4MTMxYmM1MGNkNjhlMTU0ZDU5ZjdkN2VlYWJiOTcxNzJkNWYzZWY1N2YzMzg5OGE0NGI3YTQ3ZTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.10hBjMn-V52o0ui0rbWLGBrpYnbhSxRtUZ5vpWOJZ6U)
- Clone the Repo
- Open the folder in VS Code
- Run the index.html file in browser
- 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 )
- The whole scene is rendered on a RenderTargetTexture(Simple)
- Using Ray casting the selected object is picked
- Only the selected object is rendered on another RenderTargetTexture(Mask) using custom "MASK shader"
- Inside the custom MASK shader only white color is used to render the selected object
- Then a plane is rendered on the whole screen using a custom "OUTLINE shader"
- Inside the custom OUTLINE shader the textures A & B are used
- The intensity of outline is calculated by considring the nearby pixels (number of px= thickness)
- If Intensity = 0 , then fragment from Simple RenderTargetTexture is used
- If Intensity > 0, then fragcolor = outlineColor is used
- if The fragment in Mask RenderTargetTexture is white, then the fragment color is discarded and Simple is used
![screenshot2](https://private-user-images.githubusercontent.com/26852658/266567171-d8adb90b-af6c-46d7-be0a-8007242b564d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2NjQ2MzMsIm5iZiI6MTcyNDY2NDMzMywicGF0aCI6Ii8yNjg1MjY1OC8yNjY1NjcxNzEtZDhhZGI5MGItYWY2Yy00NmQ3LWJlMGEtODAwNzI0MmI1NjRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDA5MjUzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMxMjJjZDljZGI4OWVmYjZhZjZjODA0ZWEwZjEyNWRkZmFhODRkYzhhYjU5Zjg4ODI2YzhlZGI2YTkyNTQ4NGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oxqR45TnaFZT9Af2NOotmJtsLN1INzhL7neTtwVVdh4)