doc/index.html

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   5 <head>
   6 <!-- 2021-05-29 Sat 05:01 -->
   7 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   8 <meta name="viewport" content="width=device-width, initial-scale=1" />
   9 <title>Sixth 3D engine demos</title>
  10 <meta name="generator" content="Org mode" />
  11 <meta name="author" content="Svjatoslav Agejenko" />
  12 <style type="text/css">
  13  <!--/*--><![CDATA[/*><!--*/
  14   .title  { text-align: center;
  15              margin-bottom: .2em; }
  16   .subtitle { text-align: center;
  17               font-size: medium;
  18               font-weight: bold;
  19               margin-top:0; }
  20   .todo   { font-family: monospace; color: red; }
  21   .done   { font-family: monospace; color: green; }
  22   .priority { font-family: monospace; color: orange; }
  23   .tag    { background-color: #eee; font-family: monospace;
  24             padding: 2px; font-size: 80%; font-weight: normal; }
  25   .timestamp { color: #bebebe; }
  26   .timestamp-kwd { color: #5f9ea0; }
  27   .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
  28   .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
  29   .org-center { margin-left: auto; margin-right: auto; text-align: center; }
  30   .underline { text-decoration: underline; }
  31   #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  32   p.verse { margin-left: 3%; }
  33   pre {
  34     border: 1px solid #ccc;
  35     box-shadow: 3px 3px 3px #eee;
  36     padding: 8pt;
  37     font-family: monospace;
  38     overflow: auto;
  39     margin: 1.2em;
  40   }
  41   pre.src {
  42     position: relative;
  43     overflow: auto;
  44     padding-top: 1.2em;
  45   }
  46   pre.src:before {
  47     display: none;
  48     position: absolute;
  49     background-color: white;
  50     top: -10px;
  51     right: 10px;
  52     padding: 3px;
  53     border: 1px solid black;
  54   }
  55   pre.src:hover:before { display: inline; margin-top: 14px;}
  56   /* Languages per Org manual */
  57   pre.src-asymptote:before { content: 'Asymptote'; }
  58   pre.src-awk:before { content: 'Awk'; }
  59   pre.src-C:before { content: 'C'; }
  60   /* pre.src-C++ doesn't work in CSS */
  61   pre.src-clojure:before { content: 'Clojure'; }
  62   pre.src-css:before { content: 'CSS'; }
  63   pre.src-D:before { content: 'D'; }
  64   pre.src-ditaa:before { content: 'ditaa'; }
  65   pre.src-dot:before { content: 'Graphviz'; }
  66   pre.src-calc:before { content: 'Emacs Calc'; }
  67   pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  68   pre.src-fortran:before { content: 'Fortran'; }
  69   pre.src-gnuplot:before { content: 'gnuplot'; }
  70   pre.src-haskell:before { content: 'Haskell'; }
  71   pre.src-hledger:before { content: 'hledger'; }
  72   pre.src-java:before { content: 'Java'; }
  73   pre.src-js:before { content: 'Javascript'; }
  74   pre.src-latex:before { content: 'LaTeX'; }
  75   pre.src-ledger:before { content: 'Ledger'; }
  76   pre.src-lisp:before { content: 'Lisp'; }
  77   pre.src-lilypond:before { content: 'Lilypond'; }
  78   pre.src-lua:before { content: 'Lua'; }
  79   pre.src-matlab:before { content: 'MATLAB'; }
  80   pre.src-mscgen:before { content: 'Mscgen'; }
  81   pre.src-ocaml:before { content: 'Objective Caml'; }
  82   pre.src-octave:before { content: 'Octave'; }
  83   pre.src-org:before { content: 'Org mode'; }
  84   pre.src-oz:before { content: 'OZ'; }
  85   pre.src-plantuml:before { content: 'Plantuml'; }
  86   pre.src-processing:before { content: 'Processing.js'; }
  87   pre.src-python:before { content: 'Python'; }
  88   pre.src-R:before { content: 'R'; }
  89   pre.src-ruby:before { content: 'Ruby'; }
  90   pre.src-sass:before { content: 'Sass'; }
  91   pre.src-scheme:before { content: 'Scheme'; }
  92   pre.src-screen:before { content: 'Gnu Screen'; }
  93   pre.src-sed:before { content: 'Sed'; }
  94   pre.src-sh:before { content: 'shell'; }
  95   pre.src-sql:before { content: 'SQL'; }
  96   pre.src-sqlite:before { content: 'SQLite'; }
  97   /* additional languages in org.el's org-babel-load-languages alist */
  98   pre.src-forth:before { content: 'Forth'; }
  99   pre.src-io:before { content: 'IO'; }
 100   pre.src-J:before { content: 'J'; }
 101   pre.src-makefile:before { content: 'Makefile'; }
 102   pre.src-maxima:before { content: 'Maxima'; }
 103   pre.src-perl:before { content: 'Perl'; }
 104   pre.src-picolisp:before { content: 'Pico Lisp'; }
 105   pre.src-scala:before { content: 'Scala'; }
 106   pre.src-shell:before { content: 'Shell Script'; }
 107   pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
 108   /* additional language identifiers per "defun org-babel-execute"
 109        in ob-*.el */
 110   pre.src-cpp:before  { content: 'C++'; }
 111   pre.src-abc:before  { content: 'ABC'; }
 112   pre.src-coq:before  { content: 'Coq'; }
 113   pre.src-groovy:before  { content: 'Groovy'; }
 114   /* additional language identifiers from org-babel-shell-names in
 115      ob-shell.el: ob-shell is the only babel language using a lambda to put
 116      the execution function name together. */
 117   pre.src-bash:before  { content: 'bash'; }
 118   pre.src-csh:before  { content: 'csh'; }
 119   pre.src-ash:before  { content: 'ash'; }
 120   pre.src-dash:before  { content: 'dash'; }
 121   pre.src-ksh:before  { content: 'ksh'; }
 122   pre.src-mksh:before  { content: 'mksh'; }
 123   pre.src-posh:before  { content: 'posh'; }
 124   /* Additional Emacs modes also supported by the LaTeX listings package */
 125   pre.src-ada:before { content: 'Ada'; }
 126   pre.src-asm:before { content: 'Assembler'; }
 127   pre.src-caml:before { content: 'Caml'; }
 128   pre.src-delphi:before { content: 'Delphi'; }
 129   pre.src-html:before { content: 'HTML'; }
 130   pre.src-idl:before { content: 'IDL'; }
 131   pre.src-mercury:before { content: 'Mercury'; }
 132   pre.src-metapost:before { content: 'MetaPost'; }
 133   pre.src-modula-2:before { content: 'Modula-2'; }
 134   pre.src-pascal:before { content: 'Pascal'; }
 135   pre.src-ps:before { content: 'PostScript'; }
 136   pre.src-prolog:before { content: 'Prolog'; }
 137   pre.src-simula:before { content: 'Simula'; }
 138   pre.src-tcl:before { content: 'tcl'; }
 139   pre.src-tex:before { content: 'TeX'; }
 140   pre.src-plain-tex:before { content: 'Plain TeX'; }
 141   pre.src-verilog:before { content: 'Verilog'; }
 142   pre.src-vhdl:before { content: 'VHDL'; }
 143   pre.src-xml:before { content: 'XML'; }
 144   pre.src-nxml:before { content: 'XML'; }
 145   /* add a generic configuration mode; LaTeX export needs an additional
 146      (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
 147   pre.src-conf:before { content: 'Configuration File'; }
 148
 149   table { border-collapse:collapse; }
 150   caption.t-above { caption-side: top; }
 151   caption.t-bottom { caption-side: bottom; }
 152   td, th { vertical-align:top;  }
 153   th.org-right  { text-align: center;  }
 154   th.org-left   { text-align: center;   }
 155   th.org-center { text-align: center; }
 156   td.org-right  { text-align: right;  }
 157   td.org-left   { text-align: left;   }
 158   td.org-center { text-align: center; }
 159   dt { font-weight: bold; }
 160   .footpara { display: inline; }
 161   .footdef  { margin-bottom: 1em; }
 162   .figure { padding: 1em; }
 163   .figure p { text-align: center; }
 164   .equation-container {
 165     display: table;
 166     text-align: center;
 167     width: 100%;
 168   }
 169   .equation {
 170     vertical-align: middle;
 171   }
 172   .equation-label {
 173     display: table-cell;
 174     text-align: right;
 175     vertical-align: middle;
 176   }
 177   .inlinetask {
 178     padding: 10px;
 179     border: 2px solid gray;
 180     margin: 10px;
 181     background: #ffffcc;
 182   }
 183   #org-div-home-and-up
 184    { text-align: right; font-size: 70%; white-space: nowrap; }
 185   textarea { overflow-x: auto; }
 186   .linenr { font-size: smaller }
 187   .code-highlighted { background-color: #ffff00; }
 188   .org-info-js_info-navigation { border-style: none; }
 189   #org-info-js_console-label
 190     { font-size: 10px; font-weight: bold; white-space: nowrap; }
 191   .org-info-js_search-highlight
 192     { background-color: #ffff00; color: #000000; font-weight: bold; }
 193   .org-svg { width: 90%; }
 194   /*]]>*/-->
 195 </style>
 196 <link rel="stylesheet" type="text/css" href="https://thomasf.github.io/solarized-css/solarized-dark.min.css" />
 197 <script type="text/javascript">
 198 // @license magnet:?xt=urn:btih:e95b018ef3580986a04669f1b5879592219e2a7a&dn=public-domain.txt Public Domain
 199 <!--/*--><![CDATA[/*><!--*/
 200      function CodeHighlightOn(elem, id)
 201      {
 202        var target = document.getElementById(id);
 203        if(null != target) {
 204          elem.classList.add("code-highlighted");
 205          target.classList.add("code-highlighted");
 206        }
 207      }
 208      function CodeHighlightOff(elem, id)
 209      {
 210        var target = document.getElementById(id);
 211        if(null != target) {
 212          elem.classList.remove("code-highlighted");
 213          target.classList.remove("code-highlighted");
 214        }
 215      }
 216     /*]]>*///-->
 217 // @license-end
 218 </script>
 219 </head>
 220 <body>
 221 <div id="content">
 222 <h1 class="title">Sixth 3D engine demos</h1>
 223 <div id="table-of-contents">
 224 <h2>Table of Contents</h2>
 225 <div id="text-table-of-contents">
 226 <ul>
 227 <li><a href="#org95d4b4a">1. General</a>
 228 <ul>
 229 <li><a href="#orgb4bf858">1.1. Source code</a></li>
 230 </ul>
 231 </li>
 232 <li><a href="#orgc815f60">2. Overview</a></li>
 233 <li><a href="#org8b7a7b2">3. Navigating in space</a></li>
 234 <li><a href="#org48ba3fe">4. Example scenes in this repository</a>
 235 <ul>
 236 <li><a href="#org00b3f6a">4.1. Raytracing through voxels</a></li>
 237 <li><a href="#orgc873cd5">4.2. Conway's Game of Life</a></li>
 238 <li><a href="#org45d4cba">4.3. Text editors</a></li>
 239 <li><a href="#orga981e88">4.4. Mathematical formulas</a></li>
 240 <li><a href="#org2f45bee">4.5. Sinus heightmaps and sphere</a></li>
 241 </ul>
 242 </li>
 243 </ul>
 244 </div>
 245 </div>
 246
 247 <div id="outline-container-org95d4b4a" class="outline-2">
 248 <h2 id="org95d4b4a"><span class="section-number-2">1</span> General</h2>
 249 <div class="outline-text-2" id="text-1">
 250 <ul class="org-ul">
 251 <li>This program is free software: released under Creative Commons Zero
 252 (CC0) license</li>
 253
 254 <li>Program author:
 255 <ul class="org-ul">
 256 <li>Svjatoslav Agejenko</li>
 257 <li>Homepage: <a href="https://svjatoslav.eu">https://svjatoslav.eu</a></li>
 258 <li>Email: <a href="mailto://svjatoslav@svjatoslav.eu">mailto://svjatoslav@svjatoslav.eu</a></li>
 259 </ul></li>
 260
 261 <li><a href="https://www.svjatoslav.eu/projects/">Other software projects hosted at svjatoslav.eu</a></li>
 262 </ul>
 263 </div>
 264
 265 <div id="outline-container-orgb4bf858" class="outline-3">
 266 <h3 id="orgb4bf858"><span class="section-number-3">1.1</span> Source code</h3>
 267 <div class="outline-text-3" id="text-1-1">
 268 <ul class="org-ul">
 269 <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></li>
 270
 271 <li><a href="https://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=summary">Browse Git repository online</a></li>
 272
 273 <li><p>
 274 Clone Git repository using command:
 275 </p>
 276 <pre class="example">
 277 git clone https://www2.svjatoslav.eu/git/sixth-3d-demos.git
 278 </pre></li>
 279 </ul>
 280 </div>
 281 </div>
 282 </div>
 283
 284 <div id="outline-container-orgc815f60" class="outline-2">
 285 <h2 id="orgc815f60"><span class="section-number-2">2</span> Overview</h2>
 286 <div class="outline-text-2" id="text-2">
 287 <p>
 288 Goal of this project is to show off capabilities and API usage of
 289 <a href="https://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a> engine.
 290 </p>
 291
 292 <p>
 293 All <a href="#org48ba3fe">example scenes in this repository</a> render at interactive
 294 framerates.
 295 </p>
 296
 297 <p>
 298 Download runnable JAR file: <a href="sixth-3d-demos.jar">sixth-3d-demos.jar</a>
 299 </p>
 300
 301 <p>
 302 To start demo application, use command:
 303 </p>
 304 <pre class="example">
 305 java -jar sixth-3d-demos.jar
 306 </pre>
 307 </div>
 308 </div>
 309
 310 <div id="outline-container-org8b7a7b2" class="outline-2">
 311 <h2 id="org8b7a7b2"><span class="section-number-2">3</span> Navigating in space</h2>
 312 <div class="outline-text-2" id="text-3">
 313 <table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
 314
 315
 316 <colgroup>
 317 <col  class="org-left" />
 318
 319 <col  class="org-left" />
 320 </colgroup>
 321 <thead>
 322 <tr>
 323 <th scope="col" class="org-left">key</th>
 324 <th scope="col" class="org-left">result</th>
 325 </tr>
 326 </thead>
 327 <tbody>
 328 <tr>
 329 <td class="org-left">cursor keys</td>
 330 <td class="org-left">move: left, right, forward, backward</td>
 331 </tr>
 332
 333 <tr>
 334 <td class="org-left">mouse scroll wheel</td>
 335 <td class="org-left">move: up, down</td>
 336 </tr>
 337
 338 <tr>
 339 <td class="org-left">dragging with mouse</td>
 340 <td class="org-left">look around</td>
 341 </tr>
 342 </tbody>
 343 </table>
 344 </div>
 345 </div>
 346
 347 <div id="outline-container-org48ba3fe" class="outline-2">
 348 <h2 id="org48ba3fe"><span class="section-number-2">4</span> Example scenes in this repository</h2>
 349 <div class="outline-text-2" id="text-4">
 350 </div>
 351 <div id="outline-container-org00b3f6a" class="outline-3">
 352 <h3 id="org00b3f6a"><span class="section-number-3">4.1</span> Raytracing through voxels</h3>
 353 <div class="outline-text-3" id="text-4-1">
 354
 355 <div id="org4c3989b" class="figure">
 356 <p><img src="screenshots/raytracing fractal in voxel polygon hybrid scene.png" alt="raytracing fractal in voxel polygon hybrid scene.png" />
 357 </p>
 358 </div>
 359
 360 <p>
 361 Test scene that is generated simultaneously using:
 362 </p>
 363 <ul class="org-ul">
 364 <li>conventional polygons
 365 <ul class="org-ul">
 366 <li>for realtime navigation, and</li>
 367 </ul></li>
 368 <li>voxels
 369 <ul class="org-ul">
 370 <li>for on-demand raytracing</li>
 371 </ul></li>
 372 </ul>
 373
 374 <p>
 375 Instead of storing voxels in dumb [X * Y * Z] array, dynamically
 376 partitioned <a href="https://en.wikipedia.org/wiki/Octree">octree</a> is used to compress data. Press "r" key anywhere in
 377 the scene to raytrace current view through compressed voxel
 378 datastructure.
 379 </p>
 380 </div>
 381 </div>
 382
 383 <div id="outline-container-orgc873cd5" class="outline-3">
 384 <h3 id="orgc873cd5"><span class="section-number-3">4.2</span> Conway's Game of Life</h3>
 385 <div class="outline-text-3" id="text-4-2">
 386 <p>
 387 The Game of Life, also known simply as Life, is a cellular automaton
 388 devised by the British mathematician John Horton Conway in 1970.
 389 </p>
 390
 391 <ul class="org-ul">
 392 <li><a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>
 393 <ul class="org-ul">
 394 <li>Game rules:
 395 <ul class="org-ul">
 396 <li>2 cell states: alive / dead</li>
 397 <li>Each cell sees 8 neighboring cells.</li>
 398 <li>If alive cell neighbors count is 2 or 3, then cell survives,
 399 otherwise it dies.</li>
 400 <li>Dead cell becomes alive if neighbors count is exactly 3.</li>
 401 </ul></li>
 402 </ul></li>
 403 </ul>
 404
 405
 406 <div id="org06856d1" class="figure">
 407 <p><img src="screenshots/life.png" alt="life.png" />
 408 </p>
 409 </div>
 410
 411 <p>
 412 Current application projects 2D game grid/matrix onto three
 413 dimensional space. Extra dimension (height) is used to visualize
 414 history (previous iterations) using glowing dots suspended in space.
 415 </p>
 416
 417 <p>
 418 Usage:
 419 </p>
 420 <table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
 421
 422
 423 <colgroup>
 424 <col  class="org-left" />
 425
 426 <col  class="org-left" />
 427 </colgroup>
 428 <thead>
 429 <tr>
 430 <th scope="col" class="org-left">key</th>
 431 <th scope="col" class="org-left">result</th>
 432 </tr>
 433 </thead>
 434 <tbody>
 435 <tr>
 436 <td class="org-left">mouse click on the cell (cell)</td>
 437 <td class="org-left">toggles cell state</td>
 438 </tr>
 439
 440 <tr>
 441 <td class="org-left">&lt;space&gt;</td>
 442 <td class="org-left">next iteration</td>
 443 </tr>
 444
 445 <tr>
 446 <td class="org-left">ENTER</td>
 447 <td class="org-left">next iteeration with the history</td>
 448 </tr>
 449
 450 <tr>
 451 <td class="org-left">"c"</td>
 452 <td class="org-left">clear the matrix</td>
 453 </tr>
 454 </tbody>
 455 </table>
 456 </div>
 457 </div>
 458
 459 <div id="outline-container-org45d4cba" class="outline-3">
 460 <h3 id="org45d4cba"><span class="section-number-3">4.3</span> Text editors</h3>
 461 <div class="outline-text-3" id="text-4-3">
 462
 463 <div id="orgd8ec036" class="figure">
 464 <p><img src="screenshots/text editors.png" alt="text editors.png" />
 465 </p>
 466 </div>
 467
 468 <p>
 469 Initial test for creating user interfaces in 3D and:
 470 </p>
 471 <ul class="org-ul">
 472 <li>window focus handling</li>
 473 <li>picking objecs using mouse</li>
 474 <li>redirecting keyboard input to focused window</li>
 475 </ul>
 476
 477
 478 <p>
 479 Window focus acts like a stack.
 480 </p>
 481
 482 <p>
 483 When window is clicked with the mouse, previously focused window (if
 484 any) is pushed to the focus stack and new window receives focus. Red
 485 frame appears around the window to indicate this.
 486 </p>
 487
 488 <p>
 489 When ESC key is pressed, window focus is returned to previous window
 490 (if any).
 491 </p>
 492
 493 <p>
 494 When any window is focused, all keyboard input is redirected to that
 495 window, including cursor keys. To be able to navigate around the world
 496 again, window must be unfocused first using ESC key.
 497 </p>
 498
 499
 500 <ul class="org-ul">
 501 <li>TODO:
 502 <ul class="org-ul">
 503 <li>Improve focus handling:
 504 <ul class="org-ul">
 505 <li>Perhaps add shortcut to navigate world without exiting entire
 506 stack of focus.</li>
 507 <li>Possibility to retain and reuse recently focused elements.</li>
 508 <li>Store user location in the world and view direction with the
 509 focused window. So that when returning focus to far away object,
 510 user is redirected also to proper location in the world.</li>
 511 </ul></li>
 512 <li>Possibility to store recently visited locations in the world and
 513 return to them.</li>
 514 </ul></li>
 515 </ul>
 516
 517 <p>
 518 <b>Quite a lot of text editors can be rendered:</b>
 519 </p>
 520
 521
 522 <div id="orgc510a03" class="figure">
 523 <p><img src="screenshots/text editors 2.png" alt="text editors 2.png" />
 524 </p>
 525 </div>
 526 </div>
 527 </div>
 528 <div id="outline-container-orga981e88" class="outline-3">
 529 <h3 id="orga981e88"><span class="section-number-3">4.4</span> Mathematical formulas</h3>
 530 <div class="outline-text-3" id="text-4-4">
 531
 532 <div id="org67b5695" class="figure">
 533 <p><img src="screenshots/mathematical formulas.png" alt="mathematical formulas.png" />
 534 </p>
 535 </div>
 536
 537 <ul class="org-ul">
 538 <li>TODO: instead of projecting 2D visualizations onto 3D space,
 539 visualize some formula using all 3 dimensions avaliable.</li>
 540 </ul>
 541 </div>
 542 </div>
 543 <div id="outline-container-org2f45bee" class="outline-3">
 544 <h3 id="org2f45bee"><span class="section-number-3">4.5</span> Sinus heightmaps and sphere</h3>
 545 <div class="outline-text-3" id="text-4-5">
 546
 547 <div id="org63e266a" class="figure">
 548 <p><img src="screenshots/sinus heightmaps and sphere.png" alt="sinus heightmaps and sphere.png" />
 549 </p>
 550 </div>
 551
 552 <p>
 553 Simple test scene. Easy to implement and looks nice.
 554 </p>
 555 </div>
 556 </div>
 557 </div>
 558 </div>
 559 <div id="postamble" class="status">
 560 <p class="author">Author: Svjatoslav Agejenko</p>
 561 <p class="date">Created: 2021-05-29 Sat 05:01</p>
 562 <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
 563 </div>
 564 </body>
 565 </html>