星期三, 12月 14, 2016

[360] 一些有關於360的照片與影片的web播放技術


記錄一下怎麼在Web實作相關的360照片與影片的播放。
主要採用WebGL來處理,大部份的作者則透過three.js來操作WebGL


基礎觀念可以看的開源

簡單的three.js範例

http://www.emanueleferonato.com/2014/12/10/html5-webgl-360-degrees-panorama-viewer-with-three-js/

簡單的photo spheres製作

http://blog.mastermaps.com/2014/01/photo-spheres-with-threejs.html

簡單用three.js做的panorama video example => 基於three.js

https://gist.github.com/bellbind/9080f608a56c2637aec9



比較完整的開源

簡單的360 player=>純WebGL (沒有包video.js)

https://github.com/slawrence/simple-360-player
demo: https://slawrence.github.io/simple-360-player/

Photo Sphere Viewer 成熟的js函式庫 => 基於three.js

https://github.com/JeremyHeleine/Photo-Sphere-Viewer

基於video.js外掛再擴充的panorama播放器(VR/360/3D模式) => 基於three.js

https://github.com/yanwsh/videojs-panorama

videojs 支援VR (作者建議去用videojs-panorama,有額外用到VR.js這個lib)

https://github.com/slawrence/videojs-vr
demo:http://slawrence.io/static/projects/video/


參考
http://videojs.com/
https://zh.wikipedia.org/wiki/WebGL
https://threejs.org/
http://www.alonsoruibal.com/slides/codelab_three.js/#/start
https://zh.wikipedia.org/wiki/%E5%85%A8%E6%99%AF%E5%9B%BE

Photo Sphere ViewerPhoto Sphere Viewer

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails