關於webgl的大型應用

概述

最近公司在作一個大型的webgl應用，總結以下:

1.建模軟件建模(3d Max revit)

2.自定義一套 語義化的模型格式，並編寫模型格式轉化插件,把建模軟件的模型格式轉成自定義格式。

爲何要自定義語義化的模型格式呢？

由於，如今瀏覽器的性能很尷尬說好很差，說差不差。得優化啊！
好比：模型裏帶了描述數據，指這單個模型的 長寬高 自定義數據等。這些數據每每是比較龐大的，並且每個小模型都有，不可能隨着模型加載到 瀏覽器上去。那麼就得把模型數據，與幾何數據分離。模型數據放數據庫，幾何數據保留，而且作必定優化，好比只存 原幾何體的基礎信息，經過變換獲得 相似的幾何體
（不少場景下，有不少相同的 長方體，在模型格式中 能夠 只存一個，其餘的 copy出來）

3.瀏覽器性能有限，不能直接加載過大的模型文件，（太大了一直loading用戶也受不了）就得 本身寫 切割模型 的小工具，把大的模型，切成一個一個的小模型，按需加載，或者分佈加載。

4.編寫展示層對webgl的交互操做 封裝，推薦庫 Three.js babylon.js cannon.js xeogl.js
各有強處這裏就不作說明了。

5.後端提供 api 點擊某個模型，返回對應的模型數據。

綜上所述 webgl 的應用就是

1.webgl 展示層 封裝基礎 交互 操做等.

2.webgl 服務層
1).提供用戶上傳模型
2).自動轉換模型且模型數據與幾何數據分離
3).自動把大模型切割成小模型
4). 提供api

todoList

1.完成 webgl server
2.完善 webgl 展示層 各類交互操做

暫時就想到這些，下面本身寫的一個小的demo 慢慢完善。。。
https://github.com/shinseed/T...

使用

1.npm install || yarn install

2.npm run dev

3.超級瑪麗 模式操做 w、a、s、d 空格 (只作了向下的碰撞檢測)

SloceJson 使用

1.model 文件夾爲原始模型文件

2.output 切割完後的模型文件

3.終端進入 該目錄 node sliceJson.js

文檔目錄

1.src 源碼

2.sliceJson 把大的模型文件切割成小模型

3.static 靜態資源

4.config webpack 配置