器之心原创

作者：陈萍

不同于人类，计算机「看待」世界有自己的方式。为了达到类似人类的视觉水平，各种算法层出不穷，本篇就来窥探其冰山一角。

我们生活的世界是一个三维物理空间。直观而言，三维视觉系统有助于机器更好地感知和理解真实的三维场景。三维视觉作为计算机视觉的一个比较重要的研究方向，在过去几十年间得到了扎实和系统地发展，形成了一套完整的理论体系。近年来，随着三维成像技术如激光雷达、TOF 相机及结构光等的快速发展，三维视觉研究再次成为研究热点。

在上一篇文章中，我们对 3D 视觉基础相关内容进行了概括性总结，本文我们将进行比较深层次的介绍，主要涉及 3D 视觉算法及其应用领域。

3D 目标检测多模态融合算法

基于视觉的目标检测是环境感知系统的重要组成，也是计算机视觉、机器人研究等相关领域的研究热点。三维目标检测是在二维目标检测的基础上，增加目标尺寸、深度、姿态等信息的估计。相比于二维目标检测，三维目标检测在准确性、实时性等方面仍有较大的提升空间。

在目标检测领域，2D 目标检测方面发展迅速，出现了以 R-CNN、Fast RCNN、Mask RCNN 为代表的 two-stage 网络架构，以及以 YOLO、SSD 为代表的 one-stage 网络架构。然而由于 2D 图像缺乏深度、尺寸等物理世界参数信息，在实际应用中存在一定局限性，往往需要结合激光雷达、毫米波等传感器实现多模态融合算法，以增强系统的可靠性。

因此，研究者们提出了许多 3D 目标检测方法，根据传感器的不同大致可分为视觉、激光点云以及多模态融合三大类。其中视觉又包括单目视觉和双目视觉（深度视觉）两类；激光点云包括三维点云投影和三维空间体素特征；而多模态融合实现了激光点云与视觉的融合。下面将对现阶段比较流行的 3D 目标检测多模态融合算法研究进行介绍。

论文 1《3D-CVF: Generating Joint Camera and LiDAR Features Using Cross-View Spatial Feature Fusion for 3D Object Detection》提出了 voxel-based 的多模态特征融合。

论文地址：https://arxiv.org/pdf/2004.12636

该研究提出的网络整体结构如下所示。可以看出上下两层分别是对激光雷达点云信息的特征提取 (voxel-backbone) 和对多张图像信息的特征提取与模态转换。这里需要提及的是由于图像信息仅仅只有一个方向的视野，但是多个摄像头的图像存在视野重叠，所以多张图像的信息融合是为了保证整个环视点云场景的特征都被涉及到。

论文 2《PI-RCNN: An Efficient Multi-sensor 3D Object Detector with Point-based Attentive Cont-conv Fusion Module》提出了 point-based 的多模态融合方法。

论文地址：https://arxiv.org/pdf/1911.06084.pdf

该研究提出了一种新颖的融合方法——基于点的 Attentive Cont-conv Fusion（PACF）模块，该模块将多传感器特征直接融合在 3D 点上。除了连续卷积外，该研究还添加了 Point-Pooling 和 Attentive Aggregation 等组件，以使融合特征更具表达力。

此外，基于 PACF 模块，研究人员提出了一个叫做 Pointcloud-Image RCNN（PI-RCNN）的 3D 多传感器多任务网络，该网络负责图像分割和 3D 目标检测任务。PI-RCNN 使用分段子网从图像中提取全分辨率语义特征图，然后通过功能强大的 PACF 模块融合多传感器特征。受益于 PACF 模块的效果和分段模块的有表达力的语义特征，PI-RCNN 使 3D 目标检测的性能大大改善。在 KITTI 3D 检测基准测试中的实验揭示了 PACF 模块和 PI-RCNN 的有效性，并且该方法可以在 3D AP 的度量标准上达到最新水平。

网络框架如上图所示，实现过程可分为以下四步：

• 1. 使用图像语义分割网络，获得图像的语义特征；
• 2. 检测子网络 - 1 从原始点云中得到目标的三维候选框；
• 3. PACF 模块融合点云特征和图像语义特征；
• 4. 检测子网络 - 2 得到最终的三维检测结果。

