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>