isond.github.io/3dcg-final-project.html at main · isond/isond.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Dianne Ison">
    <meta name="description" content="My portfolio displaying personal and class projects.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- create new icon -->
    <!-- <link rel="shortcut icon" href="images/glasses-favicon.png" /> -->

    <!-- styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/style.css" type="text/css">

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT&display=swap" rel="stylesheet">
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->

    <!-- icons -->
    <script src="https://kit.fontawesome.com/c4f8fb0e09.js" crossorigin="anonymous"></script>

    <title>Dianne's Portfolio - Projects in Advanced 3D Computer Graphics: Final Project</title>

</head>

<body>

    <!-- <p class="h1 text-center" id="name_title">DIANNE ISON</p> -->
    <!-- <p class="h1 text-center" id="name_title"><a class="text-decoration-none text-reset" href="index.html">DIANNE ISON</a></p> -->
    <p class="h1 text-center" id="name_title"><a class="custom-link" href="index.html">DIANNE ISON</a></p>
    <!-- text-reset inherits the color from its parent -->
    <hr class="mx-auto">

    <!-- navigation bar -->
    <nav class="navbar navbar-expand-md mx-auto">
        <div class="container">
            <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center text-center" id="navbarNav">
                <div class="navbar-nav" id="navbar-content">
                    <a class="navi" href="index.html">PORTFOLIO</a>
                    <a class="navi" href="about.html">ABOUT</a>
                </div>
            </div>
        </div>
    </nav>

    <hr class="mx-auto">

    <!-- breadcrumbs -->
	<div class="container custom-container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb " style="background-color: #ffffff;">
			  <li class="breadcrumb-item"><a href="index.html">PORTFOLIO</a></li>
			  <li class="breadcrumb-item active" aria-current="page">Projects in Advanced 3D Graphics: Final Project</li>
			</ol>
		</nav>
	</div>

	<!-- actual contents -->
	<div class="container custom-container">
		<img src="images/cs114-fp.gif" class="img-fluid mx-auto d-block" alt="...">

        <hr class="mx-auto mt-5 custom-hr">

		<p class="h2 pt-4">Projects in Advanced 3D Graphics: Final Project</p>
		<p class="text-justify">
            My Projects in Advanced 3D Graphics class required that we create project that would demonstrate the techniques that we learned in class and apply them in interesting ways that went beyond what we did for previous assignments.
            We were given freedom on what we could create, such as games or animations.
        </p>

        <p class="text-justify">
            I wanted to create a scene that would depict a peaceful spring day in which someone has left out their laundry to dry. I decided to go with this idea because imagining this scene and building it helped me find peace of mind during the COVID-19 situation we are all experiencing.
        </p>

        <p class="text-justify">
            This final project was built with Three.js and GLSL.
            Three.js was used to setup the entire scene, such as the camera, orbit controls, lighting, background, and loading in 3D models.
            For this project, I created a skybox with a sky texture and set that as the scene's background.
            My original intention with this was that it would be used to reflect the environment when creating the water later.
            Along the way, I had to use a different technique that did not directly utilize the skybox, which will be discussed later.
            Also, after revising my project idea, I was able to load in the 3D models smoothly unlike my experience with my initial idea.
            All credits for the models I used came go to Google Poly.
            Furthermore, I used GLSL to create the vertex and fragment shaders for the water.
        </p>

        <p class="text-justify">
            This was an interesting project for me since I had the opportunity to explore how to simulate water and wind. I did struggle on several occasions on figuring out how to replicate these or how to make them work for the style I setup for my scene.
            There are several aspects of my project that I would like to improve on, but one improvement would be to implement making the tree sway in the wind. Since it was not the main focus of the project, I left it static. Another aspect I would like to explore more is the animation of the fish. Currently, I have them floating in place in a circular motion since they are not the main focus just like the tree. I would have like to show them swimming in circles or swimming to various parts of the pond. Implementing these details would probably enhance my scene a bit more and make it a more cohesive piece.
        </p>

        <p class="h2 pt-3">Technologies Used</p>
        <ul>
            <li>JavaScript</li>
            <li>Three.js</li>
            <li>GLSL</li>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </div>

    <!-- footer -->
    <footer class="footer mt-5 py-3 text-center">
        <div class="container">
            <span class="text-muted">isond ✤ 2020</span>
        </div>
    </footer>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


</body>

</html>