-
Notifications
You must be signed in to change notification settings - Fork 6
/
README.html
71 lines (69 loc) · 5.56 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<h1 id="texture-morpher"><a href="index.html">texture-morpher</a></h1>
<p>a tool to make morphable texture</p>
<p>通过三角化形成动态纹理，使得全景漫游系统的场景过渡更自然。</p>
<div class="figure">
<img src="doc/triangles.png" />
</div>
<table>
<thead>
<tr class="header">
<th align="center">Blend 方法</th>
<th align="center">Morph 方法</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="center"><img src="doc/blend-effect-0.25.gif" /></td>
<td align="center"><img src="doc/morph-effect-0.25.gif" /></td>
</tr>
</tbody>
</table>
<p>压力测试 & 示例：</p>
<ul>
<li><a href="dyna_texture.html">动态全景图</a></li>
<li><a href="dyna_sphere.html">动态全景球</a></li>
<li>示例：<a href="dyna_triangle.html">一个三角形的过渡</a></li>
</ul>
<h2 id="主界面-main-window">主界面 // Main window</h2>
<div class="figure">
<img src="doc/chrome_2017-05-05_16-32-17.png" />
</div>
<p>查看 Demo：</p>
<ul>
<li>先在【Editor】栏，点击【打开控件】，然后【加载示例 Pairs】</li>
<li>到【Sphere】栏，点击【打开控件】，然后【过渡】，效果不好（见上图 Blend 方法）；</li>
<li>再到【Editor】栏，点击【打控件】，然后【三角化】；</li>
<li>到【Sphere】栏，点击【打开控件】，最后【过渡】，效果好多了（见上图 Morph 方法）。</li>
</ul>
<h2 id="编辑器地使用-usage-of-editor">编辑器地使用 // Usage of Editor</h2>
<ul>
<li>在纹理上鼠标右键添加同名点；</li>
<li>新添加地同名点为激活状态，可以通过【方向键】 (蓝色点) 或【Control + 方向键】 (绿色点) 移动位置；</li>
<li>在右侧地 Pair List（同名点列表）也可以对位置进行微调；</li>
<li>可以通过 Pair List 上的【X】按钮删除一对同名点；</li>
<li>通过数字键【3】、【4】保存位置，然后通过数字键【1】、【2】加载位置，这样可以使得在前后两张图之间切换起来更容易；</li>
</ul>
<h2 id="纹理-1-纹理-2-t1-t2">纹理 1 & 纹理 2 // T1 & T2</h2>
<ul>
<li>通过【打开控件】下的【加载图片】加载新的全景图；</li>
</ul>
<h2 id="动态全景图-sphere">动态全景图 // Sphere</h2>
<h2 id="动态全景球-sphere">动态全景球 // SPHERE</h2>
<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 — 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 · 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 · 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 · 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>
<p>代码阅读建议：Tutorial.txt</p>