The graphics cool scene

This the most interesting and more art-creative assignment of all the graphics assignments. I spent most of my time searching for the model I wanted online (http://www.turbosquid.com), the texture (http://opengameart.org), and positioning the objects to the position I wanted.

Lonely island

Assignment 12: Shadows

Requirements

• Create a new "Shadow" technique for your opaque Effects
• This technique needs to write depth in the "view" space of the light; I would advise using the same shaders that you used for the Depth technique.
• You should write to the depth buffer and do a less-than-or-equal depth test
• Generate a Shadow Map before rendering anything else in the frame
• You will need to create a new render target. This will be just like the view depth one that you already have.
• In a real game you would choose a different resolution, but I advise using the same resolution as all of your other render targets to keep things simple (this means you can re-use the same hardware depth buffer)

Assignment 11: Post Processing

Requirements

• (Optional) Add a directional light to your scene
• Consider using an #include file and call a function
• It is up to you whether to replace the point light or to keep it and have two lights
• Add a full-screen post-process pass
• Your engine must draw a quad
• The shader can be anything you want. Some suggestions are:
• "Vignetting" (multiply a texture on top of the back buffer, like darkened edges)
• Distortion (using a sine wave, for example)
• Bloom or Depth of Field. Both of these are quite a bit more complicated than the previous two, but if you are curious you may read up about them and try it out.
• Add some kind of UI overlay element on top of the finished image
• Your engine must draw a quad. There are two options for how to size it:
• You can draw the same full-screen quad that you did for your post-processing and let the shader transform it
• You can compute the size in our C++ code and then use the provided coordinates directly in the shader
• There must be some kind of alpha in the texture you use. (A good candidate for this is some kind of text, but anything with alpha is acceptable, even a leaf :)

Where there is light, there is shadows

Finally, the shadow is added into our graphics topic. ^__^ Adding shadow into the scene is not hard. It basically works like the depth pass we did previously. However, instead of using camera as the 'eye', we are using directional light. Overall, this assignment wasn't hard. I could accomplish it within 2 hours with my repeatedly stupid mistake (I kept forget that to calculate the shadow I should use light as the 'eye' instead of camera). Btw, I found this nice tutorial on internet: http://www.rastertek.com/dx11tut40.html

Final scene with shadow

Post processing and GUI

This assignment was easy. It was repeating what we had learnt before. However it still confused me. How should I architect my program to draw 3D and then 2D nicely? How should the 2D pipeline look like?

I draw all my meshes in cMesh class. Drawing the 2D image here seems wrong. After discussing with Cody, I decided to do it in cScene. I was still unsure about the 2D pipeline, though. Shall I put everything I want to draw from the text file like the meshes or... Anyway, at the moment I hard coded it in my cScene. Both the post processing and the GUI using the same vertex buffer and vertex shader. To accommodate the GUI nicely, I did simple math calculation in the vertex shader to position the GUI as expected. This is the math calculation I did:

x = (i_position_world * g_size.x) + g_position.x;

y = (i_position_world * g_size.y) + g_position.y;

With vignetting post processing and the yellow flower GUI

Soft intersection

This assignment deepen my understanding of render state. If in the last assignment I only know there is a cool thing called render state. In this assignment I know what else I can do with render state and what exactly is render state.

At the beginning I was confused with the opaque render state we had on the previous assignment and the z-buffer render state we supposed to have on this assignment. I confused how should I use them. Should I use them both in the same time or...? After discussed shortly with Derek I understood that I was confused by my own misunderstanding of the render target and the surface. Derek helped understand that I only need one surface for the z-buffer render target. We need two surface for the opaque buffer because we are going to read and write the texture on the same time which is disallowed by DirectX. In z-buffer, we only going to write it on the first pass and then read it in the second pass (when we really draw the opaque and transparent). With this understanding, I have to change my code slightly and make a nicer flow - at least for myself. ^___^

Assignment 10: Depth Pass

Requirements

• Add Depth Techniques to each of your Effects that renders in the Opaque bucket
• Remember that a Technique consists of:
• Vertex Shader
• Fragment Shader
• Render State
• The output of the fragment shader in your Depth technique must be the normalized Z value of the fragment's position in view space
• You already know how to calculate the view position. In order to store it in a texture we want it to be [0,1], which means it should be divided by the far plane distance. This is the distance you use to create the view-to-projection transformation, and you should pass it as a uniform into the shader
• You only need to output a value in the red channel, because we will use a single channel texture format. The final statement in the fragment shader can look something like this:
• o_color = float4( depth, 0.0, 0.0,1.0 );

Assignment 09: Render Targets as Textures

Requirements

• Create a new Effect that computes Environment Mapping using a cube map
• The environment map used must be data-driven and come from one of your files
• It is probably best to specify a single one for your scene
• It is also acceptable to specify different ones on a per-material basis
• There must be a reflectivity uniform parameter that you set per-material
• A value of 1 would mean that you only see the reflection (i.e. you would never see the diffuse map)
• A value of 0 would mean that you don't see the reflection at all when your viewing angle is parallel with the normal. (However, you will still see the reflection at glancing angles because of the fresnel effect)

Linear texture filtering

After I submitted my graphics assignment this week, JP suggested me to do linear texture filtering into my sampler so it won't appear so pixelated. This is a nice tutorial about this linear texture filtering: http://www.toymaker.info/Games/html/sampler_states.html

With this filter, my floor looks so shiny and glossy

New glossy and shiny floor

Environment map and render target as texture

This week assignment was really about graphics! There were almost no data processing required. The only new data needed to be added is the environment map. However, since I had a nice system which make it easy to add or subtract one data, it was not a big deal at all. Again, this proved my half-XML parser is a nice system. ^__^

The first part of the assignment, environment map, was not a big challenge. All I need to do was added new environment texture into my scene then use this texture to change the reflected light.

I downloaded my environment map from internet and changed it into dds format with DirectX Texture tool. This is my original environment map.

 

My original environment map

Normal mapping

Yup, finally we learnt the "normal map" that Derek mentioned when we did the texture for the first time and Gabriel Olson, the Game Arts teacher I am sitting on mentioned. I had already seen how amazing normal map is to fake your simple object to look like something complicated with detailed texture. However, doing it myself in my renderer program is another thing. It was fun to see the carved word in my cubes.

Normal map in diffuse lightning

Normal map in specular lightning

Assignment 08: Normal and Environment Maps

Requirements

• You will need to change your Mesh file format (both text and binary) to support tangents and bitangents
• You will need to update your vertex declaration to support both tangents and bitangents

Accept a tangent and a bitangent in model space as inputs to your vertex shader, and output them in world space to your fragment shader

• You can use the semantics TANGENT and BINORMAL
• Tangents and bitangents are transformed exactly the same way as normals, with the rotation only (because they are vectors and not points)

Assignment 7: Alpha Transparency

Requirements

• Create a new partially transparent Effect
• In other words, an Entity with a Material using this Effect should be visible, but you should be able to also see objects behind it. (Something like a window or a glass ball, for example.)
• BLENDOP is ADD
• SRCBLEND is SRCALPHA
• DESTBLEND is INVSRCALPHA
• How transparent the object is should be determined by a uniform float parameter between 1 (fully opaque) and 0 (completely transparent). This way different materials can be more or less transparent and still use the same Effect.

Finally, alpha transparency

This week, we finally cover the alpha transparency that I was wondering about in the first assignment. The alpha blend and addition was easy to implement. The alpha binary, however, is a bit tricky. I didn't know what to do with the clip() function that we supposed to use. The information in DirectX documentation doesn't give me understanding at all. Thankfully, Derek came to our lab and helped me understanding this clip function. He had also confirmed my doubt about using the texture's alpha as the clipping criteria and ... here my new scene.

After enabling alpha blend

Mesh improvement - loading data from binary files

Overall, this assignment is much more easier than previous two assignments. The only challenge I faced is writing/reading binary data. I had no experience in reading or writing binary files before. However there are a lot of sources teaching to do it. This left the only thing I need to do is moving my MeshParser into my MeshBuilder then output the data as binary. Writing the output data from MayaExporter into my-mesh-data-format is not hard at all.

I tried as much as possible to left everything in my code the same as previous code. My MeshParser still hold the information of total vertices, total primitives, vertex data, and index buffer. The only thing different in this parser is instead of parsing from readable file, now it is read from binary data. For this reason, I decided to output the file from Maya in TXT and output the binary file as TXT.

Ambient light, specular light, and material ordering

It is absolutely worth the hours (> 10 hours) I spent to finish my previous assignment. I improved my file parser so that I can add or remove item easily, which in this assignment I proved to be working. I had also spent some time to restructure my mesh and scene to make it easier to add more entity in the world.

For this assignment, I used a mesh as my floor instead of hard-coded it in the program. I also added a light-interpretation mesh to show the position of my light. Before I added the light-interpretation mesh, it's hard to tell where my light is. Now with a small square representing the light, I can tell where my light is.

Assignment 5: Specular Lighting and Material Sorting

Requirements

• Add ambient light to your scene
• Ambient light should be specified entirely by a single color. That color should be added to the diffuse light (i.e. before the diffuse light is combined with the diffuse color), so that there is always some diffuse light.
• Add falloff/attentuation to your pointlight
• The specified intensity in your scene file should now refer to the intensity at its position, and that intensity should now decrease as the distance between the point light and the fragment increases
• Any values you use to calculate the attenuation should come from the scene file

Assignment 4: Files and Format

Requirements

• Create a new "Effect" file format that specifies:
• "Techniques", where a single technique consists of a vertex program, a fragment program, and render state
• At this point we only have a single vertex and fragment program, so this requirement may seem a bit confusing. Imagine that each Effect may have different rendering modes (or "techniques"), and each mode has a single vertex and fragment program pair that determines what it does (and these don't have to be unique; you could, for example, only have two vertex shader programs in the game, but ten different fragment shaders).
• For this assignment you will only have a single technique, but keep in mind that we will add others in future assignments
• We haven't discussed render state yet, and you don't need to include any. (I just wanted you to be aware that there will be other settings that will be part of techniques in the future.)

Assignment 3: Vertex elements, textures, and diffuse lighting

Requirements

• Add texture coordinates to the box from Assignment 02
• You will need to add texture coordinates to your mesh format
• You will need to add texture coordinates to your mesh file. You should only use 0 and 1 for this assignment, so that each face of the box shows the full texture. The texture should be right side up and, as much as possible, not mirrored (in other words, if the image has text it should be readable). If you only use 8 vertices then the front and back faces should be oriented correctly, but the left and right faces can be mirrored and the top and bottom don't need to show anything.
• If you end up using more vertices you may want to challenge yourself to show the texture oriented correctly on each face
• You will need to add texture coordinates to your vertex declaration.

Assignment 2: Introduction to 3D

• Requirements
  • Modify the Assignment 01 to draw a 3D box (instead of a 2D rectangle)
  • The box should have 8 vertices and 12 triangles
  • The box's vertices should only have positive or negative 1.0 for coordinates. For example, (-1, -1, -1) and (1, 1, 1).
  • The data for the box must still come from a Mesh file
  • Modify your file format to use 3D vertices