问题标签 [webxr]

我的代码在安装了 WebXr 插件的 chrome 中返回 false，我需要在同步调用中检测到函数。

这显然是对 WEBGL-Gurus 的调用：

我正在使用第二个深度相机渲染到 2x2 像素分辨率，但我只读取一个像素。

我努力了：

• renderer.readRenderTargetPixels()gl.readPixels在 Three.js 中（我认为它与pure中的相同WEBGL）。

• getImageData()渲染到Canvas.

两者似乎都非常慢：在我的情况下它们加起来为 25 毫秒，即使对于 2x2 像素的渲染目标也是如此。gl.readpixels这里还提到了特别是不合理的低效率：使用 gl.readPixels 的正确方法是什么？

因此，我正在寻找一种解决方案——任何解决方案，它可以有效地读取该单像素，并将其放入 JS 数组或对象中。谢谢。

更新：

-我更新了标题和正文，使其更加准确。

-我创建了一个 JSFiddle 来演示 readRenderTargetPixels()（相当于 gl.readpixels()）延迟。我试图让它尽可能简单，但不是......更简单:)

注意事项/使用方法：

1. 此演示在正常模式和 WebXR 模式下运行。 你不必进入 VR 就能看到巨大的延迟。JSFiddle 有一个 BUG，它没有在移动设备上显示 VRButton。为了在移动设备上进入 VR，您需要将代码复制到 index.html 并通过 WIFI 运行安全的本地服务器 (HTTPS)，或者使用不会使 VRButton ...不可见的 JSFiddle-alternative -I已经测试了很多，但我找不到一个有效的（！）

2. 该演示显示了过去 10 帧的渲染统计信息（最小和最大毫秒渲染时间），为方便起见，在屏幕上以正常和 WebXR 模式显示，因此在移动设备上也很容易看到。

3. 有一个主摄像头和一个深度摄像头。深度相机的分辨率为 2x2 像素，FOV 为 0.015 度。它指向一个旋转的立方体，它测量深度并在立方体表面上绘制一条射线和一个点。我什至优化了代码以消除 JS 中昂贵的解码数学。

4. 我主要对移动设备感兴趣，那里的延迟要高得多，为了您的方便，我提供了二维码。所以要在手机上测试它请扫描下面的#1 QR码，等待一分钟稳定，然后扫描第二个QR码进行比较。要查看/编辑 JSFiddle 中的代码，请从 url 中删除“show”并重新加载页面。

5. 请在 Chrome 浏览器上测试演示。如果您在 PC 上运行演示，在判断延迟之前等待一分钟也很重要。我注意到 PC 上的 Firefox 的延迟远低于 PC 上的 Chrome，并且更稳定，但是我感兴趣的功能在 FF 上不受支持，所以我只对 Chrome 感兴趣。在我的 PC 上，Chrome 以大约 5 毫秒的渲染时间开始（与没有该功能的 1 到 2 毫秒相比仍然很长），然后过一会儿它会增加一倍和三倍。在移动设备上，它几乎总是很高，在 15 到 30 毫秒之间（强大的移动设备）。

readRenderTargetPixels() 开启：

https://jsfiddle.net/dlllb/h3ywjeud/show

readRenderTargetPixels() 关闭：

https://jsfiddle.net/dlllb/mbk4Lfy1/show

更新#2

Andre van Kammen 的模组：移动端的延迟仍然很高（小米红米 Note 9S）。

使用网络摄像头拍摄的视频： https ://www.bitchute.com/video/5WJxdo649KiF/

有一篇关于 Pixel Buffer Objects (PBO) 的文章：http: //www.songho.ca/opengl/gl_pbo.html 它看起来很有希望，它是关于异步读取 GPU 数据的，不会让 GPU 停顿......直到我尝试了按下空格键时关闭和打开的演示，并得到零（0）差异！在我的电脑上：http: //www.songho.ca/opengl/files/pboUnpack.zip

所以，显然，自从 gl.readpixels 推出 30 年后，技术未能提供一种可靠且有效的方式来读取该死的像素......这非常可耻，我正在设计硬件，而我从中学到了一件事多年来，电子领域的每个问题都有解决方案，软件和所有其他领域也是如此。显然，对于行业的某些部分来说，这是马虎第一，而不是性能第一。请证明我错了。

