X-Git-Url: http://www2.svjatoslav.eu/gitweb/?a=blobdiff_plain;f=doc%2Findex.html;h=ec272aae8307ae9d6844c2dbd4c2b492003b56de;hb=d7a3b780c3a29346863a766640c474f6129425ed;hp=58ffedfc7bf75a592e4d228560e6cb89b6ded39b;hpb=a608c900b05f80516f0972d06098067d32544430;p=sixth-3d-demos.git

diff --git a/doc/index.html b/doc/index.html
index 58ffedf..ec272aa 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
 <title>Sixth 3D engine demos</title>
-<!-- 2017-06-13 Tue 08:13 -->
+<!-- 2017-11-29 Wed 23:57 -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="generator" content="Org-mode">
 <meta name="author" content="Svjatoslav Agejenko">
-<link href="https://bootswatch.com/darkly/bootstrap.min.css" rel="stylesheet">
+<link href="https://bootswatch.com/4/darkly/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>"
 <style type="text/css">
@@ -220,41 +220,302 @@ published by the Free Software Foundation.
 </ul>
 </li>
 
-<li><a href="http://svjatoslav.eu/programs.jsp">other applications hosted at svjatoslav.eu</a>
+<li><a href="http://www.svjatoslav.eu/programs.jsp">other applications hosted at svjatoslav.eu</a>
 </li>
 </ul>
 
 
 <div id="outline-container-sec-1" class="outline-2">
-<h2 id="sec-1"><span class="section-number-2">1</span> Description</h2>
+<h2 id="sec-1"><span class="section-number-2">1</span> Overview</h2>
 <div class="outline-text-2" id="text-1">
 <p>
-Goal of this project is to show off capabilities of <a href="http://www2.svjatoslav.eu/gitbrowse/sixth-3d/doc/index.html">Sixth 3D</a>
-engine. Also to show examples of its usage.
+Goal of this project is to show off capabilities and API usage of
+<a href="http://www2.svjatoslav.eu/gitbrowse/sixth-3d/doc/index.html">Sixth 3D</a> engine.
 </p>
 
+<p>
+All sample scenes below are rendered at interactive framerates.
+</p>
+</div>
+</div>
+<div id="outline-container-sec-2" class="outline-2">
+<h2 id="sec-2"><span class="section-number-2">2</span> Navigating in space</h2>
+<div class="outline-text-2" id="text-2">
+<table class="table table-striped table-bordered table-hover table-condensed">
+
+
+<colgroup>
+<col  class="left">
+
+<col  class="left">
+</colgroup>
+<thead>
+<tr>
+<th scope="col" class="text-left">key</th>
+<th scope="col" class="text-left">result</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="text-left">cursor keys</td>
+<td class="text-left">move: left, right, forward, backward</td>
+</tr>
+
+<tr>
+<td class="text-left">mouse scroll wheel</td>
+<td class="text-left">move: up, down</td>
+</tr>
+
+<tr>
+<td class="text-left">dragging with mouse</td>
+<td class="text-left">look around</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+
+<div id="outline-container-sec-3" class="outline-2">
+<h2 id="sec-3"><span class="section-number-2">3</span> Samples</h2>
+<div class="outline-text-2" id="text-3">
+</div><div id="outline-container-sec-3-1" class="outline-3">
+<h3 id="sec-3-1"><span class="section-number-3">3.1</span> Raytracing through voxels</h3>
+<div class="outline-text-3" id="text-3-1">
 
 <figure>
-<p><a href="screenshots/index.html"><img src="screenshots.png" class="img-responsive" alt="screenshots.png"></a>
+<p><img src="screenshots/raytracing fractal in voxel polygon hybrid scene.png" class="img-responsive" alt="raytracing fractal in voxel polygon hybrid scene.png">
 </p>
 </figure>
 
 <p>
-Sample scenes rendered at interactive framerates by Sixth 3D engine.
+Test scene that is generated simultaneously using:
+</p>
+<ul class="org-ul">
+<li>conventional polygons
+<ul class="org-ul">
+<li>for realtime navigation, and
+</li>
+</ul>
+</li>
+<li>voxels
+<ul class="org-ul">
+<li>for on-demand raytracing
+</li>
+</ul>
+</li>
+</ul>
+
+<p>
+Instead of storing voxels in dumb [X * Y * Z] array, dynamically
+partitioned <a href="https://en.wikipedia.org/wiki/Octree">octree</a> is used to compress data. Press "r" key anywhere in
+the scene to raytrace current view through compressed voxel
+datastructure.
 </p>
 </div>
 </div>
