大家好，本系列帶讀者踏上Web 3D編程之旅～本系列是實戰類型，從0開始帶領讀者寫出“良好架構、良好擴展性、優秀的性能、最小功能集合(MVP)” 的3D引擎。

介紹

大家好，本系列帶讀者踏上Web 3D編程之旅～

本系列是實戰類型，從0開始帶領讀者寫出“良好架構、良好擴展性、優秀的性能、最小功能集合(MVP)” 的3D引擎。

本系列的素材來自我們的產品:Wonder-WebGL 3D引擎和編輯器 的整個開發過程。

本系列是我正在寫的書的預覽版。詳情請見：Wonder暫停開發，開始寫書

本系列與我的“用函數式編程，從0開發3D引擎和編輯器”系列博文的區別：

• 本系列是它的重寫版

• 本系列是實戰類型，而它是經驗總結類型

• 本系列只寫引擎，而它既寫引擎又寫編輯器

為什么本系列只寫引擎？

• 因為大部分人更關心引擎

• 為了加快寫作速度，省略需要較多篇幅的編輯器

上一篇博文

從0開發3D引擎：目錄

下一篇博文

從0開發3D引擎（二）：準備預備知識

本系列特色

1.完全從0開始，強調實戰

2.保持精簡，只實現最小功能，重點強調架構、擴展、性能

3.完全、徹底地使用函數式編程

現在3D領域使用函數式編程的資料很少，主流還是使用面向對象。
我以前也是用面向對象，不過自從我開始接觸函數式編程，就擁抱了它。
希望能通過本系列，向讀者展示函數式編程的魅力，擴展讀者的視野和思維。

能給讀者帶來什么收益？

1.手把手教讀者如何從0開發3D引擎
2.學習函數式編程及其在3D領域的應用
3.學習3D編程中基礎的功能實現，如紋理、光照、模型等
4.學習引擎的設計和架構，如Data Oriented、多線程等

讀者如何學習本系列

本系列從第三部分開始，會開始寫程序，開發引擎。建議讀者從這部分開始，不要按照文中給出的程序實現，自己再一行一行地重寫一遍。因為這樣效率低下，而且有可能會出錯（雖然“程序實現”試圖給出完整的代碼，但仍然有可能遺漏了一些細節。這會導致讀者如果自己照著寫的話，自己寫的程序可能會運行失敗），所以建議讀者閱讀每篇文章，理解程序的實現，然后在文末查看該文的完整項目代碼。

本系列技術選型

• 使用Reason語言（函數式編程語言，可編譯為Javascript）

Reason是在Ocaml語言的基礎上修改而來，專門提供給前端開發者使用。

Reason是函數式編程語言，使用Bucklescript編譯器編譯成javascript語言。

在我看來，至少有兩大優點：
1.編譯后的javascript優化得非常好，讓我們能夠高性能地使用函數式編程。
2.強類型和類型推導，讓我們既不用向Typescript那樣定義很多類型（Reason會幫我們推導類型），又可以享受強類型約束的好處（編譯時能檢查更多的錯誤）。

我們Wonder已經使用Reason兩年的時間了，所有產品，包括前端后端，都用Reason語言寫，非常好用。

Reason的相關評價詳見：
如何評價 reasonml ? -> Wonder的回答
如何評價 Facebook 推出的編程語言 Reason?

• 使用WebGL 1.0作為底層API

為了引擎能跑在移動端，我們選擇WebGL 1.0而不是WebGL 2.0。

引擎的特色

• 函數式編程

• 使用“函數式反應式編程”（FRP）實現異步

• 多線程渲染

• Data Oriented

• 契約檢查

• 基于job的可擴展的渲染管道

引擎支持的運行環境

重點支持桌面端瀏覽器（引擎的多線程渲染等功能只能在桌面端開啟）：

• Chrome
• Firefox
• 360 browser(v10.0及以上)
• qq browser(v10.4及以上)

也能夠支持移動端瀏覽器：

• 微信瀏覽器（安卓4.4及以上、ios 8及以上）

內容規劃

本系列分成六個部分：

第一部分：準備（已完成）

主要內容：

• 準備預備知識
• 搭建開發環境
• 搭建測試環境

第二部分：基礎（已完成）

主要內容：

• 學習函數式編程

• 學習函數式反應式編程

• 學習Reason

第三部分：搭建雛形（已經開始寫）

主要內容：

• 編寫最小的3D程序

• 從中提煉引擎

• 改進引擎架構

第四部分：增加功能（沒有開始寫）

主要內容：

• 增加基礎功能

• 加入Scene Graph

第五部分：增強擴展性（沒有開始寫）

主要內容：

• 加入腳本組件

• 加入自定義材質

• 加入其它可能的擴展，如ui擴展等

第六部分：應用（沒有開始寫）

主要內容：

• 通過引擎支持的擴展，加入實際應用需要的功能（如picking等）

• 實現幾個完整的3D應用

推薦我發布的相關的精品資料

如果讀者想全面了解Web 3D的相關學習資料，推薦閱讀分享收集的Web 3D學習資源：

本文中分享了我收集的Web 3D相關的博客、書籍、教程、demo等內容

如果讀者想要學習“敏捷開發+領域模型驅動+2D游戲開發”，推薦閱讀炸彈人游戲開發系列：

本系列博文記錄了炸彈人游戲迭代開發的過程。在開發的過程中，代碼會不斷重構，領域模型會不斷演變，高層劃分也會不斷變化。

如果讀者想要學習“開發2D引擎”，推薦閱讀提煉游戲引擎系列：

本系列記錄了從炸彈人游戲中提煉2D游戲引擎YEngine2D雛形的實戰過程，您可以通過本系列了解到引擎提煉的思想、引擎的設計以及引擎是如何從游戲中提煉的，學習引擎開發的知識。希望對您能有所幫助！

如果讀者想要學習“面向對象設計+前端架構”，推薦閱讀前端的架構設計與演化實例：

本文介紹我在實際的前端項目中的架構設計，展示因為需求變化而導致架構變化的過程。
全文分為三個階段，分別對應三次需求的變化，給出了對應的架構設計。
在第一個階段中，我使用面向過程設計；在第二個階段和在第三個階段中，我使用面向對象設計。

本文參考資料

Wonder-WebGL 3D引擎和編輯器
“用函數式編程，從0開發3D引擎和編輯器”系列博文