テクスチャ

テクスチャとは、マテリアルに割り当てられ、グラフィカルなプリミティブに適用される画像のことです。

テクスチャのインポート

PlayCanvasにTextureアセットをインポートする方法は3つあります。

画像をアセットパネルにドラッグアンドドロップする。
アセットパネルのコンテキストメニューから「アップロード」を選び、ファイルブラウザを使って画像を選択する。
テクスチャが埋め込まれたFBXファイルをインポートする。

対応している画像フォーマットは以下の通りです。

インポートされたJPGおよびPNGファイルは,元のフォーマットのままとなります。

GIF、TGA、BMP、TIF画像タイプは、インポート時にJPGまたはPNGに変換されます。インポートされた画像に透過度がある場合は、PNGに、そうでない場合はJPGに変換されます。

HDRおよびEXRは高ダイナミックレンジフォーマットです。これらのタイプの画像は、PNGに変換され、RGBM形式で格納されるとマークされます。RGBMは、PNGのアルファチャンネルにRGB値の乗数を格納し、HDR形式を低ダイナミックレンジ形式に圧縮することができます。

デフォルトでは、インポートされる画像は2のべき乗に最も近いサイズにリサイズされます。たとえば、323x414の画像は、インポート時に256x512にリサイズされます。これは、グラフィックスエンジンが、2のべき乗でないテクスチャのミップマッピングを利用できないためです。ただし、これは、アセットタスクパネルで'テクスチャPOT'設定を無効にして、2のべき乗でないテクスチャをインポートする前にオーバーライドできます。

テクスチャプロパティ

アセットパネルでテクスチャのサムネイルを選択すると、インスペクタパネルに読み込まれます。複数のテクスチャを選択して、インスペクタで全体の選択を編集することもできます。

テクスチャは、標準的なアセットプロパティ(ID、名前、タグなど)を共有しますが、テクスチャ固有のプロパティもあります。

texture_properties_jp

テクスチャのフィルタリング (Texture Filtering)

テクスチャフィルタリングは、テクスチャマッピングされたピクセルの色がどのように計算されるかを制御する機能です。'Point'はフィルタリングを適用せず、'Linear'はテクセルの色を周囲のピクセルと補間します。これにより、特にテクスチャが最小化された場合（テクスチャのテクセル数よりも画面上のピクセルが少ない場合）に、より良い視覚的な結果が得られます。

異方性 (Anisotropy)

テクスチャが斜めの角度で表面上に表示される場合、品質が低下し、ぼやけたように見えることがあります。この問題を解決するために、Anisotropyの値を設定することができます。異なるAnisotropyの値がテクスチャの外観にどのような影響を与えるかを見てみましょう。

Anisotropy_jp

Anisotropyが増加するにつれて、GPUでテクスチャをサンプリングするコストも増加します。

テクスチャアドレス

テクスチャアドレスプロパティを使用すると、テクスチャ座標が範囲0から1以外の値でサンプリングされる方法を制御できます。さまざまなモードがスプライトにどのように影響するかを以下に示します。

texture_address_jp

最大テクスチャサイズ

異なるデバイスは異なるテクスチャサイズをサポートしています。デバイスとブラウザのWebGL report を使用して、サポートされる最大サイズを確認できます。

たとえば、2020年のMacBook Pro 16インチの場合、Chromeで最大16384x16384までサポートされていることがわかります。

一方、Samsung S7モバイルデバイスでは、4096x4096のみサポートされています。

エンジンがWebGLに報告された最大テクスチャサイズを超えるテクスチャを使用しようとした場合、実行時にそのテクスチャをこの最大サイズに縮小します。これは、画像(PNG、JPG、GIF)からロードされたテクスチャに対してのみ行われます。圧縮されたテクスチャは実行時にリサイズできず、デバイスのオーバーサイズな場合は描画に失敗します。

実行時にサイズを縮小しない場合は、2020年10月23日現在、4096x4096が非常に広範にサポートされていますし、一般的には2048x2048がどこでも動作保証されています。