STL を GLTF に変換

ブラウザーは STL も glTF もそのままでは描画できず、どちらも実行環境が必要です。three.js には STL 用のローダーが付属しているため、STL をそのまま配信すればよいという考え方もあり、社内向けの一度きりのツールならそれで十分です。

ページが公開され、モデルそのものがコンテンツになる場面では話が変わります。STL は通信量の面で最も非効率な形式のひとつで、境界を持たないためカメラの位置を解析後に計算する必要があり、すべての三角形が重複した頂点を伴って届きます。glTF はこの転送のために設計された形式で、これら 3 つの問題をすべて解決します。

バイナリの STL は三角形の数を n とすると必ず 84 + 50n バイトで、形状によらずこの計算式が成り立ちます。50 バイトの内訳は面法線に 12 バイト、3 つの完全な頂点に 36 バイト、未使用の 2 バイトです。何も共有されないため、立方体でも 8 つの角に対して 36 個の頂点記録が必要になります。

この変換は座標を小数点以下 6 桁で丸めてキーを作り、同じ位置にある頂点をすべて 1 つに統合します。閉じた表面では 1 つの頂点がおよそ 5 個から 6 個の三角形に使われるため、頂点データはその割合でおおよそ減ってから float32 として書き出されます。三角形あたり 12 バイトの uint32 インデックスを足しても、実際に閉じたメッシュであれば glTF の形状データは元の STL より小さく収まります。

1 つのシーン、1 つのノード、1 つのメッシュ、1 つの三角形プリミティブ、float32 の VEC3 位置アクセサー、uint32 の SCALAR インデックスアクセサーで構成され、asset ブロックはバージョン 2.0 を宣言します。バッファーは base64 のデータ URI として埋め込まれ、単体で完結するファイルになります。

POSITION アクセサーには仕様が要求する min と max が書き込まれており、これがあるかどうかがモデルが表示されるかどうかの実質的な分かれ目になります。model-viewer や three.js はこの 6 個の数値から初期のカメラ距離を計算するため、これらがないファイルは何もない場所へズームした状態で開き、その状態は壊れた読み込みと区別がつきません。

NORMAL 属性は書き込まれず、glTF の仕様では法線を持たないメッシュに対してビューアーが面ごとのフラットな法線を計算するよう定めています。スカルプトツールから読み込んだ有機的なモデルであればこれは欠点に見えますが、CAD から出力された STL に対しては、これが実際の形状を正直に表しています。

STL には曲面がありません。エクスポーターがそのときの許容誤差で作った三角形があるだけで、それをなめらかに陰影づけて描くのは、プリンターが実際に再現する形状について見栄えの良い嘘をつくことになります。プレビューをなめらかに見せたいなら、法線を平均化してごまかすのではなく、より細かい許容誤差で STL を書き出し直すのが正攻法です。

STL は単位を宣言せず、エンジニアリングや 3D プリントの現場ではその数値をミリメートルとして読む慣習になっています。glTF 2.0 は距離の単位をメートルと定めています。この変換は座標をそのまま渡すため、元にない係数を推測してかけることはしません。

そのため、60 mm のブラケットは glTF の中では 60 メートルのブラケットになります。単体で見る限りは境界からカメラが自動的に寄ってくるので違和感はありませんが、シーンの中で他の何かと並んだ瞬間におかしくなり、物理ベースのライティングもこのスケールでは違う挙動をします。ビューアーのノードに一様な 0.001 のスケールを設定するか、ビルド時に gltf-transform で適用してください。

STL には部品やグループ、オブジェクトという概念がないため、glTF には正確に 1 つのプリミティブだけが含まれます。これは描画にかかるコストとしては最も安く、300 個のグループを持つ CAD の書き出しにありがちな描画呼び出し過多の問題を STL 由来のモデルは起こしません。

マテリアルもテクスチャも UV 座標も頂点カラーもありません。元の STL がそれらを一切持っていなかったからです。ビューアーは既定のマテリアル、たいてい中間のグレーの物理ベースマテリアルを適用します。three.js で別のマテリアルを 1 行で割り当てる価値はあり、金属感をわずかに加えて環境マップを設定するだけで、技術部品の見え方が既定よりずっとわかりやすくなります。

ここで書き出される .gltf はバッファーを base64 のデータ URI として埋め込むため、別途 .bin を配信する必要がなく、相対パスが壊れる心配もありません。base64 は 3 バイトを 4 文字で表すため、その利便性の代償としておよそ 33 パーセントほどバイト数が増え、整形された JSON の分も加わります。

確認したり差分を取ったり、ビルド時に gltf-transform に渡したりするファイルなら glTF を、訪問者が実際にダウンロードするファイルなら GLB を選んでください。同じ形状、同じ境界情報で、バッファーがバイナリになり、リクエストが 1 回で済みます。STL をどちらに変換するかはこのページの中では同じ処理で、拡張子だけが違いです。

この処理はページの中で普通の JavaScript として動きます。ダウンロードする WebAssembly エンジンも、モデルを運ぶリクエストも、待ち行列もありません。ウェブ用のプレビューに変換される STL は顧客の部品や未発表の製品であることが多く、アップロードされたジオメトリで見積もりを出すような業者にとって、これがどこにも送られないことには実際の意味があります。

無料の上限は 100 MB で、三角形あたり 50 バイトとして計算すると 200 万三角形のモデルに相当します。これほど大きなファイルは、変換の前に減らしておく価値があります。glTF もそれに比例して大きくなり、スマートフォンのブラウザービューアーはどの形式であっても快適には扱えません。