zoukankan      html  css  js  c++  java
  • H5 + 3D + AR/VR 综述

    近年来,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展示的效果。
  • 相关阅读:
    HDU 1525
    kmp模板
    hdu 4616 Game(树形DP)
    hdu 4619 Warm up 2(并查集活用)
    hdu 4614 Vases and Flowers(线段树加二分查找)
    Codeforces 400D Dima and Bacteria(并查集最短路)
    poj 2823 Sliding Window (单调队列)
    hdu 2196 Computer(树形dp)
    hdu 4604 Deque
    最短路径
  • 原文地址:https://www.cnblogs.com/wsg25/p/9570914.html
Copyright © 2011-2022 走看看