码迷,mamicode.com
首页 > 其他好文 > 详细

H5 + 3D + AR/VR 综述

时间:2018-09-02 23:52:33      阅读:537      评论:0      收藏:0      [点我收藏+]

标签:驱动程序   egret   通过   max   可视化   使用   soft   第一步   details   

近年来,H5,3D,AR,VR逐步进入人们的视野,H5生动活泼,3D注重视觉效果,AR打造虚实结合,VR则更加注重虚拟现实的产生。

第一部分,案例展示:

  技术分享图片

  还原30年前核泄露事故,相比简单的H5,融入VR技术后,能让体验者切身感觉穿越回当时事发地,再次展示了事故的真实感。

  • H5+VR案例: 《梦幻水晶球》

  技术分享图片

  这个H5页面采用了3D的设计及重力感应等技术,给用户带来了完美的体验,同时为行业树立了全新的技术标杆。

  • 某公司汽车展示:

  技术分享图片

  技术分享图片

第二部分,开发引擎大观:

  不得不说的webgl:

  webgl:WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

  WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

  Top 10:HTML5、JavaScript 3D游戏引擎和框架(点击跳转)

  网上关于threejs的文章和示例比较多。

   技术分享图片

  除了上说的10中引擎外,还发现了一个白鹭时代

  Egret3D:https://egret.com/products/engine3D.html,其定位是:领先的HTML5移动技术与服务提供商。

  凭借深厚的技术底蕴和多年行业经验积累,白鹭时代自主研发了白鹭引擎(Egret Engine)、白鹭加速器(Egret Runtime)、骨骼动画工具(Dragon Bones)、可视化编辑器(Egret Wing)等产品。其核心产品白鹭引擎(Egret Engine)已占据国内超七成的手机页游引擎市场份额,白鹭加速器(Egret Runtime)已植入超 10 亿多台移动设备。白鹭时代提供白鹭游戏解决方案,服务游戏、应用、营销、教育、AR/VR等多元领域。目前白鹭全球活跃开发者有 20 多万人次,并与小米、360、腾讯、百度、猎豹、微软等多家公司达成合作。

第三部分,项目开发步骤:

  • 第一步是建立3D模型,例如宣传“唐三彩”,如果要结合3D,必须要有模型,目前获取模型的方式有3中,第一种是利用3D扫描仪,扫描获得;第二种是通过Autodesk 123D用照片合成3D模型;第三种就是自己通过3D max等建立模型;推荐使用第一种方案。
  • 第二步是选择一款合适的3D引擎,经过上网搜索,发现目前使用Three.js的项目比较多Three.js是另一个广泛应用并且功能强大的JavaScript 3D库,但不得不说的是,即使是使用较多的three.js,它的标准文档也不是很多。
  • 第三步是用HTML5+JavaScript编写驱动程序和其他界面等,在这一步我们结合第二步中应用的three.js,再导入第一步中建好的模型,就能达到3D展示的效果。

H5 + 3D + AR/VR 综述

标签:驱动程序   egret   通过   max   可视化   使用   soft   第一步   details   

原文地址:https://www.cnblogs.com/wsg25/p/9570914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!