This is the submission of the Graphics Shader Assignment for Snaptrude.
- Clone the repo and run
This installs a simple web server to run the application.
npm install local-web-server
- Now, run
npx ws
to run the server and use the url address then displayed in your browser to open index.html. - All the tasks will been rendered on index.html
-
Task 1: Create a scene with meshes using the mesh builder and load a custom obj (bunny model) mesh into the scene. (See
createScene()
in main.js) -
Task 2:
- Return a mesh object when the mouse hovers over it. (SeeoutlineMeshOnHover()
in helpers.js).
- Outline a mesh on hover, using a shader. (SeeoutlineMeshOnHover()
in helpers.js).
Demo: outline.webm -
Addtional task: Create a UI to set the oulline width and color (See
createUI()
helpers.js)
Demo: ui.webm
The outlining has bene done using post processing with multiple passes. A silhoutte buffer is created to render all selected meshes to a specific color (something like a mask). Another blurred buffer is created to expand the silhoutte and then finally the blurred silhoutte is merged with the original textures to form the outline. References:
- https://ameye.dev/notes/rendering-outlines/
- https://gamedev.stackexchange.com/questions/68401/how-can-i-draw-outlines-around-3d-models
- And obvioulsy, the Babylon.js documentation and community forum.