本文整理自老馮於 凹凸 2022 年技術分享，帶領大家從案例、應用、技術生態出發，讓大家瞭解一下 3D 在 Web 端的現狀。
3D初體驗
Hey 3D what's up，最近在 Web 圈混得怎樣
在“元宇宙”概念越來越火熱的背景下，我們準備了一系列的 3D 元宇宙公開課及教學文章，教大家如何從 0 到 1 快速搭建一個 3D 項目，從中可以學習到 WebGL 底層原理、圖形學、熱門引擎的使用方法等。在入門前，我們先從案例、應用、技術生態出發，讓大家瞭解一下 3D 在 Web 端的現狀。
一、案例展示—
1.1 組成部分
先從一個基礎的 DEMO 出發，一個基礎的 3D 一般會有以下模塊組成：
（1）渲染
打開一個 3D 頁面，首先會下載模型文件，然後渲染到頁面中
（2）動畫
逐幀渲染動畫
（3）事件綁定
通過 js 的事件綁定，觸發對應的渲染。比如點擊地面人物移動
（4）場景切換
衆所周知，遊戲裏有很多場景，比如遊戲加載、遊戲開始、遊戲結束，就是三個不同的場景。如圖就是從主玩法到編輯場景
1.2 完整案例
（1）PC 端
下面來看一些有趣的例子，先從PC端開始
這是一名開發者博客，他從開始場景切換成主場景，然後渲染一些樹、車 3D 模型，用鍵盤控制模型的方向，碰撞後將模型旋轉，並同時播放對應的音頻等。點擊體驗一下 👉 https://bruno-simon.com/[1]
這是 playcanvas 官網上的寶馬 demo，它渲染了動畫，點擊下面的圖片，可以更換這個模型的紋理。點擊體驗一下 👉 https://playcanv.as/p/RqJJ9oU9[2]
（2）H5端
再看看移動端的案例
上面的賽車遊戲，也是從開始場景切到主玩法，之後通過下方的 touch bar 對車/地圖的進行位移和其他物體碰撞後，檢測觸發加速等事件。掃碼或點擊體驗一下👉 Mercedes-EQ Formula E Team - Speedboard Game[3]
然後是大家熟知的例子，神廟逃亡，也可以看到很明顯的場景切換、碰撞檢測等。掃碼或點擊體驗一下👉 Play Temple Run 2 on Poki[4]
二、應用場景—
再來看看 3D 在國內一些正式的應用場景。
2.1 App 端
比如 VR 看房，VR 線上看房可以沒有導購員的干擾，節省帶看成本，用戶操作上也爲該房產留下了大量的數據留存；
還有如果在一些購物 App 上看鞋，它會有鞋 3D 模型預覽，以及 AR 試穿，可以看清鞋子的細節以及個人試穿後的樣子。
2.2 H5 端
一些互動小遊戲中，也有 3D 的部分
微信小遊戲中，也有 3D 的小遊戲
三、技術生態—
3.1 遊戲引擎的定義
首先，想要“快速”實現一個 3D 遊戲，需要 3D 的遊戲引擎，那麼到底什麼是遊戲引擎呢？
（1）已編寫好的可編輯電腦遊戲系統（2）交互式實時圖像應用程序的核心組件（3）能容易和快速地做出遊戲程式
3.2 遊戲引擎的組成
大多數遊戲引擎包含以下系統：（1）渲染引擎即“渲染器”，繪製圖像，並向外部表達圖像的系統，含二維圖像引擎和三維圖像引擎
（2）物理引擎通過爲剛性物體賦予真實的物理屬性的方式來計算運動、旋轉和碰撞反映
（3）腳本引擎提供腳本接口，讓開發者通過腳本設計遊戲，使遊戲的開發更加靈活
（4）網絡引擎數據交換的模塊，在開發多人在線遊戲時使用
（5）人工智能代替遊戲開發中部分勞動密集型內容的生成，如道路檢測
3.3 如何選擇合適的遊戲引擎
如何選擇適合遊戲引擎，我們一般從以下三個方面考慮：
（1）入門
-
開發語言 -
學習資源與技術支持能力 -
工作流支持力度
如果是剛入門的先要考慮是否是自己熟悉的開發語言，考察該引擎的官方的資源文檔、團隊的問題修復能力、社區活躍度，以及引擎的工作流支持力度，如是否有 playground 等。
（2）參考
-
商業化成熟案例 -
應用廣度
從參考實例上考慮，該引擎是否有現實的有名的項目正在使用，使用的廣度；
（3）設計
-
設計理念 -
性能
從設計上面考慮，引擎的設計理念是否容易理解、方便第三方介入接入。以及需要結合項目的規模及功能要求，需要選擇符合要求的性能優化、內存管理、資源管理的引擎。
3.4 技術棧
選取了 Github 上 star 數最多的遊戲引擎，選幾個來分析一下其優點及不足：
（1）Three.js
Three.js 是最流行的 JavaScript 庫之一，用於使用 WebGL 在 Web 瀏覽器中創建和動畫化 3D 計算機圖形。
A. 優點：
-
易於學習：非常容易上手，同樣適合新手 -
大型社區：示例多，用戶多，社區豐富 -
好的文檔：強大的文檔通常是一個強大的庫的一個很好的指標，而 Three.js 具有出色的文檔 -
性能優勢：出色的性能，能很好地執行復雜的渲染功能 -
PBR 渲染：具有內置的 PBR 渲染，這使得渲染圖形更加準確
B. 不足：
-
不算是遊戲引擎：渲染以外的功能很少 -
面向新手：由於 API 面向新手，因此隱藏了許多高級功能
（2）Babylon.js
Babylon.js 是一個強大的、簡單的、開放的遊戲和渲染引擎。
A. 優點：
-
出色的測試工具：Playground 是在進行全面開發之前對事物進行測試的出色工具，並且具有出色的啓動文檔 -
強大的社區支持：社區活躍和豐富 -
更新迭代頻繁：該框架擁有頻繁更新的代碼庫，並且第三方工具正在積極開發中 -
PBR渲染：對PBR渲染的支持非常出色 -
大牌支持：Babylon 得到 Adobe，Microsoft 等大型品牌的使用和支持 -
問題修復：BUG 修復很快，問題很快能得到解決
B. 不足：
-
成熟度：2013 年的第一個版本，與許多競爭對手相比，它還算年輕； -
文檔：API 文檔部分參數字段描述不夠清晰； -
規模：不適合較小的項目
（3）Aframe
-
使用簡單，聲明性 HTML：A-Frame 只需插入 <a-scene> -
實體組件體系結構：A-Frame 是 Three.js 之上的強大框架，爲 Three.js 提供了聲明性，可組合且可重用的實體組件結構 -
性能：一個框架是在 Three.js 之上的一個瘦框架 -
跨平臺，有視覺檢查器，功能豐富 -
設計理念：由於設計理念與其他引擎不同，接入第三方物理引擎的時候，不太方便做適配
（4）Playcanvas
側重於遊戲引擎而不是渲染引擎，是一款優秀的全功能遊戲引擎。但是私有項目收費，沒有碰撞偏移，缺少示例。
（5）Whs
-
使用簡單，集成 Three.js 渲染引擎，rendering 渲染自動化，加速 3D 場景原型製作，based 基於組件的場景圖 -
即使使用 Worker（多線程），也可以輕鬆集成任何高性能物理 -
基於 ES2015+，pack Webpack 友好
（6）其他
A. Egret 白鷺、LayaAir 還有國內的一些引擎，當我們用中文搜索“遊戲引擎”，一般都會推薦白鷺、LayaAir 這兩個，它們的優點就是有專門的企業進行開發和維護，也可以花錢讓其做定製化需求，並且支持多端開發。白鷺的話比較偏向於 2D，3D 是近幾年開始在 2D 基礎上迭代的。而 Laya 比較多的人用來做微信小遊戲。不足的是，他們的社區不夠活躍，文檔更新不及時，對於開發者來說，開發體驗不是非常友好。
B. oasis 去年淘寶開源 oasis，用於支付寶的螞蟻莊園以及其他的一些互動遊戲。現在已經有 3500 個 star 了，從它的官方文檔上看，使用方式與 three 類似，API 比較簡單，也具有基礎的物理相關示例，還是比較實用小型、功能小的項目的。
7. 小程序
如果想要兼容微信小程序端，微信官方有Adapter的示例: Adapter | 微信開放文檔[5]
有以下開源倉庫，可供大家參考一下：
-
weapp-adapter 倉庫 [6] -
three-platformize 倉庫 [7] -
threejs-miniprogram 倉庫 [8]
參考資料
https://bruno-simon.com/: https://bruno-simon.com/
[2]https://playcanv.as/p/RqJJ9oU9: https://playcanv.as/p/RqJJ9oU9
[3]Mercedes-EQ Formula E Team - Speedboard Game: https://www.mercedes-benz.com/storage/formula-e/2021-eq-house-digital-showroom/speedboard/20211129-v2.html
[4]Play Temple Run 2 on Poki: https://poki.com/en/g/temple-run-2#
[5]Adapter | 微信開放文檔: https://developers.weixin.qq.com/minigame/dev/guide/best-practice/adapter.html
[6]weapp-adapter 倉庫: https://github.com/finscn/weapp-adapter
[7]three-platformize 倉庫: https://github.com/deepkolos/three-platformize
[8]threejs-miniprogram 倉庫: https://github.com/wechat-miniprogram/threejs-miniprogram
[9]遊戲引擎 - 維基百科: https://zh.wikipedia.org/wiki/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E
[10]XR地產：VR、AR看房場景: https://zhuanlan.zhihu.com/p/370788498
[11]Choosing the right game engine: https://www.gdquest.com/tutorial/getting-started/learn-to/choosing-a-game-engine
[12]如何選擇H5遊戲引擎: https://cloud.tencent.com/developer/article/1073996
[13]JavaScript Game Engines: https://github.com/collections/javascript-game-engines
[14]HTML5 Game Engines: https://html5gameengine.com/
[15]H5遊戲開發：遊戲引擎入門推薦: https://aotu.io/notes/2017/12/27/h5-game-engine-recommend/index.html
[16]Top 6 JavaScript and HTML5 game engines: https://blog.logrocket.com/top-6-javascript-and-html5-game-engines/
[17]Top JS Gaming Engines and Libraries for 2020: https://blog.bitsrc.io/9-1.top-js-gaming-engines-and-libraries-for-2020-81707d9f095
本文分享自微信公衆號 - 凹凸實驗室（AOTULabs）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。