浏览器中的虚拟现实和增强现实

myzbx 2024-12-12 13:39 17 浏览

介绍

这篇关于渐进式 Web 应用程序的文章是教你如何在Web 应用程序中实现虚拟现实 (VR) 和增强现实 (AR)。因此，我们使用A-Frame和 WebXR Web API来实现。通过阅读该文章，我们将学习到虚拟现实和增强现实是如何应用到我们的浏览器，了解实现框架A-Frame、WebXR设备接口的相关知识点。

何为VR、AR

VR 将用户带到另一个世界，给予身临其境的感受，如同自己身处在这个虚拟世界中一样。另一方面，AR 提供了将现实世界和虚拟世界相互融合的可能性。VR 和AR 为行为改变、知识转移、培训和研究提供独特的体验。例如，想想VR 直播、社交 VR，这一切现在也可以在浏览器中实现！

什么是A-Frame？

图1

A-Frame 是一个用于构建 VR 体验和 AR 体验的 Web 框架。A-Frame 基于 HTML(这我喜欢)，它的核心是一个强大的实体框架，提供了可扩展和可重用的结构，建立在WebXR 和 Three.js 之上，开发人员可以无限制地访问 JavaScript、DOM API、three.js、WebXR 和 WebGL。

WebXR 是一个用于在浏览器中创建 VR/AR 体验的 Web API。
Three.js 是一个 VR/AR 框架
WebGL 负责渲染

A-Frame学习地址：https://aframe.io/aframe-school/#/

A-Frame其实内部使用Web Components自定义了HTML标签，内置WebXR 和 Three.js，以致我们使用如同HTML标签一般丝滑！如果想入门 A-Frame 可以阅读Glitch上的入门示例：传送门。Glitch就是类似Codepen的平台。

图2

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

从入门示例中可以看到，A-Frame提供了一些a-*自定义标签协助我们完成构建 VR/AR程序。

A-Frame 中的 ECS

A-frame 是基于实体-组件-系统 (ECS) 架构。

ECS 架构是 3D 和游戏开发中遵循组合优于继承原则的常见模式。也就是说，每个实体都由组件组成（参见：实体的抽象示例）。

实体是标明哪些组件可以链接到的容器对象。组件又是可重用的模块，可以链接到实体以此向实体提供功能。

而所有逻辑都是通过组件实现的，我们通过配置或组装组件来定义不同类型的实体。A-Frame 拥有代表 ECS 各个部分的 API：

实体由<a-entity>元素表示
组件由<a-entity> 上的HTML 属性表示。

实体的抽象示例

下面你会看到一些抽象示例，说明如何使用组件组成实体。上面入门示例中的球体就是一个实体。而位置、几何和材料是这个实体的组成部分。

Sphere = Position + Geometry + Material (球体 = 位置 + 几何 + 材质)
Ball = Position + Velocity + Physics + Geometry + Material (球 = 位置 + 速度 + 物理 + 几何 + 材料)

A-Frame 中的实体语法

根据前面的示例，球体的实体语法如下所示：

<a-entity geometry="primitive: sphere; radius: 1.5"
       material="color: white; shader: flat; src: glow.jpg"
       position="0 0 -5"></a-entity>

因此，要绘制这个球体，你需要定义一个 <a-entity>组件（Html扩展标签），并将组件添加为 HTML 属性。大多数组件都有多个属性，由类似于 CSS 的语法表示。

Primitives

中文意思就是非派生原始的意思，其实Primitives就是 A-Frame 提供易于使用的HTML自定义元素，包装底层实体组件，说到底就是进行分类了，衍生了上面示例的<a-box>、<a-sphere>等HTML自定义元素，意在使开发者们更容易接受。

下面的是<a-box>与<a-entity>的用法比较：


Primitive:
<a-box color="red" width="3"></a-box>

Entity:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>

在浏览器中构建 VR 场景

我们开始使用实体和动画构建一个基本的 A-Frame VR 场景:

图3

创建index.html

创建index.html，

