Building virtual reality experiences on the web with React VR
Over the past year, virtual reality has made major strides toward becoming the next computing platform. With Oculus Rift, consumer-grade hardware has reached the point where people can immerse themselves in virtual worlds from their own home. Alongside that, 360 content has blossomed with the introduction of numerous consumer-level cameras and Facebook"s support of 360 photos and videos. However, for developers who have pioneered the way we experience the web, there"s no direct path to building 360 content without knowledge of game engines and 3D graphics. Those who do take on the challenges of creating interactive 360 applications may find themselves with limited audiences, since VR headsets aren"t yet widely distributed. We want to change that.
Today, we"re releasing React VR, a new library that lets developers everywhere build compelling experiences for VR. Expanding on the declarative programming style of React and React Native, React VR lets anyone with an understanding of JavaScript rapidly build and deploy VR experiences using standard web tools. Those experiences can then be distributed across the web — React VR leverages APIs like WebGL and WebVR to connect immersive headsets with a scene in a web page. And to maximize your potential audience, sites built in React VR are also accessible on mobile phones and PCs, using accelerometers or the cursor for navigation.
With React VR, you can use React components to compose scenes in 3D, combining 360 panoramas with 2D UI, text, and images. You can immerse the user with audio and video capabilities, plus take full advantage of the space around you with 3D models. If you know React, you now know how to build 360 and VR content! The entire codebase is available on GitHub. Get started with your first project by diving into our documentation.
Learn once, write anywhereWhen we set out to build a framework for VR content on the web, we quickly agreed that React was a great starting point. React"s style of representing elements abstractly, independent of their actual implementation, is ideal for any hierarchical layout, and it"s already proven its flexibility with the React Native platform. Additionally, it means that anyone familiar with React can easily get started without needing to learn new concepts. If you"re comfortable laying out an application with React and understand how React manages data flow, you should have no problem developing in 3D. React VR continues to drive the mantra of the React ecosystem: Learn once, write anywhere.
Building upon React also means that the libraries and tools built by the broader React community are available for your use in React VR. Your favorite data management, routing, and navigation libraries will work out of the box. You can leverage existing testing frameworks and development tools as well — there"s no need to change your existing development workflow.
Under the hoodWhen building a framework for VR on the web, one challenge we had to address is that a person in a headset needs to be able to look around the world at 60 frames per second (fps), or 90 fps on Rift. In a single-threaded environment like JavaScript, that means we needed to ensure that any React reconciliation or scene updates would happen within the span of a single frame.
As it turns out, React Native already addresses similar problems with its architecture. We followed RN"s pattern by running React and rendering in separate contexts, with an asynchronous bridge for communication between them. In the web browser, this separation is performed with a web worker — your entire React application runs in the worker, while the rendering code that turns scene update messages into actual pixels lives in the main window. This lets the renderer create a tight loop between receiving headset orientation updates and re-rendering the scene, increasing viewer immersion while decreasing the likelihood of motion sickness.
In fact, more than just borrowing concepts from React Native, React VR is actually built as a true RN platform. This lets us reuse code and systems in some places, while extending other areas to make sense in both a browser and 3D space. If you"ve used React Native before, many things will be familiar to you, like the use of View and Text components, as well as the packaging server that keeps your compiled bundle updated with your latest changes.
Open sourceWe"ve seen firsthand how much React and React Native have benefited from being open source, and we believe that developing a project hand-in-hand with the community lets us better recognize and target the needs of everyone.
We hope that with React VR in your toolbox, you"ll help make 2017 the best year yet for compelling VR content. Whether you"re working on your first application or want to contribute to the framework itself, our documentation and GitHub repository are the best places to start. We look forward to seeing you in virtual reality!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82584.html
摘要:新闻热点国内国外,前端最新动态发布近日,正式发布新版本中提供了一系列的特性与问题修复。而近日正式发布,其能够帮助开发者快速构建应用。 前端每周清单第 10 期:Firefox53、React VR发布、JS测试技术概述、Microsoft Edge现代DOM树构建及性能之道 为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔者的 Web 前端入门...
摘要:快速入门什么是是一个开放源代码的库,为呈现的数据提供了视图渲染。最后,项目根组件应该通过来进行注册,以便能够进行打包和正常运行。基本思想是渲染一个立方体,并将观众置于中心,随后移动。表示从指定方向平均照亮所有物体的光源。 React VR 快速入门 什么是React React是一个开放源代码的JavaScript库,为HTML呈现的数据提供了视图渲染。React视图通常使用指定的像H...
摘要:前端每周清单半年盘点之与篇前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日,宣布将的构建工具由迁移到,引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为...
摘要:它不仅从前端移动到后端,我们也开始看到它用于机器学习和增强现实,简称。由于其高使用率,年的现状调查将其称为采用的安全技术。机器学习框架在年的开发者峰会上,宣布了他们的机器学习框架的实现,称为。更高级别的用于在之上构建机器学习模型。 2019,开发者应该学习的16个JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...
摘要:新闻热点国内国外,前端最新动态就开源许可证风波进行回复数周前,基金会决定禁止旗下项目使用,因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论,希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期:React Patent License 回复,Sho...
阅读 1767·2023-04-26 01:44
阅读 1209·2021-11-12 10:34
阅读 1578·2021-09-09 09:33
阅读 1728·2019-08-30 15:44
阅读 2892·2019-08-30 13:49
阅读 2189·2019-08-29 15:26
阅读 942·2019-08-26 13:30
阅读 1409·2019-08-23 18:15