關于webgl的大型應用

hyuan 發布于2019-08-21 11:47 / 499人閱讀

摘要：概述最近公司在做一個大型的應用，總結如下建模軟件建模自定義一套語義化的模型格式，并編寫模型格式轉化插件把建模軟件的模型格式轉成自定義格式。

概述

最近公司在做一個大型的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 配置

GPU云服務器云服務器關于物聯網的應用 WebGL webgl.-canva h5 webrtc webgl

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87122.html

阿里云前端周刊 - 第 16 期

摘要：或許，它還終將改變用戶對移動的期待。通過一個場景實例了解前端處理大數據的無限可能隨著前端的飛速發展，在瀏覽器端完成復雜的計算，支配并處理大量數據已經屢見不鮮。推薦 1. 神經網絡入門 http://www.ruanyifeng.com/blo... 眼下最熱門的技術，絕對是人工智能，人工智能的底層模型是神經網絡（neural network）。許多復雜的應用（比如模式識別、自動控制）...

waruqi 2019-08-20 18:03 評論0 收藏0
在SAP UI中使用純JavaScript顯示產品主數據的3D模型視圖

摘要：以為例，在產品主數據的頁面工具欄上新增了一個按鈕，點擊之后，會顯示一個彈出窗口，在瀏覽器里利用調用本地安裝的應用，顯示該產品主數據的視圖。本文介紹的是另一種用純編程來以方式顯示產品主數據的解決方案。在Jerry寫這篇文章時，通過Google才知道，SAP其實是有自己的3D模型視圖顯示解決方案的。 showImg(https://segmentfault.com/img/remote/...

FingerLiu 2019-08-23 12:29 評論0 收藏0
WebGL 著色器偏導數dFdx和dFdy介紹

摘要：偏導數函數可以用于片元著色器中的任何變量。偏導數和用于計算紋理的一些列的子圖，每個子圖都比前一個的尺寸縮小了倍。在紋理取樣過程中使用偏導數來選擇最佳的級數。本文適合對webgl、計算機圖形學、前端可視化感興趣的讀者。偏導數函數（HLSL中的ddx和ddy，GLSL中的dFdx和dFdy）是片元著色器中的一個用于計算任何變量基于屏幕空間坐標的變化率的指令（函數）。在WebGL中，使用...

Hanks10100 2019-08-23 18:30 評論0 收藏0