doc/index.html

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