大家好，本文介紹了Wonder的高層需求和本系列對應的具體功能點。

確定Wonder高層需求

業務目標

Wonder是web端3D開發的解決方案，包括引擎、編輯器，致力于打造開放、分享、互助的生態。

范圍

• 引擎
  Wonder.js WebGL 3D引擎

• 編輯器
  Wonder-Editor

• 工具
  提供給用戶使用的各種工具，如gltf轉wdb數據在線轉換器等。

• 增值服務
  增強用戶在Wonder中發布的3D應用的能力，如提供數據統計、支付等。

• 平臺
  構建3D生態，提供如托管平臺、開發資源商城等，用戶可上傳/下載相關資源。

上下文

• 開發者
  開發者是Wonder的直接用戶，可以劃分為這幾類：
  1)美術、策劃同學
  2)完全沒有編程基礎，想快速開發Web 3D應用和游戲的同學(可以從Wonder的商城中下載資源；可以上傳資源和3D項目到托管平臺)
  3)程序員同學（可以寫腳本、自定義shader、擴展編輯器和引擎之類的）

• Wonder

• 分發服務商
  開發者可在Wonder中發布Web 3D應用/游戲到各個分發平臺，如微信小游戲等。

• 終端用戶
  終端用戶直接在瀏覽器上消費開發者在Wonder中發布的Web 3D應用/游戲。

確定本系列對應的Wonder v1.0版本的功能點

引擎v1.0版本功能點

• GameObject和Component
  引擎是ECS架構，場景是由多個GameObject組成，而每個GameObject又由各種Component組成。
  組件包括Transform、Geometry、Material等。

• 紋理
  基本的紋理。

• 光照
  支持方向光、點光源。

• 多線程渲染
  通過瀏覽器的Shared ArrayBuffer和OffscreenCanvas，引擎支持開兩個線程：主線程＋渲染線程。

• Scene Graph
  使用自定義的.wdb格式保存場景數據
  支持導入/導出.wdb

• 流加載
  支持使用流加載來加載.wdb，讓用戶首次加載更順滑。
  具體是指：
  用戶會看到邊加載邊顯示場景的效果。

• IMGUI
  可以用代碼調用API，來繪制UI。

• 事件
  綁定和封裝了事件，統一了pc端和移動端的事件。

編輯器v1.0版本功能點

• GameObject和Component
  可直接操作GameObject和Component，如添加、刪除、修改等。

• 場景管理
  可通過場景樹的形式看到該場景的所有GameObject
  可進行添加、刪除、修改等操作

• 撤銷/重做

• 輸出
  可在控制臺輸出日志、錯誤等信息

• 運行/停止
  可直接運行/停止場景

• 快捷鍵
  可使用快捷鍵

• 資產Asset
  可操作Material、紋理、模型等資產

• Gizmo
  可通過Transform Gizmo，設置GameObject->Transform組件的位移、旋轉、縮放等屬性
  在編輯視圖scene view中顯示相機、光等小圖標

• 導入/導出
  可導入/導出場景、模型

• 發布本地包
  可將做好的場景，發布為本地壓縮包，然后自己部署到服務器上，供終端用戶使用

• PWA
  使用了Chrome的PWA技術，支持離線訪問編輯器等

歡迎瀏覽上一篇博文：用函數式編程，從0開發3D引擎和編輯器（二）：函數式編程準備