+
+<div id="outline-container-sec-3-2" class="outline-3">
+<h3 id="sec-3-2"><span class="section-number-3">3.2</span> Conway's Game of Life</h3>
+<div class="outline-text-3" id="text-3-2">
+<p>
+The Game of Life, also known simply as Life, is a cellular automaton
+devised by the British mathematician John Horton Conway in 1970.
+</p>
+
+<ul class="org-ul">
+<li><a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">https://en.wikipedia.org/wiki/Conway's_Game_of_Life</a>
+<ul class="org-ul">
+<li>Game rules:
+<ul class="org-ul">
+<li>2 cell states: alive / dead
+</li>
+<li>Each cell sees 8 neighboring cells.
+</li>
+<li>If alive cell neighbors count is 2 or 3, then cell survives,
+otherwise it dies.
+</li>
+<li>Dead cell becomes alive if neighbors count is exactly 3.
+</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<figure>
+<p><img src="screenshots/life.png" class="img-responsive" alt="life.png">
+</p>
+</figure>
+
+<p>
+Current application projects 2D game grid/matrix onto three
+dimensional space. Extra dimension (height) is used to visualize
+history (previous iterations) using glowing dots suspended in space.
+</p>
+
+<p>
+Usage:
+</p>
+<table class="table table-striped table-bordered table-hover table-condensed">
+
+
+<colgroup>
+<col  class="left">
+
+<col  class="left">
+</colgroup>
+<thead>
+<tr>
+<th scope="col" class="text-left">key</th>
+<th scope="col" class="text-left">result</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td class="text-left">mouse click on the cell (cell)</td>
+<td class="text-left">toggles cell state</td>
+</tr>
+
+<tr>
+<td class="text-left">&lt;space&gt;</td>
+<td class="text-left">next iteration</td>
+</tr>
+
+<tr>
+<td class="text-left">ENTER</td>
+<td class="text-left">next iteeration with the history</td>
+</tr>
+
+<tr>
+<td class="text-left">"c"</td>
+<td class="text-left">clear the matrix</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+
+<div id="outline-container-sec-3-3" class="outline-3">
+<h3 id="sec-3-3"><span class="section-number-3">3.3</span> Text editors</h3>
+<div class="outline-text-3" id="text-3-3">
+
+<figure>
+<p><img src="screenshots/text editors.png" class="img-responsive" alt="text editors.png">
+</p>
+</figure>
+
+<p>
+Initial test for creating user interfaces in 3D and:
+</p>
+<ul class="org-ul">
+<li>window focus handling
+</li>
+<li>picking objecs using mouse
+</li>
+<li>redirecting keyboard input to focused window
+</li>
+</ul>
+
+
+<p>
+Window focus acts like a stack.
+</p>
+
+<p>
+When window is clicked with the mouse, previously focused window (if
+any) is pushed to the focus stack and new window receives focus. Red
+frame appears around the window to indicate this.
+</p>
+
+<p>
+When ESC key is pressed, window focus is returned to previous window
+(if any).
+</p>
+
+<p>
+When any window is focused, all keyboard input is redirected to that
+window, including cursor keys. To be able to navigate around the world
+again, window must be unfocused first using ESC key.
+</p>
+
+
+<ul class="org-ul">
+<li>TODO:
+<ul class="org-ul">
+<li>Improve focus handling:
+<ul class="org-ul">
+<li>Perhaps add shortcut to navigate world without exiting entire
+stack of focus.
+</li>
+<li>Possibility to retain and reuse recently focused elements.
+</li>
+<li>Store user location in the world and view direction with the
+focused window. So that when returning focus to far away object,
+user is redirected also to proper location in the world.
+</li>
+</ul>
+</li>
+<li>Possibility to store recently visited locations in the world and
+return to them.
+</li>
+</ul>
+</li>
+</ul>
+</div>
+</div>
+<div id="outline-container-sec-3-4" class="outline-3">
+<h3 id="sec-3-4"><span class="section-number-3">3.4</span> Mathematical formulas</h3>
+<div class="outline-text-3" id="text-3-4">
+
+<figure>
+<p><img src="screenshots/mathematical formulas.png" class="img-responsive" alt="mathematical formulas.png">
+</p>
+</figure>
+
+<ul class="org-ul">
+<li>TODO: instead of projecting 2D visualizations onto 3D space,
+visualize some formula using all 3 dimensions avaliable.
+</li>
+</ul>
+</div>
+</div>
+<div id="outline-container-sec-3-5" class="outline-3">
+<h3 id="sec-3-5"><span class="section-number-3">3.5</span> Sinus heightmaps and sphere</h3>
+<div class="outline-text-3" id="text-3-5">
+
+<figure>
+<p><img src="screenshots/sinus heightmaps and sphere.png" class="img-responsive" alt="sinus heightmaps and sphere.png">
+</p>
+</figure>
+
+<p>
+Simple test scene. Easy to implement and looks nice.
+</p>
+</div>
+</div>
+</div>
 </div><div class="col-md-3"><nav id="table-of-contents">
 <div id="text-table-of-contents" class="bs-docs-sidebar">
 <ul class="nav">
-<li><a href="#sec-1">1. Description</a></li>
+<li><a href="#sec-1">1. Overview</a></li>
+<li><a href="#sec-2">2. Navigating in space</a></li>
+<li><a href="#sec-3">3. Samples</a>
+<ul class="nav">
+<li><a href="#sec-3-1">3.1. Raytracing through voxels</a></li>
+<li><a href="#sec-3-2">3.2. Conway's Game of Life</a></li>
+<li><a href="#sec-3-3">3.3. Text editors</a></li>
+<li><a href="#sec-3-4">3.4. Mathematical formulas</a></li>
+<li><a href="#sec-3-5">3.5. Sinus heightmaps and sphere</a></li>
+</ul>
+</li>
 </ul>
 </div>
 </nav>
 </div></div></div>
 <footer id="postamble" class="">
 <div><p class="author">Author: Svjatoslav Agejenko</p>
-<p class="date">Created: 2017-06-13 Tue 08:13</p>
+<p class="date">Created: 2017-11-29 Wed 23:57</p>
 <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>
 </div>
 </footer>
