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

浅谈webGl vr全景模式相关推荐

浅谈企业中台商业模式及建设思路
浅谈企业中台商业模式及建设思路文章目录浅谈企业中台商业模式及建设思路前言企业中台的定义和能力企业中台的商业故事企业中台的商业模式构建企业中台时不同的企业初衷企业中台的价值主张企业中台 ...
浅谈Mediator仲裁者模式
一.前言 Mediator模式又称为仲裁者模式或中介者模式,所起的作用就是仲裁和中介,帮助其它类之间进行交流.在仲裁者模式之中,我们要明确两个概念,那就是仲裁者(Mediator)和组员(Collea ...
js架构设计模式——由项目浅谈JS中MVVM模式
1. 背景最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...
由项目浅谈JS中MVVM模式
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1. 背景最近项目原因使用了durandal.js和knock ...
浅谈软件开发架构模式
本文作者将介绍他对于软件开发架构模式的一些思考和实践. 背景和问题我个人平时会比较慎用"架构"这个词一方面是觉得业界有很多架构大师和架构模式,而我的认知和实践有限: 另一方面是 ...
精通python设计模式-浅谈Python设计模式 - 原型模式
声明,本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 在<精通Python设计模式>中把设计模式分为三种类型: 创建型模式 ...
浅谈设计模式01-策略模式
2019独角兽企业重金招聘Python工程师标准>>> 一. 定义最近开始研读Head First设计模式,这本书给人的感觉耳目一新,不容易犯困啊.今天和大家分享一下策略模式. 1 ...
directui 3d界面引擎_美术设计师浅谈AR/VR中3D建模设计的工具、挑战与区别
(映维网 2019年04月20日)3D越来越受欢迎,并对每个人的生活都产生了影响.从建筑到娱乐,许多不同的领域都有利用3D技术.例如詹姆斯·卡梅隆的<阿凡达>,这部电影给我们带来了前所未有 ...
C#框架设计之浅谈SOA与钝化模式
一. 什么是SOA SOA即为Service-Oriented Architecture缩写,翻译过来也就是面向服务的软件架构.通过将软件功能或者是业务流程进行服务化发布,从而达到一种面向于契约和服务 ...

浅谈webGl vr全景模式

浅谈webGl vr全景模式相关推荐

最新文章

热门文章