Cocos Creator 3D初體驗

時間  2021-01-21 標籤 Cocos Creator 3D 遊戲開發 cocos-creator

同步發佈在Cocos論壇

Cocos Creator 3D初體驗

整體的使用感受

  1. UI界面的製作一如既往的便捷高效
  2. 對Cocos Creator 2D上手很友好
  3. 有自己的3D編輯器
  4. 材質系統非常的靈活
  5. 當前版本對2D遊戲的支持不夠完善

目前不太完善的地方

  • 2D方面
    • 不支持LabelAtlas，可以使用bmfont間接來實現
    • mask不支持圖片作爲模板
    • 場景資源的自動釋放不可用,可以通過一些特殊手段來釋放內存
    • 暫不支持動態合圖
    • 暫不支持spine、龍骨
  • 3D方面
    • 不支持動畫分層，也就是不支持角色上下半身播放不同的動作。
    • v1.1.1陰影只支持平面陰影，也就是說陰影只能投到地上但無法投射到模型身上。v1.2陰影支持shadowMap但不是很完善。
    • v1.1.1不支持霧效，v1.2已支持。
    • 暫不支持後處理(HDR、景深、泛光)
  • 其他
    • 暫不支持通過npm的方式引入代碼庫

幫助美術同學上手新引擎的相關文檔

跟Creator 2D不一樣的地方

2D版本的UI組件預製體移植到3D版本注意事項

  • 官方暫時還沒有Creator導出到Creator 3D的工具，可以自己寫一個簡單的腳本
  • prefab中組件重命名 例 「type」: 「cc.Sprite」, -> 「type」: 「cc.SpriteComponent」,
  • 添加UITransform 組件
  • 根節點的layer改成ui_2D
  • 資源需要重新拖一遍

3D相關

對3D的理解
場景中的光線照射到模型的表面，經過反射、漫反射後被相機拍攝到構成了我們看到的畫面。

  • 3D核心概念之模型

    • 模型由網格和材質組成
    • 網格mesh定義了物體表面的形狀，也就是空間結構。mesh由一個個三角面片構成。一個三角面片又包含三個頂點。每一個頂點的信息包括頂點在模型座標系下的位置、法線等。shader中的vertexShader就是專門處理頂點數據的，它的主要作用就是將頂點座標從模型空間座標系轉換到屏幕空間（實際上vs中計算出的座標並不是屏幕空間座標，這裏只是爲了方便理解）。
    • 材質決定了模型表面在光照下看起來的效果。材質中使用的shader決定了光照的計算方式（unlit、blinn-phong、pbr）。調整材質中的參數就可以實現不同的效果，例如pbr中材質參數就有：模型表面粗糙程度、對光線的反射率、金屬度、ao等。
    • 可以簡單理解爲，材質決定了這些三角面上色的方式。

  • Creator 3D跟Laya一樣使用右手座標系，unity使用的是左手座標系。

  • 3D場景編輯常用操作 https://docs.cocos.com/creator3d/manual/zh/editor/scene/

  • 材質常用選項(文檔最下面部分) https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html

  • 如果要修改fbx裏的材質，需要先dump出來再修改。

  • 平行光只支持一盞

  • 場景裏面同一個物體出現多次，可以開啓材質裏的gpu instancing選項進行性能優化

  • 開啓陰影會造成物體繪製的三角面數量翻倍，應該儘可能少的去開啓物體的陰影。

  • 粒子數值太大會消耗大量內存

  • UI裏面顯示模型記得模型放大100倍,材質切換成不受光材質。相關文檔https://docs.cocos.com/creator3d/1.1/manual/zh/ui-system/components/editor/ui-model.html?h=uimodel

  • 涉及到透明貼圖的材質注意切換到transparent,另外還可以通過修改材質的priority來調整透明物體的繪製順序.

  • 四元數

性能優化

  • 3D場景使用壓縮紋理，可以顯著降低顯存。注意：etc1不支持透明通道。prv尺寸要求：尺寸爲2的N次冪，並且寬高相同。
  • 尺寸太大的圖改小從而降低顯存佔用(例如界面背景大圖)
  • UI通過合圖並調整組件層級減少drawcall
  • 關於3D合批 https://docs.cocos.com/creator3d/manual/zh/engine/renderable/model-component.html#%E5%90%88%E6%89%B9%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5
  • 3D場景重複物體建議開啓gpu instance
  • 低端機可以關閉陰影並鎖幀30
  • 地面避免使用引擎默認材質。引擎默認使用的材質是pbr性能消耗較大。

推薦的一些文章、博客、教程

一些實用功能的實現細節

blinn-phong

碎文件合併

cocos裏面每一個音頻、圖片、預製體、模型、動畫等資源都會對應生成一個json，構建後的將會導致文件數量翻倍。如果資源是放在網絡上將會導致大量資源下載請求從而大大降低加載速度。

  • 實現原理：通過修改構建後的setting.js。這個文件其實就是一個配置文件，裏面主要記錄了resource目錄下所有文件的路徑到uuid的映射，以及有哪些json文件被合併到哪個大的json文件裏去了。引擎在下載任意json文件之前都會去檢查當前json文件是否被合併了，如果已經被合併就去下載合併後的json文件。
  • 寫了一個json合併的腳本將所有json文件合併成了一個大的json文件，腳本運行環境是nodejs。缺點是合併之後單個json文件巨大
  • 貼一下引擎源碼方便理解。

正常打包後的setting文件

運行腳本後會產生一個unionPack.json文件和另外一個無法被合併進去的json文件，以及修改後的setting文件。

3D UI的顯示

3D場景裏面顯示UI是一個比較常見的需求，可以使用renderTexture來進行實現。

  1. 在資源管理器中新建一個renderTexture資源，根據需要設置寬高

  2. 在場景上新建一個canvas，並設置Canvas組件的targetTexture爲剛剛新建的renderTexture。

  3. 場景中新建一個3D面片,面片材質選用unlit Effect，然後代碼裏設置面片材質的紋理爲renderTexture。

json文件壓縮。合併後的大json文件是1.1M壓縮後是144k。需要修改引擎

燃燒效果shader

原理：簡單的法線利用

shader.rar (2.9 KB)

3D進度條的兩種實現方式

  1. 自定義mesh頂點數據
    原理：矩形拆分成5個三角形，然後根據百分度換成對應的角度。紅線代表邊界，綠色代表構成部分。UI中使用的環形進度條，在引擎底層應該也是用的類似實現方式。這種方法優點是可以開啓動態合批減少drawcall。

    代碼 (1.0 KB)
  2. shader進行圓形的剪裁

    radial-1.1.1.rar (1.2 KB)

3D中倒計時數字的一種實現方式

因爲倒計時通常是個位數，此種方法就是通過找到單個數字在紋理中所在的位置，再設置uv偏移和縮放就可以了。另外計算位置的時候需要考慮到合圖後的旋轉。
原始BMFont文件

打包合圖後

联系我们 沪ICP备13005482号-10