Merged sphere demo and graph demo. Set default FPS to 60.
[sixth-3d-demos.git] / doc / index.html
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <title>Sixth 3D engine demos</title>
5 <!-- 2020-04-20 Mon 22:25 -->
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <meta name="generator" content="Org-mode">
9 <meta name="author" content="Svjatoslav Agejenko">
10 <link href="https://bootswatch.com/3/darkly/bootstrap.min.css" rel="stylesheet">
11 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
13 <style type="text/css">
14 footer {background-color: #111 !important;}
15 pre {background-color: #111; color: #ccc;}
16 </style>
17 <style type="text/css">
18 /* org mode styles on top of twbs */
19
20 html {
21     position: relative;
22     min-height: 100%;
23 }
24
25 body {
26     font-size: 18px;
27     margin-bottom: 105px;
28 }
29
30 footer {
31     position: absolute;
32     bottom: 0;
33     width: 100%;
34     height: 101px;
35     background-color: #f5f5f5;
36 }
37
38 footer > div {
39     padding: 10px;
40 }
41
42 footer p {
43     margin: 0 0 5px;
44     text-align: center;
45     font-size: 16px;
46 }
47
48 #table-of-contents {
49     margin-top: 20px;
50     margin-bottom: 20px;
51 }
52
53 blockquote p {
54     font-size: 18px;
55 }
56
57 pre {
58     font-size: 16px;
59 }
60
61 .footpara {
62     display: inline-block;
63 }
64
65 figcaption {
66   font-size: 16px;
67   color: #666;
68   font-style: italic;
69   padding-bottom: 15px;
70 }
71
72 /* from twbs docs */
73
74 .bs-docs-sidebar.affix {
75     position: static;
76 }
77 @media (min-width: 768px) {
78     .bs-docs-sidebar {
79         padding-left: 20px;
80     }
81 }
82
83 /* All levels of nav */
84 .bs-docs-sidebar .nav > li > a {
85     display: block;
86     padding: 4px 20px;
87     font-size: 14px;
88     font-weight: 500;
89     color: #999;
90 }
91 .bs-docs-sidebar .nav > li > a:hover,
92 .bs-docs-sidebar .nav > li > a:focus {
93     padding-left: 19px;
94     color: #A1283B;
95     text-decoration: none;
96     background-color: transparent;
97     border-left: 1px solid #A1283B;
98 }
99 .bs-docs-sidebar .nav > .active > a,
100 .bs-docs-sidebar .nav > .active:hover > a,
101 .bs-docs-sidebar .nav > .active:focus > a {
102     padding-left: 18px;
103     font-weight: bold;
104     color: #A1283B;
105     background-color: transparent;
106     border-left: 2px solid #A1283B;
107 }
108
109 /* Nav: second level (shown on .active) */
110 .bs-docs-sidebar .nav .nav {
111     display: none; /* Hide by default, but at >768px, show it */
112     padding-bottom: 10px;
113 }
114 .bs-docs-sidebar .nav .nav > li > a {
115     padding-top: 1px;
116     padding-bottom: 1px;
117     padding-left: 30px;
118     font-size: 12px;
119     font-weight: normal;
120 }
121 .bs-docs-sidebar .nav .nav > li > a:hover,
122 .bs-docs-sidebar .nav .nav > li > a:focus {
123     padding-left: 29px;
124 }
125 .bs-docs-sidebar .nav .nav > .active > a,
126 .bs-docs-sidebar .nav .nav > .active:hover > a,
127 .bs-docs-sidebar .nav .nav > .active:focus > a {
128     padding-left: 28px;
129     font-weight: 500;
130 }
131
132 /* Nav: third level (shown on .active) */
133 .bs-docs-sidebar .nav .nav .nav {
134     padding-bottom: 10px;
135 }
136 .bs-docs-sidebar .nav .nav .nav > li > a {
137     padding-top: 1px;
138     padding-bottom: 1px;
139     padding-left: 40px;
140     font-size: 12px;
141     font-weight: normal;
142 }
143 .bs-docs-sidebar .nav .nav .nav > li > a:hover,
144 .bs-docs-sidebar .nav .nav .nav > li > a:focus {
145     padding-left: 39px;
146 }
147 .bs-docs-sidebar .nav .nav .nav > .active > a,
148 .bs-docs-sidebar .nav .nav .nav > .active:hover > a,
149 .bs-docs-sidebar .nav .nav .nav > .active:focus > a {
150     padding-left: 38px;
151     font-weight: 500;
152 }
153
154 /* Show and affix the side nav when space allows it */
155 @media (min-width: 992px) {
156     .bs-docs-sidebar .nav > .active > ul {
157         display: block;
158     }
159     /* Widen the fixed sidebar */
160     .bs-docs-sidebar.affix,
161     .bs-docs-sidebar.affix-bottom {
162         width: 213px;
163     }
164     .bs-docs-sidebar.affix {
165         position: fixed; /* Undo the static from mobile first approach */
166         top: 20px;
167     }
168     .bs-docs-sidebar.affix-bottom {
169         position: absolute; /* Undo the static from mobile first approach */
170     }
171     .bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav {
172         margin-top: 0;
173         margin-bottom: 0
174     }
175 }
176 @media (min-width: 1200px) {
177     /* Widen the fixed sidebar again */
178     .bs-docs-sidebar.affix-bottom,
179     .bs-docs-sidebar.affix {
180         width: 263px;
181     }
182 }
183 </style>
184 <script type="text/javascript">
185 $(function() {
186     'use strict';
187
188     $('.bs-docs-sidebar li').first().addClass('active');
189
190     $(document.body).scrollspy({target: '.bs-docs-sidebar'});
191
192     $('.bs-docs-sidebar').affix();
193 });
194 </script>
195 </head>
196 <body>
197 <div id="content" class="container">
198 <div class="row"><div class="col-md-9"><h1 class="title">Sixth 3D engine demos</h1>
199
200 <div id="outline-container-sec-1" class="outline-2">
201 <h2 id="sec-1"><span class="section-number-2">1</span> General</h2>
202 <div class="outline-text-2" id="text-1">
203 <ul class="org-ul">
204 <li>This program is free software: released under Creative Commons Zero
205 (CC0) license
206 </li>
207
208 <li>Program author:
209 <ul class="org-ul">
210 <li>Svjatoslav Agejenko
211 </li>
212 <li>Homepage: <a href="https://svjatoslav.eu">https://svjatoslav.eu</a>
213 </li>
214 <li>Email: <a href="mailto://svjatoslav@svjatoslav.eu">mailto://svjatoslav@svjatoslav.eu</a>
215 </li>
216 </ul>
217 </li>
218
219 <li><a href="https://www.svjatoslav.eu/projects/">Other software projects hosted at svjatoslav.eu</a>
220 </li>
221 </ul>
222 </div>
223
224 <div id="outline-container-sec-1-1" class="outline-3">
225 <h3 id="sec-1-1"><span class="section-number-3">1.1</span> Source code</h3>
226 <div class="outline-text-3" id="text-1-1">
227 <ul class="org-ul">
228 <li><a href="https://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=snapshot;h=HEAD;sf=tgz">Download latest snapshot in TAR GZ format</a>
229 </li>
230
231 <li><a href="https://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=summary">Browse Git repository online</a>
232 </li>
233
234 <li>Clone Git repository using command:
235 <pre class="example">
236 git clone https://www2.svjatoslav.eu/git/sixth-3d-demos.git
237
238 </pre>
239 </li>
240 </ul>
241 </div>
242 </div>
243 </div>
244
245 <div id="outline-container-sec-2" class="outline-2">
246 <h2 id="sec-2"><span class="section-number-2">2</span> Overview</h2>
247 <div class="outline-text-2" id="text-2">
248 <p>
249 Goal of this project is to show off capabilities and API usage of
250 <a href="https://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a> engine.
251 </p>
252
253 <p>
254 All <a href="#sec-4">example scenes in this repository</a> render at interactive
255 framerates.
256 </p>
257
258 <p>
259 Download runnable JAR file: <a href="sixth-3d-demos.jar">sixth-3d-demos.jar</a>
260 </p>
261
262 <p>
263 To start demo application, use command:
264 </p>
265 <pre class="example">
266 java -jar sixth-3d-demos.jar
267
268 </pre>
269 </div>
270 </div>
271
272 <div id="outline-container-sec-3" class="outline-2">
273 <h2 id="sec-3"><span class="section-number-2">3</span> Navigating in space</h2>
274 <div class="outline-text-2" id="text-3">
275 <table class="table table-striped table-bordered table-hover table-condensed">
276
277
278 <colgroup>
279 <col  class="left">
280
281 <col  class="left">
282 </colgroup>
283 <thead>
284 <tr>
285 <th scope="col" class="text-left">key</th>
286 <th scope="col" class="text-left">result</th>
287 </tr>
288 </thead>
289 <tbody>
290 <tr>
291 <td class="text-left">cursor keys</td>
292 <td class="text-left">move: left, right, forward, backward</td>
293 </tr>
294
295 <tr>
296 <td class="text-left">mouse scroll wheel</td>
297 <td class="text-left">move: up, down</td>
298 </tr>
299
300 <tr>
301 <td class="text-left">dragging with mouse</td>
302 <td class="text-left">look around</td>
303 </tr>
304 </tbody>
305 </table>
306 </div>
307 </div>
308
309 <div id="outline-container-sec-4" class="outline-2">
310 <h2 id="sec-4"><a id="ID-5f88b493-6ab3-4659-8280-803f75dbd5e0" name="ID-5f88b493-6ab3-4659-8280-803f75dbd5e0"></a><span class="section-number-2">4</span> Example scenes in this repository</h2>
311 <div class="outline-text-2" id="text-4">
312 </div>
313 <div id="outline-container-sec-4-1" class="outline-3">
314 <h3 id="sec-4-1"><span class="section-number-3">4.1</span> Raytracing through voxels</h3>
315 <div class="outline-text-3" id="text-4-1">
316
317 <figure>
318 <p><img src="screenshots/raytracing fractal in voxel polygon hybrid scene.png" class="img-responsive" alt="raytracing fractal in voxel polygon hybrid scene.png">
319 </p>
320 </figure>
321
322 <p>
323 Test scene that is generated simultaneously using:
324 </p>
325 <ul class="org-ul">
326 <li>conventional polygons
327 <ul class="org-ul">
328 <li>for realtime navigation, and
329 </li>
330 </ul>
331 </li>
332 <li>voxels
333 <ul class="org-ul">
334 <li>for on-demand raytracing
335 </li>
336 </ul>
337 </li>
338 </ul>
339
340 <p>
341 Instead of storing voxels in dumb [X * Y * Z] array, dynamically
342 partitioned <a href="https://en.wikipedia.org/wiki/Octree">octree</a> is used to compress data. Press "r" key anywhere in
343 the scene to raytrace current view through compressed voxel
344 datastructure.
345 </p>
346 </div>
347 </div>
348
349 <div id="outline-container-sec-4-2" class="outline-3">
350 <h3 id="sec-4-2"><span class="section-number-3">4.2</span> Conway's Game of Life</h3>
351 <div class="outline-text-3" id="text-4-2">
352 <p>
353 The Game of Life, also known simply as Life, is a cellular automaton
354 devised by the British mathematician John Horton Conway in 1970.
355 </p>
356
357 <ul class="org-ul">
358 <li><a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">https://en.wikipedia.org/wiki/Conway's_Game_of_Life</a>
359 <ul class="org-ul">
360 <li>Game rules:
361 <ul class="org-ul">
362 <li>2 cell states: alive / dead
363 </li>
364 <li>Each cell sees 8 neighboring cells.
365 </li>
366 <li>If alive cell neighbors count is 2 or 3, then cell survives,
367 otherwise it dies.
368 </li>
369 <li>Dead cell becomes alive if neighbors count is exactly 3.
370 </li>
371 </ul>
372 </li>
373 </ul>
374 </li>
375 </ul>
376
377
378 <figure>
379 <p><img src="screenshots/life.png" class="img-responsive" alt="life.png">
380 </p>
381 </figure>
382
383 <p>
384 Current application projects 2D game grid/matrix onto three
385 dimensional space. Extra dimension (height) is used to visualize
386 history (previous iterations) using glowing dots suspended in space.
387 </p>
388
389 <p>
390 Usage:
391 </p>
392 <table class="table table-striped table-bordered table-hover table-condensed">
393
394
395 <colgroup>
396 <col  class="left">
397
398 <col  class="left">
399 </colgroup>
400 <thead>
401 <tr>
402 <th scope="col" class="text-left">key</th>
403 <th scope="col" class="text-left">result</th>
404 </tr>
405 </thead>
406 <tbody>
407 <tr>
408 <td class="text-left">mouse click on the cell (cell)</td>
409 <td class="text-left">toggles cell state</td>
410 </tr>
411
412 <tr>
413 <td class="text-left">&lt;space&gt;</td>
414 <td class="text-left">next iteration</td>
415 </tr>
416
417 <tr>
418 <td class="text-left">ENTER</td>
419 <td class="text-left">next iteeration with the history</td>
420 </tr>
421
422 <tr>
423 <td class="text-left">"c"</td>
424 <td class="text-left">clear the matrix</td>
425 </tr>
426 </tbody>
427 </table>
428 </div>
429 </div>
430
431 <div id="outline-container-sec-4-3" class="outline-3">
432 <h3 id="sec-4-3"><span class="section-number-3">4.3</span> Text editors</h3>
433 <div class="outline-text-3" id="text-4-3">
434
435 <figure>
436 <p><img src="screenshots/text editors.png" class="img-responsive" alt="text editors.png">
437 </p>
438 </figure>
439
440 <p>
441 Initial test for creating user interfaces in 3D and:
442 </p>
443 <ul class="org-ul">
444 <li>window focus handling
445 </li>
446 <li>picking objecs using mouse
447 </li>
448 <li>redirecting keyboard input to focused window
449 </li>
450 </ul>
451
452
453 <p>
454 Window focus acts like a stack.
455 </p>
456
457 <p>
458 When window is clicked with the mouse, previously focused window (if
459 any) is pushed to the focus stack and new window receives focus. Red
460 frame appears around the window to indicate this.
461 </p>
462
463 <p>
464 When ESC key is pressed, window focus is returned to previous window
465 (if any).
466 </p>
467
468 <p>
469 When any window is focused, all keyboard input is redirected to that
470 window, including cursor keys. To be able to navigate around the world
471 again, window must be unfocused first using ESC key.
472 </p>
473
474
475 <ul class="org-ul">
476 <li>TODO:
477 <ul class="org-ul">
478 <li>Improve focus handling:
479 <ul class="org-ul">
480 <li>Perhaps add shortcut to navigate world without exiting entire
481 stack of focus.
482 </li>
483 <li>Possibility to retain and reuse recently focused elements.
484 </li>
485 <li>Store user location in the world and view direction with the
486 focused window. So that when returning focus to far away object,
487 user is redirected also to proper location in the world.
488 </li>
489 </ul>
490 </li>
491 <li>Possibility to store recently visited locations in the world and
492 return to them.
493 </li>
494 </ul>
495 </li>
496 </ul>
497 </div>
498 </div>
499 <div id="outline-container-sec-4-4" class="outline-3">
500 <h3 id="sec-4-4"><span class="section-number-3">4.4</span> Mathematical formulas</h3>
501 <div class="outline-text-3" id="text-4-4">
502
503 <figure>
504 <p><img src="screenshots/mathematical formulas.png" class="img-responsive" alt="mathematical formulas.png">
505 </p>
506 </figure>
507
508 <ul class="org-ul">
509 <li>TODO: instead of projecting 2D visualizations onto 3D space,
510 visualize some formula using all 3 dimensions avaliable.
511 </li>
512 </ul>
513 </div>
514 </div>
515 <div id="outline-container-sec-4-5" class="outline-3">
516 <h3 id="sec-4-5"><span class="section-number-3">4.5</span> Sinus heightmaps and sphere</h3>
517 <div class="outline-text-3" id="text-4-5">
518
519 <figure>
520 <p><img src="screenshots/sinus heightmaps and sphere.png" class="img-responsive" alt="sinus heightmaps and sphere.png">
521 </p>
522 </figure>
523
524 <p>
525 Simple test scene. Easy to implement and looks nice.
526 </p>
527 </div>
528 </div>
529 </div>
530 </div><div class="col-md-3"><nav id="table-of-contents">
531 <div id="text-table-of-contents" class="bs-docs-sidebar">
532 <ul class="nav">
533 <li><a href="#sec-1">1. General</a>
534 <ul class="nav">
535 <li><a href="#sec-1-1">1.1. Source code</a></li>
536 </ul>
537 </li>
538 <li><a href="#sec-2">2. Overview</a></li>
539 <li><a href="#sec-3">3. Navigating in space</a></li>
540 <li><a href="#sec-4">4. Example scenes in this repository</a>
541 <ul class="nav">
542 <li><a href="#sec-4-1">4.1. Raytracing through voxels</a></li>
543 <li><a href="#sec-4-2">4.2. Conway's Game of Life</a></li>
544 <li><a href="#sec-4-3">4.3. Text editors</a></li>
545 <li><a href="#sec-4-4">4.4. Mathematical formulas</a></li>
546 <li><a href="#sec-4-5">4.5. Sinus heightmaps and sphere</a></li>
547 </ul>
548 </li>
549 </ul>
550 </div>
551 </nav>
552 </div></div></div>
553 <footer id="postamble" class="">
554 <div><p class="author">Author: Svjatoslav Agejenko</p>
555 <p class="date">Created: 2020-04-20 Mon 22:25</p>
556 <p class="creator"><a href="http://www.gnu.org/software/emacs/">Emacs</a> 26.1 (<a href="http://orgmode.org">Org-mode</a> 9.1.9)</p>
557 </div>
558 </footer>
559 </body>
560 </html>