18. Html5的局: 用WebVR来解释小米VR眼镜

简介: #紧接上文 WebVR使用跨平台H5技术,降低了开发者的技术门槛,提升了开发效率,我们来做个VR的Demo如何?本周小米发布了VR头盔,头盔还自带芯片,那又是什么呢? #本次Demo二维码 依旧800k,这次可以支持URL在线播放WebVR的程序了。 ![1477811232](http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/b6c

紧接上文

WebVR使用跨平台H5技术,降低了开发者的技术门槛,提升了开发效率,我们来做个VR的Demo如何?本周小米发布了VR头盔,头盔还自带芯片,那又是什么呢?

本次Demo二维码

依旧800k,这次可以支持URL在线播放WebVR的程序了。
1477811232

WebGL+WebVR+Three.js

JS常见的3D引擎框架

Three.js

浏览器常见的3D动画引擎,居于WebGL的渲染技术,整合了常见的精灵、纹理、异步加载、动画、场景、骨骼等等,无需安装IDE,直接在浏览器上开发即可,目前网上已经有许多在线IDE,支持骨骼、地图、场景等绘制。同时,代码开源,易于定制,是前端同学学习成长的好榜样。

cocos-js

cocos和u3d是常见的手机游戏引擎,双方都出了3D和VR版本。cocos还支持H5运行模式,开发的游戏可以支持在H5上运行,同时也可以运行在自己的内核中。虽然cocos-js的性能已经有了质的提升,不过Native的运行环境并不是基于WebGL,而是基于自己的cocos内核,所以只能使用自己的cocosjs,并不支持第三方的动画引擎。这对于前端同学来说,可能丧失了自己的技术成长空间。

其他引擎

Construct 2 (收费)
PlayCanvas
Turbulenz
voxel.js
有喜欢的同学,可以研究一下

WebVR基础

随着移动互联网的快速发展,H5的标准在智能硬件领域的不足,逐步明显。WebVR出现,主要是弥补了头戴设备和定位设备的标准,分工了3种设备的关系。如下图所示:
hw_setup

head mounted display(HMD)

我翻译为:头戴显示器,HMD用来模拟虚拟世界的参与者
HMD在VR概念里,用来取代了显示器,同时把陀螺仪、重力感应、加速度、海拔等信息实时的同步给引擎。
参考最新发布的小米VR眼镜。
049元款,是基础版本,官方说是《玩具版》,只是一个玩具
199元款,是高配版本,官方说是:内置独立运动传感器,硬件级加速抗眩晕。
但小米不是完整的HMD,因为TA缺少了Display。
玩具版之所以称为之玩具,可以对比一下HMD的概念,只有两个放大镜。。

Position Sensor(PS)

我翻译为:场景位置定位仪,用于模拟虚拟世界的位置信息,包括高度等
PS在VR的概念里,用来取代我们GPS等定位设备,TA的精度要求非常高,不能让人感受到不真实,自己设想一下精度需要多高。
参考HTC VIVE发布的VR眼镜
不仅包含VR眼镜、主机,还包括了2个支架,对的,那两个支架在WebVR的概念里,就是PS
HTC VIVI的VR眼镜,才是WebVR里面的HMD,他包含了显示器!

主机

这点相信很多人都忽略了,主机才是真正的渲染和业务处理的核心。好一点的,用于VR的显卡,基本都是万元级别的,想想都是醉了。

距离我们最近的VR

CardBoard

VR纸盒眼镜,提供两个镜片做屏幕到人眼的光线转换。比如小米的玩具VR眼镜

手机

手机的显示器,可以作为VRDisplay
手机的处理器,可以作为VRComputer
手机的传感器,可以作为HeadMounted
手机的定位仪,不可以作为PS,因为她的精度最好的情况下,也只有10cm,这样的设备容易让参与者感受到明显的眩晕感。

VR内容的现状

只适合做位置保持不变的场景,或者用户的位置按照既定义的轨迹和速度,做有规律的变化。
参考Demo中的《过山车》和视频类的《VR视频》,也就是固定轨迹和规定坐标的两种内容方式。

从WebVR看技术和硬件发展的方向

3D建模工具化

对显示世界的物体,需要低成本、批量的、计算机化,快速生成3D模型,把现实世界的内容,快四的搬到虚拟世界,这点很像当年PC兴起时的过程,把线下的商品交易,搬到线上

手机传感器的精度化

手机可以作为HMD和PS,只要精度到达一定程度(这个标准可能是将来决定手机成败的关键),手机可以一统HMD、PS,成为VR核心。

手机CPU、GPU性能大幅提升

手机取代PC的主机,成为业务中心。CPU、GPU将会朝着更加节能省电、超级性能怪兽方向前进,PC市场进一步消失

商业分为线下、线上、虚拟三大流量入口

VR可以降低人们的出行成本,如果体验可以很好的话,
可以通过VR“进入”旅游目的地,感受当地的风情;
可以实现电影院效果,自己成为电影中的一个角色
可以模拟实战演习,减少不必要的消耗和伤害
可以帮助受伤患者,帮助健康恢复
。。。。

下集再见

接下来,我们会手把手的写一个3D小程序,无需安装任何IDE,直接在浏览器上开发&调试,感受WebGL时代的便捷。

目录
相关文章
|
5月前
|
前端开发
HTML+CSS实现小米官网首页(一)
HTML+CSS实现小米官网首页
|
5月前
|
前端开发
HTML+CSS实现小米账号注册界面
HTML+CSS实现小米账号注册界面
|
5月前
|
前端开发
HTML+CSS实现小米登录界面
HTML+CSS实现小米登录界面
|
5月前
|
前端开发
HTML+CSS实现小米官网首页(二)
HTML+CSS实现小米官网首页
|
12月前
|
算法 vr&ar
厚度仅2.5毫米,重60克,英伟达&斯坦福做出了超轻薄VR眼镜(2)
厚度仅2.5毫米,重60克,英伟达&斯坦福做出了超轻薄VR眼镜
|
12月前
|
编解码 算法 vr&ar
厚度仅2.5毫米,重60克,英伟达&斯坦福做出了超轻薄VR眼镜(1)
厚度仅2.5毫米,重60克,英伟达&斯坦福做出了超轻薄VR眼镜
|
前端开发
用html+css实现小米官网的模拟
用html+css实现小米官网的模拟
html+css实战122-综合案例-小米产品-li
html+css实战122-综合案例-小米产品-li
115 0
html+css实战122-综合案例-小米产品-li
html+css实战121-综合案例-小米产品-左右结构
html+css实战121-综合案例-小米产品-左右结构
148 0
html+css实战121-综合案例-小米产品-左右结构
html+css实战119-综合案例-小米布局
html+css实战119-综合案例-小米布局
125 0
html+css实战119-综合案例-小米布局