doc/index.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4 <title>Sixth 3D engine demos</title>
   5 <!-- 2020-01-31 R 17:28 -->
   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 is a subproject of <a href="https://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a>:
 205 <ul class="org-ul">
 206 <li>which in turn is a subproject of parent project <a href="https://www3.svjatoslav.eu/projects/sixth/">Sixth</a>.
 207 </li>
 208 </ul>
 209 </li>
 210
 211 <li>This program is free software: you can redistribute it and/or modify
 212 it under the terms of the <a href="https://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a> as
 213 published by the Free Software Foundation, either version 3 of the
 214 License, or (at your option) any later version.
 215 </li>
 216
 217 <li>Program author:
 218 <ul class="org-ul">
 219 <li>Svjatoslav Agejenko
 220 </li>
 221 <li>Homepage: <a href="https://svjatoslav.eu">https://svjatoslav.eu</a>
 222 </li>
 223 <li>Email: <a href="mailto://svjatoslav@svjatoslav.eu">mailto://svjatoslav@svjatoslav.eu</a>
 224 </li>
 225 </ul>
 226 </li>
 227
 228 <li><a href="https://www.svjatoslav.eu/projects/">Other software projects hosted at svjatoslav.eu</a>
 229 </li>
 230 </ul>
 231 </div>
 232
 233 <div id="outline-container-sec-1-1" class="outline-3">
 234 <h3 id="sec-1-1"><span class="section-number-3">1.1</span> Source code</h3>
 235 <div class="outline-text-3" id="text-1-1">
 236 <ul class="org-ul">
 237 <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>
 238 </li>
 239
 240 <li><a href="https://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=summary">Browse Git repository online</a>
 241 </li>
 242
 243 <li>Clone Git repository using command:
 244 <pre class="example">
 245 git clone https://www2.svjatoslav.eu/git/sixth-3d-demos.git
 246
 247 </pre>
 248 </li>
 249 </ul>
 250 </div>
 251 </div>
 252 </div>
 253
 254 <div id="outline-container-sec-2" class="outline-2">
 255 <h2 id="sec-2"><span class="section-number-2">2</span> Overview</h2>
 256 <div class="outline-text-2" id="text-2">
 257 <p>
 258 Goal of this project is to show off capabilities and API usage of
 259 <a href="https://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a> engine.
 260 </p>
 261
 262 <p>
 263 All <a href="#sec-4">example scenes in this repository</a> render at interactive
 264 framerates.
 265 </p>
 266
 267 <p>
 268 Download runnable JAR file: <a href="sixth-3d-demos.jar">sixth-3d-demos.jar</a>
 269 </p>
 270
 271 <p>
 272 To start demo application, use command:
 273 </p>
 274 <pre class="example">
 275 java -jar sixth-3d-demos.jar
 276
 277 </pre>
 278 </div>
 279 </div>
 280
 281 <div id="outline-container-sec-3" class="outline-2">
 282 <h2 id="sec-3"><span class="section-number-2">3</span> Navigating in space</h2>
 283 <div class="outline-text-2" id="text-3">
 284 <table class="table table-striped table-bordered table-hover table-condensed">
 285
 286
 287 <colgroup>
 288 <col  class="left">
 289
 290 <col  class="left">
 291 </colgroup>
 292 <thead>
 293 <tr>
 294 <th scope="col" class="text-left">key</th>
 295 <th scope="col" class="text-left">result</th>
 296 </tr>
 297 </thead>
 298 <tbody>
 299 <tr>
 300 <td class="text-left">cursor keys</td>
 301 <td class="text-left">move: left, right, forward, backward</td>
 302 </tr>
 303
 304 <tr>
 305 <td class="text-left">mouse scroll wheel</td>
 306 <td class="text-left">move: up, down</td>
 307 </tr>
 308
 309 <tr>
 310 <td class="text-left">dragging with mouse</td>
 311 <td class="text-left">look around</td>
 312 </tr>
 313 </tbody>
 314 </table>
 315 </div>
 316 </div>
 317
 318 <div id="outline-container-sec-4" class="outline-2">
 319 <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>
 320 <div class="outline-text-2" id="text-4">
 321 </div>
 322 <div id="outline-container-sec-4-1" class="outline-3">
 323 <h3 id="sec-4-1"><span class="section-number-3">4.1</span> Raytracing through voxels</h3>
 324 <div class="outline-text-3" id="text-4-1">
 325
 326 <figure>
 327 <p><img src="screenshots/raytracing fractal in voxel polygon hybrid scene.png" class="img-responsive" alt="raytracing fractal in voxel polygon hybrid scene.png">
 328 </p>
 329 </figure>
 330
 331 <p>
 332 Test scene that is generated simultaneously using:
 333 </p>
 334 <ul class="org-ul">
 335 <li>conventional polygons
 336 <ul class="org-ul">
 337 <li>for realtime navigation, and
 338 </li>
 339 </ul>
 340 </li>
 341 <li>voxels
 342 <ul class="org-ul">
 343 <li>for on-demand raytracing
 344 </li>
 345 </ul>
 346 </li>
 347 </ul>
 348
 349 <p>
 350 Instead of storing voxels in dumb [X * Y * Z] array, dynamically
 351 partitioned <a href="https://en.wikipedia.org/wiki/Octree">octree</a> is used to compress data. Press "r" key anywhere in
 352 the scene to raytrace current view through compressed voxel
 353 datastructure.
 354 </p>
 355 </div>
 356 </div>
 357
 358 <div id="outline-container-sec-4-2" class="outline-3">
 359 <h3 id="sec-4-2"><span class="section-number-3">4.2</span> Conway's Game of Life</h3>
 360 <div class="outline-text-3" id="text-4-2">
 361 <p>
 362 The Game of Life, also known simply as Life, is a cellular automaton
 363 devised by the British mathematician John Horton Conway in 1970.
 364 </p>
 365
 366 <ul class="org-ul">
 367 <li><a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">https://en.wikipedia.org/wiki/Conway's_Game_of_Life</a>
 368 <ul class="org-ul">
 369 <li>Game rules:
 370 <ul class="org-ul">
 371 <li>2 cell states: alive / dead
 372 </li>
 373 <li>Each cell sees 8 neighboring cells.
 374 </li>
 375 <li>If alive cell neighbors count is 2 or 3, then cell survives,
 376 otherwise it dies.
 377 </li>
 378 <li>Dead cell becomes alive if neighbors count is exactly 3.
 379 </li>
 380 </ul>
 381 </li>
 382 </ul>
 383 </li>
 384 </ul>
 385
 386
 387 <figure>
 388 <p><img src="screenshots/life.png" class="img-responsive" alt="life.png">
 389 </p>
 390 </figure>
 391
 392 <p>
 393 Current application projects 2D game grid/matrix onto three
 394 dimensional space. Extra dimension (height) is used to visualize
 395 history (previous iterations) using glowing dots suspended in space.
 396 </p>
 397
 398 <p>
 399 Usage:
 400 </p>
 401 <table class="table table-striped table-bordered table-hover table-condensed">
 402
 403
 404 <colgroup>
 405 <col  class="left">
 406
 407 <col  class="left">
 408 </colgroup>
 409 <thead>
 410 <tr>
 411 <th scope="col" class="text-left">key</th>
 412 <th scope="col" class="text-left">result</th>
 413 </tr>
 414 </thead>
 415 <tbody>
 416 <tr>
 417 <td class="text-left">mouse click on the cell (cell)</td>
 418 <td class="text-left">toggles cell state</td>
 419 </tr>
 420
 421 <tr>
 422 <td class="text-left">&lt;space&gt;</td>
 423 <td class="text-left">next iteration</td>
 424 </tr>
 425
 426 <tr>
 427 <td class="text-left">ENTER</td>
 428 <td class="text-left">next iteeration with the history</td>
 429 </tr>
 430
 431 <tr>
 432 <td class="text-left">"c"</td>
 433 <td class="text-left">clear the matrix</td>
 434 </tr>
 435 </tbody>
 436 </table>
 437 </div>
 438 </div>
 439
 440 <div id="outline-container-sec-4-3" class="outline-3">
 441 <h3 id="sec-4-3"><span class="section-number-3">4.3</span> Text editors</h3>
 442 <div class="outline-text-3" id="text-4-3">
 443
 444 <figure>
 445 <p><img src="screenshots/text editors.png" class="img-responsive" alt="text editors.png">
 446 </p>
 447 </figure>
 448
 449 <p>
 450 Initial test for creating user interfaces in 3D and:
 451 </p>
 452 <ul class="org-ul">
 453 <li>window focus handling
 454 </li>
 455 <li>picking objecs using mouse
 456 </li>
 457 <li>redirecting keyboard input to focused window
 458 </li>
 459 </ul>
 460
 461
 462 <p>
 463 Window focus acts like a stack.
 464 </p>
 465
 466 <p>
 467 When window is clicked with the mouse, previously focused window (if
 468 any) is pushed to the focus stack and new window receives focus. Red
 469 frame appears around the window to indicate this.
 470 </p>
 471
 472 <p>
 473 When ESC key is pressed, window focus is returned to previous window
 474 (if any).
 475 </p>
 476
 477 <p>
 478 When any window is focused, all keyboard input is redirected to that
 479 window, including cursor keys. To be able to navigate around the world
 480 again, window must be unfocused first using ESC key.
 481 </p>
 482
 483
 484 <ul class="org-ul">
 485 <li>TODO:
 486 <ul class="org-ul">
 487 <li>Improve focus handling:
 488 <ul class="org-ul">
 489 <li>Perhaps add shortcut to navigate world without exiting entire
 490 stack of focus.
 491 </li>
 492 <li>Possibility to retain and reuse recently focused elements.
 493 </li>
 494 <li>Store user location in the world and view direction with the
 495 focused window. So that when returning focus to far away object,
 496 user is redirected also to proper location in the world.
 497 </li>
 498 </ul>
 499 </li>
 500 <li>Possibility to store recently visited locations in the world and
 501 return to them.
 502 </li>
 503 </ul>
 504 </li>
 505 </ul>
 506 </div>
 507 </div>
 508 <div id="outline-container-sec-4-4" class="outline-3">
 509 <h3 id="sec-4-4"><span class="section-number-3">4.4</span> Mathematical formulas</h3>
 510 <div class="outline-text-3" id="text-4-4">
 511
 512 <figure>
 513 <p><img src="screenshots/mathematical formulas.png" class="img-responsive" alt="mathematical formulas.png">
 514 </p>
 515 </figure>
 516
 517 <ul class="org-ul">
 518 <li>TODO: instead of projecting 2D visualizations onto 3D space,
 519 visualize some formula using all 3 dimensions avaliable.
 520 </li>
 521 </ul>
 522 </div>
 523 </div>
 524 <div id="outline-container-sec-4-5" class="outline-3">
 525 <h3 id="sec-4-5"><span class="section-number-3">4.5</span> Sinus heightmaps and sphere</h3>
 526 <div class="outline-text-3" id="text-4-5">
 527
 528 <figure>
 529 <p><img src="screenshots/sinus heightmaps and sphere.png" class="img-responsive" alt="sinus heightmaps and sphere.png">
 530 </p>
 531 </figure>
 532
 533 <p>
 534 Simple test scene. Easy to implement and looks nice.
 535 </p>
 536 </div>
 537 </div>
 538 </div>
 539 </div><div class="col-md-3"><nav id="table-of-contents">
 540 <div id="text-table-of-contents" class="bs-docs-sidebar">
 541 <ul class="nav">
 542 <li><a href="#sec-1">1. General</a>
 543 <ul class="nav">
 544 <li><a href="#sec-1-1">1.1. Source code</a></li>
 545 </ul>
 546 </li>
 547 <li><a href="#sec-2">2. Overview</a></li>
 548 <li><a href="#sec-3">3. Navigating in space</a></li>
 549 <li><a href="#sec-4">4. Example scenes in this repository</a>
 550 <ul class="nav">
 551 <li><a href="#sec-4-1">4.1. Raytracing through voxels</a></li>
 552 <li><a href="#sec-4-2">4.2. Conway's Game of Life</a></li>
 553 <li><a href="#sec-4-3">4.3. Text editors</a></li>
 554 <li><a href="#sec-4-4">4.4. Mathematical formulas</a></li>
 555 <li><a href="#sec-4-5">4.5. Sinus heightmaps and sphere</a></li>
 556 </ul>
 557 </li>
 558 </ul>
 559 </div>
 560 </nav>
 561 </div></div></div>
 562 <footer id="postamble" class="">
 563 <div><p class="author">Author: Svjatoslav Agejenko</p>
 564 <p class="date">Created: 2020-01-31 R 17:28</p>
 565 <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>
 566 </div>
 567 </footer>
 568 </body>
 569 </html>