L@ dۀX K" Y^ҚTy"a"* z0uN(x`X@)H ((Q( .m5 bXC#G6$f!Cr; dN|Y
bid/ddates2023-03-17T23:55:00etitlexj大きなGLBファイルをドラグアンドドロップで簡単に縮小するツール「gltfbeauty」dtagsg#js #vrcurlxhttps://fukuno.jig.jp/3887dbodyy
GLTFのテクスチャー変更と、GLBとGLTFの相互変換をESモジュール化できたので、組み合わせてブラウザで動くツール「gltfbeauty」を作りました。
<>p>
「gltfbeauty」src on GitHub
オープンソースのおかげです！
JavaScriptで書いたメインの処理はこちら
const file = item.file;
const bin = new Uint8Array(await readAsArrayBufferAsync(file));
const gltfmode = name.endsWith(".gltf");
const gltf = gltfmode ? GLTF.parse(bin) : await GLB.decode(bin);
const img = GLTF.getTexture(gltf);
const imgw = imgwidth.value;
const imgq = imgquality.value;
const imgc = imgsrgb.checked ? "srgb" : "display-p3";
const img2 = await resizeImage(img, imgw, imgq, imgc);
GLTF.setTexture(gltf, img2);
const data = gltfmode || outgltf.checked ? GLTF.stringify(gltf) : await GLB.encode(gltf);
const name2 = outgltf.checked ? name.substring(0, name.length - 3) + "gltf" : name;
files.push({ name: name2, data });
ドロップされたファイルを1つずつ、GLTFまたはGLBで読み込み、テクスチャーを縮小して、再度セットし、GLTFまたはGLBファイルにしています。
「VRイノシシ 256pxテクスチャーデモ」
テクスチャーサイズ、ブラウザでのキャラクターで使う場合1024pxあたりがオススメですが、小さいオブジェクトであれば、256pxでもいけそうです。VRイノシシくんを使ったデモ、左は256px 720KB、右は1024px 1.1MB。近寄ると荒が目立ちますが、遠くから見ると区別付きません。
BlenderのDecimateなどでポリゴン数の削減も合わせて、いい感じのサイズにすることが、多数のオブジェクトをスムーズに動かすコツです！
links
- PCNこどもプロコンでのバーチャルおみやげ、はしるVRイノシシJavaScript
- 3DスキャンしたGLBデータをコンパクトにするオープンソースライブラリ「GLTF.js」
- 3Dモデルの標準、GLBとGLTFを相互変換、glTF-PipelineのESモジュール版
cimgxKhttps://img.sabae.cc/data/20230318/e78bb6c2-cd66-4af6-93d3-87e8585c03b6.jpg