Three.js + Tensorflow.js 构建实时人脸点云

本文重点介绍使用 Three.js 和 Tensorflow.js 实现实时人脸网格点云所需的步骤。它假设你之前了解异步 javascript 和 Three.js 基础知识，因此不会涵盖基础知识。

该项目的源代码可以在此 Git 存储库中找到。在阅读本文时查看该代码将会很有帮助，因为将跳过一些基本的实现步骤。

本文还将以面向对象的方式实现该项目，其中包含大量抽象，因此对 Typescript 中的类有基本的了解是一个优势。

推荐：用 NSDT编辑器快速搭建可编程3D场景

1、获取 Three.js 设置

由于本教程的目标是渲染人脸点云，因此我们需要从设置三个 js 场景开始。

设置场景所需的数据和方法封装在 sceneSetUp.ts 中名为 ThreeSetUp 的工厂类中。该类负责创建所有必要的场景对象，如渲染器、相机和场景。它还启动画布元素的调整大小处理程序。该类具有以下公共方法：

getSetUp：此函数返回一个对象，其中包含相机、场景、渲染器和画布的大小信息。

getSetUp(){
return {
camera: this.camera,
scene: this.scene,
renderer : this.renderer,
sizes: this.sizes,
}
}
apply OrbitControls：此方法将负责在我们的设置中添加轨道控件，并返回我们需要调用以更新轨道控件的函数。

applyOrbitControls(){
const controls = new OrbitControls(
this.camera, this.renderer.domElement!
)
controls.enableDamping = true
return ()=> controls.update();
}

我们的主要实现类 FacePointCloud 将启动 ThreeSetUP 类并调用这两个方法来获取设置元素并应用轨道控制。

2、从网络摄像头生成视频数据

为了使我们能够获得面部网格跟踪信息，我们需要一个像素输入来提供给面部网格跟踪器。在这种情况下，我们将使用设备网络摄像头来生成此类输入。我们还将使用 HTML 视频元素（不将其添加到 Dom）从网络摄像头读取媒体流，并以我们的代码可以交互的方式加载它。

在此步骤之后，我们将设置一个 HTML canvas 元素（也无需添加到 Dom）并向其渲染视频输出。这使我们还可以选择从画布生成三个 Js 纹理并将其用作材质（我们不会在本教程中实现这一点）。我们将使用 canvas 元素作为 FaceMeshTracker 的输入。

为了处理从网络摄像头读取媒体流并将其加载到视频 HTML 元素，我们将创建一个名为 WebcamVideo 的类。此类将处理创建 HTML 视频元素并调用导航器 api 来加载获取用户权限并从设备的网络摄像头加载信息。

在启动此类时，将调用私有 init 方法，该方法具有以下代码：

private init(){
  navigator.mediaDevices.getUserMedia(this.videoConstraints)
  .then((mediaStream)=>{
    this.videoTarget.srcObject = mediaStream
    this.videoTarget.onloadedmetadata = () => this.onLoadMetadata()
    }
  ).catch(function (err) {
    alert(err.name + ': ' + err.message)
    }
  )
}

此方法调用导航器对象的 mediaDevices 属性上的 getUserMedia 方法。此方法将视频约束（也称为视频设置）作为参数并返回一个承诺。此承诺解析为包含来自网络摄像头的视频数据的 mediaStream 对象。在 Promise 的解析回调中，我们将视频元素的源设置为返回的 mediaStream。

在promise解析回调中，我们还在视频元素上添加了一个loadedmetadata事件监听器。该监听器的回调会触发对象的 onLoadMetaData 方法并设置以下副作用：

自动播放视频
确保视频内嵌播放
调用我们传递给对象的可选回调，以便在事件触发时调用

private onLoadMetadata(){
this.videoTarget.setAttribute('autoplay', 'true')
this.videoTarget.setAttribute('playsinline', 'true')
this.videoTarget.play()
this.onReceivingData()
}

