Draco
更新於 發佈於 閱讀時間約 5 分鐘
Draco 是開源的3D 圖形壓縮，
前些陣子在處理的專案，需要用到放置3D模型，
問題來了，上百個幾千幾萬K大大小小的gltf模型，一次載入超級慢的，
公司配備電腦等級還不錯，
本機load的快，也需要大概1分鐘內時間，
但一上到客戶server之後，loding大概卡了5分多鐘吧，
不知道的還以為斷線了😂
當然跟現場的網路也有關係，但是減少loading還是有必要的，
問題來了，上百個幾千幾萬K大大小小的gltf模型，一次載入超級慢的，
公司配備電腦等級還不錯，
本機load的快，也需要大概1分鐘內時間，
但一上到客戶server之後，loding大概卡了5分多鐘吧，
不知道的還以為斷線了😂
當然跟現場的網路也有關係，但是減少loading還是有必要的，
拜訪google大神之後得到的答案，
便是 Draco 3D Data Compression
PS: 在專案內放置3D模型時，我用的是Three.js，所以範例js都會是用此，
另外如果你跟一我樣使用Windows環境，
那麼你在cmd壓縮時可能會遇到權限阻擋問題，
請記得以系統管理員身分開啟命令提示字元😎
另外如果你跟一我樣使用Windows環境，
那麼你在cmd壓縮時可能會遇到權限阻擋問題，
請記得以系統管理員身分開啟命令提示字元😎
那麼就先來說說怎麼壓縮3D模型，再提供放置範例。
3D模型壓縮及放置
1.安裝NodeJS
為了能夠使用npm指令安裝套件，在此之前你需先安裝NodeJS
2.檢查是否有npm
按理來說裝好新版NodeJs應該就有npm管理工具了，
但還是打開你的終端機輸入一下npm -v 來測試是否成功安裝
但還是打開你的終端機輸入一下npm -v 來測試是否成功安裝
3.安裝 gltf-pipeline
輸入 npm install -g gltf-pipeline
這個就是我們拿來壓縮用的套件
4.壓縮模型檔案
為了方便，先cd到你的模型路徑下，之後只要打檔名就好😂
壓縮指令: gltf-pipeline -i 模型檔名 -o 壓縮後模型檔名 -d
壓縮範例:
單一壓縮 gltf-pipeline -i A-1.gltf -o A-1_drc.gltf -d
批次壓縮 for %i in ('dir *.gltf ') do gltf-pipeline -i %i -o %~ni_drc.gltf -d
PS: 有很多種模型格式支援，但由於我的專案需要，範例會是gltf to gltf
5.檢查壓縮過的模型
看到沒有這個壓縮後的檔案大小，
這當然視模型的貼圖材質而定壓縮比例不同，
但壓縮率實在是很高
6.Three.js讀取壓縮過的模型
//加載GLTF 模型需要的jsimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';//加載解碼需要的jsimport { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';//建立解碼加載器let dacLoader = new DRACOLoader();/** https://www.gstatic.com/draco/v1/decoders/* 為解碼器源碼目錄,* 如果有下載就可以使用第二種自己指定路徑主要是這三隻需要存在* draco_decoder.js— Emscripten 編譯的解碼器，兼容任何現代瀏覽器。* draco_decoder.wasm— WebAssembly 解碼器，兼容較新的瀏覽器和設備。* draco_wasm_wrapper.js— WASM 解碼器的 JavaScript 包裝器。*/dacLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');//dacLoader.setDecoderPath('/draco/');//建立模型加載器const loader = new GLTFLoader();loader.setDRACOLoader(dacLoader);loader.load('/model/A-1_drc.gltf',(gltf) => {this.scene.add(gltf.scene);});
優缺點
- 很明白的檔案大小差異非常大
- 壓縮過的檔案增加了解碼時間，如果你本身檔案很小就沒必要用此方式
- 跟壓縮圖片一樣，模型有機會有失真問題
- 實測專案本頁讀取速度在本機直接剩下10-20秒，客戶端server約1分鐘內，比原本少了5倍時間
雖然縮短了很多的時間，但客戶還是說好慢，
畢竟還是花了1分鐘左右在載入網頁，
對使用者體驗來說，還是有差，
後來採用的方式除了壓縮之外，也減少初次載入模型量，
需要查看再自行開啟載入其他項目。
此專案的模型原始總檔案大小約1G多，
3D繪圖本身就很消耗資源，
所以無可避免需要找各種方式減少loading，
總之3D模型很多奇妙的坑，但也造就很多網站新的呈現方式，
非常有趣 😂😂😂
繼續往新世界前進吧~~
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
我想要一天分享一點「LLM從底層堆疊的技術」，並且每篇文章長度控制在三分鐘以內，讓大家不會壓力太大，但是又能夠每天成長一點。
在某些情況下，別人提供的 Pretrained Transformer Model 效果不盡人意，可能會想要自己做 Pretrained Model，但是這會耗費大量運
一、Blender 是一款强大的开源3D创作套件，如今已广为人知并在多个领域中广泛应用。它不仅适用于各种3D建模、动画制作，还包括一些视觉特效、游戏开发和3D打印设计等。以下是Blender的一些主要特点及其“魔力”所在：
1. 全功能集成
3D建模：支持多边形建模、曲线建模、雕刻、精确建模等多
網格擴散可以就像剪紙一樣，把紙上想要的部分剪下來。
通過模型的一個點，找到周圍相鄰的點；其他點又能找到周圍相鄰的點，就像水波一樣擴散出去。
許多3D的算法，如裁切、干涉深度偵測等都會用到。
接著載入Part 2需要的相關依賴，其分別為：
from torch import cuda, bfloat16import
import transformers
然後選擇我們要的Meta模型，這邊可以是Llama 2或者是Llama 3，後者是Meta最新釋出的模型。
同時我們也讓系統自
Ae 小技巧：製作3D 方塊
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
當我們在開發一個AI應用服務時， 常常會需要載入大模型， But… 我們總不可能每一次的請求就載入一次模型吧！ 這樣太沒有效率了， 也非常的浪費資源， 因此我們通常會希望應用程式啟動時就能夠載入模型， 之後每一次的請求只要讓模型進行運算即可， 那麼在FastAPI的框架中究竟要如何使用呢？
首
本篇介紹Stablity AI跟Tripo AI合作推出的3D生成模型TripoSR。
3D 模型是用來表示物體的多邊形，可以是現實世界的實體或虛構的東西。本文分享國外網站如何製作 3D 模型的多種方法，包括文字轉 3D 模型、圖像轉 3D 模型和掃描現實物體轉 3D 模型等。歡迎想要製作或使用 3D 模型的你參考!
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
我想要一天分享一點「LLM從底層堆疊的技術」，並且每篇文章長度控制在三分鐘以內，讓大家不會壓力太大，但是又能夠每天成長一點。
在某些情況下，別人提供的 Pretrained Transformer Model 效果不盡人意，可能會想要自己做 Pretrained Model，但是這會耗費大量運
一、Blender 是一款强大的开源3D创作套件，如今已广为人知并在多个领域中广泛应用。它不仅适用于各种3D建模、动画制作，还包括一些视觉特效、游戏开发和3D打印设计等。以下是Blender的一些主要特点及其“魔力”所在：
1. 全功能集成
3D建模：支持多边形建模、曲线建模、雕刻、精确建模等多
網格擴散可以就像剪紙一樣，把紙上想要的部分剪下來。
通過模型的一個點，找到周圍相鄰的點；其他點又能找到周圍相鄰的點，就像水波一樣擴散出去。
許多3D的算法，如裁切、干涉深度偵測等都會用到。
接著載入Part 2需要的相關依賴，其分別為：
from torch import cuda, bfloat16import
import transformers
然後選擇我們要的Meta模型，這邊可以是Llama 2或者是Llama 3，後者是Meta最新釋出的模型。
同時我們也讓系統自
Ae 小技巧：製作3D 方塊
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
當我們在開發一個AI應用服務時， 常常會需要載入大模型， But… 我們總不可能每一次的請求就載入一次模型吧！ 這樣太沒有效率了， 也非常的浪費資源， 因此我們通常會希望應用程式啟動時就能夠載入模型， 之後每一次的請求只要讓模型進行運算即可， 那麼在FastAPI的框架中究竟要如何使用呢？
首
本篇介紹Stablity AI跟Tripo AI合作推出的3D生成模型TripoSR。
3D 模型是用來表示物體的多邊形，可以是現實世界的實體或虛構的東西。本文分享國外網站如何製作 3D 模型的多種方法，包括文字轉 3D 模型、圖像轉 3D 模型和掃描現實物體轉 3D 模型等。歡迎想要製作或使用 3D 模型的你參考!