器之心原創

作者：陳萍

不同于人類，計算機「看待」世界有自己的方式。為了達到類似人類的視覺水平，各種算法層出不窮，本篇就來窺探其冰山一角。

我們生活的世界是一個三維物理空間。直觀而言，三維視覺系統有助于機器更好地感知和理解真實的三維場景。三維視覺作為計算機視覺的一個比較重要的研究方向，在過去幾十年間得到了扎實和系統地發展，形成了一套完整的理論體系。近年來，隨著三維成像技術如激光雷達、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/