此时，我们有一个 WebcamVideo 对象，它负责创建包含实时网络摄像头数据的视频元素。下一步是将视频输出绘制在画布对象上。

为此，我们将创建一个使用 WebcamVideo 类的特定 WebcamCanvas 类。此类将创建 WebcamVideo 类的实例，并使用它通过画布上下文方法的drawImage()将视频的输出绘制到画布上。这将在 updateFromWebcam 方法上实现。

updateFromWebCam(){
  this.canvasCtx.drawImage(
    this.webcamVideo.videoTarget,
    0,
    0,
    this.canvas.width,
    this.canvas.height
  )
}

我们必须在渲染循环中不断调用此函数，以不断使用视频的当前帧更新画布。

此时，我们已将像素输入准备为显示网络摄像头的画布元素。

3、使用 Tensorflow.js 创建 Face Mesh 检测器

创建人脸网格检测器并生成检测数据是本教程的主要部分。这将实现 Tensorflow.js 人脸特征点检测模型。

npm add @tensorflow/tfjs-core, @tensorflow/tfjs-converter
npm add @tensorflow/tfjs-backend-webgl
npm add @tensorflow-models/face-detection
npm add @tensorflow-models/face-landmarks-detection

安装所有相关包后，我们将创建一个处理以下内容的类：

加载模型
获取探测器对象
将检测器添加到类中
实现一个公共检测函数以供其他对象使用。

我们创建了一个名为faceLandmark.ts 的文件来实现该类。文件顶部的导入是：

import '@mediapipe/face_mesh'
import '@tensorflow/tfjs-core'
import '@tensorflow/tfjs-backend-webgl'
import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection'

运行和创建检测器对象将需要这些模块。

我们创建 FaceMeshDetectorClass，如下所示：

export default class FaceMeshDetector {
  detectorConfig: Config;
  model: faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
  detector: faceLandmarksDetection.FaceLandmarksDetector | null;

  constructor(){
    this.model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
    this.detectorConfig = {
      runtime: 'mediapipe',
      refineLandmarks: true,
      solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh',
     }
    this.detector = null;
  }

  private getDetector(){
    const detector = faceLandmarksDetection.createDetector(
      this.model, 
      this.detectorConfig as faceLandmarksDetection.MediaPipeFaceMeshMediaPipeModelConfig
    );
    return detector;
  }

  async loadDetector(){
    this.detector = await this.getDetector()
  }

  async detectFace(source: faceLandmarksDetection.FaceLandmarksDetectorInput){
    const data = await this.detector!.estimateFaces(source)
    const keypoints = (data as FaceLandmark[])[0]?.keypoints
    if(keypoints) return keypoints;
    return [];
  }
}

这个类中的主要方法是 getDetector，它调用我们从 Tensorflow.js 导入的 FaceLandMarksDetection 上的 createDetector 方法。然后 createDetector 采用我们在构造函数中引入的模型：

this.model = faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;

以及指定检测器参数的检测配置对象：

this.detectorConfig = {
  runtime: 'mediapipe',
  refineLandmarks: true,
  solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh',
}

检测函数将返回一个承诺，该承诺将解析为检测器对象。然后在 loadDetector 公共异步方法中使用私有 getDetector 函数，该方法将类上的 this. detector 属性设置为检测器。

FaceMeshDetector 类还实现了一个公共的 detectorFace 方法：

async detectFace(source){
  const data = await this.detector!.estimateFaces(source)
  const keypoints = (data as FaceLandmark[])[0]?.keypoints
  if(keypoints) return keypoints;
  return [];
}

该方法采用一个源参数，即像素输入。我们将在这里使用上面的画布元素作为跟踪源。该函数将被如下调用：

faceMeshDetector.detectFace(this.webcamCanvas.canvas)

此方法调用检测器上的estimateFaces方法，如果此方法在网络摄像头输出中检测到人脸，它将返回一个包含检测数据的对象的数组。该对象有一个称为关键点的属性，它包含模型在面部检测到的 478 个点中每个点的对象数组。每个对象都有 x、y 和 z 属性，其中包括画布中点的坐标。例子：

