Improved code readability. Components now aware of what mouse button was clicked.
[sixth-3d-demos.git] / 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>