/
raytracer.html
390 lines (336 loc) · 20.3 KB
/
raytracer.html
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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="content-language" content="en-US">
<title>Jiracet</title>
<meta name="keywords" content="jiracet, joseph suh, computer science degree, waterloo, video games, games, student developer, indie">
<link type="text/css" rel="stylesheet" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/raytracer.css">
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="stylesheet" type="text/css" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<div class="banner">
<a href="http://jiracet.com">
<img src="images/home/avatar.png">
</a>
</div>
<h1>Jiracet</h1>
<div id="nav-bar">
<a href="http://jiracet.com">Home</a>
<a href="http://jiracet.com/about">About</a>
<a href="http://jiracet.com/resume">Resume</a>
<a href="http://jiracet.com/gallery">Gallery</a>
</div>
<div class="page-divider"></div>
</header>
<!-- Content -->
<div id="main">
<div id="main-content">
<div id="main-container">
<div class="row">
<h3>CS488 Raytracer Final Project</h3>
<p>This project was done for my final project for the Winter 2018 offering of CS488 at the University
of Waterloo.</p>
<div style="padding-top:2em" class="page-divider"></div>
</div>
<div class="row">
<div class="project-cell">
<div class="img-container">
<a data-lightbox="primitives" href="images/raytracer/1-primitives.png">
<img src="images/raytracer/1-primitives.png">
</a>
</div>
<div class="info">
<h3>Objective 1 - Extra Primitives</h3>
<p>Extra cone and cylinder primitives were implemented by obtaining intersection points from corresponding
parametric equations. The caps of the cylinder and cone were intersected against halfspaces.
As for side intersections, the cylinder equation is x^2 + y^2 = r and the cone equation is
x^2 + y^2 = z^2</p>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="textures" href="images/raytracer/2-texturemap.png">
<img src="images/raytracer/2-texturemap.png">
</a>
</div>
<div class="info">
<h3>Objective 2 - Texture Mapping</h3>
<p>Texture mapping was implemented by mapping 3d surface coordinates to 2d texture coordinates and
applying the specified texture colour to the object's diffuse component. For basic triangles,
barycentric coordinates were used to interpolate the texture coordinates.</p>
<div class="sub-img-container">
<a data-lightbox="textures" href="images/raytracer/2-texturemap-2.png">
<img src="images/raytracer/2-texturemap-2.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="bumpmap" data-title="Only bump mapping" href="images/raytracer/3-bumpmap-normals.png">
<img src="images/raytracer/3-bumpmap-normals.png">
</a>
</div>
<div class="info">
<h3>Objective 3 - Bump Mapping</h3>
<p>Bump mapping was implemented using normal maps which specified the normal vectors at points on
the surface. The normal, tangent and bitangent vectors at the intersection point were used
to convert the normal map's tangent normal to a model space normal.</p>
<div class="sub-img-container">
<a data-lightbox="bumpmap" data-title="Only texture mapping" href="images/raytracer/3-bumpmap-textures.png">
<img src="images/raytracer/3-bumpmap-textures.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="bumpmap" href="images/raytracer/3-bumpmap-x1.png">
<img src="images/raytracer/3-bumpmap-x1.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="bumpmap" href="images/raytracer/3-bumpmap-x2.png">
<img src="images/raytracer/3-bumpmap-x2.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="bumpmap" href="images/raytracer/3-bumpmap-all-1.png">
<img src="images/raytracer/3-bumpmap-all-1.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="bumpmap" href="images/raytracer/3-bumpmap-all-2.png">
<img src="images/raytracer/3-bumpmap-all-2.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="refraction" href="images/raytracer/4-refraction.png">
<img src="images/raytracer/4-refraction.png">
</a>
</div>
<div class="info">
<h3>Objective 4 - Refraction</h3>
<p>Refraction was implemented by recursively casting secondary rays based Snell's law which defines
a relationship between refractive indices, incident vector and refracted vector. Fresnel
equations were used to compute the reflectance for a given refractive material.</p>
<div class="sub-img-container">
<a data-lightbox="refraction" data-title="Refractive index 1.01" href="images/raytracer/4-refraction-air.png">
<img src="images/raytracer/4-refraction-air.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="refraction" data-title="Refractive index 1.3" href="images/raytracer/4-refraction-water.png">
<img src="images/raytracer/4-refraction-water.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="refraction" data-title="Refractive index 2.4" href="images/raytracer/4-refraction-diamond.png">
<img src="images/raytracer/4-refraction-diamond.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="reflection" href="images/raytracer/5-reflection.png">
<img src="images/raytracer/5-reflection.png">
</a>
</div>
<div class="info">
<h3>Objective 5 - Reflection</h3>
<p>Mirror reflections was implemented by recursively casting secondary reflected rays from intersection
points on reflective objects.</p>
<div class="sub-img-container">
<a data-lightbox="reflection" data-title="Two adjacaent mirror planes" href="images/raytracer/5-reflection-2.png">
<img src="images/raytracer/5-reflection-2.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="phongshading" data-title="Smooth shading on" href="images/raytracer/6-phongshading-2.png">
<img src="images/raytracer/6-phongshading-2.png">
</a>
</div>
<div class="info">
<h3>Objective 6 - Phong Shading</h3>
<p>Phong shading was implemented by interpolating vertex normals based on barycentric coordinates.
Custom vertex normals were generated by taking the average of every vertex's intersected
face normals. The result is a smoother looking surface using less vertices.</p>
<div class="sub-img-container">
<a data-lightbox="phongshading" data-title="Smooth shading off" href="images/raytracer/6-phongshading-1.png">
<img src="images/raytracer/6-phongshading-1.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="perlinnoise" data-title="Mesh generated from multiple layers of noise" href="images/raytracer/7-perlinmesh-3.png">
<img src="images/raytracer/7-perlinmesh-3.png">
</a>
</div>
<div class="info">
<h3>Objective 7 - Perlin Noise</h3>
<p>A sample of 2D perlin noise was used to generate a heightmap mesh. By taking the negative abs()
of the noise, ridged noise was able to be produced allowing for sharper peaks.</p>
<div class="sub-img-container">
<a data-lightbox="perlinnoise" data-title="Regular perlin noise" href="images/raytracer/7-perlinmesh-1.png">
<img src="images/raytracer/7-perlinmesh-1.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="perlinnoise" data-title="Ridged perlin noise" href="images/raytracer/7-perlinmesh-2.png">
<img src="images/raytracer/7-perlinmesh-2.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="softshadows" data-title="Soft shadows on" href="images/raytracer/8-softshadows-2.png">
<img src="images/raytracer/8-softshadows-2.png">
</a>
</div>
<div class="info">
<h3>Objective 8 - Soft Shadows</h3>
<p>Soft shadows was implemented by casting multiple shadow rays arranged in a uniformly distributed
grid. Based on the fraction of rays which were obscured, the shadow intensity was altered.</p>
<div class="sub-img-container">
<a data-lightbox="softshadows" data-title="Soft shadows off" href="images/raytracer/8-softshadows-1.png">
<img src="images/raytracer/8-softshadows-1.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="depthoffield" data-title="Focused on first sphere" href="images/raytracer/9-depthoffield-1.png">
<img src="images/raytracer/9-depthoffield-1.png">
</a>
</div>
<div class="info">
<h3>Objective 9 - Depth of Field</h3>
<p>Depth of field was implemented by creating and taking the average of multiple passes of the image
with slightly modified eye positions. The modified eye positions were sampled from a jittered
grid.
</p>
<div class="sub-img-container">
<a data-lightbox="depthoffield" data-title="Focused on second sphere" href="images/raytracer/9-depthoffield-2.png">
<img src="images/raytracer/9-depthoffield-2.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="depthoffield" data-title="Focused on third sphere" href="images/raytracer/9-depthoffield-3.png">
<img src="images/raytracer/9-depthoffield-3.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="finalscene" data-title="Final scene incorporating all objectives" href="images/raytracer/10-finalscene.png">
<img src="images/raytracer/10-finalscene.png">
</a>
</div>
<div class="info">
<h3>Objective 10 - Final Scene</h3>
<p>All prior objectives are present in this image. Can you spot them all?</p>
<div class="sub-img-container">
<a data-lightbox="finalscene" data-title="Large version without depth of field" href="images/raytracer/10-finalscene-large.png">
<img src="images/raytracer/10-finalscene-large.png">
</a>
</div>
</div>
</div>
<div style="margin-bottom:2em" class="page-divider"></div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="adaptiveaa" data-title="Similar colour detection" href="images/raytracer/11-adaptiveaa-2.png">
<img src="images/raytracer/11-adaptiveaa-2.png">
</a>
</div>
<div class="info">
<h3>Extra Objective 1 - Adaptive Anti-aliasing</h3>
<p>Adaptive anti-aliasing was implemented by first sampling 5 rays per pixel and recursively subdividing
and producing more rays depending on the difference of sub-pixel colours. This allowed for
reduction of edge "jaggies" while also salvaging performance.</p>
<div class="sub-img-container">
<a data-lightbox="adaptiveaa" data-title="Without Anti-aliasing" href="images/raytracer/11-adaptiveaa-1.png">
<img src="images/raytracer/11-adaptiveaa-1.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="adaptiveaa" data-title="With Anti-aliasing" href="images/raytracer/11-adaptiveaa-3.png">
<img src="images/raytracer/11-adaptiveaa-3.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="adaptiveaa" data-title="Without Anti-aliasing" href="images/raytracer/11-adaptiveaa-c1.png">
<img src="images/raytracer/11-adaptiveaa-c1.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="adaptiveaa" data-title="Similar colour detection" href="images/raytracer/11-adaptiveaa-c2.png">
<img src="images/raytracer/11-adaptiveaa-c2.png">
</a>
</div>
<div class="sub-img-container">
<a data-lightbox="adaptiveaa" data-title="With Anti-aliasing" href="images/raytracer/11-adaptiveaa-c3.png">
<img src="images/raytracer/11-adaptiveaa-c3.png">
</a>
</div>
</div>
</div>
<div class="project-cell">
<div class="img-container">
<a data-lightbox="celshading" data-title="Final scene with cel shading" href="images/raytracer/12-celshading-x.png">
<img src="images/raytracer/12-celshading-x.png">
</a>
</div>
<div class="info">
<h3>Extra Objective 2 - Cel Shading</h3>
<p>Cel shading was implemented by grouping together gradients of specular and diffuse light within
thresholds. Edges were identified and coloured black by using a Sobel filtered version of
the original image.</p>
<div class="sub-img-container">
<a data-lightbox="celshading" data-title="Sobel filter" href="images/raytracer/12-celshading-sobel.png">
<img src="images/raytracer/12-celshading-sobel.png">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="stripe"></div>
<!-- Footer -->
<footer>
<div class="page-divider"></div>
<div class="top">
<a href="#">Back to top</a>
</div>
<div class="bottom">
© Joseph Suh - Jiracet. All Rights Reserved.
</div>
</footer>
<!-- Javascript -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.color-2.1.2.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/app.js"></script>
<!-- Angular JS
<script src="js/angular.min.js"></script>
<script src="js/controllers/tabcontroller.js"></script>
-->
</body>
</html>