26 Jan 2017
Forge Viewer Custom Shaders - Part 1
Shaders - They are probably the most powerful tool to customize how your models get rendered by the viewer, unfortunately this is also one of the most difficult to master... Anything that gets rendered on the screen is most likely customizable through shaders, so their applications are quite broad and their capabilities virtually unlimited.
This post is not an introduction to shaders so if that term doesn't ring a bell for you, you probably need to read a bit about the topic, here for example: an introduction to shaders, by Aerotwist.
Michael Ge, our regretted intern, wrote couple of articles a while ago about integrating custom shaders with the viewer:
- Using Shaders to Generate Dynamic Textures in the Viewer API
- Ace Editor for Three.js ShaderMaterials in the Forge Viewer
This year I'm planning to start playing more seriously with shaders and I wanted to get things started with a very naive implementation: today's shader will provide a specific color to the affected components, using a uniform, the code will randomly change that color every 2 seconds, simply to illustrate how we can use a shader to dynamically change rendered properties on our components.
Below is an example of how my model looks like after I select two of its components. You can see the custom color but my shader is so basic that it doesn't take care about rendering the lights, hence details on the components are not visible... Next time I will take a closer look at how lights can be rendered by the shader so it looks nicer. Stay tuned!
The code is so basic that I assume it is self-explanatory at this point ...