Skip to content

Commit

Permalink
Finished HW1 Task 1-3, 5; Redesigned Layout for Homepage.
Browse files Browse the repository at this point in the history
  • Loading branch information
@whydarren-6uom
whydarren-6uom committed Feb 12, 2024
1 parent 137213e commit 6a386b4
Show file tree
Hide file tree
Showing 12 changed files with 262 additions and 68 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
Binary file added hw1/.DS_Store
View file
Binary file not shown.
Binary file modified hw1/Task1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task2-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task2-16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task2-4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task2-9.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified hw1/Task3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added hw1/Task6-Level.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
208 changes: 164 additions & 44 deletions hw1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,16 @@ <h2>Homework Description</h2>

<section id="task1">
<h2>Task 1: Drawing Single-Color Triangles (20 pts)</h2>
<div style="display: flex; justify-content: center; align-items: center">
<img src="Task1.png" alt="Task 1 Scrsht svg 4" style="width: 50%" />
<div
style="
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
"
>
<img src="Task1.png" style="width: 70%" />
<p style="text-align: center; font-size: medium">basic/test4.svg</p>
</div>
<h3>Solution Walk Though</h3>
<p>
Expand Down Expand Up @@ -170,12 +178,22 @@ <h3>Optimization</h3>
</div>
<p>
One way that we did to optimize the algorithm is to detect when we are
out of the triangle for the second time. To be specific, we used the
fact that when we are in the circumscribed rectangle of the triangle, we
will be out of the triangle for at most twice. Therefore, we can stop
the iteration when we are out of the triangle for the second time. This
will make sure that we don't need to iterate through the whole
circumscribed rectangle of the triangle.
out of the triangle for the second time.
</p>
<p>
To be specific, we used the fact that when we iterating through the
circumscribed rectangle of the triangle, we will be out of the triangle
for at most twice. See point A and B in the graph above.
<span style="background-color: rgb(220, 220, 217)">Point A</span>
represents the first time we are out of the triangle, and
<span style="background-color: rgb(220, 220, 217)">Point B</span>
represents the second time we are out of the triangle. As we can see, we
are not going to be in the triangle for another time.
</p>
<p>
Therefore, we can stop the iteration when we are out of the triangle for
the second time. This will make sure that we don't need to iterate
through the whole circumscribed rectangle of the triangle.
</p>
<h3>Usage</h3>
<p>
Expand All @@ -186,17 +204,89 @@ <h3>Usage</h3>
</section>

<section id="task2">
<h2>Task 2: Drawing Single-Color Triangles (20 pts)</h2>
<ul>
<li>Clearly state the objectives of the project.</li>
<li>Outline what you aim to achieve through the project.</li>
</ul>
<h2>Task 2: Antialiasing by Supersampling (20 pts)</h2>
<div style="display: flex; justify-content: center; align-items: center">
<img src="Task2.png" style="width: 50%" />
</div>
<h3>Solution Walk Though</h3>
<p>
This is one of the key parts of the whole homework coding part. In this
section, we are supersampling every one pixel of our buffer. As we can
see in the description diagram provided on the website (shown as above),
supersampling provides us a more precise result by checking on which
smaller pixel is in the area and which ones are not. Therefore, we can
combine them back to one pixel with color averaged from the smaller
pixels. This will make sure that we have a more precise result and the
edges of the triangle will be smoother.
</p>
<h3>Algorithm</h3>
<p>
The way we implemented it is to divide the pixel into
<span style="background-color: rgb(220, 220, 217)">sample_rate</span>
subpixels and then sample the color of the subpixels in
<span style="background-color: rgb(220, 220, 217)"
>void RasterizerImp::rasterize_triangle</span
>
. We also need to update our algorithm for calculating Barycentric
Coordinates at the same time since our coordinates for
<span style="background-color: rgb(220, 220, 217)"
>x0, y0, x1, ...., y3</span
>
have changed according to our sample_rate. The rest are quite the same
as in the previous task. We just iterate the whole rectangle and send
the colors to the
<span style="background-color: rgb(220, 220, 217)">sample_buffer</span>
.
</p>
<p>
We then average the color of the subpixels and assign it to the pixel in
RasterizerImp::resolve_to_framebuffer. To average the color, we just
simply add up the colors for every single subpixel for one original
pixel (
<span style="background-color: rgb(220, 220, 217)">sample_rate</span>
subpixels in total) and then divide it by the