[
  {
    box: {
      xMin: 304.6476503248806,
      xMax: 502.5079975897382,
      yMin: 102.16298762367356,
      yMax: 349.035215984403,
      width: 197.86034726485758,
      height: 246.87222836072945
    },
    keypoints: [
      {x: 406.53152857172876, y: 256.8054528661723, z: 10.2, name:
      "lips"},
      {x: 406.544237446397, y: 230.06933367750395, z: 8},
      ...
    ],
  }
]

值得注意的是，这些点作为画布空间中的坐标返回，这意味着参考点、x: 0 和 y: 0 点位于画布的左上角。稍后当我们必须将坐标转换为 Three.js 场景空间（其参考点位于场景中心）时，这将是相关的。

此时，我们有了像素输入源，以及面部网格检测器，它将为我们提供检测到的点。现在，我们可以转到 Three.js 部分！

4、创建空点云

为了在 Three.js 中生成面部网格，我们必须从检测器加载面部网格点，然后将它们用作 Three js Points 对象的位置属性。为了使三个 js 面部网格反映视频中的运动（实时反应），每当我们创建的检测器发生面部检测变化时，我们都必须更新此位置属性。

为了实现这一点，我们将创建另一个名为 PointCloud 的工厂类，它将创建一个空的 Points 对象，以及一个可用于更新此点对象的属性（例如位置属性）的公共方法。这个类看起来像这样：

export default class PointCloud {
  bufferGeometry: THREE.BufferGeometry;
  material: THREE.PointsMaterial;
  cloud: THREE.Points<THREE.BufferGeometry, THREE.PointsMaterial>;
  
  constructor() {
    this.bufferGeometry = new THREE.BufferGeometry();
    this.material = new THREE.PointsMaterial({
      color: 0x888888,
      size: 0.0151,
      sizeAttenuation: true,
    });
    this.cloud = new THREE.Points(this.bufferGeometry,     this.material);
  }
updateProperty(attribute: THREE.BufferAttribute, name: string){
  this.bufferGeometry.setAttribute(
    name,
    attribute
  );
  this.bufferGeometry.attributes[name].needsUpdate = true;
  }
}

此类启动空的 BufferGrometry，它是点的材质以及消耗两者的点对象。将此点对象添加到场景中不会改变任何内容，因为几何体没有任何位置属性，换句话说，没有顶点。

PointCloud 类还公开 updateProperty 方法，该方法接受缓冲区属性和属性名称。然后，它将调用 bufferGeometry setAttribute 方法并将 needUpdate 属性设置为 true。这将允许 Three.js 在下一个 requestAnimationFrame 迭代中反映 bufferAttribute 的更改。

我们将使用此 updateProperty 方法根据从 Tensorflow.js 检测器接收到的点来更改点云的形状。

现在，我们还准备好点云来接收新的位置数据。所以，是时候把所有的东西都绑在一起了！

5、将跟踪信息馈送到点云

为了将所有内容结合在一起，我们将创建一个实现类来调用使所有内容正常工作所需的类、方法和步骤。这个类称为 FacePointCloud。在构造函数中，它将实例化以下类：

ThreeSetUp 类获取场景设置对象
CanvasWebcam 用于获取显示网络摄像头内容的画布对象
用于加载跟踪模型并获取检测器的faceLandMark类
PointCloud 类用于设置空点云并稍后使用检测数据更新它

constructor() {
this.threeSetUp = new ThreeSetUp()
this.setUpElements = this.threeSetUp.getSetUp()
this.webcamCanvas = new WebcamCanvas();
this.faceMeshDetector = new faceLandMark()
this.pointCloud = new PointCloud()
}

这个类还有一个名为bindFaceDataToPointCloud的方法，它执行我们逻辑的主要部分，即获取检测器提供的数据，将其转换为Three.js可以理解的形式，从中创建一个Three.js缓冲区属性并使用它来更新点云。

