进入 WebXR 的世界

简介: 随着元宇宙的兴起,VR和AR技术再次回到同学们的视野。比起完全是0%支持率的WebGPU,作为WebVR技术的后继者,WebXR Device API以0%+71.08%的支持率展示了对于一个新的feature的期待。

面对越来越碎片化的移动端生态,Web标准作为可能是唯一的跨平台工具,在生态中的重要性不言而喻。

如果想要学习WebXR,从哪里入手呢?别急,虽然WebXR和WebGPU还都不成熟,但是现有的技术已经可以让我们实现超出你想象的效果了。

3DoF和6DoF

3DoF是Three Degrees of Freedom的简称,意思是三个自由度。同理,6DoF是Six Degrees of Freedom的简称,表示有6个自由度。

当只有三个自由度的时候,就是我们日常使用的3D模型系统那样的,只能响应旋转操作。千里之行,始于足下。我们就从3个自由度开始。

2D时代,我们通过布局来管理页面的版面。到了3D情况下有些不同。我们先从一个例子来体会一下。

CSS时代我们就是画各种盒子的,所以为了向CSS致敬,我们也画一个3D的盒子。

前端写3D,最主要的框架是Three.js。我们从Three.js的一个封装,A-frame入手。类似于div,在A-frame中使用a-scene来作为一个场景的容器。场景中放各种实体。实体有各种属性。

a-box是一个3D的盒子。a-sky是一个背景天空。


<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 0 0" color="#d4380d"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

image.png

a-box的position属性是x,y,z的值。其中x的正方向向右,y的正方向向上,z的正方向向外。

rotation也是按x,y,z轴旋转。

我们试下先水平向左转30度。为了区分上图我们换个颜色:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 -30 0" color="#eb2f96"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

image.png

一个场景不能只有孤零零一个元素啊,我们再给我们的盒子上面顶个球。我们给盒子也换个方向,让它右转30度。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box>
      <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

image.png这两个元素是一体的,可以一起拖来拖去。

从3D到6D

光有形状太单调了,我们需要像加载2D时代的图片一样的3D模型。

a-assets用来指定资源,每一条资源项目用a-assets-item来表示。

  <a-assets>
        <a-asset-item id="glass" src="./model.glb"></a-asset-item>
      </a-assets>
      <a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass">          
      </a-entity>
<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box>
      <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere>
      <a-sky color="#1890ff"></a-sky>
      <a-assets>
        <a-asset-item id="glass" src="./model.glb"></a-asset-item>
      </a-assets>
      <a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass"></a-entity>
    </a-scene>
  </body>
</html>

image.png

这时候我们需要VR眼镜和支持VR的游览器。需要硬件设备的支持来让我们从3自由度跨越到6自由度。

小伙伴们表示缺少VR设备,我们先按下不表,说说不需要设备就可以使用的AR技术。

比如,上面的图我们通过AR的插件可以支持AR模式:  


image.png

把眼镜戴到人脸上

A-frame主要用来处理VR,但是它也是AR的基础。要实现AR,我们再加一个支持AR的库就好了,比如MindAR.

我们下面就把上面加载的小眼镜戴到脑袋上:

640 (2).gif

