-
Notifications
You must be signed in to change notification settings - Fork 0
/
scene-generation.html
274 lines (238 loc) · 15.6 KB
/
scene-generation.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
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<!-- Bootstrap -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<!-- My stuff -->
<script type="module" src="scripts/scene-generation.js"></script>
<link rel="stylesheet" href="style.css">
<title>Mateo</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">Mateo portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Don't forget to include the ID! -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
</div>
</div>
</nav>
<main class="py-2 container">
<div class="d-flex flex-column">
<!-- Intro -->
<p class="lead text-center">
In this computer graphics project, we aim to create lifelike natural scenes using Three.js. Our focus
includes generating vegetation through fractals, simulating natural phenomena with particle systems, and
mastering lighting and textures. Explore our project on a user-friendly website with various demos,
developed in collaboration with Casper Haems. Check out his portfolio at <a
href="https://casper.wvg.be/home/" target="_blank">casper.wvg.be/home</a>
</p>
<div class="d-flex gap-2 mb-3 justify-content-center align-items-stretch">
<!-- LinkedIn -->
<button type="button" id="btnLinkedInCasper" class="btn btn-primary"
style="background-color: rgb(0, 130, 202); border:none; ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" fill="currentColor"
viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z">
</path>
</svg>
Casper Haems
</button>
<!-- Website -->
<button type="button" id="btnWebsiteSceneGeneration" class="btn btn-primary"
style="background-color: white; border:none;">
<svg width="24" height="16" fill="currentColor" stroke-linecap="square" stroke-miterlimit="10"
version="1.1" viewBox="0 0 226.77 226.77" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(8.964 4.2527)" fill-rule="evenodd" stroke="#000" stroke-linecap="butt"
stroke-linejoin="round" stroke-width="4">
<path d="m63.02 200.61-43.213-174.94 173.23 49.874z" />
<path d="m106.39 50.612 21.591 87.496-86.567-24.945z" />
<path d="m84.91 125.03-10.724-43.465 43.008 12.346z" />
<path d="m63.458 38.153 10.724 43.465-43.008-12.346z" />
<path d="m149.47 62.93 10.724 43.465-43.008-12.346z" />
<path d="m84.915 125.06 10.724 43.465-43.008-12.346z" />
</g>
</svg>
<span style="color: black;">website</span>
</button>
<!-- Github repository -->
<button type="button" id="btnGithubSceneGeneration" class="btn btn-primary"
style="background-color: rgb(51, 51, 51); border:none; ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" fill="currentColor"
class="bi bi-github" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Repository
</button>
<!-- Report -->
<button type="button" id="btnReportSceneGeneration" class="btn btn-primary"
style="background-color: rgb(238, 48, 47); border:none; ">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-filetype-pdf" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.238.241.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.14 1.14 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z">
</path>
</svg>
Report (EN)
</button>
</div>
</div>
<div class="py-4 row">
<div class="col-lg-4">
<!-- Boids demo -->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=boids'">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/boids.mp4" type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Particle system - Boids
</p>
<p class="card-text">
This demo brings adorable boids to life, tiny creatures that mimic the mesmerizing
swarming
patterns of birds and fish. Our boids are governed by simple rules that create their
unique
behavior. They dodge walls, steer clear of each other, match their pals' direction,
gravitate to the group's center, and follow a set speed. These
rules combine for a delightful, organic dance
</p>
<p class="tags">
Topics: particle systems, algorithm, efficiency
</p>
</div>
</div>
<!-- Infinite terrain demo-->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=infinite+terrain'">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/Infinite%20terrain.mp4"
type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Terrain generation - Infinite Terrain
</p>
<p class="card-text">
In the Natural Demo, we take terrain generation to the next level with an infinite world
that stretches endlessly in all directions. Our clever ChunkManager and Chunk class handle
the heavy lifting, dynamically loading and seamlessly connecting terrain chunks. You'll
explore an ever-expanding world while our system efficiently manages chunk loading and Level
of Detail (LOD) updates as you move.
</p>
<p class="tags">
Topics: chunk system, world generation, LODs
</p>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Natural world demo -->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=natural';">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/Natural%20World.mp4"
type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Natural World
</p>
<p class="card-text">
In our main showcase, we unite all the elements from other demos into a cohesive
natural scene. Shaders work their magic, dynamically assigning textures based on altitude
and slope, adding depth and realism. With normal maps for lifelike shadows and texture
synthesis to eliminate repetition, the landscape is complete.
</p>
<p class="tags">
Topics: GLSL, shaders, texture synthesis, normal maps
</p>
</div>
</div>
<!-- Fire-demo -->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=fire'">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/fire%20animation.mp4"
type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Particle system - Fire animation
</p>
<p class="card-text">
The fire demo showcases a charming pixelated campfire brought to life with a straightforward
particle system. To ensure the flames' visual appeal at varying scales, we combined
JavaScript
for motion and harnessed GLSL's power for efficient particle size and
color calculations through buffer manipulation.
</p>
<p class="tags">
Topics: particle systems, buffers, GLSL
</p>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Perlin LOD demo -->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=perlin+lod'">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/Perlin%20LOD.mp4"
type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Terrain Generation - Perlin LOD
</p>
<p class="card-text">
In this demo, a single chunk of natural terrain is created using pseudo random Perlin noise.
The level of detail (LOD) adjust automatically based on camera distance. Various layers of
perlin noise are blended together to create a more realistic look.
</p>
<p class="tags">
Topics: perlin noise, layered perlin noise, terrain generation
</p>
</div>
</div>
<!-- Fireflies demo -->
<div class="card clickable text-center mb-4"
onclick="window.location.href='https://mcabla.github.io/3D-rendering/?world=fireflies'">
<video autoplay muted loop class="card-img-top">
<source src="https://storage.googleapis.com/mateo-website-bucket/Fireflies.mp4"
type="video/mp4">
</video>
<div class="card-body">
<p class="lead">
Particle System - Fireflies
</p>
<p class="card-text">
Explore the enchanting world of Fireflies, a serene display of luminous insects gracefully
dancing around each other. This particle system relies less heavily on shaders and does most
of the processing in pure JavaScript with the THREE.Points class. The shader only draws an
opaque point as a final touch to bring these gentle creatures to life.
</p>
<p class="tags">
Topics: particle systems, buffers, GLSL
</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>