<html>
   <head>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   </head>
   <body>
      <a-scene>
      </a-scene>
   </body>
</html>

场景

上述代码，出现了一个<a-scene>标签，场景是一切发生的地方，所有实体和组件都必须添加到要渲染的场景中，在 A-Frame 中，场景由 <a-scene> 实体标签表示。

<a-scene> 相当是为我们提供处理所有three.js 和 WebXR 的容器，例如设置 WebGL（它负责渲染）、画布、相机、灯光、渲染器、渲染循环和 out-of-the-box WebXR - 支持 HTC Vive、Oculus Rift、三星 GearVR 等平台。

场景实体继承Entity 类，因此继承了Entity 类的所有属性、链接组件的能力以及等待开始渲染循环之前其所有子实体和节点（例如 <a-assets> 和 <a-entity> ）加载的行为。

添加实体

在创建好的<a-scene>中，可以使用 A-Frame 的内置的Primitives添加 3D 实体，例如<a-box>。以下代码同时定义了<a-box> 的颜色。

<a-scene>
   <a-box color="red"></a-box>
</a-scene>

图4

但是，由于默认相机和位于 0 0 0原点的默认位置，除非移动它，否则您将无法看到该框，你可以通过使用位置组件将盒子转换为 3D 空间来做到这一点。

在 3D 中转换实体

我们先来看看 3D 空间。A-Frame 使用右手坐标系（如下图）。使用默认相机方向：X 轴正向向右延伸，Y 轴正向向上延伸，Z 轴正向向我们伸出屏幕外：

图5

让<a-box>对相机可见

让我们让盒子对相机可见，旋转和缩放它。要使其可见，您可以使用位置组件在负 Z 轴上将框向后滑动 5 米。同时还应该在正 Y 轴上将盒子向上移动 2 米，这样盒子就不会与地面相交。

<a-scene>
   <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
   </a-box>
</a-scene>

A-Frame 的距离单位是米，因为 WebXR API 返回以米为单位的位置。在为 VR 设计场景时，重要的是要考虑实体的真实世界规模。height="10" 的框在你的桌面上可能看起来很正常，但在 VR 世界中该框会显得很大。

旋转的单位是度，尽管在转换到 three.js 时它会在内部转换为弧度。

父子转换

A-Frame HTML 表示 3D 场景图。在场景图中，实体可以有一个父级和多个子级。子实体会从其父实体继承变换（即位置、旋转和缩放）。

可以将球体作为盒子的子项，

<a-scene>
  <a-box position="0 2 0" rotation="0 45 45" scale="2 4 2">
      <a-sphere position="1 0 3"></a-sphere>
  </a-box>
</a-scene>

如果我们计算球体的位置，它将是 1 2 3。这是通过将球体的父位置与其自身位置组合计算来实现的。同样，球体将继承盒子的旋转和缩放。

使用环境组件添加环境

A-Frame允许开发人员创建其他人可以轻松使用的可重用组件。

接下来我们来使用环境组件，这个组件用一行 HTML 为我们生成了各种环境。环境组件是一种直观地启动我们的 VR 应用程序的简单方法，它提供了十几个具有众多参数的环境。

首先，添加带有脚本标签的环境组件。

<head>
 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
 <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js">
 </script>
</head>

然后，我们添加一个 a-entity实体将环境组件链接到的 <a-scene> 标记中。你可以指定预设环境（例如，预设：森林）。以及许多其他参数，例如通过设置dressingAmount参数来获得树木数量：

<a-scene>
  <a-box color="red" position="0 2 -5" rotation="0 45 45"
         scale="2 2 2"></a-box>
  <!-- Out of the box environment! -->
  <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
</a-scene>

图6

预设是定义特定样式的参数值的组合，它们是你可以自定义的起点。

你可以使用Inspector(ctrl + alt + i)调整这些参数。Inspector是用于检查和调整实体/组件的工具。Inspector 类似于浏览器的 DOM 检查器，但专为 3D 和 A-Frame 量身定制。

添加资产管理系统

你可以使用 <img> 元素将图片资源应用到场景中去，

