<h1 id="tl%3Bdr">
<a class="header-anchor-link" href="#tl%3Bdr" aria-hidden="true"></a> TL;DR</h1>
<ul>
<li>glTFあるいはglb形式の3Dモデルのサイズを小さくするよ</li>
<li>モデル形式の説明はしないよ</li>
<li>
<a href="https://gltf-transform.dev/" target="_blank" rel="nofollow noopener noreferrer">glTF Transform</a>というSDKのコマンドラインAPIを使うよ</li>
</ul>
<h1 id="web%E3%81%AA%E3%82%89gltf%E3%81%A0%E3%82%88%E3%81%AD">
<a class="header-anchor-link" href="#web%E3%81%AA%E3%82%89gltf%E3%81%A0%E3%82%88%E3%81%AD" aria-hidden="true"></a> WebならglTFだよね</h1>
<p>Webブラウザ上で動作する3Dコンテンツを作るなら3Dモデルの形式はglTFがいいですよね(個人の感想)。<a href="https://threejs.org/" target="_blank" rel="nofollow noopener noreferrer">Three.js</a>でも扱えるモデル形式なので一般的かと思います。ちなみにglbはglTFのバイナリ形式です。</p>
<h1 id="3d%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF%E3%81%84%E3%81%A4%E3%81%A7%E3%82%82%E3%83%8D%E3%83%83%E3%82%AF">
<a class="header-anchor-link" href="#3d%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AF%E3%81%84%E3%81%A4%E3%81%A7%E3%82%82%E3%83%8D%E3%83%83%E3%82%AF" aria-hidden="true"></a> 3Dモデルのサイズはいつでもネック</h1>
<p>Webに限らず3Dモデルのサイズは見た目を損なわないのであればなるべく小さいほうが良いです。3Dモデルを自分で制作しているなら作る時に頂点数とかテクスチャサイズとか色々注意できるけど他の人が作ったアセットを利用したりする場合、モデルのサイズに困る時があります。</p>
<h1 id="%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%A2%E3%83%87%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E6%9C%80%E9%81%A9%E5%8C%96">
<a class="header-anchor-link" href="#%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%A2%E3%83%87%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E6%9C%80%E9%81%A9%E5%8C%96" aria-hidden="true"></a> 簡単にモデルサイズを最適化</h1>
<p>そこで今回おすすめしたいのが<strong>glTF Transform</strong>です。(<a href="https://gltf-transform.dev/" target="_blank" rel="nofollow noopener noreferrer">ドキュメント</a>、<a href="https://github.com/donmccurdy/glTF-Transform" target="_blank" rel="nofollow noopener noreferrer">Github</a>)<br>
こちらはglTF2.0フォーマットの3Dモデルを読込/編集/書込みできるSDKで、既存の3Dモデルを結合/分割/最適化するのに適しています。3Dモデルのサイズを最適化するだけならばコマンドラインAPIを利用するのが簡単なので今回はこちらを使っていきます。</p>
<h1 id="gltf-transform%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3api">
<a class="header-anchor-link" href="#gltf-transform%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3api" aria-hidden="true"></a> glTF TransformのコマンドラインAPI</h1>
<p>以下のコマンドでインストールします。<br>
Node.jsはv14以降を使ってください。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--global</span> @gltf-transform/cli
</code></pre></div><p>利用できるコマンド一覧は以下で確認できます。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">gltf-transform <span class="token parameter variable">--help</span>
</code></pre></div><p>最適化には主に以下のコマンドを使います。細かい設定は公式ドキュメントをご覧ください。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token comment"># gltf-transform optimize 変換前のモデル 変換後のモデル名 --texture-compress webp</span>
gltf-transform optimize input.glb output.glb --texture-compress webp
</code></pre></div><p>このコマンドですと<code>input.glb</code>というモデルを最適化処理後、<code>output.glb</code>という名前で出力します。テクスチャは<code>.webp</code>形式に変換します。</p>
<h1 id="%E5%A4%89%E6%8F%9B%E4%BE%8B">
<a class="header-anchor-link" href="#%E5%A4%89%E6%8F%9B%E4%BE%8B" aria-hidden="true"></a> 変換例</h1>
<table>
<thead>
<tr>
<th>変換前</th>
<th>変換後</th>
</tr>
</thead>
<tbody>
<tr>
<td>3.95MB<img src="https://storage.googleapis.com/zenn-user-upload/4f04ec911324-20230708.webp" alt loading="lazy" class="md-img">
</td>
<td>1.35MB<img src="https://storage.googleapis.com/zenn-user-upload/b7027d232fef-20230708.webp" alt loading="lazy" class="md-img">
</td>
</tr>
<tr>
<td>2.94MB<img src="https://storage.googleapis.com/zenn-user-upload/97527d119137-20230708.webp" alt loading="lazy" class="md-img">
</td>
<td>1.05MB<img src="https://storage.googleapis.com/zenn-user-upload/527b02966ed1-20230708.webp" alt loading="lazy" class="md-img">
</td>
</tr>
<tr>
<td>6.26MB<img src="https://storage.googleapis.com/zenn-user-upload/c2a802403266-20230709.webp" alt loading="lazy" class="md-img">
</td>
<td>1.23MB<img src="https://storage.googleapis.com/zenn-user-upload/21231f8a061b-20230709.webp" alt loading="lazy" class="md-img">
</td>
</tr>
</tbody>
</table>
<p>拡大しても遜色ないぐらいクオリティはそのままで、サイズを小さくできました。<br>
みなさんも是非試してみてください！</p>
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b4492c9991939" src="https://embed.zenn.studio/card#zenn-embedded__b4492c9991939" data-content="https%3A%2F%2Fgltf-transform.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://gltf-transform.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://gltf-transform.dev/</a></p>


glTF・glb形式の3Dモデルのサイズを小さくしよう！

3Dモデルのサイズはいつでもネック

glTF TransformのコマンドラインAPI

Discussion