论文 3《EPNet: Enhancing Point Features with Image Semantics for 3D Object Detection》提出了一种新的融合模块，在不需要任何图像注释的情况下，对具有语义特征的点特征进行逐点增强。该研究设计了一个端到端的可学习框架 EPNet 来集成两个组件。在 KITTI 和 SUN-RGBD 数据集上进行的大量实验表明，EPNet 优于当前最优方法。其网络结构点云分支是 point encoder-decoder 结构，图像分支则是一个逐步 encoder 的网络，并且逐层做特征融合。

论文地址：https://arxiv.org/pdf/2007.08856.pdf

网络整体框架如下图所示：

点云特征和图像特征融合过程如下图所示：

融合过程由三部分组成：grid generator、image sampler 和 LI-Fusion layer。

• 1. 根据三维激光与图像的外参，grid generator 将三维激光的每一个点投影到原始图像上；
• 2. image sampler 利用图像特征图与原始图像的比例关系以及双线性插值，得到对应的图像特征图；
• 3. 为了减少图像的遮挡以及深度不确定性对融合造成的影响，LI-Fusion layer 利用点云特征估计对应图像特征的重要程度并筛选，具体是将点云特征与图像特征经过若干操作学习得到权重值，权重值与图像特征相乘再与点云特征串联作为最后的融合特征。

论文 4《CLOCs: Camera-LiDAR Object Candidates Fusion for 3D Object Detection》提出了一种新颖的 Camera-LiDAR 目标候选（CLOC）融合网络。CLOC 融合提供了一种低复杂度的多模态融合架构，显著提高了单模态检测器的性能。CLOC 在非最大抑制 (NMS) 之前对任意 2D 和任意 3D 的组合输出候选项进行操作，并被训练利用它们的几何和语义一致性，以产生更准确的最终 3D 和 2D 检测结果，最后采用 maxpooling 的方式选择最终的融合结果。

论文地址：https://arxiv.org/pdf/2009.00784.pdf

网络架构图如下所示：

该网络由三个阶段完成：1）2D 和 3D 的目标检测器分别提出 proposal；2）将两种模态的 proposal 编码成稀疏张量；3）对于非空的元素采用二维卷积做对应的特征融合。

3D 人脸检测基本流程

人脸识别技术在国家安全、军事安全、金融安全、共同安全等领域具有广泛的应用前景。人的大脑具备天生的人脸识别能力，可以轻易地分辨出不同的人。但是计算机自动识别人脸技术却面临着巨大的挑战。由于二维人脸识别不可避免地受到光照、姿态和表情的影响，这些因素已成为二维人脸识别技术向前发展的最大障碍。

随着结构光和立体视觉等三维成像技术的日益成熟，越来越多的人脸识别研究人员将目光投向了三维人脸识别技术领域。

目前 3D 人脸识别技术的主要技术流程如下：

• (1) 3D 人脸数据获取；
• (2) 3D 人脸数据的预处理，包括人脸的检测、切割、去噪等；
• (3) 3D 人脸数据的特征提取；
• (4) 构建适合的分类器对人脸数据进行判别。

目前 3D 人脸识别算法分为如下几个类别：

• 1. 基于空域匹配的识别算法
• 2. 基于局部特征匹配的识别算法
• 3. 基于整体特征匹配的识别算法
• 4. 基于模型拟合的识别算法
• 5. 基于 3D+2D 双模态的识别算法

3D 数据集简介

目前 3D 公开数据少，远少于 2D 图片；3D 高精度数据集只能靠昂贵的设备采集，过程繁琐。这里我们来了解一下现有的 3D 数据集。

1. BU-3DFE (Binghamton University 3D Facial Expression) 数据集：该数据库目前包含 100 位受试者（女性 56％，男性 44％），年龄从 18 岁到 70 岁不等，包含各种种族，包括白人、黑人、东亚人、中东人等。

下载地址：http://www.cs.binghamton.edu/~lijun/Research/3DFE/3DFE_Analysis.html

2. KITTI 数据集：由德国卡尔斯鲁厄理工学院和丰田美国技术研究院联合创办，是目前国际上最大的自动驾驶场景下的计算机视觉算法评测数据集。该数据集用于评估 3D 目标检测和 3D 跟踪等计算机视觉技术在车载环境下的性能。