资产管理可以在渲染场景之前加载和缓存图像和视频。预加载和缓存可以提高性能。以下是如何将资产管理应用于图像的示例：

<a-scene>
  <a-assets>
      <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
  </a-assets>
  <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
      <a-sphere position="1 0 3"></a-sphere>
  </a-box>
  <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
</a-scene>

图7

定义了一个<a-assets> 标签，其中定义了带有图像的<img>标签。这个 img 也有一个 id=" boxTexture "。

图8

最后在<a-box>引用此 id。

添加动画

可以使用动画组件为盒子和球体设置动画，

要使盒子上下移动，请设置以下内容：

要将框在 Y 轴上移动 2 到 2.2 米，请使用属性进行设置：object3D.position.y；至：2.2。
方向（dir）是交替的。即交替上升和下降。
持续时间表示一个周期持续多长时间（2000 毫秒）。
并且，循环执行指定动画。

  <a-scene>
    <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
    </a-assets>
    <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
           animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true">
        <a-sphere position="1 0 3"></a-sphere>
    </a-box>

    <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
</a-scene>

上述的最终结果可以自己开启一个HTML页面查看效果。

增强现实

通过 A-Frame 还可以实现 AR 体验。

AR 实施的可以从 Glitch上的入门示例(https://glitch.com/~aframe)开始

图9

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>
</html>

接下来我们可以针对上述应用程序为其添加hittesting(命中测试)，其实现也可以在以下位置找到实现 AR-hittesting，代码如下：

<html>
<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
 <script src="/ar-components.js"></script> 
</head>
<body>
  <a-scene webxr="optionalFeatures: hit-test">
    <a-entity id="world" scale="0.1 0.1 0.1">
    <a-box position="-1 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -0" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -1" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    
  </a-entity>
  <a-entity ar-hit-test="target:#world;">
     <a-plane rotation="-90 0 0" width="0.2" height="0.2" src="./arrow.png" material="transparent:true"></a-plane>
  </a-entity>
  
  </a-scene>
  <script>
    const reticle = document.querySelector("[ar-hit-test]");
    
  </script>
</body>
</html>

你可以使用此URL https://ar-basic-hittest.glitch.me/在你的手机上测试最终版本。

通过命中测试，您可以将虚拟对象与真实世界的对象（例如地板、桌子和墙壁）对齐。通过下面的示例，您可以将图 9中的对象与例如桌子对齐，方法是通过你的相机（使用十字线）瞄准桌子，然后触摸该桌子（命中测试）。

我们发现，要在 AR 中进行命中测试，你首先需要在脚本标签中包含ar-components.js。你可以从最终的 Glitch 实现中复制这个库(上述已经提过)。

在场景a-scene组件中，我们需要表明要使用WebXR 功能：命中测试，webxr="optionalFeatures: hit-test"。

然后通过实体a-entity组件设置对象的真实比例scale="0.1 0.1 0.1"。

最后，定义了一个新实体：ar-hit-test。该组件可以将虚拟对象内嵌在你通过相机看到的真实对象上（图 10）。要支持命中测试，请在20 厘米可见区中定义一个标线。你可以通过a-plane 组件执行此操作。

备注：我的iphone手机体现不出效果

结语

这篇文章主要介绍了如何使用A-Frame框架在浏览器中来实现虚拟现实 (VR) 和增强现实 (AR)，内容也相对简单，容易理解，可以说只是入门，想了解更多，可以深入了解A-Frame知识，以及WebXRWEB 标准，感谢阅读！

译自Virtual Reality and Augmented Reality in the Browser
文章来自公众号@前端晚间课

HTML 实体

上一篇：使用属性中的 XSS 负载绕过白名单
下一篇：没人愿意使用这些 HTML 标记

浏览器中的虚拟现实和增强现实

介绍

何为VR、AR

什么是A-Frame？

A-Frame 中的 ECS

实体的抽象示例

A-Frame 中的实体语法

Primitives

在浏览器中构建 VR 场景

增强现实

结语

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」