great

district10 · May 5, 2017 · b159dc0 · b159dc0
1 parent 8c8e096
commit b159dc0
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 *.7z
 *.zip
 *.rar
+/tmp/
diff --git a/Makefile b/Makefile
@@ -0,0 +1,6 @@
+all: README.html
+%.html: %.md
+	pandoc --ascii $< -o $@
+clean:
+	rm README.html
+
diff --git a/README.html b/README.html
@@ -0,0 +1,57 @@
+<h1 id="texture-morpher">texture-morpher</h1>
+<p>a tool to make morphable texture</p>
+<h2 id="&#20027;&#30028;&#38754;-main-window">&#20027;&#30028;&#38754; // Main window</h2>
+<div class="figure">
+<img src="doc/chrome_2017-05-05_16-32-17.png" />
+
+</div>
+<p>&#26597;&#30475; Demo&#65306;</p>
+<ul>
+<li>&#20808;&#22312;&#12304;Editor&#12305;&#26639;&#65292;&#28857;&#20987;&#12304;&#25171;&#24320;&#25511;&#20214;&#12305;&#65292;&#28982;&#21518;&#12304;&#21152;&#36733;&#31034;&#20363; Pairs&#12305;</li>
+<li>&#21040;&#12304;Sphere&#12305;&#26639;&#65292;&#28857;&#20987;&#12304;&#25171;&#24320;&#25511;&#20214;&#12305;&#65292;&#28982;&#21518;&#12304;&#36807;&#28193;&#12305;&#65292;&#25928;&#26524;&#19981;&#22909;&#65307;</li>
+</ul>
+<div class="figure">
+<img src="doc/blend-effect-0.25.gif" />
+
+</div>
+<ul>
+<li>&#20877;&#21040;&#12304;Editor&#12305;&#26639;&#65292;&#28857;&#20987;&#12304;&#25171;&#25511;&#20214;&#12305;&#65292;&#28982;&#21518;&#12304;&#19977;&#35282;&#21270;&#12305;&#65307;</li>
+<li>&#21040;&#12304;Sphere&#12305;&#26639;&#65292;&#28857;&#20987;&#12304;&#25171;&#24320;&#25511;&#20214;&#12305;&#65292;&#26368;&#21518;&#12304;&#36807;&#28193;&#12305;&#65292;&#25928;&#26524;&#22909;&#22810;&#20102;&#12290;</li>
+</ul>
+<div class="figure">
+<img src="doc/morph-effect-0.25.gif" />
+
+</div>
+<h2 id="&#32534;&#36753;&#22120;&#22320;&#20351;&#29992;-usage-of-editor">&#32534;&#36753;&#22120;&#22320;&#20351;&#29992; // Usage of Editor</h2>
+<ul>
+<li>&#22312;&#32441;&#29702;&#19978;&#40736;&#26631;&#21491;&#38190;&#28155;&#21152;&#21516;&#21517;&#28857;&#65307;</li>
+<li>&#26032;&#28155;&#21152;&#22320;&#21516;&#21517;&#28857;&#20026;&#28608;&#27963;&#29366;&#24577;&#65292;&#21487;&#20197;&#36890;&#36807;&#12304;&#26041;&#21521;&#38190;&#12305; (&#34013;&#33394;&#28857;) &#25110;&#12304;Control + &#26041;&#21521;&#38190;&#12305; (&#32511;&#33394;&#28857;) &#31227;&#21160;&#20301;&#32622;&#65307;</li>
+<li>&#22312;&#21491;&#20391;&#22320; Pair List&#65288;&#21516;&#21517;&#28857;&#21015;&#34920;&#65289;&#20063;&#21487;&#20197;&#23545;&#20301;&#32622;&#36827;&#34892;&#24494;&#35843;&#65307;</li>
+<li>&#21487;&#20197;&#36890;&#36807; Pair List &#19978;&#30340;&#12304;X&#12305;&#25353;&#38062;&#21024;&#38500;&#19968;&#23545;&#21516;&#21517;&#28857;&#65307;</li>
+<li>&#36890;&#36807;&#25968;&#23383;&#38190;&#12304;3&#12305;&#12289;&#12304;4&#12305;&#20445;&#23384;&#20301;&#32622;&#65292;&#28982;&#21518;&#36890;&#36807;&#25968;&#23383;&#38190;&#12304;1&#12305;&#12289;&#12304;2&#12305;&#21152;&#36733;&#20301;&#32622;&#65292;&#36825;&#26679;&#21487;&#20197;&#20351;&#24471;&#22312;&#21069;&#21518;&#20004;&#24352;&#22270;&#20043;&#38388;&#20999;&#25442;&#36215;&#26469;&#26356;&#23481;&#26131;&#65307;</li>
+</ul>
+<h2 id="&#32441;&#29702;-1-&#32441;&#29702;-2-t1-t2">&#32441;&#29702; 1 &amp; &#32441;&#29702; 2 // T1 &amp; T2</h2>
+<ul>
+<li>&#36890;&#36807;&#12304;&#25171;&#24320;&#25511;&#20214;&#12305;&#19979;&#30340;&#12304;&#21152;&#36733;&#22270;&#29255;&#12305;&#21152;&#36733;&#26032;&#30340;&#20840;&#26223;&#22270;&#65307;</li>
+</ul>
+<h2 id="&#21160;&#24577;&#20840;&#26223;&#22270;-sphere">&#21160;&#24577;&#20840;&#26223;&#22270; // Sphere</h2>
+<p>TODO</p>
+<h2 id="&#21160;&#24577;&#20840;&#26223;&#29699;-sphere">&#21160;&#24577;&#20840;&#26223;&#29699; // SPHERE</h2>
+<p>TODO</p>
+<hr />
+<p>Inspiration:</p>
+<ul>
+<li><a href="https://www.youtube.com/watch?v=pqpS6BN0_7k">Face Morphing using OpenCV (C++ / Python) - YouTube</a></li>
+<li><a href="http://www.learnopencv.com/face-morph-using-opencv-cpp-python/">Face Morph Using OpenCV &#8212; C++ / Python | Learn OpenCV</a></li>
+</ul>
+<p>Notes:</p>
+<ul>
+<li><a href="https://threejs.org/examples/?q=texture#webgl_raycast_texture">three.js / examples</a></li>
+<li><a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_raycast_texture.html">three.js/webgl_raycast_texture.html at master &#183; mrdoob/three.js</a></li>
+<li><a href="https://github.com/pnitsch/GSVPano.js">pnitsch/GSVPano.js: Google Street View Panorama Util</a></li>
+<li><a href="https://bl.ocks.org/mbostock/6675193">Canvas Voronoi - bl.ocks.org</a></li>
+<li><a href="https://github.com/CodeSeven/toastr">CodeSeven/toastr: Simple javascript toast notifications</a></li>
+<li><a href="https://github.com/d3/d3/blob/master/API.md#voronoi-diagrams-d3-voronoi">d3/API.md at master &#183; d3/d3</a></li>
+<li><a href="https://github.com/d3/d3-voronoi/blob/master/src/Diagram.js#L82">d3-voronoi/Diagram.js at master &#183; d3/d3-voronoi</a>.</li>
+<li><a href="https://github.com/eligrey/FileSaver.js">eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation</a></li>
+</ul>
diff --git a/README.md b/README.md
@@ -1,13 +1,49 @@
 # texture-morpher
 a tool to make morphable texture
 
