使用BlenderVerge3dThreeJs 開發Web3d應用

在這塊已經摸索有一小段時間了，很遺憾一直沒有很正式的專案把整個工作流程跑起來，可能本身的工作流程就是很冗長複雜，所以需要這麼多崗位拆分成這麼多的環節，公司的產品也是一層一層的封裝，架構比較複雜。然而對於想了解全貌的我來說，能基於公司的框架去拼搭積木還不夠，所以我想找一套適合自己的，輕巧又相對完善的套路，把Web3D玩起來。

從最早的看Threejs/BabylonJs的examples，到網上的一些小頁面（真的是粗糙簡單），再到一些小的h5 3d小遊戲，到後面接觸到一些cg軟體包括渲染器，再到到處找模型資源以及一些外掛。因為本身比較龐雜，又沒在專業的公司，所以挺麻煩的。最後找到一套比較合適的工作流程，至少適合於當前的自我需求

Verge3D是老牌的Blend4web核心團隊開發的，專門來橋接 CG軟體到Web的解決方案，他可以非常方便的把完整的場景以及渲染效果等搬到Web上（當然還有動畫、物理）等效果，非常適合小團隊解決Web上編輯器弱，渲染效果有差異等各路問題，而且是基於ThreeJs的，不會帶來新的學習投入，非常方便

開發Web3d應用

透過 Blender 完成模型資源本身的編輯

透過 Verge3d 完成 Blender場景佈置以及渲染預覽 到 WebGl應用釋出

透過 Verge3d（基於Threejs） 程式API進行Web層面的開發改造完成應用

開發Web3d編輯器以及服務端高畫質渲染

基於ThreeJs在web端完成編輯器的開發，主要起場景編輯的作用，真的模型資源等通常都是直接匯入資源

基於Web的粗布預覽，確定 相機 引數

將場景資訊（空間資訊）和 相機 引數 傳遞到後端

後端解析資料，帶入更豐富的場景資料，呼叫 Blender Python Api 生成 。blend 主檔案

使用Blender命令列引數 後臺執行渲染操作，並儲存成檔案

將檔案傳遞迴前端

因為自己不是美術出身，計算機圖形學也是較淺的自學，所以渲染效果完全談不上精緻和美感，不過長期的程式開發習慣也發現了一些問題，最主要就是建模或者調整材質等都是靠手工拖拽或者外掛的協助（此處贊一下Blender的互動設計以及龐大的外掛生態圈），但是對於體量稍大的資源來說，需要耗費很多精力。也許是出於技術人比較好奇但並無太多精力耐心去雕琢一個產品，另外建模、材質、著色等其實也是程式生成和處理的，所以能很方便的開發除錯成品也非常重要。因此又總結了一些小資源

輔助資源與經驗總結

建模（幾何結構）層面分為多邊形建模（計算機記錄點、線、面結構）和隱式建模（計算機記錄引數方程等數學中的關鍵資訊，再由0-1離散化成可視的 點、線、面）。

多邊形建模 可以在Blender2。92以上（個人使用Blender3。1 alpha）中使用幾何節點進行處理，個人感覺對程式設計師非常友好，都是熟悉的味道

隱式建模 又分為 顯示函式方程（y=f（x））和引數方程（x=fx（u，v），y=fy（u，v）），當然曲面就更復雜了，這裡寫了一個小工具可以供大家參考（當然也有很多其他更優秀的工具，哈哈）：傳送門

UV可以直接在Blender中進行編輯好，程式上不用做處理，至於法線，正常來說都是模型資源裡的法線貼圖決定了，程式上也不用太多處理

至於完整的模型（包含材質、貼圖）等，建議還是直接網上找吧，這裡有個不錯的：傳送門，裡面有完整的 hdr環境貼圖、各種材質包、以及完整的模型，對於學習使用已經足夠了，如果需要某些更具體的，可以直接萬能的淘寶

關於Shading，Blender中已經有很方便的工具，但是需要較強的圖形學功底，同時要對常規的數學函式有很深的理解，可以參考我前面寫的工具，如果要鍛鍊 glsl本身，那麼推薦 傳送門 和 傳送門至於用 節點工具還是coding，看大家喜歡咯，個人還是偏向在程式碼模板內直接coding，更快。但是因為沒法除錯，所以在考慮自己寫一個工具，或者使用 blender，把每次的值儲存一下展示，還在思考嘗試當中。另外最近ThreeJs官方也推出了一個第三方庫可以訪問：MaterialNode

個人目前的思考是，既然是程式出身而不是美術出身，可能會更多考慮使用程式打造工具去做一些串聯工作，目前比較看好的是 Blender的外掛機制和使用Blender Python Api開發一些有趣的東西，一直也在做視覺化的工作，找到一個大佬的 用Blender當可視化工具玩，感覺還不錯，推薦給大家：傳送門 / 傳送門