2025/09/09 17:16 Real-Time GPU Texture Compression in Three.js
ロボ子、three.js r180でSparkエンコードされたテクスチャが使えるようになったのじゃ！
それはすごいですね、博士！ Sparkエンコードって、具体的に何が嬉しいんですか？
`Spark.encodeTexture`で生成された`GPUTexture`オブジェクトをthree.jsで直接利用できるようになったのが大きいぞ。Don McCurdyさんの協力のおかげじゃ。
なるほど、GPUTextureを直接使えるのは便利ですね！ `@ludicon/spark.js`パッケージのアドオンでGLTFLoaderとの統合も簡単になったと。
`registerSparkLoader`関数でSparkをGLTFLoaderに登録すると、ローダーが自動的にテクスチャをSparkでエンコードしてくれるから、手間が省けるのじゃ。
初期のSparkテクスチャローダーは遅かったみたいですが、並行デコードで改善されたんですね。
`DOM Image`オブジェクトの`decoding`属性を`'async'`に設定したり、`createImageBitmap` APIを使うことで、並行デコードが可能になったぞ。でもFirefoxは要注意じゃ。
RG Normal Mapのサポートも追加されるんですね！ 2チャンネルテクスチャに格納された法線マップをthree.jsがサポートしていなかったとは。
そうじゃ。法線マップをXY座標のみで格納して、Z座標を再構築する手法が一般的だったからの。これでBC5やEAC11_RGなどの2チャンネル圧縮フォーマットも使えるようになるぞ。
パフォーマンス測定の結果も興味深いですね。MacBook Pro M4ではSparkテクスチャローダーが高速だと。
SciFiHelmet GLTFサンプルモデルを使ったテストでは、PNG、WebP、AVIFなどの異なるテクスチャ形式で、Sparkありとなしで比較した結果が出てるのじゃ。
モバイルデバイスでのテスト結果を見ると、Galaxy S23ではAVIF+Sparkが遅くなっている場合もあるんですね。
そうみたいじゃな。BasisテクスチャはCPUでのトランスコードが必要だからオーバーヘッドが大きい、というのも覚えておくと良いぞ。
GLBファイルは完全にダウンロードされるまでトランスコードを開始できないから、外部テクスチャアセットを参照するGLTF/GLBファイルの方が有利な場合もあるんですね。
アセットサイズはディスクロード時間に大きく影響するから、そこも考慮する必要があるのじゃ。
今後の展望として、spark.jsのGitHubリポジトリでthree.jsのサンプルが公開されて、フィードバックを募集しているんですね。
spark.jsの売上の10%を、Web上の3Dグラフィックスを推進するプロジェクトの開発者に寄付する予定らしいぞ。素晴らしいのじゃ！
それは社会貢献にもなりますね！ 博士、今日のまとめをお願いします。
よし、まとめじゃ！ three.js r180でSparkエンコードされたテクスチャが利用可能になり、パフォーマンス改善や開発の効率化が期待できるのじゃ。ただし、デバイスやテクスチャ形式によっては注意が必要じゃな。…ところでロボ子、スパークといえば、静電気で髪が逆立つのは嫌じゃな？
確かにそうですね。特に冬場は乾燥しますし。…って、博士！ まとめの後にオチをつけるのはお約束ですか？
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。