+## 主界面 // Main window
+
+![](doc/chrome_2017-05-05_16-32-17.png)
+
+查看 Demo：
+
+-   先在【Editor】栏，点击【打开控件】，然后【加载示例 Pairs】
+-   到【Sphere】栏，点击【打开控件】，然后【过渡】，效果不好；
+
+![](doc/blend-effect-0.25.gif)
+
+-   再到【Editor】栏，点击【打控件】，然后【三角化】；
+-   到【Sphere】栏，点击【打开控件】，最后【过渡】，效果好多了。
+
+![](doc/morph-effect-0.25.gif)
+
+## 编辑器地使用 // Usage of Editor
+
+-   在纹理上鼠标右键添加同名点；
+-   新添加地同名点为激活状态，可以通过【方向键】 (蓝色点) 或【Control + 方向键】 (绿色点) 移动位置；
+-   在右侧地 Pair List（同名点列表）也可以对位置进行微调；
+-   可以通过 Pair List 上的【X】按钮删除一对同名点；
+-   通过数字键【3】、【4】保存位置，然后通过数字键【1】、【2】加载位置，这样可以使得在前后两张图之间切换起来更容易；
+
+## 纹理 1 & 纹理 2 // T1 & T2
+
+-   通过【打开控件】下的【加载图片】加载新的全景图；
+
+## 动态全景图 // Sphere
+
+TODO
+
+## 动态全景球 // SPHERE
+
+TODO
+
+---
+
 Inspiration:
 
 -   [Face Morphing using OpenCV (C++ / Python) - YouTube](https://www.youtube.com/watch?v=pqpS6BN0_7k)
 -   [Face Morph Using OpenCV — C++ / Python | Learn OpenCV](http://www.learnopencv.com/face-morph-using-opencv-cpp-python/)
 
-Results:
-
 Notes:
 
 -   [three.js / examples](https://threejs.org/examples/?q=texture#webgl_raycast_texture)

diff --git a/doc/blend-effect-0.25.gif b/doc/blend-effect-0.25.gif
diff --git a/doc/chrome_2017-05-05_16-32-17.png b/doc/chrome_2017-05-05_16-32-17.png
diff --git a/doc/morph-effect-0.25.gif b/doc/morph-effect-0.25.gif
diff --git a/doc/triangles.png b/doc/triangles.png
diff --git a/index.html b/index.html
@@ -109,9 +109,7 @@
     <div id="tabs-3" class="tab"><canvas id="canvas"></canvas></div>
     <div id="tabs-4" class="tab"></div>
     <div id="tabs-5" class="tab"></div>
-    <div id="tabs-6" class="tab"><pre><code>
-        TODO, write doc.
-    </code></pre></div>
+    <div id="tabs-6" class="tab"><a target="_blank" href="README.html">见文档</a></div>
 </div>
 <div class="sidebar" id="app">
     <div class="header">Pair List</div>
@@ -539,8 +537,8 @@
             });
         };
 
-        var pos1 = new THREE.Vector3();
-        var pos2 = new THREE.Vector3();
+        var pos1 = new THREE.Vector3(1000,0,0);
+        var pos2 = new THREE.Vector3(1000,0,0);
 
         this.savePos1 = function() { pos1.copy(config.editor.camera.position); toastr.info("Pos1 Saved" ); };
         this.savePos2 = function() { pos2.copy(config.editor.camera.position); toastr.info("Pos2 Saved"); };