[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://creativejs.com/2012/01/little-planet-street-view/index.html

https://github.com/notlion/streetview-stereographic

參考

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