The vizfx framework simplifies the process of writing custom vertex and fragment shaders that you can combine with existing shaders. Vizard uses the OpenGL Shading Language (GLSL) for shaders, so some knowledge of GLSL is required to create custom effects. Don’t let this discourage you though. Vizard does much of the work so there is no need to re-implement the entire shader pipeline (vertex transformation, lighting, fog, etc.). Simply write a few lines of code and Vizard will combine it with existing effects to generate the full shader. These existing effects can be automatically generated through the OSG 3ds Max export workflow or others you’ve defined through code.
In this tech tip we’ll write a simple fragment shader that modifies the final color of a model to create a highlight effect. First we add the model that will later have the shader applied to it using the vizfx.addChild command:
Run the script and you’ll notice there is uniform lighting on the model which gives it a flat appearance (Image 1). Light from the default Vizard headlamp will not affect models added through the vizfx library. What’s illuminating the model is the default vizfx ambient light. Add the following code at the end of the script:
Run the script with the directional light added (Image 2). Next, add the following effect code to the end of the script. The fragment shader takes the final RGB color of each pixel and simply adds 0.7 to its red component.
Run the script and you’ll see that the model has a red tint (Image 3). We can improve on this highlight effect by using the GLSL mix command to blend between the logo color and red color rather than adding them together. Replace the following line:
With:
Run the script again to see the effect of blending between the two colors (Image 4). What if we want to vary the red component after the shader is applied? For example, to allow the user control over the highlight intensity. For this we use a GLSL uniform, a value that is passed to the shader code. Replace the effect definition with the following:
Add the following code to the end of the script. This adds a slider and sets the uniform value based on the slider position:
Run the script and drag the slider to change the amount of red blended into the model. To make the effect more noticeable, we’ll set the last parameter of the mix function to change over time with the sine function. Replace:
With:
Run the script again. The result is a final color that pulses between the original logo color and the blend of the logo color and red component (Image 5).
The following code is the complete script for the pulsing highlight effect:
