現在、主流の汎用フォーマットは fbx ですが、fbx フォーマットは glb フォーマットモデルに変換されるため、非常に大きくなり、スタックしてしまいます。直接使用することは絶対に不可能です。圧縮する必要があります。メモリを小さくしたモデル。
まず、glbxz.com gltf モデル ダウンロード Web サイトと glb モデル ダウンロード Web サイトにアクセスしましょう (笑)、いくつかの無料モデルを無料で入手しましょう。
glbxz.com の glb 形式モデル軽量ローディング ツール DRACOLoader 自体が最初の研究対象となりました。
デモ シーンで DRACOLoader に使用されているコードは、glbxz.com から見つけることができます。
新しいGLTFLoader()
.setPath( 'models/gltf/' )
.setDRACOLoader( new DRACOLoader().setDecoderPath( 'js/libs/draco/gltf/' ) )
.load( 'モデル別.glb', function ( gltf ) {
コンソール.ログ(gltf.シーン);
scene.add( gltf.scene );
} );
既存のシーンを研究対象とすると、DRACOLoader は圧縮モデルを特殊にロードするためのツールにすぎず、それ自体では glb モデルの圧縮機能を実現できないことがわかります。
実際に glb 圧縮に使用するツールは gltf-pipeline なので、最初に gltf-pipeline をインストールします。GitHub アドレス https://github.com/CesiumGS/gltf-pipeline。
まずnodejsをインストールし、ダウンロード | Node.jsにアクセスします。Nodejs がインストールされたら、VS 2019 の開発者 PowerShell を開き、「npm install -g gltf-pipeline」と入力して gltf-pipeline をインストールします。
vscode をインストールし、デスクトップに glb フォルダーを作成し、vscode を使用して glb フォルダーを開き、ファイル draco.js を圧縮コード スクリプト ファイルとして作成し、ターミナルを開き、新しいターミナルを作成し、「npm install gltf-pipeline」と入力し、インストールが成功すると、左側のウィンドウが表示されます。node_modules フォルダーと 2 つの json ファイルが表示されます。圧縮する必要がある glb モデル (model.glb) を、デスクトップ上に作成した glb フォルダーに置きます。
まず glb を gltf に変換します。
const gltfPipeline = require(“gltf-pipeline”);
const fsExtra = require(“fs-extra”);
const glbToGltf = gltfPipeline.glbToGltf;
const glb = fsExtra.readFileSync(“model.glb”);
glbToGltf(glb).then(関数 (結果) {
fsExtra.writeJsonSync(“model.gltf”, results.gltf);
});
gltf を再圧縮します。
const gltfPipeline = require(“gltf-pipeline”);
const fsExtra = require(“fs-extra”);
const processGltf = gltfPipeline.processGltf;
const gltf = fsExtra.readJsonSync(“model.gltf”);
const オプション = {
ドラコオプション: {
圧縮レベル: 10、
}、
};
processGltf(gltf, オプション).then(関数 (結果) {
fsExtra.writeJsonSync(“model-draco.gltf”, results.gltf);
});
次に、圧縮された gltf を glb に変換します。
const gltfPipeline = require(“gltf-pipeline”);
const fsExtra = require(“fs-extra”);
const gltfToGlb = gltfPipeline.gltfToGlb;
const gltf = fsExtra.readJsonSync(“model-draco.gltf”);
gltfToGlb(gltf).then(関数 (結果) {
fsExtra.writeFileSync(“model-draco.glb”, results.glb);
});
ただし、上記のコード圧縮を実行すると、実際の圧縮効果はあまり良くなく、10 倍の圧縮はありません。gltf テクスチャを個別に保存すると、テクスチャ マップが圧縮されていないことがわかります。圧縮に加えて、gltf 自体には 10 倍の圧縮があるため、モデルのテクスチャがモデル サイズの大きな割合を占めている場合、この圧縮は実際には非常に不十分になります。
したがって、gltf テクスチャを圧縮する必要があります。
まず、gltf を別のテクスチャとして保存します。
const gltfPipeline = require(“gltf-pipeline”);
const fsExtra = require(“fs-extra”);
const processGltf = gltfPipeline.processGltf;
const gltf = fsExtra.readJsonSync(“model.gltf”);
const オプション = {
セパレートテクスチャ: true、
};
processGltf(gltf, オプション).then(関数 (結果) {
fsExtra.writeJsonSync(“モデル別.gltf”, results.gltf);
// 個別のリソースを保存する
constセパレートリソース = results.セパレートリソース;
for (constrelativePath in SeparateResources) {
if (セパレートリソース.hasOwnProperty(relativePath)) {
const resource = SeparateResources[相対パス];
fsExtra.writeFileSync(relativePath, resource);
}
}
});
Nodejs には、画像を処理できる jimp モジュールがあり、glb プロジェクトでターミナルを開き、「npm install jimp」と入力して、jimp ツールをインストールします。
画像圧縮コード:
var Jimp = require('jimp');
Jimp.read('image0.png').then(img => {
const imgWidth = img.bitmap.width;
const imgHeight = img.bitmap.height;
定数の長さ = 400;
const isWidthLonger = imgWidth > imgHeight ? 真/偽;
const time = (isWidthLonger ? imgWidth : imgHeight) / 長さ;
const rWidth = imgWidth / 時間;
const rHeight = imgHeight / 時間;
return img.resize(rWidth, rHeight ).write( image0.png);
});
次に、別々に保存して処理した写真と gltf を glb に再結合します。
CMD コマンド ラインを使用して gltf とテクスチャ マップをパッケージ化し、glb を生成します。
[pgltf-pipeline -i 'gltf モデル ファイル アドレス' -o 'glb モデル ファイル保存アドレス']、glb がグリッドとテクスチャに対して正常に圧縮されるように、テクスチャ ファイルと gltf モデル ファイルが 1 つのフォルダー内にあることを確認します。
最終的なコードの概要:
const gltfPipeline = require(“gltf-pipeline”);
const fsExtra = require(“fs-extra”);
const glbToGltf = gltfPipeline.glbToGltf;
const glb = fsExtra.readFileSync(“model.glb”);
const processGltf = gltfPipeline.processGltf;
var Jimp = require('jimp');
const オプション = {
ドラコオプション: {
圧縮レベル: 10、
}、
};
const オプション 1 = {
セパレートテクスチャ: true、
};
glbToGltf(glb).then(関数 (結果) {
processGltf(results.gltf, options).then(function (results) {
processGltf(results.gltf, options1).then(function (results) {
fsExtra.writeJsonSync(“モデル別.gltf”, results.gltf);
// 個別のリソースを保存する
constセパレートリソース = results.セパレートリソース;
for (constrelativePath in SeparateResources) {
if (セパレートリソース.hasOwnProperty(relativePath)) {
const resource = SeparateResources[相対パス];
fsExtra.writeFileSync(relativePath, resource);
Jimp.read(relativePath).then(img => {
const imgWidth = img.bitmap.width;
const imgHeight = img.bitmap.height;
定数の長さ = 10;
const rWidth = imgWidth / 長さ;
const rHeight = imgHeight / 長さ;
return img.resize(rWidth, rHeight ).write(relativePath);
});
}
}
});
});
});
CMD：gltf-pipeline -i C:\xx\xx\xx\glb\モデル別.gltf -o C:\xx\xx\xx\glb\モデル別.glb