isond.github.io/maya-light-study.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!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>

    <!-- javascript -->
    <script>
        function show_and_hide() {
            var proj_img = document.getElementById("myDIV");
            if (proj_img.style.display === "block") {
                proj_img.style.display = "none";
            } else {
                proj_img.style.display = "block";
            }

            var text = document.getElementById("link_text");
            if (text.innerHTML === "SHOW PROJECT") {
                text.innerHTML = "HIDE PROJECT";
            }
            else {
                text.innerHTML = "SHOW PROJECT";
            }
        }
    </script>

    <title>Dianne's Portfolio - Maya Light Study</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">Maya Light Study</li>
			</ol>
		</nav>
	</div>

	<!-- actual contents -->
	<div class="container custom-container">
		<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/zool-still.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/zool-ref.png" class="d-block w-100" alt="...">
                </div>

            </div>

            <!-- carousel controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

        <div class="project text-center mt-5" >
            <p><a class="info" id="link_text" href="javascript:show_and_hide()">SHOW PROJECT</a></p>
            <div class="container text-center" id="myDIV" style="display: none;">
                <img class="descr-img img-fluid" src="images/zool-recreate.gif" alt="...">
            </div>
            <p class="fst-italic">Warning: Project contains flashing lights</p>
        </div>

        <!-- <div class="container text-center" id="myDIV">
            <img class="descr-img img-fluid" src="images/zool-recreate.gif" alt="...">
            <p class="text-justify fst-italic">
                Room layout from the top view
            </p>
        </div> -->

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

		<p class="h2 pt-4">Maya Light Study - ZOOL MV</p>
		<p class="text-justify">
            Another project that I worked on in Maya was a scene recreation from ZOOL's music video.
            Ever since I watched this video, the moving lights scene was one of the few scenes that really stood out to me,
            so I wanted to try my hand at figuring out how it could've been done.
            This also gave me a chance to further explore how Arnold Lights in Maya worked.
        </p>

        <p class="text-justify">
            The first step I did was to set up the scene, and so I created a long hallway by stretching out a cube.
            I then placed the camera on one of the ends of the hallway. I had to setup the camera at a certain height to
            make sure that when I had the lights, they would appear like a square all the way through the hallway.
        </p>

        <p class="text-justify">
            I had a few ideas on how to approach in recreating the lighting from the scene.
            The first approach was to use spotlights. I noticed in the video that the lights had a rounded effect to it.
            I figured that I could place two point lights at each corner with each of the lights facing the opposite corner.
            THe rounded effect was almost there but this method didn't yield the results I wanted.
            I could not get the lights to be as bright as the ones in the reference.
            Another problem with using only spotlights was that I was unable to get the distinct square outline that the video had.
        </p>

        <p class="text-justify">
            The second approach came about by accident I would say. I was experimenting other types of lighting in Maya,
            one of them being area lights. Initially, I had the area lights angled at the corners in hopes of getting
            the rounded effect. However, I misplaced one of those lights and it had become parallel to the hallway.
            One of the sides of the light was clipping through the wall and when I rendered a preview, it created a
            straight line of lighting similar to the music video. After this incident, I decided on using area lights.
            I began looking into how to make the lights brighter and sharper. I was very picky about trying to make
            the lights brighter while maintaining very dark shadows. I tried adjustng the size of the area light
            as well as the intensity. Also, I tested out various settings for the light sampling, but I learned that
            more samples affect how long it takes to render a scene, which proved somewhat difficult for my old laptop.
            In the end, the setting for the lights I settled for appears slightly more diffused making a larger portion
            of the hallway being illuminated unlike the music video where the light diffusion is more contained.
        </p>

        <p class="text-justify">
            One of the last few things I added to the scene was the models of the King Pudding mascot.
            I decided to use these as placeholders in place of the ZOOL members from the music video.
            My skill isn't at the level where I can model them in 3D yet. Since this was a scene recreation
            I had to represent them somehow. My solution was to have a King Pudding mascot for each member
            and have the King Pudding's hair/sauce be colored the same as ZOOL.
        </p>

        <p class="text-justify">
            After that, I placed the King Puddings in the scene. I had each of them stand on a pedestal of varying
            heights to match how ZOOL has standing in the video. Each pedestal was placed a certain distance from each other.
            In the original scene, the light passing through would reveal each member at different intervals.
        </p>

        <div class="container text-center">
            <img class="descr-img img-fluid" src="images/zool-king-pudding.png" alt="...">
            <p class="text-justify fst-italic pt-2">
                King Pudding models on pedestals
            </p>
        </div>

        <p class="text-justify">
            The final part of this project was to get the lights to flash similarly to the music video.
            I had to adjust the timing of the lights to create the strobe effect. The lights only flash
            in the beginning of the animation, and then afterwards, they just move down the hallway.
        </p>

        <p class="text-justify">
            There are a few areas that I'd like to fix if I were to return to this piece.
            Overall, I'm satisfied with how the final piece came out.
            I still have lots to learn about Arnold Lights but I think this was a fun little study.
        </p>

        <p class="h2 pt-3">Technologies Used</p>
        <ul>
            <li>Autodesk Maya</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>