使用 WebGL2，我将 4K x 2K 立体视频作为纹理流式传输到球体内部，以提供 360° VR 视频播放能力。考虑到按时返回，我已经优化了尽可能多的代码库，并且应用程序在使用 .H264 视频源时运行完美。

然而; 当使用 8 位 VP8 或 VP9（提供卓越的保真度和文件大小，AV1 对我不可用）时，由于解码 VP8/VP9 视频需要额外的 CPU 要求，我在较弱的系统上遇到 FPS 下降。

在分析应用程序时，我发现texSubImage2D更新视频纹理的每帧调用消耗了每一帧的大部分（texImage2D由于它的分配而更糟），但我不确定如何进一步优化它的使用。以下是我已经在做的事情，以尽量减少它的影响：

我在初始加载时使用 texStorage2D 缓存纹理的内存空间，以使其尽可能连续。

然后，在我的渲染循环中，处理每个对象的左右眼姿势，然后再移动到下一个对象。gl.bindTexture这使我只需要gl.texSubImage2D每帧每个对象调用一次。此外，我还跳过填充着色器程序定义了该实体的材质是否与前一个实体的材质相同、视频是否暂停或仍在加载。

我已经考虑对所有 for 循环使用预定义的计数器来避免 var i=0; 分配，但从中获得的收益似乎不值得付出努力。

旁注，源视频实际上大于 4K，但任何高于 4K 和 FPS 的视频都会研磨到大约 10-12。

强制性：上面的关键功能是从我编写的一个更大的 WebGL 渲染框架中提取的，它本身已经运行得非常快。我不“只使用”Three、AFrame 或其他此类通用库的原因是它们没有来自 DOD 的 ATO，而内部开发的代码是可以的。

21 年9 月 9 日更新：当 chrome 从 90 更新到 93 时，texSubImage2D 的 WebGL 性能急剧下降，导致每帧执行 +100 毫秒，无论 CPU/GPU 能力如何。现在更改为使用 texImage2D 会导致每帧大约 16 毫秒。此外，从 RGB 转换到 RGB565 提供了几毫秒的性能，同时最低限度地牺牲了颜色。

我仍然很想听听 GL/WebGL 专家关于我还能做些什么来提高性能。

我有一个页面，它使用<object data="" type="text/html"></object>标签在自身内部加载其他内容页面。各个页面在运行之前需要做的一件事是使用以下方法确定是否支持其 XR 内容：

这在 90% 的时间里都有效。但是，如果由于某种原因immersive-vr在父页面加载后失去支持，则所有子内容页面将在解决承诺时返回错误true值，因为在 SteamVR 打开时初始页面加载期间设置了导航器。

场景：SteamVR 在后台运行，您加载网页，成功体验一个 XR 演示，然后 SteamVR 关闭/崩溃/等。当您从列表中选择下一个内容项时，或尝试初始化另一个xrSession. 创建 xrSession 时会引发错误，因为immersive-vr不再受支持。

有没有办法在不重新加载整个网页的情况下重新刷新导航器？

我想禁用 AR 快速查看中的即时扫描和放置，并实现点击/触摸来放置对象。可以禁用 AR 快速查看中的即时对象放置吗？

在过去的几个月里，我一直在用我的笔记本电脑做一个项目。当 webpack 编译我的代码时，重新加载页面大约需要 1 秒。

我现在已经移动到我的桌面，在 Chrome 中加载页面大约需要 11 秒。我在两台机器（Windows 10）上使用相同版本的节点、webpack-dev-server 和 webpack。

铬合金：

边缘：

在我的另一台机器上快速使用 Chrome：

我也禁用了所有扩展，但无济于事。我找不到模式，但这在边缘上并不一致，它也会在那里加载相同的 11 秒，但并非总是如此。有什么想法可以解决这个问题吗？

A-Frame 的沉浸式 AR 功能可以在我测试过的一些 Android 设备上运行，但我在 iOS 上还没有成功。

可以使用商业外部库在 iOS 上使用 A-Frame 场景进行无标记 AR。示例：这个来自 Zapworks 的演示使用他们的 A-Frame SDK。https://zappar-xr.github.io/aframe-example-instant-tracking-3d-model/

