This is an old revision of the document!

Lab 9 - Writing a Shader

Before You Start

Download and unzip the Lab 9 Asset File into your working directory

Writing a Shader

The simplest shader:
Make sure you can run testshader.py and that you can see a white teapot on the screen. The color blue is being passed into the shader through the tint constant. Try different color values for this constant. Then open up shader1.sha and notice how the value is used in the vertex shader to assign a color to a vertex. Play with the color values inside the vertex shader and see how it affects the final render.
Diffuse Vertex Shading:
Instead of sending a preset color value to all of the vertices inside the vertex shader, let the vertex shader calculate the color in each vertex based on a lighting model. Use the following lighting model to do this calculation: color = 0.2*ambientcolor + diffuse_attenuation*diffusecolor + specular_attenuation*specularcolor. Instead of *tint* you now have to send *ambientcolor*, *diffusecolor* and *specularcolor* into the shader. Inside the vertex shader, you then have to calculate the *diffuse_attenuation* and *specular_attenuation* which are values between 0 and 1 that indicate how much of that color will be seen in that vertex.
1. The *diffuse_attenuation* essentially represents how well the vertex is lit, which relates to the angle between the vertex normal and the direction to the light source. This is the formula (using Cg functions): diffuse_attenuation = saturate(dot(LightVector, NormalVector)).
2. You already receive the NormalVector inside the vertex shader, but you have to calculate the LightVector. To do that, you have to first pass the light into the shader from Panda. You can pass any NodePath into shaders using the <model>.setShaderInput(<name>, <NodePath>) method. When you do that, you get access to various render state attributes of that NodePath, including its model space position - it will be accessible inside the shader as a uniform float4 mspos_<name>.
3. When you have the model space position of the light source, you can easily calculate the LightVector (i.e. the vector from the vertex position to the light position).
4. Now you should be able to calculate the diffuse_attenuation. Set the specular_attenuation to 0 for now and test your lighting model so far.
Specular Vertex Shading:
Now calculate the specular_attenuation value in the lighting model. The formula for this is: specular_attn = pow(saturate(dot(ReflectionVector,ViewVector)),6.0). This essentially says that this component will get a sharp increase (by raising the results to the power of 6) when the reflection of the light lines up with the direction towards our eyes. Just like you needed the light position passed in to calculate the LightVector, you'll need to pass in the camera position to calculate the ViewVector. Once you've gotten the ViewVector, you need to calculate the light ReflectionVector with this formula: R=normalize(2*N*dot(N,L)-L). Try to make this specular lighting work in your shader.
Diffuse and Specular Pixel Lighting :
In your shadertest2.py, load shader3.sha instead of shader2.sha. This shader has moved the calculation of the diffuse color attenuation into the fragment shader by passing the Light Vector and the Normal Vector over there from the vertex shader. Finish adding the specular attenuation value to the light calculation in this shader using the fragment shader to calculate a per-pixel Light Reflection Vector. Once you get this working, notice the drastic difference in quality between the per-vertex specular lighting and the per-pixel specular lighting.
Texture:
Let's add a texture to your sphere. Add the following lines to your python code (after you load the sphere model):
```
diffuse_map = loader.loadTexture("./Models/Textures/bricks.png")
ts0 = TextureStage( 'level0' )
sphere.setTexture(ts0, diffuse_map)
```
You now have access to this texture inside your shader as the tex_0 color sampler. A texture is nothing but a lookup table for color values. Now multiply your out color (that already includes your light calculations) in the fragment shader with the color value found in tex_0 at the texture coordinates that are passed into the fragment shader in l_texcoord0. The lookup function is tex2D(texture, texturecoordinates). You should now see a nicely textured and shaded sphere.
Normal Map:
To add lighting detail with a normal map, a new coordinate space, called the tangent space, needs to be created inside the vertex shader. This space is local to each vertex and is defined by the axes formed by the vertex normal, binormal and tangent. Therefore the following inputs need to be added to the vertex shader:
```
float3 vtx_binormal0   : BINORMAL,
float3 vtx_tangent0    : TANGENT,
```
Now a transformation matrix that is capable of mapping other vectors into this local tangent space can be created like this:
```
float3x3 mat_tangent;
mat_tangent[0] = vtx_tangent0;
mat_tangent[1] = vtx_binormal0;
mat_tangent[2] = vtx_normal;  
```
Once this new transformation matrix has been created inside the vertex shader, both the View Vector and the Light Vector should be projected into tangent space through a simple multiplication with this matrix. Once these vectors arrive inside the fragment shader, they should already be in tangent space and the third important component in our lighting calculations, namely the normal, should now be looked up in the normal map accessed through tex_0_n (note however that the texture stores components in the 0-1 range but we want them in the -1-1 range, so you need to correct the value when you look it up like this tex2D(normalmap, texturecoordinate)*2-1). Since the normal that we're reading from the normal map is already in tangent space (that's how they're stored in normal maps - and that explains why we needed to transform the other vectors), we can now proceed with the lighting calculations, just like we did in model space. See if you can make this work.

Center for Analysis and Design of Intelligent Agents

Table of Contents

Lab 9 - Writing a Shader

Before You Start

Writing a Shader