a tool to make morphable texture
通过三角化形成动态纹理,使得全景漫游系统的场景过渡更自然。
Blend 方法 | Morph 方法 |
---|---|
压力测试 & 示例:
查看 Demo:
- 先在【Editor】栏,点击【打开控件】,然后【加载示例 Pairs】
- 到【Sphere】栏,点击【打开控件】,然后【过渡】,效果不好(见上图 Blend 方法);
- 再到【Editor】栏,点击【打控件】,然后【三角化】;
- 到【Sphere】栏,点击【打开控件】,最后【过渡】,效果好多了(见上图 Morph 方法)。
- 在纹理上鼠标右键添加同名点;
- 新添加地同名点为激活状态,可以通过【方向键】 (蓝色点) 或【Control 方向键】 (绿色点) 移动位置;
- 在右侧地 Pair List(同名点列表)也可以对位置进行微调;
- 可以通过 Pair List 上的【X】按钮删除一对同名点;
- 通过数字键【3】、【4】保存位置,然后通过数字键【1】、【2】加载位置,这样可以使得在前后两张图之间切换起来更容易;
- 通过【打开控件】下的【加载图片】加载新的全景图;
Inspiration:
- Face Morphing using OpenCV (C / Python) - YouTube
- Face Morph Using OpenCV — C / Python | Learn OpenCV
Notes:
- three.js / examples
- three.js/webgl_raycast_texture.html at master · mrdoob/three.js
- pnitsch/GSVPano.js: Google Street View Panorama Util
- Canvas Voronoi - bl.ocks.org
- CodeSeven/toastr: Simple javascript toast notifications
- d3/API.md at master · d3/d3
- d3-voronoi/Diagram.js at master · d3/d3-voronoi.
- eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation
代码阅读建议:Tutorial.txt