threejs-textures は何をしますか？
Three.js テクスチャ - テクスチャタイプ、UV マッピング、環境マップ、テクスチャ設定。画像、UV 座標、キューブマップ、HDR 環境、テクスチャ最適化を扱う際に使用します。
テクスチャタイプ
Three.js は様々なテクスチャタイプをサポートしています。
- 画像テクスチャ (ImageTexture): 最も一般的なテクスチャ。
TextureLoaderを使用して画像ファイルから読み込みます。 - キャンバステクスチャ (CanvasTexture): HTML の
<canvas>要素からテクスチャを生成します。動的なテクスチャ生成に便利です。 - データテクスチャ (DataTexture): 生のピクセルデータからテクスチャを作成します。プログラムによるテクスチャ生成に使用します。
- キューブテクスチャ (CubeTexture): 6 つの面からなるキューブマップを表現します。環境マッピングやスカイボックスに使用します。
- ビデオテクスチャ (VideoTexture): 動画ファイルをテクスチャとして使用します。
- コンパressed テクスチャ: DDS、KTX、PVRTC などの圧縮形式に対応しています。
UV マッピング
UV マッピングは、2D テクスチャを 3D モデル表面にマッピングするプロセスです。
- UV 座標は、テクスチャ上の水平方向 (U) と垂直方向 (V) の位置を 0 から 1 の範囲で指定します。
- 各頂点に UV 座標が割り当てられ、テクスチャのどの部分がその頂点にマッピングされるかを決定します。
- Three.js のジオメトリ (例:
BoxGeometry、SphereGeometry) は自動的に UV 座標を生成します。カスタムジオメトリの場合は、geometry.attributes.uvを設定します。
環境マップ
環境マップは、反射や屈折などの光学的効果をシミュレートするために使用されます。
キューブマップ
- 6 つの正方形の画像で構成され、周囲の環境を表現します。
CubeTextureLoaderを使用して読み込みます。- 環境マップとして設定するには、
material.envMapに割り当てます。
HDR 環境
- HDR (High Dynamic Range) 環境マップは、より広い輝度範囲を提供します。
RGBELoaderやEXRLoaderなどのローダーを使用して読み込みます。PMREMGeneratorを使用して、HDR 環境をプリフィルタリングし、拡散反射やスペキュラ反射に使用します。
テクスチャ設定
テクスチャの見た目や動作を制御するための設定があります。
フィルタリング
minFilter: テクスチャが縮小されるときのフィルタリング方法。LinearFilter、NearestFilter、MipmapLinearFilterなど。magFilter: テクスチャが拡大されるときのフィルタリング方法。LinearFilter、NearestFilter。anisotropy: 異方性フィルタリングのレベル。視点に対して斜めのサーフェスでぼやけを軽減します。
ラッピング
wrapSとwrapT: テクスチャ座標が 0-1 の範囲を超えた場合の動作。RepeatWrapping、ClampToEdgeWrapping、MirroredRepeatWrapping。repeat: テクスチャの繰り返し回数。Vector2(x, y)で設定します。offset: テクスチャのオフセット位置。Vector2(x, y)で設定します。
変換
rotation: テクスチャの回転角度（ラジアン）。center: 回転の中心点。Vector2(x, y)で設定します。
テクスチャ最適化
パフォーマンス向上のためのテクスチャ最適化テクニック。
- テクスチャアトラス: 複数の小さなテクスチャを 1 枚の大きなテクスチャにまとめることで、ドローコールを減らします。
- ミップマップ: 異なる解像度のテクスチャを事前に生成し、距離に応じて適切な解像度を使用することで、レンダリング品質とパフォーマンスのバランスをとります。
- 圧縮テクスチャ: ファイルサイズを削減し、ロード時間を短縮します。
- テクスチャサイズの制限: テクスチャの解像度を必要なだけに制限し、2 の累乗サイズを使用することで、GPU メモリの効率的な利用を促進します。
これらの知識を活用することで、Three.js アプリケーションにおけるテクスチャの効果的な利用と最適化が可能になります。