Overview

Overview

Give a high-level overview of what you implemented in this project. Think about what you've built as a whole. Share your thoughts on what interesting things you've learned from completing the project.

We want to simulate visual entities in a screen. Doing so requires us to understand how the image is stored and represented. We start by drawing a colored triangle on the screen with a rasterization technique. Naive implementation causes jaggies and aliasing. We alleviate this problem by using supersampling. Given that we render figures with color on the screen, we want to move them using mathematics, linear algebra. So far, we were dealing with a single color inside the triangle. What if we have different colors in their vertices? The barycentric coordinate system helps us to determine colors inside the triangles. Furthermore, the coordinate enables sampling points from texture space. We use the nearest and bilinear sampling. Sometimes close and far distance makes jaggies and aliasing, and we mitigate this problem by using mipmap, a cached downsampling image.

---

Section I: Rasterization

Part 1: Rasterizing single-color triangles

Task 1 (20 pts)

• Walk through how you rasterize triangles in your own words.

We are given three points and color of a triangle inside an SVG file. First, we are going to check every pixel. Determining the pixel inside triangle requires us to use two facts; Each line dissects space into two regions. Secondly, a triangle is an intersection between these regions. To solve this problem, we use the inner product of two vectors. Let P0, P1, P2 be the points given. Suppose we want to check the point P(x,y). We get a vector V1 = (P1-P0) and find the vector that is perpendicular to this, which turns out to be -(y1-y0),(x1-x0). We retrieve another vector V2 (P - P0) as well. Now we compute V1 * V2, and the result will tell us that V2 is in the range of +-90 degrees of the V1. This area is equivalent to the upper region of the edge P0P1. Three edges, including P0P1, P1P2, and P2P3, will determine if the given pixel is inside the triangle. Lastly, we need to check the other direction as well.

• Explain how your algorithm is no worse than one that checks each sample within the bounding box of the triangle.

Instead of checking all pixels on the screen, my algorithm takes minimum and maximum value of bounding box enclosing the triangle. We simply takes minimum value of the three points per axis.

• Show a png screenshot of basic/test4.svg with the default viewing parameters and with the pixel inspector centered on an interesting part of the scene.

• Extra credit: Explain any special optimizations you did beyond simple bounding box triangle rasterization, with a timing comparison table (we suggest using the c++ clock() function around the svg.draw() command in DrawRend::redraw() to compare millisecond timings with your various optimizations off and on).

No attempt

---

Part 2: Antialiasing triangles

Task 2 (20 pts)

• Walk through your supersampling algorithm and data structures. Why is supersampling useful? What modifications did you make to the rasterization pipeline in the process? Explain how you used supersampling to antialias your triangles.

In the previous task, we sampled the point in the middle of the pixel by adding 0.5 to x and y-axis, which is essentially 1:1 sampling, and it creates jaggies. Instead, we divide each pixel into 4, 9, and 16 squares. In other words, we have 4, 9, 16 points inside each pixel. Of course, we cannot apply this directly to the screen because we have fewer screen pixels than our new data structure. We simply average the color of the sampled points and create a new color for each pixel. We use simple array, std::vector in c++ to store supersamples. Supersampling is useful because it smooths out the edges by generating intermittent color between high-frequency pixels. For the rasterization pipeline, we have to apply delay applying our pixels to rgb_framebuffer_target. That said, we move the logic into resolve_to_framebuffer(), which executes at the end of the rasterization.

• Show png screenshots of basic/test4.svg with the default viewing parameters and sample rates 1, 4, and 16 to compare them side-by-side. Position the pixel inspector over an area that showcases the effect dramatically; for example, a very skinny triangle corner. Explain why these results are observed.


• Extra credit: If you implemented alternative antialiasing methods, describe them and include comparison pictures demonstrating the difference between your method and grid-based supersampling.

No attempt

---

Part 3: Transforms

Task 3 (10 pts)

• Create an updated version of svg/transforms/robot.svg with cubeman doing something more interesting, like waving or running. Feel free to change his colors or proportions to suit your creativity. Save your svg file as my_robot.svg in your docs/ directory and show a png screenshot of your rendered drawing in your write-up. Explain what you were trying to do with cubeman in words.

Affine transformation enables us to do translation, rotation, and scaling with only one matrix multiplication which reduces enormous computing time.

---

Section II: Sampling