下载地址：http://www.cvlibs.net/datasets/kitti/raw_data.php

3. Cityscapes 数据集：这是一个较新的大规模数据集，它包含 50 个不同城市的街道场景中所记录的各种立体视频序列，除了一组较大的 20000 个弱注释帧外，还具有 5000 帧的高质量像素级注释。

下载地址：https://www.cityscapes-dataset.com/

4. Matterport 3D 重建数据集：该数据集包含 10800 个对齐的三维全景视图（RGB + 每个像素的深度），来自 90 个建筑规模场景的 194400 个 RGB + 深度图像。

下载地址：https://matterport.com/

5. 3D 人脸重建相关数据集：该数据集包含用 iPhone X 拍摄的 100 名受试者的 2054 张 2D 图像，以及每个受试者的单独 3D 头部扫描。

下载地址：https://ringnet.is.tue.mpg.de/challenge

6. TUM 数据集：主要包含多视图数据集、3D 物体的识别分割、场景识别、3D 模型匹配、vSALM 等各个方向的数据。

下载地址：https://vision.in.tum.de/

人脸数据库汇总官网指路：http://www.face-rec.org/databases/

面部 3D 重建

人脸重建是计算机视觉领域中一个比较热门的方向，3D 人脸相关应用也是近年来短视频领域的新玩法。不管是 Facebook 收购的 MSQRD，还是 Apple 研发的 Animoji，底层技术都与三维人脸重建有关。

面部 3D 重建，可以理解为从一张或多张 2D 图像中重建出人脸的 3D 模型。对于面部 3D 重建，我们先来直观地感受一下效果。

如下动图所示，最右边的重建人脸除了没有皱纹以外，身份特征和面部表情都和原图相当一致，阴影效果也高度还原。只是眼睛部分似乎不太对，显得浑浊无神。

论文《FML: Face Model Learning from Videos》效果展示

下图中的合成效果也很不错，表情动态很到位。只是可能实验者的眼神实在太有戏，AI 表示无力模仿。

论文《FML: Face Model Learning from Videos》效果展示

论文《3D Face Reconstruction from A Single Image Assisted by 2D Face Images in the Wild》效果展示

论文《Joint 3D Face Reconstruction and Dense Alignment with Position Map Regression Network 》效果展示

直观感受完面部 3D 重建效果后，我们再来探究模型背后的算法。

传统 3D 人脸重建方法，大多立足于图像信息，如基于图像亮度、边缘信息、线性透视、颜色、相对高度、视差等一种或多种信息建模技术进行 3D 人脸重建。

三维变形模型（3DMM）

随着技术的发展，研究者们又提出了基于模型的 3D 人脸重建方法，这是目前较为流行的 3D 人脸重建方法。3D 模型主要用三角网格或点云来表示，现下流行的模型有通用人脸模型（CANDIDE-3）和三维变形模型（3DMM）及其变种模型，基于它们的 3D 人脸重建算法既有传统算法也有深度学习算法。

三维变形模型（3DMM）是一个通用的三维人脸模型，用固定的点数来表示人脸。其核心思想是人脸可以在三维空间中一一匹配，并且可以由其他许多幅人脸正交基加权线性相加而来。三维空间中的每一点 (x, y, z) 实际上都是由三维空间三个方向的基量 (1, 0, 0)，(0, 1, 0)，(0, 0, 1) 加权相加所得，只是权重分别为 x，y，z。

每一个三维人脸都可以在一个数据库中的所有人脸组成的基向量空间中进行表示，而求解任意三维人脸的模型，实际上等价于求解各个基向量的系数问题。每一张人脸可以表示为形状向量和纹理向量的线性叠加。

任意人脸模型均可以由数据集中的 m 个人脸模型进行加权组合，如下：

其中 Si、Ti 表示数据库中第 i 张人脸的形状向量和纹理向量。但是我们实际在构建模型的时候不能使用这里的 Si、Ti 作为基向量，因为它们之间并非正交相关，所以接下来需要使用 PCA 进行降维分解。

• (1) 首先计算形状和纹理向量的平均值；
• (2) 中心化人脸数据；
• (3) 分别计算协方差矩阵；
• (4) 求得形状和纹理协方差矩阵的特征值α、β和特征向量 si、ti。

