threejs-textures

Three.js テクスチャ

テクスチャアセット、UV の動作、色とデータの解釈、環境マップ、GPU テクスチャメモリを扱う場合に、このスキルを使用します。アセットの転送やデコーダーのセットアップは threejs-loaders に、PBR マテリアルのセマンティクスは threejs-materials に、直接的なライティングの判断は threejs-lighting に引き継いでください。

このスキルを使う場面

• ベースカラー、法線、ラフネス、メタルネス、AO、エミッシブ、またはアルファマップを読み込み、設定する
• 色の不一致、ぼやけた画像や遠くの画像、継ぎ目、繰り返しの不具合、誤った UV、AO の欠落を修正する
• HDR／キューブマップ環境、キャンバス／動画／データテクスチャ、またはレンダーターゲットを使用する
• テクスチャのメモリ、解像度、サンプリング、または重複した GPU 割り当てを削減する

手順

ステップ 1：各テクスチャを意味に応じて分類する

1. テクスチャが表示色を格納するのか、非カラーのデータを格納するのかを特定します。
2. 表示色のテクスチャには、レンダラーのバージョンで文書化されている色空間設定を使用します。法線、ラフネス、メタルネス、深度、データマップには、表示用の色処理を適用しないでください。
3. メッシュがマテリアルのマップで必要とされる UV チャネルを持つことを確認します。アンビエントオクルージョンでは、マテリアルやアセットのパイプラインに応じて、2 つ目の UV セットが必要になることがよくあります。

const baseColor = await new THREE.TextureLoader().loadAsync("/textures/albedo.jpg");
baseColor.colorSpace = THREE.SRGBColorSpace;
baseColor.wrapS = THREE.RepeatWrapping;
baseColor.wrapT = THREE.RepeatWrapping;
baseColor.repeat.set(2, 2);

ステップ 2：見た目に基づいてサンプリングとラッピングを選択する

要件	設定の方針
タイル可能なマップ	繰り返し／ミラーラッピングと、意図的な repeat
ピクセルアートのシャープなテクスチャ	最近傍フィルタリングを使い、意図しないミップマップのぼけを防ぐ
通常の 3D アセット	ミップマップと適切な最小／最大フィルタリング
斜めの面のディテール	実測したデバイスの上限内で異方性を設定する
切り抜きアルファ	テクスチャフィルタリングだけに頼らず、適切なマテリアルのアルファ設定を使う
動的なキャンバス／動画	ライフサイクルを管理した CanvasTexture ／ VideoTexture

習慣的に異方性を最大値に設定しないでください。ハードウェアの性能を確認し、実際の見た目の効果に基づいて品質レベルを選択してください。

ステップ 3：環境テクスチャとレンダーテクスチャを GPU リソースとして扱う

HDR／正距円筒テクスチャは通常、PBR 環境として使用する前に、レンダラーのバージョンに適した前処理が必要です。意図する効果に応じて、scene.environment と scene.background を個別に設定してください。レンダーターゲットのテクスチャはレンダーパスによって生成されるため、そのパスとともにサイズ変更し、破棄する必要があります。

ステップ 4：メモリと所有権を管理する

テクスチャメモリの使用量はファイルサイズだけでなく、寸法、ミップレベル、形式、コピーの数に応じて増加します。変更されないテクスチャインスタンスは再利用し、同じ URL を複数の所有者から読み込まないようにします。また、機能が所有するテクスチャやレンダーターゲットは、最後の利用者がアンマウントされたときに解放してください。

function disposeTexture(texture) {
  texture?.dispose();
}

別のマテリアルや共有アセットキャッシュが保持しているテクスチャを破棄しないでください。

ステップ 5：見た目の正しさとライフサイクルを確認する

• 代表的なライトと色管理のもとで、ベースカラー、法線、ラフネス、メタルネス、AO、エミッシブの各マップをテストします。
• 実際のメッシュで UV の継ぎ目と繰り返しの向きを確認します。
• 対象デバイス／プロファイルで、メモリ負荷とフレーム時間の動作をテストします。
• レンダーターゲットをサイズ変更し、動画リソースを停止／解放して、機能が所有する GPU テクスチャを破棄します。

例

PBR テクスチャセット

各マップを対応するセマンティックなマテリアルプロパティに接続し、表示色マップにだけ色空間を設定して、アセットの法線マップの規約を検証します。法線が平坦に見えたり、反転して見えたりする場合、通常はマップの規約、接線／UV、または色データの扱いに原因があり、ラフネスの問題ではありません。

動画を使った動的な面

明示的に所有する動画要素から VideoTexture を作成し、再生／一時停止／エラーとクロスオリジンの設定を処理します。UI のライフサイクルに応じて、テクスチャとメディアリソースを破棄してください。

ベストプラクティス

1. 色空間を設定する前に、表示色と数値データを区別します。
2. アセットのパイプラインで UV チャネルの要件を明確にします。
3. デバイスの予算に適したテクスチャの寸法と圧縮を使用します。
4. 共有テクスチャを再利用し、最後の利用者がいなくなった場合にのみ破棄します。
5. レンダーターゲットと動画／キャンバステクスチャを、ライフサイクルを持つアクティブなリソースとして扱います。

参考資料

• Three.js テクスチャのソースカバレッジ
• テクスチャのドキュメント
• Three.js マニュアル：テクスチャ