<span style="background-color: rgb(220, 220, 217)">sample_rate</span>.
We then assign the result to the pixel in the framebuffer.
</p>
<p>
However, we also need to alter our
<span style="background-color: rgb(220, 220, 217)"
>void RasterizerImp::fill_pixel</span
>
function for this one since our lines and points does not need to be
supersampled. We can simply alter this function by assigning the same
color to all
<span style="background-color: rgb(220, 220, 217)">sample_rate</span>
subpixels.
</p>
<h3>Result</h3>
<div style="display: flex; justify-content: center; margin-top: 15px">
<div style="flex-direction: column">
<img src="Task2-1.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Sample Rate = 1</p>
</div>
<div style="flex-direction: column">
<img src="Task2-4.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Sample Rate = 4</p>
</div>
</div>
<div style="display: flex; justify-content: center; margin-bottom: 15px">
<div style="flex-direction: column">
<img src="Task2-9.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Sample Rate = 9</p>
</div>
<div style="flex-direction: column">
<img src="Task2-16.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Sample Rate = 16</p>
</div>
</div>
</section>

<section id="task3">
<h2>Task 3: Transforms (10 pts)</h2>
<div style="display: flex; justify-content: center; align-items: center">
<img src="Task3.png" alt="Task 3 Scrsht robot" style="width: 50%" />
<img src="Task3.png" style="width: 50%" />
</div>
<p>
created a cubeman in running posture by doing the following operations.
Expand All @@ -214,17 +304,10 @@ <h2>Task 3: Transforms (10 pts)</h2>

<section id="task4">
<h2>Task 4: Barycentric Coordinate (10 pts)</h2>
<p>
created a cubeman in running posture by doing the following operations.
</p>
<p></p>
<ul>
<li>
rotate the head and torso by a certain angle to make it more natural.
</li>
<li>
adjusted the angle and position of the arms and legs to add dynamic to
the body.
</li>
<li></li>
<li></li>
</ul>
</section>

Expand Down Expand Up @@ -263,22 +346,35 @@ <h3>
Image Comparason between Nearest Neighbor Sampling Bilinear
Interpolation
</h3>
<div style="display: flex; justify-content: center; align-items: center">
<img src="Task5-Nearest-1.png" style="width: 35%" />
<img src="Task5-Nearest-16.png" style="width: 35%" />
<div style="display: flex; justify-content: center; margin-top: 15px">
<div style="flex-direction: column">
<img src="Task5-Nearest-1.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Nearest-1</p>
</div>
<div style="flex-direction: column">
<img src="Task5-Nearest-16.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Nearest-16</p>
</div>
</div>
<div style="display: flex; justify-content: center; align-items: center">
<img src="Task5-Bilinear-1.png" style="width: 35%" />
<img src="Task5-Bilinear-16.png" style="width: 35%" />
<div style="display: flex; justify-content: center; margin-bottom: 15px">
<div style="flex-direction: column">
<img src="Task5-Bilinear-1.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Bilinear-1</p>
</div>
<div style="flex-direction: column">
<img src="Task5-Bilinear-16.png" style="width: 100%" />
<p style="text-align: center; font-size: medium">Bilinear-16</p>
</div>
</div>
<p>From the above imagines, we can see the order of smoothness is:</p>
<p>Nearest-1 < Nearest-16 < Bilinear-1 < Bilinear-16</p>
<p>
From the above imagines, we can see the order of smoothness is nearest-1
< nearest-16 < bilinear-1 < bilinear-16. The differences between Nearest
Neighbor Sampling and Bilinear Interpolation becomes noticeable when
there are significant variations in texture magnification or reduction.
This is because that Nearest Neighbor Sampling assigns the nearest pixel
color, causing blockiness during size changes. While Bilinear
Interpolation blends neighboring pixels, offering smoother transitions.
The differences between Nearest Neighbor Sampling and Bilinear
Interpolation becomes noticeable when there are significant variations
in texture magnification or reduction. This is because that Nearest
Neighbor Sampling assigns the nearest pixel color, causing blockiness
during size changes. While Bilinear Interpolation blends neighboring
pixels, offering smoother transitions.
</p>

