-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathshadow.html
More file actions
143 lines (134 loc) · 6.48 KB
/
shadow.html
File metadata and controls
143 lines (134 loc) · 6.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Favicons -->
<!--<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>->>
<!-- Animate CSS CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Shadow Mesh Prototype</title>
</head>
<body class="gamepage">
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<div class="dropdown">
<button class="dropbtn nav-link"><a href="index.html#projects">Stuff I've Made</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="hookfoot.html" class="nav-link">Captain Hookfoot</a>
<a href="visvi.html" class="nav-link">Visvi</a>
<a href="wormgame.html" class="nav-link">Funny Worm Game</a>
<a href="bearswithguns.html" class="nav-link">Bears with Guns</a>
<a href="eden.html" class="nav-link">EDEN</a>
<a href="thrillertheater.html" class="nav-link">Thriller Theater</a>
<a href="shadow.html" class="nav-link">Shadow Mesh Generator</a>
<a href="graphics.html" class="nav-link">Graphics Programming</a>
<a href="wilderness.html" class="nav-link">Wilderness Supervision</a>
<a href="bestbefore.html" class="nav-link">Best Before 90 Seconds</a>
<a href="lucifur.html" class="nav-link">Lucifur</a>
</div>
</div>
<!--<li><a href="index#contact">Contact</a></li>-->
<li><a href="Demetrius Nekos Resume.pdf">Resume</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
<main>
<div class="wrapper">
<div class="left">
<div class="info">
<h1>Shadow Mesh Generation</h1>
<p>This is a technical test that I am currently working on in Unity. I started it for a Creators Jam in the winter of 2021 and have since updated it to work better and faster. It uses a marching squares algorithm to contour the shadow off of a surface with raycasts and uses tyhat to create an interactable mesh. I have recently added multithreading to the triangulation marching squares algorithm, reducing the time to generate a mesh from ~0.9314 seconds to only ~0.127</p>
</div>
<div class="info">
<h2>Features/Things I built:</h2>
<ul class="work-done">
<li>Raycasting</li>
<li>Mesh Generation</li>
<li>Marching Squares Algorithm</a></li>
<li>Multithreading</li>
</ul>
</div>
</div>
<div class="right">
<p class="itch">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZQM0orXiMcA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
<div class="github-card" data-github="Dnekos/ShadowMeshTest" data-width="400" data-height="" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Shadow detection and Marching Squares</h1>
<p>The system first starts by sending a ray out from the camera to a point on the surface its facing. Using the normal vector from the point the raycast hits, the function creates a 2D grid of points and checks each of them to see if they are shadowed. It accomplished that using simple raycasts to any nearby light sources. Next, once each of the points have been given values, they are triangulated using the Marching Squares algorithm. In addition to the current square, points are also created and given triangles for the opposite face and any side squares, if on the edge. Once all the points have been triangulated, those points are put together into a mesh to create the shadow, which can then be instantiated</p>
</div>
</div>
<div class="right">
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Optimizing and Multithreading</h1>
<p>The primary issue with the system as it was first built is how long it takes to create the mesh. It wouldn't be suitable as a game mechanic if there was a full second wait each time. After some testing I determined the two largest time sinks. The first was node creation, as it used both raycasts to each light, as well as an expensive physics function to see if the point is actually on the surface, as well as some inefficient looping creating unneccisary function calls. The second and bigger issue was the actual triangulation, due to how many points that were needed to be calculated. I was able to optimize the looping for the first issue, but couldn't take out the expensive calls. I could, however, reduce lag by implementing multithreading. After playing with rudimentary threads, I settles on using Unity's Job system, which allowed me to move almost all of the triangulation calculations out of the main thread. Doing so increased performance sevenfold, with the game handling much more smoothly.</p>
</div>
</div>
<div class="right">
</div>
</div>
</main>
<!-- Scroll to top -->
<i class="scroll-up" id="scroll-up">
<img
src="https://img.icons8.com/color/480/000000/circled-up--v3.png"
class="socicon up-arrow"
alt="scroll-up"
/></i>
<!-- Footer section -->
<footer>
<p class="copy">© Copyright 2021</p>
<p>You can find me at:</p>
<ul class="social-links">
<li><a href="https://github.com/Dnekos">Github</a></li>
<li><a href="https://dnekos.itch.io/">Itch.io</a></li>
<li><a href="https://www.linkedin.com/in/demetrius-nekos/">LinkedIn</a></li>
</ul>
<p>Or, you can <a href="mailto:demetrius.nekos@mymail.champlain.edu">send me an email</a>.</p>
</p>
</footer>
<!-- Website scripts -->
<script src="js/app.js"></script>
<!-- Ion icons scripts -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>