浅谈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图片工具发布到个人博客里;

你可能感兴趣的:(vr)