-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathraytracer.html
More file actions
401 lines (348 loc) · 17.4 KB
/
raytracer.html
File metadata and controls
401 lines (348 loc) · 17.4 KB
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
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE HTML>
<html>
<head>
<title>Kris' Portfolio Site</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<a href="index.html" class="logo"><strong>Kris'</strong> <span>Portfolio Site</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">About Meee</a></li>
<li><a href="https://www.instagram.com/kasumiii_art">Instagram</a></li>
<li><a href="mailto:krischen.nekolabs@gmail.com">Contact</a></li>
</ul>
<!-- <ul class="actions stacked">
<li><a href="#" class="button primary fit">Get Started</a></li>
<li><a href="#" class="button fit">Log In</a></li>
</ul> -->
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1>Ray Tracer in C++</h1>
</header>
<!-- Content -->
<!-- <h2 id="content">Introduction</h2>
<p>This was originally the mini-project 2 of my course 15664: Technical Animation taken at CMU.
Instead of simply making a demo in AMC Viewer, I decided to take this chance to make an actual cloth simulation system usable for my future games.
</p> -->
<h2 id="content">Introduction</h2>
<span class="image fit"><img src="images/raytracingcover.png" alt="" /></span>
<p>This is a semester-length project of 15668: Physics Based Rendering at CMU, where I implemented a
custom ray-tracing renderer from scratch in C++ in Dartmouth Introductory Ray Tracer, a template
for ray tracing education. In the final project I implemented advanced features from recent
SIGGRAPH papers. Here is the full list of components I implemented.</p>
<div class="row">
<div class="col-4 col-12-small">
<ul>
<li>Ray properties and methods</li>
<li>Transforms: translate, scale and rotation</li>
<li>Objects: Sphere, Quads and Mesh (triangles) with corresponding properties: normal,
uv...</li>
<li>Materials and Microfacet BRDF Model: Lambert, Dielectric, Metal, Phong, Blinn-Phong,
Oren-Nayar, Beckmann</li>
</ul>
</div>
<div class="col-4 col-12-small">
<ul>
<li>Sampler Algorithms: Stratified Sampling, Quasi-Monte Carlo Sampling</li>
<li>Integrators: Material Integrators, next-event estimation, Multiple importance
sampling</li>
<li>Background Mapping</li>
<li>Volumetric Rendering</li>
</ul>
</div>
<div class="col-4 col-12-small">
<ul>
<li>Procedural Textures</li>
<li>Spectral Rendering</li>
<li>Position-free Monte Carlo Integration for Layered Materials</li>
<li>Position-free Monte Carlo Integration for BSSRDF</li>
</ul>
</div>
<!-- Break -->
</div>
<hr>
<h2>Feature Demo</h2>
<style>
.image-container {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
font-size: 14px;
text-align: center;
opacity: 0;
}
.image:hover {
.caption {
opacity: 1;
}
}
</style>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-4">
<span class="image fit">
<img src="images/raytracer/06_cornell-box.jpg" alt="" />
<div class="caption">MIS+NEE Integrator</div>
</span>
</div>
<div class="col-4"><span class="image fit"><img
src="images/raytracer/lake_bg-ref-1024spp.jpg" alt="" />
<div class="caption">Ambient Light and Background Mapping</div>
</span></div>
<div class="col-4"><span class="image fit"><img src="images/raytracer/marble-ref.png"
alt="" />
<div class="caption">Procedural Textures</div>
</span></div>
<div class="col-4"><span class="image fit"><img src="images/raytracer/uv.png" alt="" />
<div class="caption">UV Mapping</div>
</span></div>
<div class="col-4"><span class="image fit"><img src="images/raytracer/05_quad-light.jpg"
alt="" />
<div class="caption">Ray Tracing Basics</div>
</span></div>
<div class="col-4"><span class="image fit"><img
src="images/raytracer/forward-cornell-box-1024-spp.jpg" alt="" />
<div class="caption">Volumetric Rendering</div>
</span></div>
<div class="col-4"><span class="image fit"><img
src="images/raytracer/cpr-2023-05-02-15-38-46.png" alt="" />
<div class="caption">Microfacet Surface BRDFs</div>
</span></div>
<div class="col-4"><span class="image fit"><img src="images/raytracer/take0.png" alt="" />
<div class="caption">BSSRDF</div>
</span></div>
<div class="col-4"><span class="image fit"><img
src="images/raytracer/raytracer-layer-eval.png" alt="" />
<div class="caption">Layered Materials</div>
</span></div>
</div>
</div>
<hr>
<h2>Pipeline Architecture</h2>
<span class="image fit"><img
src="images/raytracer/arch.png" alt="" />
</span>
<h2>Design and Implementation</h2>
<u><h3>Rays</h3></u>
<div class="row">
<div class="col-6 col-12-small">
<p>The Ray class itself is the most simple part in a ray tracing pipeline, yet the core challenge of ray tracing is to study how rays behave in a scene. The Ray class contains four main properties: the origin (a point), the direct (a vector) as well as the min and max distances.
More properties are added to support additional features, for example, the medium pointer points to a class representing volumetric materials such as fog or clouds, and the mono, wavelength properties indicate whether the ray is monochromatic to simulate laser, dispersion effects...
</p>
</div>
<div class="col-6 col-12-small">
<span class="image fit"><img src="images/raytracer/ray.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Transform</h3></u>
<div class="row">
<div class="col-6 col-12-small">
<p>The Transform class is used across different types of data and there are two types of transforms that need to implement differently: the vector and the point;
<br>
To transform a vector, I implemented a linear transformation by matrix in the <b> Euclidean space </b>. However, transforming a point is different as the position itself will shift. To achieve it the transformation is done in <b>homogenous coordinates </b>with a 4x4 matrix.
<br>
With the two basic functions I implemented transformation for rays, normals, meshes... I also implemented useful features such as inverse and so on.
</p>
</div>
<div class="col-6 col-12-small">
<span class="image fit"><img src="images/raytracer/transform.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Geometries</h3></u>
I implemented three types of Geometries: the sphere, the quad and the triangle (which is the basic component of meshes). For each geometry the key function is the ray-surface intersection, there are also additional features for different Geometries such as applying transformation, the UV mapping...
<br><br>
<div class="row">
<div class="col-4 col-12-small">
<h4>Sphere</h4>
<p>To calculate ray hit I used ray-sphere intersection algorithm as shown on the right. The corresponding surface normal will then be the connecting vector from the center to the hit point. To get UV coordinates I transform <b>Euclidean coordinates</b> to <b>Spherical coordinates </b> and use the corresponding parameters : phi and theta, to be the UV coordinates.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raysphereisect1.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/sphere.png" alt="" /></span>
</div>
</div>
<div class="row">
<div class="col-4 col-12-small">
<h4>triangle</h4>
<p>To achieve ray-triangle intersection I implemented the <b> Möller-Trumbore test </b>. To get the UV coordinates I transform the Euclidean coordinates to <b>barycentric coordinates</b> and get the UV from interpolating the alpha nad beta parameters.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/triangle1.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/triangle2.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Materials and BRDF</h3></u>
Materials is a huge part and the most important part in ray tracing. There are two main parts: the specular behavior of material (such as reflection and refraction) and the BRDF (the microfacet structure, modelled by various mathematical models such as blinn-phong). Other small but also important features are also implemented such as texture mapping ...
<br><br>
<div class="row">
<div class="col-4 col-12-small">
<h4>Specular Behavior</h4>
<p>Speculate behaviors mainly contains reflection and refractions, which are described in the Fresnel model. The model quantifies the effect that there are more reflection when the ray is more orthogonal to the normal and more refraction when the ray is parallel to the normal.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/reflr.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/spec.png" alt="" /></span>
</div>
</div>
<div class="row">
<div class="col-4 col-12-small">
<h4>BRDFs</h4>
<p>I implemented various BRDF models including: Lambert, Phong, Blinn-Phong, Oren-Nayar and Beckmann. Each BRDF contains three function calls in the pipeline: <b>the eval, the sample, and the pdf </b>. The sample function samples the outgoing ray direction given the incoming ray, material type and other parameters (such as normal), the pdf call returns the probability density function and the eval returns the attenuation.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/fresnel_conductor.png" alt="" /></span>
<span class="image fit"><img src="images/raytracer/beckman_shadowing_term.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/beckmanncode.png" alt="" /></span>
<i>Implementation of Beckmann</i>
</div>
</div>
<br>
<u><h3>Sampling Functions and Samplers</h3></u>
<h4>Importance Sampling</h4>
<div class="row">
<div class="col-4 col-12-small">
<p> The importance sampling method can significantly increase both speed and accuracy in a ray tracing pipeline. I implemented various importance sampling including: sampling the cosine term in the render equation (as shown in the image), sampling geometry and sampling brdf. The first image shows the sampling result of consine term, the second is the sampling of genmetry, which is used mostly in next event estimation. Sampling BRDF is implemented together within the material class mentioned above.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/points-on-cosine-power-hemisphere.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/triangle-points.png" alt="" /></span>
</div>
</div>
<h4>Stratified Sampling Quasi Monte_carlo Sampling Sampling</h4>
<p>Those to sampling methods are, in essence, pseudo-random generators that proved to be able to generate better results than the randf() in C++. Here is a comparison: (randf, i.e. independent sampling vs stratified vs quasi MC)</p>
<div class="row">
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/ball-ind.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/ball-strat.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/ball-halton.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Integrator</h3></u>
<div class="row">
<div class="col-4 col-12-small">
<h4>Recursive ray tracing</h4>
<p>The recursive ray tracing integrator is the most basic integrator. It evaluates the Render Equation by performing probabilistic monte-carlo integration and simulate how light bounces in the scene. Each pixel will shoot a number of rays and accumulate color for the pixel. In the following sections I gradually added more advanced features to improve both speed and accuracy.
</p>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/slide008.jpg" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/recursive.png" alt="" /></span>
</div>
</div>
<div class="row">
<h4>Next Event Estimation + MIS + Power Heuristic</h4>
<p>NEE and MIS are commonly used together to reduce variance of rendered image.
NEE is implemented by splitting the ray into two parts at every intersection. One is sampled based on the BRDF and the other is sampled over the lights. MIS, on the other hand, is the method of blending the two attenuations based on their PDF.
Here are the comparison among regular ray tracing, NEE only and NEE+MIS.
</p>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/veach_mats.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/veach_nee.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/veach_mis_power.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Volume</h3></u>
<p>Volumetric Rendering renders things like smoke, fog, clouds..... I implemented <b>Henyey-Greenstein Phase Function , Analytic Free-Flight Sampling and Transmittance, Delta Tracing and Ratio Tracking.</b> This whole section is implemented based on the <a href="https://pbr-book.org/3ed-2018/Volume_Scattering/Media"> PBRT handbook </a>. Anyways here are some results: isotropic fog, anisotropic smoke generated by perlin noises, and a cat made of volumetric materials:</p>
<div class="row">
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/isotropic-cornell-box-1024-spp.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/cornell-box-uni-2023-03-26-18-11-32.png" alt="" /></span>
</div>
<div class="col-4 col-12-small">
<span class="image fit"><img src="images/raytracer/cat-2023-03-26-22-19-07.png" alt="" /></span>
</div>
</div>
<br>
<u><h3>Advance Topics</h3></u>
In the final project I implemented advanced features from recent SIGGRAPH papers: position-free Monte-Carlo Sampling (for layered materials and BSSRDF) and spectral rendering. Each of it is a huge topic itself and deserves separate discussion. Here is the
<a href="https://drive.google.com/file/d/1rs73OcjrKAtQGq0Fb5qhFusgnjJDXSPg/view?usp=sharing">Technical Report</a> I wrote to introduce the features in detail.
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<!-- <ul class="icons"> -->
<!-- <li><a href="#" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li> -->
<!-- <li><a href="#" class="icon brands alt fa-facebook-f"><span class="label">Facebook</span></a></li> -->
<!-- <li><a href="#" class="icon brands alt fa-instagram"><span class="label">Instagram</span></a></li> -->
<!-- <li><a href="#" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li> -->
<!-- <li><a href="#" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li> -->
<!-- </ul> -->
<ul class="copyright">
<li>© Kris Chen, 2023</li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>