async bindFaceDataToPointCloud(){
  const keypoints = await
  this.faceMeshDetector.detectFace(this.webcamCanvas.canvas)
  const flatData = flattenFacialLandMarkArray(keypoints)
  const facePositions = createBufferAttribute(flatData)
  this.pointCloud.updateProperty(facePositions, 'position')
}

因此，我们将画布像素源传递给 detectorFace 方法，然后在实用程序函数 flattenFacialLandMarkArray 中对返回的数据执行操作。这非常重要，因为有两个问题：

正如我们上面提到的，人脸检测模型中的点将以以下形式返回：

keypoints: [
  {x: 0.542, y: 0.967, z: 0.037},
  ...
]

而 buffer 属性期望数据/数字具有以下形状：

number[] or [0.542, 0.967, 0.037, .....]

数据源（画布）之间的坐标系差异，画布的坐标系如下所示：

Three.js 场景坐标系如下所示：

因此，考虑到这两个选项，我们实现了 flattenFacialLandMarkArray 函数来解决这些问题。该函数的代码如下所示：

function flattenFacialLandMarkArray(data: vector[]){
  let array: number[] = [];
  data.forEach((el)=>{
    el.x = mapRangetoRange(500 / videoAspectRatio, el.x,
      screenRange.height) - 1
    
    el.y = mapRangetoRange(500 / videoAspectRatio, el.y,
      screenRange.height, true)+1
    el.z = (el.z / 100 * -1) + 0.5;
    
    array = [
      ...array,
      ...Object.values(el),
    ]
  })
  return array.filter((el)=> typeof el === 'number');

flattenFacialLandMarkArray 函数获取我们从人脸检测器接收到的关键点输入，并将它们展开到一个数组中，以数字 [] 形式而不是对象 [] 形式。在将数字传递到新的输出数组之前，它通过 mapRangetoRange 函数将它们从画布坐标系映射到 Three.js 坐标系。该函数如下所示：

function mapRangetoRange(from: number, point: number, range: range, invert: boolean = false): number{
  let pointMagnitude: number = point/from;
  if(invert) pointMagnitude = 1-pointMagnitude;
  const targetMagnitude = range.to - range.from;
  const pointInRange = targetMagnitude * pointMagnitude +
    range.from;
  
  return pointInRange
}

我们现在可以创建初始化函数和动画循环。这是在 FacePointCloud 类的 initWork 方法中实现的，如下所示：

async initWork() {
  const { camera, scene, renderer } = this.setUpElements
  camera.position.z = 3
  camera.position.y = 1
  camera.lookAt(0,0,0)
  const orbitControlsUpdate = this.threeSetUp.applyOrbitControls()
  const gridHelper = new THREE.GridHelper(10, 10)
  scene.add(gridHelper)
  scene.add(this.pointCloud.cloud)
  
  await this.faceMeshDetector.loadDetector()
  
  const animate = () => {
    requestAnimationFrame(animate)
    if (this.webcamCanvas.receivingStreem){
      this.bindFaceDataToPointCloud()
    }
    this.webcamCanvas.updateFromWebCam()
    orbitControlsUpdate()
    renderer.render(scene, camera)
  }
  
  animate()
}

我们可以看到这个 init 函数如何将所有内容联系在一起，它获取 Three.js 设置元素并设置相机，向场景和点云添加 gridHelper。

然后，它将检测器加载到faceLandMark 类上，并开始设置我们的动画函数。在此动画函数中，我们首先检查 WebcamCanvas 元素是否正在接收来自网络摄像头的流，然后调用 bindFaceDataToPointCloud 方法，该方法在内部调用检测面部函数并将数据转换为 bufferAttribute 并更新点云位置属性。

现在，如果运行代码，应该在浏览器中得到以下结果！

原文链接：Three.js实时构建人脸点云 --- BimAnt