Lab 7 - 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 myshader.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.

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 Shading:
So far you have only been calculating the color values for each of the vertices in a model, which can result in rough lighting artifacts (occurs when simple interpolation of vertex colors is not enough). To prevent these artifacts, you can move the lighting calculation inside the pixel/fragment shader and perform them for each pixel. You do not have to calculate the Vectors inside the pixel shader; if you pass these vectors into the pixel shader from the vertex shader using the TEXCOORD semantics (registers), they will be correctly interpolated. Dot products don't interpolate, so that's why the final calculations have to take place inside the pixel shader. See if you can now create per-pixel diffuse and specular lighting. Notice how much better looking it is than the per-vertex lighting (but also realize that this is more GPU intensive).

Texture:
The teapot model doesn't have any texture coordinates, so in your vertex shader you will have to create them and pass them on to the pixel/fragment shader. For now, let's create very simple texture coordinate mapping: Let (u,v) = (x,y) in each vertex. You can do this in the vertex shader like so: l_texcoord0 = vtx_position.xy;. The next step is to replace the diffusecolor in your lighting model with the color sampled from an actual texture. First, load the texture you want into the Panda program and assign it to the model's PathNode (The textures are in Models/Textures). It's a good idea to explicitly create a texture stage (a texture channel) for each texture. Example:

diffusecolormap = loader.loadTexture("./Models/Textures/bricks.png")
ts0 = TextureStage( 'level0' )
model.setTexture(ts0, diffusecolormap)

You now have access to this texture inside your pixel shader as the tex_0 color sampler (the new input variable is uniform sampler2D tex_0 : TEXUNIT0). A texture is nothing but a lookup table for color values. Now multiply your out color (that already includes your light calculations) in the pixel shader with the color value found in tex_0 at the texture coordinates that are passed into the fragment shader in l_texcoord0 (or whatever you named the texture coordinates you created in the vertex shader). The lookup function is tex2D(<texture>, <texturecoordinates>). You should now see a nicely textured and shaded model.

Environment Map:
To make things truly interesting, imaging that the teapot is made of shiny material and therefore should reflect an image of the surrounding environment. Start by loading any kind of environment you like around your teapot (you can use your room from the earlier labs, or simply use the supplied Panda environment: environment = loader.loadModel(“environment”). Now in your Panda program, you need to have Panda generate a texture, essentially a photo, of the environment from the perspective of the teapot. In fact, this texture should be a set of photos, one in each direction from the teapot (6 textures in total). Such a texture is called a CubeMap and both Panda and the Cg shader language can use them. To create a cube map from the perspective of the teapot, you do this in your Panda program:

ts1 = TextureStage("ts1")
viewpoint = NodePath('viewpoint') # The photos are taken from this perspective
buffer = base.win.makeCubeMap('env', 64, viewpoint)
viewpoint.reparentTo(model) # Attach to the teapot
model.setTexture(ts1, buffer.getTexture())
# The following seems to be needed to stop the cube map from rotating with the teapot...
viewpointmover = lerpHprInterval(viewpoint, 15.0, Vec3(0,0,0), Vec3(359, 0, 0))
viewpointmover.loop()

You will have access to this texture inside your pixel shader as the tex_1 color sampler (the new input variable is uniform samplerCUBE tex_1 : TEXUNIT1). Notice that this is a special cube texture. The final stage is to look up the color value of this cube map and multiply that with your existing diffuse color component (which already includes the color value from your other texture). You look up values in a cube map with the function texCUBE(<texture>,<3Dtexturecoordinates>). Notice that you need 3D texture coordinates here. Actually, all you need is the View ReflectionVector. That is, the part of the environment that you see reflected in the surface of the teapot is exactly the part pointed at by a vector that has the same angle as your view angle, but in the opposite direction. This vector you can calculate just like the Light ReflectionVector above, but replace the light with the view vector: VR = normalize(2*N*dot(N,V)-V);. So, pass VR now into the texCUBE function as your texture coordinates and you should be all set. Test it out!

Normal Map:
For this part, you need to be using a sphere model and you need to assign the bricks.png and bricks-n.png textures to two separate texture stages on the model. The latter texture is a normal map (passed in as uniform sampler2D tex_1 : TEXUNIT1) To add lighting detail with this 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 automatic varying 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 (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.