写点什么

使用 HTML5 在浏览器中开发虚拟现实业务

  • 2015 年 1 月 29 日
  • 本文字数:1940 字

    阅读完需:约 6 分钟

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

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

复制代码
#photocube {
image:url(../images/flowers.jpg);
rx:30deg;
}

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

来自 Mozilla 的 Firefox OS 首席 UX 设计师 Josh Carpenter,在他的演讲“ WebVR 的 UI/UX 设计”中,展示了结合 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,在他的演讲 Web 浏览器的 VR 内部实现中,提供了一些用于 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 场景。

来源: SFHTML5 会议视频 WebVR API 新手指南 Mozilla VR (一个完全采用 VR 的网站), Google Cardboard Chrome VR 实验 GLAM Mozilla WebVR Mailing List

查看英文原文: The Current Status of Browser-based Virtual Reality in HTML5

2015 年 1 月 29 日 19:319433
用户头像

发布了 256 篇内容, 共 59.0 次阅读, 收获喜欢 10 次。

关注

评论

发布
暂无评论
发现更多内容

面试官问我:看过sharding-jdbc的源码吗?我吧啦吧啦说了一通!!

冰河

数据库 分布式事务 微服务 分布式数据库 ShardingJDBC

LeetCode题解:232. 用栈实现队列,使用两个栈 入队 - O(1), 出队 - O(n),JavaScript,详细注释

Lee Chen

大前端 LeetCode

记一次前端vue相关面试题目和简答案

靖仙

面试 Vue MVVM

作为一个架构师,我是不是应该有很多职责?

架构师修行之路

程序员 架构师

通证是下一代互联网数字经济的关键

CECBC

区块链 通证经济

Nodejs使用es module开发CLI

zayfen

nodejs Module ES cli esm

华为HMS:风雨突然,仍求自我

脑极体

详解增强算术赋值:“-=”操作是怎么实现的?

Python猫

Python 编程

甲方日常 12

句子

工作 随笔杂谈 日常

CDN百科11 | 如何用CDN加速OSS源站资源

阿里云Edge Plus

Atlassian Team Tour 9月23日登陆中国,报名通道已开启!

Atlassian

敏捷开发 数字化转型 金融 Jira

Spring 5 中文解析核心篇-集成测试之TestContext(下)

青年IT男

单元测试 Spring5

flutter在行动之踩坑的日子(1)

霜蓝手环

flutter 跨平台 Flutter Android Apk 编程之路

阿里P9开源阿里内部秒杀系统设计方案以及设计原则,还不收藏

小Q

Java 架构 系统设计 秒杀 并发

你不可不知道的Design Thinking

长沙造纸农

设计 思维方式 设计思维 设计实践 设计师

Mac搭建本地koa2项目

靖仙

koa2 本地环境搭建

XSKY全新一代SDS一体机五大场景之超融合

XSKY融合存储

众盟科技:跨越时空70年,一场别样的房地产直播开启人文探索

人称T客

Hadoop 客户端节点

yuanhang

hadoop3

2020年史诗级‘面试宝典’横空而出,金九银十就靠“它”涨薪了

学习 程序员 面试 架构师

第13周总结+作业

林毋梦

面经手册 · 第10篇《扫盲java.util.Collections工具包,学习排序、二分、洗牌、旋转算法》

小傅哥

Java 数据结构 算法 归并排序 洗牌算法

MySQL中my.cnf的配置说明

Matrix Chan

运维 MySQ MySQL 运维 数据库运维

jvm疯狂吞占内存,罪魁祸首是谁?

易观大数据

众盟科技:跨越时空70年,一场别样的房地产直播开启人文探索

脑极体

Hadoop3 环境搭建

yuanhang

金九银十:搞定这两个GitHub标星50K开源项目,拿个30k轻松吧?

编程 程序员 面试 算法 架构师

前端 10 问之 TypeScript (第一篇)

局外人

typescript 大前端

MySQL8.0大表秒加字段,是真的吗?

Simon

MySQL

5G加速商用,云通信如何推动企业营销数智化

阿里云Edge Plus

易观方舟Open API 及最佳实践

易观大数据

使用HTML5在浏览器中开发虚拟现实业务_移动_Abel Avram_InfoQ精选文章