博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用HTML5在浏览器中开发虚拟现实业务
阅读量:5746 次
发布时间:2019-06-18

本文共 2262 字,大约阅读时间需要 7 分钟。

在(San Francisco HTML5 User Group)组织的一场会议中,与会者们的讨论焦点围绕着两个主题:使用HTML5技术——如WebGL、WebVR、Three.js和GLAM——创建虚拟现实体验,以及Firefox和Chrome对这些技术提供支持的当前开发进展。这一切背后的目的在于,将整个互联网带入虚拟现实(以下简称VR)的世界中。

\\

Tony Parisi是VRML和X3D ISO标准的创造者之一,在会上他介绍了——它结合了虚拟现实和Web技术。目前, VR软件基本上都属于游戏式,在创建和操纵图形方面做了大量的工作。大部分已有的VR应用都借助于Unity引擎构建,然而精通该引擎的人却并不多。Parisi的理念是降低该领域的门槛,让所有开发者都能够使用JavaScript与WebGL这样的基础Web技术创建VR。是一个JavaScript类库,用来在WebGL中渲染2D/3D图像。借助Three.js,开发者将更易于渲染VR场景,代码量仅为对应的WebGL版本的1/10到1/3。Parisi目前还在致力于创建另一个不同的解决方案,这是一门用来创建3D Web内容的声明式语言。它将令VR渲染变得更加简单。使用GLAM渲染,需要引入glam.js并这样使用Tag:

\\
\#photocube {\    image:url(../images/flowers.jpg);\    rx:30deg;\}
\\

Parisi还介绍了,Chrome()和Firefox()都开始实现头部跟踪方面的WebVR API,这些API可以用来跟踪VR设备的运动情况(目前支持Oculus Rift,稍后也会增加对其他设备的支持),并支持对WebGL/CSS3内容进行3D立体渲染。目前已有一个更简单的可用方案,由、智能手机和一个VR应用(例如)组成。该应用使用智能手机的摄像头和运动传感器,在手机浏览器中使用WebGL生成活动的立体图像

\\

来自Mozilla的Firefox OS首席UX设计师Josh Carpenter,在他的演讲“”中,展示了结合Firefox使用Oculus Rift的效果,并针对开放的“网络化(Webby)”虚拟现实体验总结了一些他所期望的特性:

\\
  • 通过链接,无缝且安全地从一个地方切换到另一个地方的能力。包括对导航链接、缩放、滚动、后退、填写信息等方面的控制。简而言之,让用户在使用VR头戴设备的时候能够获得类似于浏览器的体验。\\
  • 易于开发。为了实现这一点,需要开发一些新的工具。“JavaScript-Three.js-WebVR-WebGL-浏览器”这条工具链尚处于新生阶段。\\
  • 能够在任何设备上获得VR体验。\\
  • 能够将当今世界中的网站自动化转换为VR体验。这意味着在访问老式网站的时候,应该同样能够获得3D VR体验。\\
  • VR商品化:更多的设备、嵌入性以及更好的性能。\

Carpenter还演示了一些早期阶段的工作,这些工作使得普通网站带入VR世界而不必要求这些网站升级其的内容。他还创建了一系列在不同VR站点之间切换时使用的。在设计VR浏览器方面,Carpenter看到了许多潜在的可能性,因为目前我们已经可以使用具备空间动画能力的360度Canvas。

\\

来自Google的WebGL和WebVR开发者Brandon Jones,在他的演讲中,提供了一些用于VR应用方面的代码样例,以介绍在渲染VR场景时所需的必要条件。在刚开始对站点进行VR渲染的时候,或许有许多令人生畏的工作,但如果我们通过像下面代码段中展示的一样使用Three.js,这一切都会变得简单许多。

\\
\ // Normal scene setup, then...\\var vrControls = new THREE.VRControls(camera);\var vrEffect = new THREE.VREffect(renderer);\\function onEnterVRFullscreen() {\   vrEffect.setFullScreen(true);\} \function onWindowResize() {\   vrEffect.setSize(window.innerWidth, window.innerHeight);\} \function onRequestAnimationFrame() {\   vrControls.update();\   vrEffect.render(scene, camera);\}
\\

Jones承认,尽管Three.js并未将VR作为优先考虑的内容,也尚未针对VR渲染做优化,甚至它本身可能还需要进行一些优化,但它至少已经能够肩负起VR渲染的工作。针对VR应用开发者,Jones给出了一些:

\\
  • 优先考虑轻量级顶点渲染引擎\\
  • 当遇到性能问题的时候,减少canvas分辨率而不是帧数。\\
  • 永远不要把与视点无关的东西(如阴影或环境地图)重复渲染。\\
  • 对每个眼睛看到的场景逐一完全绘制,在面对状态转换时,是一件非常沉重的任务。在具体场景下,或许更高效的做法是:针对每个物体,先绘制左眼所见场景,当切换视图后再绘制右眼所见场景。\

Jones还演示了在Chrome中渲染Quake 3 VR场景。

\\

来源:,,(一个完全采用VR的网站),,,,。

\\

查看英文原文:

转载地址:http://sxazx.baihongyu.com/

你可能感兴趣的文章
项目实践中--Git服务器的搭建与使用指南(转)
查看>>
Eclipse远程调试weblogic
查看>>
Android GreenDao with Android Studio IDE
查看>>
天气窗件展示 -一个HTML5 地理位置应用的例子
查看>>
[数分提高]2014-2015-2第2教学周第2次课
查看>>
LeetCode - Excel Sheet Column Number
查看>>
OS Kernel Parameter.semopm
查看>>
解决SpringMVC的@ResponseBody返回中文乱码
查看>>
java设计模式2--抽象工厂模式(Abstract Factory)
查看>>
Nginx 用log_format设置日志格式
查看>>
选择比能力更重要,我们怎么来选择加入哪个创业项目呢?
查看>>
使用maven创建一个例子
查看>>
Oracle---number数据类型
查看>>
lr场景运行报错的解决方法
查看>>
如何实现4分频?
查看>>
Cordova4.0 系列 -- 基本环境搭建(1)
查看>>
muduo网络图书馆评测
查看>>
VC获得window操作系统版本号, 获取操作系统位数
查看>>
新浪微薄份额2(分享)
查看>>
AndroidStudio调用so文件
查看>>