AICon 深圳站聚焦 Agent 技术、应用与生态,大咖分享实战干货 了解详情
写点什么

Facebook 发布 React VR,使用 React 进行虚拟现实开发

  • 2017-04-25
  • 本文字数:1016 字

    阅读完需:约 3 分钟

早在 2014 年 Facebook 就布局虚拟现实(VR)技术,并以 20 亿美元收购了沉浸式虚拟现实技术厂商 Oculus。近日 Facebook 又在虚拟现实领域有了新动向,基于其核心的开源前端框架 React 发布了一个虚拟现实网页应用的开发框架 React VR ,进一步践行了其一次学习,到处适用(Learn once, write anywhere)的口号。

过去的 2016 年被誉为虚拟现实的元年,国内外的诸多厂商,如 Oculus HTC 暴风等公司都发布了各自的虚拟现实产品,但是经过上半年的急速发展,下半年却进入了该行业的资本寒冬,而任天堂发布的增强现实(AR)手游Pockemon Go 的大获成功,又纷纷把大家关注的目光拉向了与真实世界交互性更强的增强现实技术。Facebook 在这个虚拟现实寒潮来临之际推出React VR,无疑是想通过简化VR 开发层面的技术难点,来带动虚拟现实的后续发展。

在网页端开发虚拟现实应用的一大挑战,就是其页面的刷新率,如果帧数低于60 帧每秒,就无法给用户带来足够好的用户体验,在Oculus Rift 上,这一指标更是建议达到90 帧每秒。要在单线程的JS 运行环境中达到这点,对性能的要求就比较苛刻。React VR 借鉴了React Native 中将运行和渲染进行分离的架构。它会在web worker 中运行React 的代码,再通过异步桥接将图像渲染到界面上,这样就可以更快地捕捉到用户动作并反馈到图像上,从而减少用户的眩晕感。在React VR 中还引用了诸多React Native 的概念,甚至可以说React VR 本身就是建立在React Native 上的一种平台。它沿用了React Native 的打包功能,以及诸多组件,如View、Text 等。这为有React Native 经验的开发人员减少了不少学习成本。

React VR 的内部是通过包装流行的 JS 3D 引擎 Three.js 来实现的。Three.js 内部通过 WebGL 来将应用展现到页面上,因此可以在支持 WebGL 的浏览器上浏览 React VR 的应用。而在虚拟现实设备上,其使用的是 WebVR 的 API。鉴于目前该规范还在开发中,目前仅支持 Oculus Rift 和三星 GearVR 等设备。

值得注意的是,目前已经存在一些虚拟现实网页应用的开发框架。Mozilla 的开源项目 A-Frame 就是一个相对成熟的例子。React VR 在与 React 的无缝集成上占有优势,这为具备 React 基础的开发人员减少了一定的学习成本,但是最终是否能够后来者居上还需要拭目以待。


感谢刘振涛对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2017-04-25 19:003840
用户头像

发布了 41 篇内容, 共 15.6 次阅读, 收获喜欢 3 次。

关注

评论

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

Flowable 设置流程变量的四种方式

江南一点雨

springboot flowable

CSS学习笔记(二)

lxmoe

CSS 前端 学习笔记 11月月更

张益唐111页论文攻克朗道-西格尔零点猜想

老周聊架构

数学 11月月更 朗道-西格尔零点猜想

【C语言】default 关键字

謓泽

11月月更

Vue基础学习(一)

Studying_swz

Vue 11月月更

深入理解Metrics(二):Counters

冰心的小屋

Java metrics Counters

如何在 Rocky Linux 上安装 MinIO 存储?

wljslmz

对象存储 S3 Minio Rocky Linux

云原生系列三:K8s应用安全加固技术

叶秋学长

#k8s K8s 多集群管理 安全加固 11月月更

随想 小城市的程序员该如何生存

百里丶落云

生活状态 生活杂谈 11月月更

JavaScript学习(二)

Studying_swz

JavaScript 11月月更

Flowable 已经执行完毕的流程去哪找?

江南一点雨

spring springboot workflow flowable

Vue自定义指令(二)浅窥

Augus

vue.js 11月月更

一个好的安全团队应该具有怎样的素质

穿过生命散发芬芳

11月月更 安全团队

Hessian Hessian2 JDK 序列化性能对比

water

Go 微服务实战之如何实现加解密操作的微服务开发

宇宙之一粟

Go 微服务 Go 语言 11月月更 go-micro

索引的基础知识

阿泽🧸

索引 11月月更

跟着卷卷龙一起学Camera--低延迟01

卷卷龙

ISP camera 11月月更

【奖项征集】参与第四届中国“数据质量管理”奖项评选,DQMIS 2022门票免费领!

数据质量管理智库

数据 数据治理 数据安全 数据隐私计算 数据要素

Vue基础学习(二)

Studying_swz

Vue 11月月更

峰会实录 | StarRocks存储引擎近期进展与实时分析实践

StarRocks

数据库·

C 语言字符串常用库函数

Maybe_fl

算法题学习---合并两个排序的链表

桑榆

算法题 11月月更

制胜出海赛道 华为应用海外联运助力开发者获量增长

叶落便知秋

华为开发者大会2022

我服了!SpringBoot升级后这服务我一个星期都没跑起来!(上)

艾小仙

Java spring 程序员 springboot spring-boot

跟着卷卷龙一起学Camera--偏振相机

卷卷龙

ISP camera 11月月更

常用外设原理介绍

芯动大师

硬件设计 11月月更 常用外设

跟着卷卷龙一起学Camera--低延迟02

卷卷龙

ISP camera 11月月更

2022-11-08:以下go语言代码输出什么?A:2;B:编译错误;C:运行 panic。 package main import “fmt“ func main() { a := []int

福大大架构师每日一题

golang 福大大 选择题

从“青铜”到“王者”,制造企业的数字化闯关记

脑极体

筑牢数字基础设施:华为笔下的中国诗意

脑极体

人工智能「

【愚公系列】2022年11月 微信小程序-app.json配置属性之pages

愚公搬代码

11月月更

Facebook发布React VR,使用React进行虚拟现实开发_Meta_周元昊_InfoQ精选文章