CST 325 - Graphic Programming (Week 5)

 Texturing & Transparency

Concepts

Concepts for this week:

-          Texturing: texture is 2D image, function or data source use to modify surface’s appearance. Among many techniques, texture mapping is the most used, making 3D scenes look more realistic and reducing geometric cost. It has a coordinate system UV.

-          Texture Wrapping: it has a texture coordinate from 0 to 1. Repeat / Mirrored Repeat, Clamp to Edge, Clamp to Border are ways to tell the pipeline what to do when the surface is larger than the texture.

-          Magnification and Minification: Ideally, the mapping of texels to pixels should be one-to-one, but it doesn’t happen all the time. Magnification is when texels are smaller than pixels (zoom in), making the image blurry or pixelated. Minification is when texels are larger than pixels (zoom out), resulting in aliasing or a shimmering effect.

-          Filtering: there are many ways of filtering to make texture more precise in different situations. Bilinear filtering picks 4 nearest texels to smooth the texture, but the quality decreases for minification. MIP mapping creates a smaller version of texture to preserve a portion of color. Combining them, we have trilinear filtering. The costliest is Anisotropy, where it can sample up to 16 points for a precise color.

-          Frame buffers: When rendering, it involves many different buffers. Buffer is a region of memory, the data for every pixel. There are color buffer, depth buffer and many other buffers to utilize. We can also create off-screen frame buffers to render and use in many graphical techniques as well (blurring effect).

-          Pixel Tests: happen after the Shader fragment. Options are Depth test (Z-buffer), Alpha test, Stencil Test, Scissor Test. Alpha Test check if the pixels’ alpha value is above certain value to be rendered on screen. Scissor and Stencil are quite similar with the idea of masking, but Scissor check if pixels are in the rectangle’s area, while Stencil masks per-pixel and compare to a value to decide.

-         Transparent and Depth: Z-buffering works well with opaque objects. For transparent objects, we need to disable depth write and use Painter’s algorithm. In addition, minimize overlapping objects on the screen. On the other hand, the background of the object may be rendered, making the pixels of other objects render behind being discarded. To get rid of this depth problem.

Application

Thanks for the programming assignment of this week, I have a clear view and understand how the graphic pipeline works through codes. But that is not all, I find this assignment fun to work with since it reminds me of my old experiences with making models.

This week’s materials, the texture and transparency are not a big problem. Similar to previous weeks, with the lectures and ChatGPT, I tried my best to understand the concept of those materials before proceeding with the programming assignment. However, the problem is within the document and description for Todos. I believe because last week’s document was highly detailed, which make this one harder. I found myself searching for the functions and their parameters many times to find a way to solve the problem (I don’t ask ChatGPT to give me the code for these).

But what I feel proud of the most is the moment I was working on the animation. First, I asked ChatGPT to interpret the requirement of Todo #12. However, it only confused me even more since at that time, I was not clear with how the codes connect and proceed. So, I looked through it thoroughly, from the quad file, the app file to the fragment shader. I traced how the codes declare variables, receive and send data to fragment. After that, I knew what variables I needed to pass in order to make the animation, and I achieved it.

With lots of time left, I decided to work on the bonus Todos. Out of those three, I chose the textures one. I felt that one is the easiest since I understood the concept in detail. In addition, this is where I discovered the limitation of MIP mapping. It can only use the 2D texture image with the size of power of two. Moreover, the texture on the spheres (glass) is not perfectly wrapped and animated. However, after all, it was amazing to see the simple animation and textures fully on display.

Visual Documentation

Original

With Textures