浅谈webGl vr全景模式

开讲之前解释一下这些词，以免没学习过webGl的同学还要再去找百度

webGL=> 是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。------------摘自百度百科
three.js=>如果把webGL比作JavaScript，那么three.js 就好比JavaScript里的jquery或者vue，是对webGl接口的封装
scene=>three里的一个类，直译过来是场景的意思
mesh=>网格层，如果把scene比做photoshop里的画布，那么mesh则相当于photoshop里的图层
material=>材质，用于定义一个mesh的物理表现，比如光滑度，金属度等
geometry=>用于定义一个mesh在几何上的形状表现

做过vr项目的同学多少都有了解到three.js ，著名的 photo Sphere Viewer 就是使用three.js 开发的
常见的vr全景图片的实现思路一下几种
1.球体贴图，将宽高比例2:1的 全景图片贴于球体的内侧表面，摄像机位于球心位置，旋转摄像机至任意角度，摄像机距离球体表面的距离都是一样的;这种方法简单，但是对场景精度有要求的同学会发现，不管贴图怎么调整，在球体的南北两级处总会出现 接缝,褶皱；专业上我们称之为 球体贴图的 南北两级采样过度；查阅过资料后我发现这个问题很难被有效解决，于是我开始尝试第二种方法；
2.cube六面体贴图，将宽高比例1:1的6张贴图 ，利用THREE.CubeTextureLoader加载后赋值给secne的background；这种方法也是比较常见的;随后我注意到当 全景图变得很大时，这种方法的初始化加载速度太低了，作为全景图片里来讲，6k和8k甚至更高的像素分辨率，都是很常见的，但是这样的一张图往往需要十几兆或更大，为了节省加载时间，提升用户体验，我又发现了国外的一个名为photo Sphere Viewer的框架
3.使用photo Sphere Viewer,地址 https://photo-sphere-viewer.js.org/
它的允许设置 6面体贴图或球体贴图;更重要的是，它的球体贴图是 支持碎片化加载图片的(需要引入EquirectangularTilesAdapter模块，这个模块在官方的默认demo里是没有引入的，需要开发者手动拓展);当然，碎片化加载的前提是你得实现把图片分割成横纵向都是2的n次方的数量；这里官方给出的是放到某个目录里，另外需要准备的是 这个全景图片的 球体贴图的模糊版本，在高清碎片图还没加载完成的时候，用户会看到模糊的场景，而不是什么都没有；photo Sphere Viewer历经了4个大版本的迭代，有非常多的参数可供调节，包括旋转缩放速度，广角，指定锚点的点击事件等; 随后我 发现photo Sphere Viewer的EquirectangularTilesAdapter也避免不了球体贴图的两级采样过度问题，且发现了新的问题，同个纬度下的两张贴图，有明显的扭曲痕迹，这对于用户体验来讲明显是大打折扣，于是我决定自己写个全景播放器，将六面体贴图和 碎片化结合起来，我将它命名为OVR，目前已开发好投入生产，但还没开源到git，随之诞生的还有 js算法版本的全景图片切割工具O-CutPanorama; 由于实际项目里 使用到的全景图层数不止1层，多层情况下使用碎片化 很难有好的用户体验，在多层的时候它仅为透明贴图的叠加；随后我整理之后会将 全景图片预览器 OVR 以及批量切割VR图片工具发布到个人博客里;