<p></p>
Expand All @@ -288,19 +384,43 @@ <h3>
<h2>
Task 6: "Level sampling" with mipmaps for texture mapping (25 pts)
</h2>

<p>
Level sampling is a technique used in computer graphics for efficient
rendering. It involves sampling pixels at different levels of detail,
starting with a coarse level and gradually refining to finer levels.
This approach balances computational resources with image quality,
optimizing the rendering process for various levels of complexity in
scenes.
Level sampling relies on the principle that people don't perceive
resolution changes over distances. It optimizes performance by adjusting
image details based on viewing distance, saving computational resources.
</p>
<p>
The way that we implemented level sampling invloves functions: get
level, sample and rasterize_textured_triangle.
</p>

<ul>
<li>Clearly state the objectives of the project.</li>
<li>Outline what you aim to achieve through the project.</li>
<li>
float Texture::get_level: We determine the level of mipmap of a
certain point by using the derivative vectors passed into the
function.
</li>
<div
style="display: flex; justify-content: center; align-items: center"
>
<img src="Task6-Level.png" style="width: 60%" />
</div>
<li>
Color Texture::sample: Use the helper function get_level that we
implemented before to get a certain level of mipmap. And then decide
which combination of sampling methods that we want to use according to
field sp->lsm and sp->psm. Collect the sampled colour and return it to
the rasterize_textured_triangle function.
</li>
<li>
<span style="background-color: rgb(220, 220, 217)"
>void RasterizerImp::rasterize_textured_triangle</span
>: We reused a lot of the codes from task 2. The difference is that we
did three Barycentric interpolations separately on point(x, y), (x+1,
y), (x, y+1) and
</li>
</ul>
</section>
</body>
Expand Down
122 changes: 98 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,99 @@
<html>
<head>
</head>
<body>
<h3>CS184/284A Homework Webpages</h3>
<br><br>
<a href="/hw1/index.html">Homework 1</a>
<br><br>
<a href="/hw2/index.html">Homework 2</a>
<br><br>
<a href="/hw3/index.html">Homework 3</a>
<br><br>
<a href="/hw4/index.html">Homework 4</a>
</body>
<script>
var links = document.body.getElementsByTagName("a")
var a = window.location.href.indexOf(".io")
var repo_name = window.location.href.substring(a+3)
for(var i = 0; i < links.length; i++){
var link = links[i]
var actual_name = link.href.substring(link.href.indexOf(".io")+4)
link.href = repo_name + actual_name
}
</script>
</html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homework 1 Report</title>
<style>
body {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans";
line-height: 1.6;
margin-left: 20%;
margin-right: 20%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
}

section {
margin-bottom: 20px;
}

h2 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
}

h3 {
margin-bottom: 2px;
}
ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}
a:link {
color: purple;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: purple;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: #0abab5;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: #10098f;
background-color: transparent;
text-decoration: underline;
}
*::first-letter {
text-transform: uppercase;
}
ul {
list-style-type: disc; /* Default is disc */
}
</style>
</head>
<body>
<h1>CS184/284A Homework Webpages</h1>
<h2>
Darren Wang (<a href="https://github.com/whydarren-6uom">GitHub</a>)
</h2>
<br /><br />
<a href="/hw1/index.html">Homework 1: Rasterizer</a>
<br /><br />
<a href="/hw2/index.html">Homework 2</a>
<br /><br />
<a href="/hw3/index.html">Homework 3</a>
<br /><br />
<a href="/hw4/index.html">Homework 4</a>
</body>
<script>
var links = document.body.getElementsByTagName("a");
var a = window.location.href.indexOf(".io");
var repo_name = window.location.href.substring(a + 3);
for (var i = 0; i < links.length; i++) {
var link = links[i];
var actual_name = link.href.substring(link.href.indexOf(".io") + 4);
link.href = repo_name + actual_name;
}
</script>
</html>

0 comments on commit 6a386b4

Please sign in to comment.