写点什么

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:003658
用户头像

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

关注

评论

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

下一代信息技术论坛云操作系统介绍

架构 操作系统

Flutter 中的 JSON 解析,事件分发机制Android

android 程序员 移动开发

Flutter 中的 JSON 解析(1),androidsdk环境配置

android 程序员 移动开发

Flutter 仿掘金推特点赞按钮,kotlin中文版

android 程序员 移动开发

Flutter 官方尝试放只“鸽子”来简化Native插件开发,复习指南

android 程序员 移动开发

Dart Flutter 1,flutter页面跳转动画

android 程序员 移动开发

Flutter 与 Compose怎么选?小孩子才做选择,kotlinwindows桌面开发

android 程序员 移动开发

ConstraintLayout 1,flutterrow换行

android 程序员 移动开发

Flutter 仿掘金微信图片滑动退出页面效果,写给程序员的Flutter详细教程

android 程序员 移动开发

Flutter Candies 一桶天下,kotlin编程软件

android 程序员 移动开发

Flutter 入门与实战(十三),安卓framework层开发

android 程序员 移动开发

web技术分享| 一人一天一个可移植的实时聊天系统

anyRTC开发者

大前端 Web 音视频 实时通信 实时聊天

Context那些你不知道的事?,张口就来

android 程序员 移动开发

Coroutine 基本原理,Android开发大佬的百度美团快手等大厂Offer收割之旅

android 程序员 移动开发

Flutter 如何发布安卓应用?,flutter文档发布组件

android 程序员 移动开发

filter、interceptor、aspect不知如何选择,移动应用开发案例教程

android 程序员 移动开发

Flutter _ 日志还能这么打印,太秀了!,android移动应用基础教程

android 程序员 移动开发

EventBus核心原理其实保存这三张图就可以弄懂了,收藏一下

android 程序员 移动开发

FART:ART环境下基于主动调用的自动化脱壳方案,androidndk开发教程

android 程序员 移动开发

Flutter Android 工程结构及应用层编译源码深入分析,Android面试题及答案2020

android 程序员 移动开发

华云大咖说 | 安超DCM运维场景解决方案

华云数据

Flutter 入门与实战(九),android软件开发前景

android 程序员 移动开发

ConstraintLayout 2,android双击事件响应

android 程序员 移动开发

Dart 层如何 兼容 Android 和iOS平台特性 (1),Android开发面试技巧

android 程序员 移动开发

Dart _ 什么是Stream,安卓开发不得不会

android 程序员 移动开发

DateUtils(一个日期工具类),androidauto百度地图

android 程序员 移动开发

如何打造实时性的弹窗?

神策技术社区

UI sdk Android;

Flutter Android 端 FlutterInjector 及依赖流程源码分析

android 程序员 移动开发

Flutter RichText支持图片显示和自定义图片效果,经典Android开发教程

android 程序员 移动开发

ConstrainLayout 基础教程2,2021Android精选面试实战总结整理

android 程序员 移动开发

DialogFragment探索与实现,音视频编解码技术

android 程序员 移动开发

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