-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathengine.html
More file actions
373 lines (355 loc) · 16.3 KB
/
engine.html
File metadata and controls
373 lines (355 loc) · 16.3 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
<html lang="en">
<head>
<!-- El head se gestiona aquí directamente -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Rolling Barrel Studio</title>
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- FONTAWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="game-page">
<!-- Aquí se incluirá el header mediante JavaScript -->
<div id="header-placeholder"></div>
<main class="main">
<!-- Hero Section -->
<section id="hero" class="hero section dark-background">
<!-- <div class="bg-gradient-custom-rl-negro"></div> -->
<div class="bg-absolute-negro"></div>
<img class="overlay" src="assets/img/engine_header.jpg" alt="" data-aos="fade-in">
<div class="container d-flex flex-column align-items-left">
<h1 class="titular" data-aos="fade-up" data-aos-delay="100">Helheim Engine</h1>
<p class="mini-titular" data-aos="fade-up" data-aos-delay="200">The tool that made Chrysalis possible
</p>
</div>
<div class="botones-header-home d-flex mt-4">
<a class="btn btn-primario-especial-tl btn-blanco me-2"
href="https://youtu.be/-Kzg0_psK9I?si=Pmgrtme2Y5RNRqiO" style="background: white;" target="_blank"
rel="nofollow">Watch Trailer</a>
<a class="btn btn-chrysalis" href="https://github.com/RollingBarrel/Helheim-Engine/releases/latest"
target="_blank"><img src="assets/img/iconos/icono_chrysalis.png" alt="Chrysalis Logo"><span class=""
data-text="Download Chrysalis">Download Chrysalis</span></a>
</div>
</section>
<section id="contenido-engine" class="pb-0">
<!-- SINOPSIS PLACEHOLDER -->
<div class="container-fluid bg-blanco border-primario-t border-primario-b">
<div class="container-big color-negro about py-5">
<div class="contenedor-flex-horizontal">
<div class="p-3">
<img src="assets/img/engine/02_helheim_engine_editor_view.jpg"
class="img-fluid rounded mb-4 border-secundario-r border-secundario-b"
alt="Helheim Engine Editor">
</div>
<div class="content px-3 py-5">
<h3 class="titular color-default">Helheim Engine</h3>
<p>
Helheim Engine is a C++ custom engine based on OpenGL that has been used by Rolling
Barrel Studio to develop the game Chrysalis. It has been developed during the 2023-2024
Master in Advanced Programming for AAA Video Games.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Game Section -->
<section id="features" class="about section border-primario-b border-primario-t py-3">
<div class="container-fluid color-negro">
<div class="color-blanco">
<div class="container-peque title text-center">
<p class="mini-titular">Our</p>
<h2 class="titular color-primario underline-azul-verde">Features</h2>
</div>
<div class="container">
<!-- <p>Algo de texto para rellenar o quiza no</p> -->
</div>
<div class="img-como-bgd" style="height: 30rem;">
<img class="image" src="assets/img/engine_dispatch.jpg" alt="">
</div>
<div class="container-big text-center py-5">
<div class="feature-list d-flex"
style="flex-direction: row; flex-wrap: wrap; justify-content: center;">
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">Animations and state machines</h3>
<span>Helheim Engine provides robust support for <strong class="color-accent">GLTF
animated models</strong>
, ensuring compatibility with one of the most widely-used 3D file formats for modern
game development. This means developers can import
models complete with complex animations, and skeletal structures seamlessly. To
simplify animation control, the engine incorporates a
<strong class="color-accent">graphical state machine system</strong>. This tool
enables developers to visually manage animation states
and transitions, allowing for intricate setups like idle, walking, running, and
combat states. The systemalso supports blending between
animations, ensuring smooth transitions that enhance gameplay realism.</span>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">VFX</h3>
<span>The Helheim Engine’s VFX toolkit is designed to empower creators with versatile
tools for enhancing visual fidelity. The engine includes
<strong class="color-accent">particle emitters</strong>, capable of producing
detailed effects like smoke, fire, rain, and magical bursts with
customizable properties such as lifetime, velocity, and particle behavior.
Developers can also utilize <strong class="color-accent">trail renderers</strong>
to add dynamic trails to moving objects (e.g., weapon swings, projectiles) for added
impact.
<strong class="color-accent">Line components</strong> provide the ability to draw
lines or laser effects in the game world, useful for rendering beams
or special effect paths. Additionally, <strong class="color-accent">sprite sheet
animations</strong> enable developers to create 2D animated effects from
sprite atlases, ideal for explosion effects, spell animations, or other visual
elements that rely on quick frame-by-frame transitions.
</span>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">Sound (FMOD)</h3>
<span>The Helheim Engine’s integration with <strong class="color-accent">FMOD</strong>,
a powerful audio middleware solution, enhances the development
experience by allowing audio engineers and developers to implement and test audio
changes directly during live gameplay. The 3D audio capabilities of Helheim,
paired with FMOD, enable highly immersive soundscapes where sound sources can be
spatially positioned in the game world. This provides players with a sense of
directionality and distance, enriching their auditory experience and making game
environments feel more lifelike.
</span>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">Scripting (C++)</h3>
<span>For gameplay programmers, Helheim’s scripting system is rooted in <strong
class="color-accent">C++</strong>, a language known for its performance and
extensive
control over low-level operations. The engine offers a robust API that supports the
creation of complex gameplay mechanics, AI behaviors, physics interactions, and
custom game logic. The combination of C++ scripting and Helheim’s modular design
ensures developers have a powerful toolkit at their disposal for building everything
from small indie projects to large-scale games with intricate systems.
</span>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">Physics</h3>
<span>Helheim Engine integrates physics simulation using the <strong
class="color-accent">Bullet Physics Library</strong>, an open-source C++ library
widely used for efficiently
managing interactions between GameObjects. We use it as the foundation for handling
collision computation between our lightweight <strong class="color-accent">Box
Colliders</strong>
in a precise and optimized way, with incremental <strong
class="color-accent"></strong>AABB and OBB checks</strong> , allowing immersive
interactions throughout the whole game
without losing performance. The use of the library also eases the addition of
possible physics features to the engine, such as ragdolls, kinematics, rigidbody,
gravity, bouncing, etc.
</p>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">UI</h3>
<span>Helheim Engine has a custom made UI system, allowing the use of buttons, sliders,
images, text and video, for both <strong class="color-accent">Screen and World
Space</strong>.
Each of these components has an <strong class="color-accent">event system</strong>
attached to detect and react to events such as hover, click, press and selection.
</span>
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">Navmesh</h3>
<!-- <span>
Navmesh
</span> -->
</div>
<div class="border-primario-l p-3 m-3" style="width: 45%;">
<h3 class="">AI / enemies</h3>
<!-- <span>
(pathfinding, navigation, attacks)
</span> -->
</div>
</ul>
</div>
</div>
</div>
</section>
<section class="bg-blanco">
<div class="container py-5 color-default">
<h2 class="titular color-default mb-5">Rendering</h2>
<ul class="list-unstyled" style="column-count: 2;">
<li class="">
<h3 class="color-default">Geometry Batching</h3>
<p>Enhances rendering performance by reducing the overhead of making a draw call for each mesh,
packing all scene geometry together in a large VBO. It does so allowing for smoother
gameplay in scenes with many objects.
</p>
</li>
<li>
<h3 class="color-default">Deferred shading</h3>
<p>Can enhance performance and allows the easier implementation of some techniques like decals,
especially for scenes with multiple light sources,It divides the rendering in two stages.
The first one, the
<span class="fw-bold">geometry pass</span>
, using all the scene geometry outputs the information about each pixel position, depth,
normals, emisives, material base color and metal rough is rendered into a texture for each,
often referred to as the
<span class="fw-bold">G-buffer</span>
. Then, in the second stage, the
<span class="fw-bold">lighting pass</span>
, the lighting calculations are applied based on the data stored in the G-buffer. This
separation allows the engine to calculate lighting only for the geometry not occluded by
other geometry , significantly reducing the computational load, especially when many lights
are present at the cost of having to work with more texture memory.
</p>
</li>
<li>
<h3 class="color-default">GPU Driven Renderer</h3>
<p>Enhances the performance a lot by giving the GPU the ability to decide its own work therefore
<span class="fw-bold">reducing the latencies</span>
of the synchronization with the CPU. It also frees the CPU from a lot of work, for example
the geometry
<span class="fw-bold">skin culling</span>
and the animation skinning which are completely done on the GPU.
</p>
</li>
<li>
<h3 class="color-default">IBL</h3>
<p>Provides realistic ambient lighting and reflections by using environment maps, adding depth
and realism to scenes.</p>
</li>
<li>
<h3 class="color-default">Shadows</h3>
<p>Compute
<span class="fw-bold"></span>shadow maps</span>
to create realistic and dynamic shadows to enhance scene depth and atmosphere.
</p>
</li>
</ul>
</div>
<div class="container py-5 color-default">
<h2 class="titular color-default mb-5">Post-processing</h2>
<ul class="list-unstyled" style="column-count: 2;">
<li style="break-inside: avoid;">
<h3>Bloom</h3>
<p>Adds a glow to bright areas, simulating light spill from an emitting source.</p>
</li>
<li style="break-inside: avoid;">
<h3>Volumetric Lights</h3>
<p>Uses ray-marching to calculate the light added and removed from the path geometry-camera.
This creates light beams and god rays for atmospheric scenes.</p>
</li>
<li style="break-inside: avoid;">
<h3>Height Fog</h3>
<p>Introduces height-based fog for more immersive environments.</p>
</li>
<li style="break-inside: avoid;">
<h3>Screen Space Ambient Occlusion</h3>
<p>Reduces the ambient light impact on occluded zones of the scene to enhance depth and realism.
</p>
</li>
<li style="break-inside: avoid;">
<h3>Decals</h3>
<p>The engine supports
<span class="fw-bold">decals</span>
for adding dynamic details such as bullet holes, cracks, or splatter on surfaces. This
feature allows developers to enhance environmental storytelling without altering base
textures or meshes.
</p>
</li>
<li style="break-inside: avoid;">
<h3>Filmic Tone Mapping</h3>
<p>Maps the HDR lighting calculations to LDR.</p>
</li>
</ul>
</div>
<div class="container py-5 color-default">
<h2 class="titular color-default mb-5">Libraries Used</h2>
<ul class="list-unstyled" style="column-count: 4;">
<li>
<p>Bullet</p>
<p>DebugDraw</p>
<p>Detour</p>
<p>DetourCrowd</p>
<p>DetourTileCache</p>
<p>DirectXTex</p>
<p>Ffmpeg</p>
<p>FMOD</p>
<p>Freetype</p>
<p>GLEW-2.1.0</p>
<p>GLFont</p>
<p>ImGui-1.90-docking</p>
<p>imgui-node-editor-0.9.3</p>
<p>ImGuiFileDialog-0.6.7</p>
<p>ImGuizmo-1.83</p>
<p>MathGeoLib-v1.5</p>
<p>MikkTSpace</p>
<p>Optick</p>
<p>Physfs-3.2.0</p>
<p>RapidJSON-1.1.0</p>
<p>Recast</p>
<p>SDL-2.0.16</p>
<p>Tinygltf-2.8.19</p>
</li>
</ul>
</div>
</section>
</main>
<!-- Aquí se incluirá el footer mediante JavaScript -->
<div id="footer-placeholder"></div>
<!-- Incluir el header con JavaScript -->
<script>
// Cargar el header
fetch("inc/header.html")
.then(response => response.text())
.then(data => {
document.getElementById("header-placeholder").outerHTML = data;
// Header current active page
var currentPage = window.location.pathname;
var navLinks = document.querySelectorAll("#navmenu ul li a");
navLinks.forEach(function (link) {
if (link.getAttribute("href") === currentPage) {
link.classList.add("active");
} else {
link.classList.remove("active");
}
});
});
// Cargar footer
fetch("inc/footer.html")
.then(response => response.text())
.then(data => {
document.getElementById("footer-placeholder").innerHTML = data;
// Compute current year for footer
document.getElementById("current-year").innerHTML = new Date().getFullYear();
});
</script>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center">
<i class="bi bi-arrow-up-short"></i>
</a>
<!-- Preloader -->
<!-- <div id="preloader"></div> -->
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- <script src="assets/vendor/php-email-form/validate.js"></script> -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script> -->
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>