上式可以转换为下式：

其中第一项是形状和纹理的平均值，而 si、ti 则是 Si、Ti 减去各自平均值后的协方差矩阵的特征向量，它们对应的特征值按照大小进行降序排列。

等式右边仍然是 m 项，但是累加项降了一维，减少了一项。si、ti 都是线性无关的，取其前几个分量可以对原始样本做很好地近似，因此能够大大减少需要估计的参数数目，并不损失准确率。

基于 3DMM 的方法都是在求解这几个系数，随后的很多模型在这个基础上添加了表情、光照等系数，但是原理与之类似。

参考链接：

https://zhuanlan.zhihu.com/p/101330861

https://my.oschina.net/u/4304462/blog/4557678

https://cloud.tencent.com/developer/article/1419949

https://blog.csdn.net/u011681952/article/details/82623328

一、项目背景】

随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。

【二、项目分析】

想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。

因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置它才能展现出来。

【三、需要的工具】

Adobe Dreamweaver

【四、项目目标】

实现3的l立方体旋转，鼠标移上去实现缩放效果。

【五、项目实现】

1、打开Adobe Dreamweaver，新建html文档。把标题改为“3d立方体”。

2、在body标签，创建一个div盒子 ，给它class属性，在外层div里面在创建6个div表示立方体的六个面，同样给它们 class属性。

<body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>

3、创建CSS样式

<style type="text/css">
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transition: all 2s;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
  transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
}
.box .box-2:nth-child(1) {
  /*小立方体第一面*/
  background: rgba(225,0,0,0.5);
  transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
    /*小立方体第二面*/
  background: rgba(255,255,0,0.5);
  transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
    /*小立方体第三面*/
  background: rgba(225,0,255,0.5);
  transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
     /*小立方体第四面*/
  background: rgba(0,255,0,0.5);
  transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
     /*小立方体第五面*/
  background: rgba(225,0,0,0.5);
  transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
    /*小立方体第六面*/
  background: rgba(0,0,255,0.5);
  transform: rotateY(180deg) translateZ(50px);
}
</style>
  </head>
  <body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>
</html>

方法说明：

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

rotateZ() 旋转

通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

下表是部分属性所代表的含义：

4、运行一下看下效果；点击F12运行。

5、呈现的效果如下图所示。

可以看到效果基本上可以 ，可是鼠标移上去没有效果。

6、添加鼠标移上去缩放的效果

.box:hover{
    transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);

  } # scale是缩放倍数

7、外层再添加一个3d立方体形成叠加效果

body代码：

<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>

CSS样式代码

<style type="text/css">
.box .box-1{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 2em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box .box-1:nth-child(1){
    /*大立方体第一面*/
    background: rgba(225,0,0,0.5);
    transform:rotateX(90deg) translateZ(100px);

  }.box .box-1:nth-child(2){
         /*大立方体第二面*/
    background: rgba(255,255,0,0.5);
    transform:rotateX(-90deg) translateZ(100px);

  }.box .box-1:nth-child(3){
        /*大立方体第三面*/
    background: rgba(225,0,255,0.5);
    transform:rotateY(-90deg) translateZ(100px);
  }.box .box-1:nth-child(4){
         /*大立方体第四面*/
    background: rgba(0,255,0,0.5);
    transform:rotateY(90deg) translateZ(100px);

  }.box .box-1:nth-child(5){
        /*大立方体第五面*/
    background: rgba(225,0,0,0.5);
      transform:translateZ(100px);
  }.box .box-1:nth-child(6){
        /*大立方体第六面*/
    background: rgba(0,0,255,0.5);
    transform:rotateY(180deg) translateZ(100px);
  }
</style>

【六、效果展示】

1、点击运行，效果如下图所示。

2、鼠标移到立方体上，缩放效果展示，如下图所示。

【七、总结】

1、整个效果写出来，还是比较简单的，只要明白各个命令的意思，剩下的就是组织一下逻辑而已。

2、欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

3、CSS样式的效果不止这些，还有更加炫酷的效果，值得大家去学习。

4、实现的方法3d立方体的方法有很多，但这是最简单的一种。

5、如果需要本文源码，请在公众号后台回复“立方体”四个字获取。

看完本文有收获？请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/