搜索

WebXR 应用开发之 aframe 框架入门

趣谈前端

共 14694字，需浏览 30分钟

 · 2022-03-01

大厂技术  坚持周更  精选好文

本文主要共包含三大部分：第一部分为 WebXR，包括WebXR 的概念、标准、优点以及主流的开发方式；由 WebXR 开发方式中【使用封装好的第三方库开发】又引出了第二部分—— aframe 框架，其简介、特性及其中应用的 ECS 架构；第三部分为通过一个小游戏 demo，快速掌握 aframe 开发基础。

可以先对小游戏进行一个体验：

游戏体验地址：https://webxr-game.zlxiang.com

源码地址：https://github.com/zh-lx/webxr-game

WebXR

什么是 WebXR？

WebXR 是一组支持将渲染3D场景用来呈现虚拟世界（虚拟现实，也称作VR）或将图形图像添加到现实世界（增强现实，也称作AR）的标准。这个标准实际上是一组 WebXR Device API[1]，它们实现了 WebXR 功能集的核心，管理输出设备的选择，以适当的帧速率将3D场景呈现给所选设备，并管理使用输入控制器创建的运动矢量。

WebXR 兼容性设备包括沉浸式3D运动和定位跟踪耳机，通过框架覆盖在真实世界场景之上的眼镜，以及手持移动电话，它们通过用摄像机捕捉世界来增强现实，并通过计算机生成的图像增强场景。

为了完成这些事情，WebXR Device API 提供了以下关键功能：

  • 查找兼容的VR或AR输出设备
  • 以适当的帧率将3D场景渲染到设备
  • （可选）将输出镜像到2D显示器
  • 创建代表输入控件运动的向量

WebXR api 是建立在早期 WebVR api 之上的，如今除了支持 VR 之外，还添加了对 AR 的支持，VR、AR是从感官体验的角度来区分的：

  • VR是用户借助外设输入输出（头戴、手柄、体感、运动感知等软硬件系统）来和纯虚拟场景的交互体验
  • AR也是用户借助外设来体验额外的虚拟内容，区别是虚拟内容是叠加在真实世界上，其方式可以是通过投射或者视频叠加

一个 WebXR 应用的生命周期

一个 WebXR 应用，底层都要经过以下生命周期：

WebXR 开发 VR 应用的优点

WebXR是基于网页的XR应用程序，可以用来支持一些本地XR应用不那么适合的场景，比如一些短小精干时效不长的营销推广页面、在线沉浸式视频、电商、在线小游戏和艺术创作等。

相比于本地 XR 应用，WebXR 具备如下等优点：

  • Web的即时性：我们只需通过链接分享一段内容然后单击，就能立即使用该内容。从用户的角度来看，这是一个优势——无需安装App即可使用内容。从开发者的角度来看，我们可以完全掌控自己的工作，无需征得许可，也无需通过管理或审批流程即可发布应用。
  • Web 标准的稳定性：因为 Web 标准的存在，WebXR api 在现阶段已经发布之后，浏览器几乎就不会删除这些 api 了，因此我们通过 WebXR 建立的应用，可以保持长时间的稳定性，而不像原生应用那般需要不断随系统升级而进行适配。
  • Web 开发拥有大量的从业者：目前 XR 在 Web 开发中尚未流行起来，而 Web 开发者的群体基数十分庞大，一旦 WebXR 开发在 Web 开发从业者中流行，那么势必会得到一个快速发展，促进该项技术的繁荣。

WebXR 应用的开发方式

主流的 WebXR 应用开发方式有三种：

使用封装好的第三方库

对于没有 WebGL 基础的用户，学习和开发成本相对都比较高，因此市面上有一些在 WebGL 基础上封装的库，帮助我们快速上手开发 WebXR，例如 aframe[2]、babylon[3]、three.js[4]

WebGL + WebXR api

使用 WebGL 加 WebXR api 开发的方式，相对来说是比较贴近于底层的，对于底层，特别是渲染模块我们可以做一些优化操作从而提升 XR 的性能和体验。

传统 3d 引擎 + emscripten

传统的 3D 应用开发我们一般都会采用一些比较知名的 3D 引擎例如 unity、unreal 等，借助 emscripten[5]，我们可以将 C 和 C++ 代码编译为 WebAssembly，从而实现 web 端的 XR。

aframe 框架

简介

aframe 是一个用来构建虚拟现实（VR）应用的网页开发框架，它基于 HTML 之上，使其上手十分简单。但是 aframe不仅仅是一个3D场景渲染引擎或者一个标记语言，其核心思想是基于 Three.js 来提供一个声明式、可扩展以及组件化的编程结构。

它由WebVR的发起人 Mozilla VR[6] 团队所构建，是当下用来开发WebVR内容主流技术方案，现在由 aframe 在 Supermedium 中的联合创建者维护。作为一个独立的开源项目，aframe 已经成长为最大的 VR 社区之一。

特性

  • 简单的 VR 制作：只需要引入