親愛的小夥伴們過年好,今天我們給大家拜個晚年,並祝大家2019開工大吉、盆滿缽盈!
節後開工第一天,我們再次向小夥伴們介紹Egret 3D 1.4版本。堅守在最後一刻的小夥伴們可能在2月2日產品正式發布時已獲知此消息,但經過「年味」的薰陶,不知您對Egret 3D1.4 還有多少印象,而第一時間去追尋「家味」的小夥伴今天則可以靜下心來細細了解Egret 3D 1.4。
因為Egret 3D 1.4版本不僅帶來大量3D方面的新特性,如:支持色調映射、伽馬校正、紋理 anisotropy 參數設置、RenderTexture 紋理等17個功能,還發布了3D編輯器的公開測試版本,這對於一直想嘗試3D小遊戲創作開發的小夥伴而言,絕對是一個非常利好的消息。
不過,在這裡我們也需要給諸位小夥伴做個溫馨提示:
由於Egret 3D 1.4版本改動內容很多,本次更新無法保持向下兼容,如果您希望在現有項目中使用 Egret3D 1.4版本,還需聯繫官方團隊尋求技術支持。
話不多說,Egret 3D 1.4更新詳情具體見下:
支持色調映射(ToneMapping)
對於一幅圖像來說,圖像的動態範圍是指圖像最大亮度值比最小亮度的比值。而高動態圖像,就是指動態範圍大的圖像,對於高動態圖像而言,其位數往往高於8位(普通的灰度圖像位數一般是8位),而顯示器的灰度只有8位,所以必須對高動態圖像的顏色進行變換,才能顯示出來。另外高動態圖像的灰度值分布的很不均勻,只有少數的像素點較亮,所以如果直接對圖像進行線性的歸一化(把灰度最大值映射為 255,最小值映射為 0)再顯示,則圖像會一片黑。色調映射(ToneMapping)就是為了解決這個問題而生。
接口:egret3d.RenderState.toneMapping
egret3d.RenderState.toneMappingExposure
egret3d.RenderState.toneMappingWhitePoint
ToneMapping 算法類型枚舉:egret3d.ToneMapping
在線示例(見官網)支持伽馬校正
伽馬校正通過對圖像色調進行非線性渲染的方法,增強圖像中的深色部分和淺色部分,並使兩者比例增大,從而提高圖像對比度效果。
接口:egret3d.RenderState.gammaInput
egret3d.RenderState.gammaOutput
egret3d.RenderState.gammaFactor
支持紋理anisotropy 參數設置
紋理的 anisotropy 參數用來描述沿通過具有最高紋理像素密度的像素的坐標軸取樣的數量。此值默認為 1(這個值通常為 2 的冪),較高的值會產生比基本 mipmap 更少的模糊結果,但需要使用更多紋理樣本(會消耗更多的採樣性能)。支持該值的理論最大值會根據硬體設備的不同而不同,可以使用 egret3d.RenderState.maxAnisotropy 查詢該值在指定設備支持的理論最大值。
接口:egret3d.Texture.gltfTexture.extensions.paper.anisotropy
在線示例(見官網)支持RenderTexture 紋理
可以將相機的渲染內容渲染到 egret3d.RenderTexture 紋理,並將該紋理用於其他材質的渲染。
在線示例(見官網)支持自定義 shader 的導出和加載,自定義 shader 轉換插件。
現在開發者可以編寫自己的 shader,並通過 Egret 3D 提供的轉換插件加載到自己的開發項目中使用,我們會在後續完善更多自定義 shader 的相關文檔和注意事項。
自定義頂點著色器示例(由開發者編寫);自定義片段著色器示例(由開發者編寫);自定義 shader 的配置示例(由轉換插件自動生成)。支持 shader 的動態擴展和繼承。
有時自定義 shader 無法完全完成某些特殊渲染的需求,通常自定義的 shader 較難完成與引擎內置 shader 的功能,比如骨骼蒙皮、光源和陰影等的處理。如果能基於引擎內置的 shader 進行某些修改或擴展,就能在保留原有 shader 功能的同時,改變或擴展某些功能(通常是對頂點或 uv 的再次映射、對顏色的重新採樣等)。
在線示例(見官網)支持 PBR 材質
基於物理的標準材質,使用 PBR 材質渲染可以使場景看起來更加真實。
egret3d.DefaultShader.MESH_STANDARDegret3d.DefaultShader.MESH_PHYSICAL
在線示例(見官網)支持環境貼圖
環境貼圖用來模擬物體表面對周圍環境光的反射,常見的如鏡子、光亮漆面的金屬等等。實現方式主要通過將一張帶有周圍環境的貼圖添加到指定材質然後對渲染器組件渲染,如果材質不顯式指定環境貼圖,會默認使用天空盒貼圖當作環境貼圖。環境貼圖模擬可以模擬光的反射或折射。(默認是反射)
可以單獨指定材質的環境貼圖來覆蓋天空盒產生的環境貼圖。接口:egret3d.Material.setTexture(egret3d.ShaderUniformName.ENV_MAP,textureInstance)
在線示例(見官網)增加天空盒組
現在可以通過在擁有相機組件的實體上添加 egret3d.SkyBox 組件來實現天空盒渲染了,天空盒渲染就是將一個立方體展開,然後在六個面上貼上相應的貼圖,在實際的渲染中,將這個立方體始終罩在攝像機的周圍,讓攝像機始終處於這個立方體的中心位置,然後根據視線與立方體的交點的坐標,來確定究竟要在哪一個面上進行紋理採樣。
在線示例(見官網)支持onBeforeRender 生命周期
在該生命周期通常是為了動態的生成某些紋理,或準備幹預相機的正常渲染,比如鏡面效果。
接口:paper.Behaviour.onBeforeRender()增加半球光源組件
egret3d.HemisphereLight增加後期渲染組件
通過對屏幕空間的後處理,可以很方便的調整遊戲整體的風格,常見的後處理效果有Bloom,Motion Blur等。
egret3d.CameraPostprocessing
在線示例(見官網)支持動畫的融合
可以讓動畫在切換過程中融合切換,使得動畫過渡更自然,比如人物動畫自然的由跑步切換到走路。
接口:egret3d.Animation.fadeIn()
在線示例(見官網)支持動畫的混合
可以讓多個動畫混合播放,並動態的調整每個動畫的權重,比如動態的控制人物動畫的跑步和走路的權重,從而混合出快走、慢跑等。
接口:egret3d.Animation.fadeIn()
在線示例(見官網)支持動畫的層級和遮罩
可以讓多個動畫在不同的層級播放,並且每個層級可以設置權重和遮罩,比如實現人物動畫一邊走路一邊左顧右盼。
在線示例(見官網)支持動畫的疊加
層級動畫可以通過疊加的方式混合(additive),比如將受擊動畫做為疊加動畫與任意動畫疊加,從而實現待機受擊、走路受擊、跑步受擊等。
在線示例(見官網)支持根動畫變換應用到遊戲實體
可以將動畫的根節點的變換應用到遊戲實體的變換組件上,這樣一些複雜的位移動畫就可以自動同步到遊戲角色的移動上了,比如一些有位移效果的技能動畫。
在線示例(見官網)其他優化和 Bug 的修復
優化資源回收優化 shader 的結構優化紋理的設計結構優化引擎內部渲染shader define 的結構和連接的性能優化相機的結構和性能優化資源加載優化 webgl 渲染的結構修復網格顯存回收的 BUG修復紋理顯存回收的 BUG修復粒子組件的多個 BUG修復egret3d.transform 組件的多個 BUG修復egret3d.SkinnedMeshRenderer 組件視錐剔除可能失效的 BUG修復 Unity 導出 layer 與 Egret 3D 不匹配的 BUG (會產生兼容問題)修復多個序列化反序列化的BUG修復多個inspector 的 BUGEgret3D 編輯器公開測試
在經歷了數個月的邀請測試後,Egret3D 編輯器將在今天與諸位開發者正式見面。小夥伴們可以在官網文檔中心首頁下載 Egret3D 編輯器(連結中包含 Windows 與 MacOS 版本)。編輯器相關文檔我們會陸續提供。