從零開始手擼WebGL3D引擎6:里程碑2,目前狀態和展望

最近做了很多零碎的工作,歸攏了一下作爲里程碑2。先上截圖:
mini3d.js 示例網頁
這是一個腳本生成的example頁面,以後所有的例子可以從這個頁面進入,這樣就可以查看之前的示例,也方便重構代碼之後回溯。這個頁面我也放到了github pages上:https://happyfire.github.io/mini3d.js/examples/(但是我這兒有時候打開不了)

目前,mini3d.js仍然是一個很簡單的框架,千里之行,目前走了一兩米。。想起來,我曾經在10年前做了一個基於固定管線OpenGL ES 1.1的跨平臺2d引擎的輪子。。是我曾今花時間最多的一個輪子,並且基於這個做了一個2d物理遊戲的demo,和一個簡單的scene編輯器(基於wxWidgets),但是個人做引擎這種事情真的是太難(當時還和一個好哥們一起做了一段時間),而且那還不是我的第一個輪子。時過境遷,在做了很多年遊戲之後,包括做了幾年H5遊戲,心裏的那點衝動仍然在,但是也要面對現實,所以現在做的這個目標定位就是技術實踐,希望在WebGL這個平臺上面實現一些Unity之類遊戲引擎提供的特性(當然這個目標仍然很大),至於能做到什麼程度就隨緣吧,畢竟疫情過去之後還是要找個工作,不能再宅了,以後這個只能是業餘愛好。最近在看Unity的一些新的東西,SRP, LWRP, HDRP,Dots這些。說實話,國產開源引擎,cocos, Laya這些和Unity的差距仍然很大,雖然他們在努力的追趕,目前在H5這個賽道上,還有coocs,Laya,Egret這些引擎的市場,但是等Wasm普及之後,Unity可能是要有很大的優勢的。Unity我之前也用過幾年,但是中間搞了幾年TCP和H5之後,現在看Unity幾乎不認識了,好多新的東西,所以最近也要花時間再看一看Unity。特別是Computer Shader,SRP,HDRP這些,都是新東西,看着就挺香。看來真是人越老話越多,雖然也沒人看,下面繼續正題。

目前狀態

里程杯2的更新包括以下一些東西:

  • 定義了app接口,現在每個例子都是一個app,然後傳入mini3d.init()方法中,這樣通過mini3d.js控制app的生命週期
  • 基於app接口重寫了示例網頁,build目錄中的index.html是示例的入口
  • 增加了一個簡單的資源管理系統,目前支持文本資源和圖片資源的加載,支持資源的引用計數,支持資源隊列下載。這個系統很簡單,只是爲了方便載入一些資源,如貼圖和shader文件,之前的里程碑1中shader是寫死在代碼裏面的,現在可以從文件載入了。
  • 增加了一個簡單的事件系統,做一個簡單的集中式的事件訂閱/發佈。所有事件沒有優先級一律即時發送。只是爲了方便解耦。
  • 增加了一個InputManger,負責PC/Mobile平臺的鼠標/觸摸處理,這個和事件系統配合方便在demo裏面拖動物體。寫這個是不想每個demo都重複一遍處理輸入的代碼。
  • 支持基本的Texture2D封裝,包括一個引用計數管理texture的TextureManager。
  • 支持載入.obj格式的模型文件,但不支持mtl材質文件。.obj的支持也是有限的,目前只讀取頂點座標,法線和UV。如果.obj中沒有頂點法線,則自動計算(基於面積和夾角權重)
  • 數學庫補充中,目前vector3, matrix4, quaternion都有了。不過quaternion有部分操作還不支持。
  • scene結構,目前開了個頭,打算放到下一個里程碑。

目前有兩個demo:

  • Textured cube:混合了頂點色的貼圖立方體。立方體手工生成。以後可能做一個基於3d shape的生成系統,方便看渲染效果。
  • Load .obj mesh: 從.obj模型文件中載入mesh。目前這個效果是一個簡單的逐頂點的蘭伯特diffuse+ambient效果,且光的方向和ambient色是寫死在shader裏面的。

下一步計劃

  • 首先需要實現一個簡單的scene系統,爲了能在世界裏面放置物體,特別是燈光和camera。可能會有frustum culling(看時間)。
  • 逐camera的forward rendering。支持mask。爲了以後render to texture和post effect做準備。
  • 框架預置unifrom傳入shader中,例如camera世界座標,主光源座標,各種矩陣等。這樣就可以在shader裏面寫各種效果了。(還是參考了Unity)
  • 材質和材質文件。編輯器是肯定沒有的,寫一個材質文件吧,然後載入生成材質對象。
  • 以上這些好了之後,就差不多可以集中精力搞渲染實踐了。比如將標準着色,PBR這些都實踐一遍。大概按照《Unity Shader入門精要》的順序吧。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章