<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face.prod.js"></script>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face-aframe.prod.js"></script>
      <style>
        body {
          margin: 0;
        }
        .example-container {
          overflow: hidden;
          position: absolute;
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div class="example-container">
        <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
          <a-assets>
            <a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
            <a-asset-item id="glassModel" src="./model.glb"></a-asset-item>
          </a-assets>
          <a-camera active="false" position="0 0 0"></a-camera>
          <a-entity mindar-face-target="anchorIndex: 168">
        <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>
          </a-entity>
          <a-entity mindar-face-target="anchorIndex: 10">
        <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>
          </a-entity>
      </div>
    </body>
  </html>

我们可以看到,我们在a-scene里面引入了mindar-face属性的方式来调用Mind-AR的库。因为用到摄像头,我们增加一个a-camera实体。

头部遮挡器模型

在代码中我们发现一个奇怪的东西,我们引入了一个不知道有什么作用的gltf model.

    <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>

这是初涉AR都会遇到的问题。就是我们从摄像头中获取了足够的人脸的信息,但是我们还需要对人头进行3D模型的重建,这样才能跟眼镜的模型一起计算遮挡关系。

在Mind-AR中,通过mindar-face-occluder属性来实现这个遮挡器的模型,如上面的代码所示。

另外,我们是如何将确定在人脸的什么位置呢?

这需要深度学习人脸识别的模型给我们提供帮助。我们使用Tensorflow.js的Face Landmarks Detection模型,它会将人脸识别为468个关键点。

image.png

如果看不清的话,我们将头顶部分局部放大一下:

image.png

从中我们可以看到,头顶最中央的位置的锚点编号是10,我们的眼镜定位就是选这个点做定位的。

   <a-entity mindar-face-target="anchorIndex: 10">
        <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>

image.png

除此之外,arSystem还支持下面的事件:

  • arError: 错误处理
  • targetFound: 人脸识别成功
  • targetLost: 人脸丢失

Mind-AR背后的技术

我们打开控制台,可以看到Mind-AR背后的几个技术:

  • wasm
  • simd
  • webgl2

要支持这种级别的计算,wasm+simd加上webgl2/WebGPU是标配。还没有学习相关技术的同学,敬请关注我的相关系列文章。

另外,前面我们展示的是人脸识别的能力。我们采用其它的深度学习网络,就可以实现其它的锚点功能。

比如,我们可以用coco keypoints模型,使用17个点来定位人的姿态。

image.png

image.png

更多的tfjs的模型,还有其它兄弟框架的模型,都可以集成进来一起为我们工作。

比如可以翻翻tfjs的模型库:https://github.com/tensorflow/tfjs-models

用React写Mind-AR

如果不习惯HTML格式的话,Mind-AR也支持React的写法:

import React, { useState } from 'react';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import './App.css';
import MindARViewer from './mindar-viewer';
function App() {
  const [started, setStarted] = useState(false);
  return (
    <div className="App">
      <h1>Example React component with <a href="https://github.com/hiukim/mind-ar-js" target="_blank">MindAR</a></h1>
      <div>
    {!started && <button onClick={() => {setStarted(true)}}>Start</button>}
    {started && <button onClick={() => {setStarted(false)}}>Stop</button>}
      </div>
      {started && (
    <div className="container">
      <MindARViewer/>
      <video></video>
    </div>
      )}
    </div>
  );
}
export default App;

小结

总结Web AR技术,我们主要做三件事:

  1. 图像识别与物体跟踪:这是一门比较成熟的基于深度学习的技术。实践中,我们主要使用tensorflow.js的模型来实现
  2. 建模:就像我们给头进行建模所做的事情一样,要让我们识别出来的视频变成3D模型
  3. 合成:在建模的基础上,将其他的对象一起绘制上去。这方面主要就是结合Three.js, Babylon.js以及VR的A-frame等框架

我们要在手机上落地,还需要对tf.js这样的深度学习引擎,物体识别的算法,还有3D绘图技术进行深度的优化。

此外,3D建模只是模仿外形,我们还没有触及物体的灵魂。后面我们还需要结合数字孪生等技术,让物体数据驱动、智能化,提升交互的效率,更好地服务于业务。

相关文章
element中el-cascader级联 下拉选择-可单独多选(整理)
element中el-cascader级联 下拉选择-可单独多选(整理)
|
6月前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(4)
JavaScript 权威指南第七版(GPT 重译)(六)
207 3
JavaScript 权威指南第七版(GPT 重译)(六)(4)
|
druid 安全 IDE
SpringBoot敏感配置加密:Druid
SpringBoot敏感配置加密:Druid
676 0
|
NoSQL Unix Linux
Linux下gdb调试生成core文件并调试core文件
Linux下gdb调试生成core文件并调试core文件
2048 1
Linux下gdb调试生成core文件并调试core文件
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
|
JavaScript
Vue配置自动隐藏console打印日志
vue项目中,自动把console.log()打印日志隐藏
1678 41
|
消息中间件 SQL 移动开发
waynboot商城发布啦,整合了Redis、RabbitMQ、ElasticSearch等常用中间件, 根据生产环境开发经验而来不断完善、优化、改进中
waynboot商城发布啦,整合了Redis、RabbitMQ、ElasticSearch等常用中间件, 根据生产环境开发经验而来不断完善、优化、改进中
278 0
|
达摩院 算法 API
如何吃,少花钱又营养丰富?可用MindOpt线性规划求解来决策
营养调配问题的的目标是利用优化模型来设定每日饮食菜单,在满足各类营养的需求同时更能优化总成本
如何吃,少花钱又营养丰富?可用MindOpt线性规划求解来决策
|
数据采集 运维 前端开发
我用三个月时间仿造了一个稿定设计 | 2022年中总结
回想当时我还在做着一些零散的项目需求,这时候领导给了我一个任务,说让我重构一个“在线PS”,我就在这样一个没有产品、没有UI、研发只有1人、开发工时约等于没有的情况下,在追逐竞品的无限挫败感中,勉强完成了第一版的开发。