-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<!doctype html>
+<html lang="en">
<head>
-<!-- 2016-08-03 Wed 23:35 -->
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sixth 3D engine demos</title>
-<meta name="generator" content="Org-mode" />
-<meta name="author" content="Svjatoslav Agejenko" />
+<!-- 2018-06-24 Sun 02:37 -->
+<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/3/darkly/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
- <!--/*--><![CDATA[/*><!--*/
- .title { text-align: center;
- margin-bottom: .2em; }
- .subtitle { text-align: center;
- font-size: medium;
- font-weight: bold;
- margin-top:0; }
- .todo { font-family: monospace; color: red; }
- .done { font-family: monospace; color: green; }
- .priority { font-family: monospace; color: orange; }
- .tag { background-color: #eee; font-family: monospace;
- padding: 2px; font-size: 80%; font-weight: normal; }
- .timestamp { color: #bebebe; }
- .timestamp-kwd { color: #5f9ea0; }
- .org-right { margin-left: auto; margin-right: 0px; text-align: right; }
- .org-left { margin-left: 0px; margin-right: auto; text-align: left; }
- .org-center { margin-left: auto; margin-right: auto; text-align: center; }
- .underline { text-decoration: underline; }
- #postamble p, #preamble p { font-size: 90%; margin: .2em; }
- p.verse { margin-left: 3%; }
- pre {
- border: 1px solid #ccc;
- box-shadow: 3px 3px 3px #eee;
- padding: 8pt;
- font-family: monospace;
- overflow: auto;
- margin: 1.2em;
- }
- pre.src {
+footer {background-color: #111 !important;}
+pre {background-color: #111; color: #ccc;}
+</style>
+<style type="text/css">
+/* org mode styles on top of twbs */
+
+html {
position: relative;
- overflow: visible;
- padding-top: 1.2em;
- }
- pre.src:before {
- display: none;
+ min-height: 100%;
+}
+
+body {
+ font-size: 18px;
+ margin-bottom: 105px;
+}
+
+footer {
position: absolute;
- background-color: white;
- top: -10px;
- right: 10px;
- padding: 3px;
- border: 1px solid black;
- }
- pre.src:hover:before { display: inline;}
- pre.src-sh:before { content: 'sh'; }
- pre.src-bash:before { content: 'sh'; }
- pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
- pre.src-R:before { content: 'R'; }
- pre.src-perl:before { content: 'Perl'; }
- pre.src-java:before { content: 'Java'; }
- pre.src-sql:before { content: 'SQL'; }
-
- table { border-collapse:collapse; }
- caption.t-above { caption-side: top; }
- caption.t-bottom { caption-side: bottom; }
- td, th { vertical-align:top; }
- th.org-right { text-align: center; }
- th.org-left { text-align: center; }
- th.org-center { text-align: center; }
- td.org-right { text-align: right; }
- td.org-left { text-align: left; }
- td.org-center { text-align: center; }
- dt { font-weight: bold; }
- .footpara { display: inline; }
- .footdef { margin-bottom: 1em; }
- .figure { padding: 1em; }
- .figure p { text-align: center; }
- .inlinetask {
+ bottom: 0;
+ width: 100%;
+ height: 101px;
+ background-color: #f5f5f5;
+}
+
+footer > div {
padding: 10px;
- border: 2px solid gray;
- margin: 10px;
- background: #ffffcc;
- }
- #org-div-home-and-up
- { text-align: right; font-size: 70%; white-space: nowrap; }
- textarea { overflow-x: auto; }
- .linenr { font-size: smaller }
- .code-highlighted { background-color: #ffff00; }
- .org-info-js_info-navigation { border-style: none; }
- #org-info-js_console-label
- { font-size: 10px; font-weight: bold; white-space: nowrap; }
- .org-info-js_search-highlight
- { background-color: #ffff00; color: #000000; font-weight: bold; }
- /*]]>*/-->
+}
+
+footer p {
+ margin: 0 0 5px;
+ text-align: center;
+ font-size: 16px;
+}
+
+#table-of-contents {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+blockquote p {
+ font-size: 18px;
+}
+
+pre {
+ font-size: 16px;
+}
+
+.footpara {
+ display: inline-block;
+}
+
+figcaption {
+ font-size: 16px;
+ color: #666;
+ font-style: italic;
+ padding-bottom: 15px;
+}
+
+/* from twbs docs */
+
+.bs-docs-sidebar.affix {
+ position: static;
+}
+@media (min-width: 768px) {
+ .bs-docs-sidebar {
+ padding-left: 20px;
+ }
+}
+
+/* All levels of nav */
+.bs-docs-sidebar .nav > li > a {
+ display: block;
+ padding: 4px 20px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #999;
+}
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+ padding-left: 19px;
+ color: #A1283B;
+ text-decoration: none;
+ background-color: transparent;
+ border-left: 1px solid #A1283B;
+}
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
+ padding-left: 18px;
+ font-weight: bold;
+ color: #A1283B;
+ background-color: transparent;
+ border-left: 2px solid #A1283B;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-docs-sidebar .nav .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav > li > a:hover,
+.bs-docs-sidebar .nav .nav > li > a:focus {
+ padding-left: 29px;
+}
+.bs-docs-sidebar .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav > .active:focus > a {
+ padding-left: 28px;
+ font-weight: 500;
+}
+
+/* Nav: third level (shown on .active) */
+.bs-docs-sidebar .nav .nav .nav {
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 40px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav .nav > li > a:hover,
+.bs-docs-sidebar .nav .nav .nav > li > a:focus {
+ padding-left: 39px;
+}
+.bs-docs-sidebar .nav .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav .nav > .active:focus > a {
+ padding-left: 38px;
+ font-weight: 500;
+}
+
+/* Show and affix the side nav when space allows it */
+@media (min-width: 992px) {
+ .bs-docs-sidebar .nav > .active > ul {
+ display: block;
+ }
+ /* Widen the fixed sidebar */
+ .bs-docs-sidebar.affix,
+ .bs-docs-sidebar.affix-bottom {
+ width: 213px;
+ }
+ .bs-docs-sidebar.affix {
+ position: fixed; /* Undo the static from mobile first approach */
+ top: 20px;
+ }
+ .bs-docs-sidebar.affix-bottom {
+ position: absolute; /* Undo the static from mobile first approach */
+ }
+ .bs-docs-sidebar.affix .bs-docs-sidenav,.bs-docs-sidebar.affix-bottom .bs-docs-sidenav {
+ margin-top: 0;
+ margin-bottom: 0
+ }
+}
+@media (min-width: 1200px) {
+ /* Widen the fixed sidebar again */
+ .bs-docs-sidebar.affix-bottom,
+ .bs-docs-sidebar.affix {
+ width: 263px;
+ }
+}
</style>
-<link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-dark.min.css" />
<script type="text/javascript">
-/*
-@licstart The following is the entire license notice for the
-JavaScript code in this tag.
-
-Copyright (C) 2012-2013 Free Software Foundation, Inc.
-
-The JavaScript code in this tag is free software: you can
-redistribute it and/or modify it under the terms of the GNU
-General Public License (GNU GPL) as published by the Free Software
-Foundation, either version 3 of the License, or (at your option)
-any later version. The code is distributed WITHOUT ANY WARRANTY;
-without even the implied warranty of MERCHANTABILITY or FITNESS
-FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
-
-As additional permission under GNU GPL version 3 section 7, you
-may distribute non-source (e.g., minimized or compacted) forms of
-that code without the copy of the GNU GPL normally required by
-section 4, provided you include this license notice and a URL
-through which recipients can access the Corresponding Source.
-
-
-@licend The above is the entire license notice
-for the JavaScript code in this tag.
-*/
-<!--/*--><![CDATA[/*><!--*/
- function CodeHighlightOn(elem, id)
- {
- var target = document.getElementById(id);
- if(null != target) {
- elem.cacheClassElem = elem.className;
- elem.cacheClassTarget = target.className;
- target.className = "code-highlighted";
- elem.className = "code-highlighted";
- }
- }
- function CodeHighlightOff(elem, id)
- {
- var target = document.getElementById(id);
- if(elem.cacheClassElem)
- elem.className = elem.cacheClassElem;
- if(elem.cacheClassTarget)
- target.className = elem.cacheClassTarget;
- }
-/*]]>*///-->
+$(function() {
+ 'use strict';
+
+ $('.bs-docs-sidebar li').first().addClass('active');
+
+ $(document.body).scrollspy({target: '.bs-docs-sidebar'});
+
+ $('.bs-docs-sidebar').affix();
+});
</script>
</head>
<body>
-<div id="content">
-<h1 class="title">Sixth 3D engine demos</h1>
-<div id="table-of-contents">
-<h2>Table of Contents</h2>
-<div id="text-table-of-contents">
-<ul>
-<li><a href="#orgheadline1">1. Description</a></li>
+<div id="content" class="container">
+<div class="row"><div class="col-md-9"><h1 class="title">Sixth 3D engine demos</h1>
+
+<div id="outline-container-sec-1" class="outline-2">
+<h2 id="sec-1"><span class="section-number-2">1</span> General</h2>
+<div class="outline-text-2" id="text-1">
+<ul class="org-ul">
+<li>This is a subproject of <a href="http://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a> which in turn is a subproject of
+<a href="http://www3.svjatoslav.eu/projects/sixth/">Sixth</a>.
+</li>
+
+<li>This program is free software: you can redistribute it and/or modify
+it under the terms of the <a href="https://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public License</a> as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+</li>
+
+<li>Program author:
+<ul class="org-ul">
+<li>Svjatoslav Agejenko
+</li>
+<li>Homepage: <a href="http://svjatoslav.eu">http://svjatoslav.eu</a>
+</li>
+<li>Email: <a href="mailto://svjatoslav@svjatoslav.eu">mailto://svjatoslav@svjatoslav.eu</a>
+</li>
+</ul>
+</li>
+
+<li><a href="http://www.svjatoslav.eu/projects/">Other software projects hosted at svjatoslav.eu</a>
+</li>
+</ul>
+</div>
+
+<div id="outline-container-sec-1-1" class="outline-3">
+<h3 id="sec-1-1"><span class="section-number-3">1.1</span> Source code</h3>
+<div class="outline-text-3" id="text-1-1">
+<ul class="org-ul">
+<li><a href="http://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=snapshot;h=HEAD;sf=tgz">Download latest snapshot in TAR GZ format</a>
+</li>
+
+<li><a href="http://www2.svjatoslav.eu/gitweb/?p=sixth-3d-demos.git;a=summary">Browse Git repository online</a>
+</li>
+
+<li>Clone Git repository using command:
+<pre class="example">
+git clone http://www2.svjatoslav.eu/git/sixth-3d-demos.git
+</pre>
+</li>
</ul>
</div>
</div>
-<hr />
+</div>
+
+<div id="outline-container-sec-2" class="outline-2">
+<h2 id="sec-2"><span class="section-number-2">2</span> Overview</h2>
+<div class="outline-text-2" id="text-2">
+<p>
+Goal of this project is to show off capabilities and API usage of
+<a href="http://www3.svjatoslav.eu/projects/sixth-3d/">Sixth 3D</a> engine.
+</p>
+
+<p>
+All sample scenes below are rendered at interactive framerates.
+</p>
+</div>
+</div>
+<div id="outline-container-sec-3" class="outline-2">
+<h2 id="sec-3"><span class="section-number-2">3</span> Navigating in space</h2>
+<div class="outline-text-2" id="text-3">
+<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-4" class="outline-2">
+<h2 id="sec-4"><span class="section-number-2">4</span> Samples</h2>
+<div class="outline-text-2" id="text-4">
+</div><div id="outline-container-sec-4-1" class="outline-3">
+<h3 id="sec-4-1"><span class="section-number-3">4.1</span> Raytracing through voxels</h3>
+<div class="outline-text-3" id="text-4-1">
+
+<figure>
+<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>
+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>This is a subproject of <a href="http://www2.svjatoslav.eu/gitbrowse/sixth-3d/doc/index.html">Sixth 3D</a></li>
-<li><a href="http://www2.svjatoslav.eu/gitweb/?p=sixth.git;a=snapshot;h=HEAD;sf=tgz">download latest snapshot</a></li>
+<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>
-<li>This program is free software; you can redistribute it and/or modify it under
-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
-published by the Free Software Foundation.</li>
+<div id="outline-container-sec-4-2" class="outline-3">
+<h3 id="sec-4-2"><span class="section-number-3">4.2</span> Conway's Game of Life</h3>
+<div class="outline-text-3" id="text-4-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>
-<li>Program author:
<ul class="org-ul">
-<li>Svjatoslav Agejenko</li>
-<li>Homepage: <a href="http://svjatoslav.eu/">http://svjatoslav.eu/</a></li>
-<li>Email: <a href="mailto://svjatoslav@svjatoslav.eu/">mailto://svjatoslav@svjatoslav.eu/</a></li>
-</ul></li>
+<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"><space></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-4-3" class="outline-3">
+<h3 id="sec-4-3"><span class="section-number-3">4.3</span> Text editors</h3>
+<div class="outline-text-3" id="text-4-3">
+
+<figure>
+<p><img src="screenshots/text editors.png" class="img-responsive" alt="text editors.png">
+</p>
+</figure>
-<li><a href="http://svjatoslav.eu/programs.jsp">other applications hosted at svjatoslav.eu</a></li>
+<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>
-<div id="outline-container-orgheadline1" class="outline-2">
-<h2 id="orgheadline1"><span class="section-number-2">1</span> Description</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.
+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>
-<div class="figure">
-<p><a href="http://www2.svjatoslav.eu/gitbrowse/sixth/doc/screenshots/index.html"><img src="http://www2.svjatoslav.eu/gitbrowse/sixth/doc/screenshots.png" alt="screenshots.png" /></a>
+<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-4-4" class="outline-3">
+<h3 id="sec-4-4"><span class="section-number-3">4.4</span> Mathematical formulas</h3>
+<div class="outline-text-3" id="text-4-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-4-5" class="outline-3">
+<h3 id="sec-4-5"><span class="section-number-3">4.5</span> Sinus heightmaps and sphere</h3>
+<div class="outline-text-3" id="text-4-5">
+
+<figure>
+<p><img src="screenshots/sinus heightmaps and sphere.png" class="img-responsive" alt="sinus heightmaps and sphere.png">
+</p>
+</figure>
<p>
-Sample scenes rendered at interactive framerates by Sixth 3D engine.
+Simple test scene. Easy to implement and looks nice.
</p>
</div>
</div>
</div>
-<div id="postamble" class="status">
-<p class="author">Author: Svjatoslav Agejenko</p>
-<p class="date">Created: 2016-08-03 Wed 23:35</p>
-<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
+</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. General</a>
+<ul class="nav">
+<li><a href="#sec-1-1">1.1. Source code</a></li>
+</ul>
+</li>
+<li><a href="#sec-2">2. Overview</a></li>
+<li><a href="#sec-3">3. Navigating in space</a></li>
+<li><a href="#sec-4">4. Samples</a>
+<ul class="nav">
+<li><a href="#sec-4-1">4.1. Raytracing through voxels</a></li>
+<li><a href="#sec-4-2">4.2. Conway's Game of Life</a></li>
+<li><a href="#sec-4-3">4.3. Text editors</a></li>
+<li><a href="#sec-4-4">4.4. Mathematical formulas</a></li>
+<li><a href="#sec-4-5">4.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: 2018-06-24 Sun 02:37</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>
</body>
</html>
projects / sixth-3d-demos.git / blobdiff