网页调用摄像头_【WebAR】虚拟现实来到网页——WebXR Device API第二部分

最新推荐文章于 2024-09-01 08:25:59 发布

weixin_39717152

最新推荐文章于 2024-09-01 08:25:59 发布

阅读量735

点赞数

文章标签：网页调用摄像头

本文链接：https://blog.csdn.net/weixin_39717152/article/details/111395435

版权

本文深入解析WebAR技术，介绍WebXR Device API的帧循环概念，阐述如何利用XRViewerPose、XRView等对象进行画面渲染。通过WebGL和WebGL2在帧循环中绘制内容，探讨了WebGLFramebuffer、XRViewport等关键组件在AR场景中的作用，以及在不同设备上的应用差异。

摘要由CSDN通过智能技术生成

作者：Joe Medley

原文：https://web.dev/vr-comes-to-the-web-pt-ii/

本文介绍帧循环（frame loop），这是一个无限循环，内容被重复绘制到屏幕上。内容绘制在帧中，一系列的帧创造了运动的效果。

前言

WebGL和WebGL2是在WebXR App的帧循环期间呈现内容的唯一方法。幸运的是，许多框架在WebGL和WebGL2的基础上提供了一层抽象。这样的框架包括three.js， babylonjs和 PlayCanvas，而A-Frame和React 360设计用于与WebXR进行交互。

本文既不是WebGL教程，也不是框架教程。本文使用Immersive VR Session示例解释帧循环的基础。

玩家和游戏

当理解帧循环时，我试图减少一些细节。有很多对象在起作用，但其中一些仅由其他对象上的属性来命名。我将描述被称为“玩家”的对象。然后，我将描述它们如何相互作用，我称之为“游戏”。

玩家

XRViewerPose

姿势（Pose）是物体在3D空间中的位置和方向。观看者和输入设备都有一个姿势，但我们在这里关注观看者的姿势。观看者和输入设备的姿势都具有一个transform属性，该属性将其位置描述为矢量，并将其方向描述为相对于坐标原点的四元数。调用XRSession.requestReferenceSpace()时，将根据请求的参考空间类型指定起点。

对于参考空间，需要一些解释。在我的文章中介绍过它们。我用作本文的示例使用一个'local'参考空间，这意味着起点位于会话创建时查看者的位置，而没有清晰的界定，并且其精确位置可能因平台而异。

XRView

视图对应于查看虚拟场景的相机。视图具有transform描述其作为矢量的位置及其方向的属性。这些以向量、四元数、矩阵等形式提供，您可以根据哪种最适合您的代码来使用任一种表示形式。每个视图对应于设备用来向观看者呈现图像的显示器或显示器的一部分。XRView对象从XRViewerPose对象以数组形式返回。数组中的视图数量有所不同。在移动设备上，AR场景具有一个视图，该视图可能会或不会覆盖设备屏幕。耳机通常有两种视图，每只眼睛一个。