Part 4: Barycentric coordinates

Task 4 (10 pts)

• Explain barycentric coordinates in your own words and use an image to aid you in your explanation. One idea is to use a svg file that plots a single triangle with one red, one green, and one blue vertex, which should produce a smoothly blended color triangle.

As we can see in the triangle above, we have a different color per each vertex and want to interpolate smoothly. We use barycentric coordinates, which indicate how close a given point to each vertex. After getting three coefficients, alpha, beta, and gamma, we calculate the weighted sum of each vertex color to assign the current pixel color.


• Show a png screenshot of svg/basic/test7.svg with default viewing parameters and sample rate 1. If you make any additional images with color gradients, include them.

---

Part 5: "Pixel sampling" for texture mapping

Task 5 (15 pts)

• Explain pixel sampling in your own words and describe how you implemented it to perform texture mapping. Briefly discuss the two different pixel sampling methods, nearest and bilinear.

The texture on the surface can be perceived differently depending on its location. Therefore, it is extremely challenging to draw texture every time we move an object. We use two spaces, which are screen and texture, to map a texture onto the surface of the screen. To compute the location of sampling, we use barycentric coordinate and scale it into the texture coordinate to pick the color.

The nearest sampling method takes the closest texture pixel. For example, our scaled uv coordinate will have a floating value, and we assign the closest integer value for its y and x-axis. On the other hand, bilinear uses all four colors and takes average using weights.

• Check out the svg files in the svg/texmap/ directory. Use the pixel inspector to find a good example of where bilinear sampling clearly defeats nearest sampling. Show and compare four png screenshots using nearest sampling at 1 sample per pixel, nearest sampling at 16 samples per pixel, bilinear sampling at 1 sample per pixel, and bilinear sampling at 16 samples per pixel.


• Comment on the relative differences. Discuss when there will be a large difference between the two methods and why.

The nearest sampling at one sample per pixel is super pixelated in the magnified image. Bilinear sampling smooths this out even if we sample at one sample per pixel. A bilinear sampling at 16 samples per pixel is very smooth, and it will be very natural to see it because our surface contains a relatively small area.

---

Part 6: "Level sampling" with mipmaps for texture mapping

Task 6 (25 pts)

• Explain level sampling in your own words and describe how you implemented it for texture mapping.

As it can be seen on the picture above, sampling high resolution image causes aliasing when texture is far from the viewer. If we are concerned aobut this and changing texture into low resolution by downsampling, close view gets blurred. Level sampling resolve this issue by level sampling, which uses different dimension of image. For example we can use level zero image for the close distance and use higher level image for the far object.

• You can now adjust your sampling technique by selecting pixel sampling, level sampling, or the number of samples per pixel. Describe the tradeoffs between speed, memory usage, and antialiasing power between the three various techniques.

Collecting large samples per pixel smooths out; however, supersampling takes exponential runtime memory. We use nearest and bilinear sampling when we collect pixels from texture space. Bilinear is CPU intensive since it uses four pixels around the sampling point. It is smoother than the nearest. Level sampling: We prevent blurring and aliasing caused by xy->uv conversion. However, storing mipmaps takes extra memory, roughly 133% of the original size. Also, it is CPU intensive because we calculate (du/dx, dv/dx) and (du/dy dv/dy) to retrieve the optimal mipmap level.

• Using a png file you find yourself, show us four versions of the image, using the combinations of L_ZERO and P_NEAREST, L_ZERO and P_LINEAR, L_NEAREST and P_NEAREST, as well as L_NEAREST and P_LINEAR.
  • To use your own png, make a copy of one of the existing svg files in svg/texmap/ (or create your own modelled after one of the provided svg files). Then, near the top of the file, change the texture filename to point to your own png. From there, you can run ./draw and pass in that svg file to render it and then save a screenshot of your results.
  • Note: Choose a png that showcases the different sampling effects well. You may also want to zoom in/out, use the pixel inspector, etc. to demonstrate the differences.



As expected, applying pixel and level sampling smooths the pixels. However, one noticeable thing is that using only level pixeling distorts the light here. I think it happens because our surface is stretched at the left bottom, which shows an excellent example of level sampling even though it looks funny. Applying the nearest level and linear pixel sampling shows the best quality.

• Extra credit: If you implemented any extra filtering methods, describe them and show comparisons between your results with the other above methods.

No attempt