跟踪似乎远不及 A-Frame 的命中测试演示 ( https://github.com/stspanho/aframe-hit-test )，但它似乎确实适用于我拥有的几乎任何设备和浏览器试过了，对于预期的目的来说已经足够了。

我很乐意回退到质量较低的 AR 模式，以便在不支持浏览器沉浸式 AR 的设备中使用 AR。我还没有找到一个兼容 A-Frame 的解决方案，仅使用免费/开源组件来执行此操作，仅使用 Zapworks 和 8th Wall 等商业产品。

是否有用于 A-Frame 的免费/开源插件，允许在非常广泛的设备上使用无标记 AR 渲染场景，类似于 Zapworks？

我想构建一个输出 RGB-D 图像/视频的程序/功能。RGB-D 图像是普通的 rgb 图像，但每个像素也有一个像这样的深度分量：

这段代码可以访问你手机的所有数据，所以我可以访问多个摄像头、加速度计、方向数据等。我的目标是制作最好的 RGB-D 视频。

我发现了两种主要的方法，一种是 VO（视觉里程计），您可以将普通视频输入到一些算法中，通常是 CNN（卷积神经网络）。该算法比较某些跟踪点的距离变化，并得出深度图，如下所示：

更多信息在这里和这里

VIO（视觉惯性里程计）数据类似，但它采用惯性测量，例如加速度计数据。我已经看到 ARCore 在这里这样做：

问题是，我不确定哪种方法可以产生更好的 RGB-D 数据，而且我无法与地面真实值进行比较。我很想使用 ARCore/WebXR，因为它有一个易于使用的 JS Api，它很容易使用，因为它可以在手机上运行，​​而不是为 VO 编译 C++ 代码，它使用 KITTI 或 SLAM 等算法。

我的问题是，收集最准确的 RGB-D 数据的最佳方法是什么？

我想知道使用 A-frame ( https://aframe.io )如果发生调用的函数时用户处于 vr 模式，我如何让用户退出vr 模式myFunction()。只是为了澄清。当调用的函数myFunction()发生时，如果用户不在 vr 模式，我们不会有任何效果，但如果用户处于 vr 模式，他们将退出 vr 模式。如何才能做到这一点？

我一直在努力让我的 A-Frame 场景通过 SteamVR 在我的 VR 耳机中显示。简而言之，我的目标是找到一种方法让 A-Frame 项目在我的头显上正确显示，但我的头显没有收到来自 A-Frame 场景的任何馈送，而是显示纯灰色或黑色。奇怪的是：有时，我可以让 A-Frame 场景显示在我桌面上的 SteamVR VR 视图窗口中，但是当我戴上耳机时，显示仍然是灰色或黑屏。不幸的是，在我尝试在其中运行 A-Frame 场景的浏览器的控制台日志中（到目前为止）没有遇到任何错误。

值得一提的是，HTC Vive 耳机和 OptiTrack 设备确实可以工作。它们适用于 Unity 程序和其他 VR 应用程序。他们只是不使用 WebVR、WebXR 和 A-Frame 程序。

通常发生的情况是，当我在 Web 浏览器选项卡中手动或使用 http-server 和 ngrok 打开 A-Frame 场景时，该场景在桌面显示器上运行良好。但是，它会继续打开 SteamVR 并尝试连接到我的耳机。SteamVR 通常会说Playing Firefox或Playing Chrome。有时 A-Frame 场景会出现在 SteamVR 应用程序的 VR 视图中，但每次我尝试此操作时，耳机显示屏都会变黑或变灰。这是我所能得到的。

设备：

• HTC Vive Pro Eye（带 OptiTrack 有源标签附件和无线适配器）
• OptiTrack 红外摄像机（不使用基站）
• HP Z4 台式工作站计算机

这是我到目前为止所尝试的：

• 在 Chrome、Chromium、Firefox、Edge 和 Firefox Nightly 等浏览器中启用 web xr 和 vr 标志（但是，对于 Chrome 等浏览器，我无法在任何地方找到 web vr 或 xr 标志）
• 在提供启用/禁用 xr 沙箱选项的 Web 浏览器中禁用 xr 沙箱
• 试用 SteamVR 测试版
• 使用带有 Edge 的混合现实 HP 耳机（背包式 VR 电脑随附的耳机）
• 尝试不同版本的 A-Frame
• 尝试使用一些人推荐的 Supermedium，但我认为不会打开 A-Frame 场景......

我会粘贴错误和代码片段，但对于这种情况，它没有任何意义，因为没有弹出错误，而且问题不太可能来自 HTML/JavaScript A-Frame 代码。感谢您花时间阅读和考虑这个问题！如果您需要任何其他详细信息，我会在这里提供，所以请告诉我。