UV 展開、ビジュアルインパクト、テクスチャチャンネルパッキング

Tutorial

intermediate

+0XP

15 mins

Unity Technologies

UV 展開、ビジュアルインパクト、テクスチャチャンネルパッキング

このチュートリアルでは、効率的にモデルの UV の処理を行い、テクスチャチャンネルパッキングを活用することを通じて、3D モバイルアプリケーションのディテールを表示する方法についてさらに説明します。

1. UV 展開に関するベストプラクティス

UV マップは、2D テクスチャを 3D モデルのサーフェスに投影します。UV 展開は、UV マップを作成するプロセスです。UV アイランド(展開された個々のテクスチャ)をできる限りまっすぐ、直線状に保つことをお勧めします。

UV アイランドをできる限り直線状に保つと、以下のメリットがあります。

  • UV アイランドのパッキングが容易になり、無駄なスペースが少なくなります。
  • UV を直線状にすると、テクスチャでギザギザが発生する、いわゆる「階段効果」を防ぐことができます。
  • モバイルプラットフォームでは、テクスチャのスペースは限られています。そのため、通常、テクスチャサイズをコンソールや PC よりも小さくします。UV パッキングを正しく行うことにより、テクスチャから最適な解像度を得ることができます。
  • UV を直線状に保っておくことを一貫させるために、結果として UV をわずかに歪ませることを受け入れてみることも考慮してみましょう。より良い品質のテクスチャのためです。

2. UV の継ぎ目

UV の継ぎ目は目立たない場所に配置します。テクスチャの継ぎ目が見えると、モデルの見栄えが悪くなる可能性があります。そのため、エッジがシャープで UV アイランド間に小さなスペースがある UV アイランドは分割します。このようにすると、ベイキング処理を行って、より質の高い法線マップを作成するのにも役立ちます。

次の画像は、UV 展開を使用してテクスチャスペースを最大化する方法のサンプルを示しています。

3. ビジュアルインパクトの最適化

テクスチャを作成する際に含めるディテールは、そのディテールのビジュアルインパクトと見合ったものになるようにしなければいけません。見てわかるディテールのみを作成するようにしましょう。

スマートフォンの画面は小さいため、細かいディテールは表示されません。テクスチャを作成するときは、この点を考慮してください。たとえば、部屋の隅にかろうじて見える椅子のために、多くのディテールを含んだ 4K テクスチャは不要です。

次のスクリーンショットは、左側に 256x256 ピクセルの小さなテクスチャがあります。これは、サンプルシーンの兵士のキャラクターで使用するための低レベルのディテールのテクスチャです。右側の大きな画像はシーン全体です。低レベルのテクスチャディテールで十分であることを示しています。

場合によっては、シェイプの読み取りを容易にするために、エッジとシェーディングを誇張して強調表示する必要があります。モバイルプラットフォームでは一般的に小さなテクスチャを使用するので、小さなスペース内で必要なすべてのディテールをキャプチャすることが難しい可能性があります。

モバイルアプリケーションでは、使用するテクスチャを少なくするようにして、余分なディテールを 1 つのテクスチャにベイキングするようにしましょう。これが重要な理由は次のとおりです。

  • スマートフォンの画面は小さいため、ディテールをディフューズテクスチャ自体にベイキングして確実に見えるような配慮をしておきましょう。
  • アンビエントオクルージョンや小さな鏡面反射ハイライトなどの要素は、ベイキングしてから、ディフューズテクスチャに追加することが可能になっています。

このアプローチでは、計算処理負荷の高いシェーダーと Unity の機能ばかりに頼って、スペキュラーハイライトとアンビエントオクルージョンを使わなくても済むようになります。

次のスクリーンショットは、テクスチャにベイキングされたディテールを示しています。

可能な場合は、シェーダーで色つけできるグレースケールテクスチャを使用します。これにより、色付けを実行するカスタムシェーダーを作成する必要がなくなり、その分テクスチャメモリが節約されることになります。

この方法ですべてのオブジェクトが適切に表示されるわけではありません。そのため、この方法が適しているかどうかは慎重に検討の上で判断してください。この方法は、均一な色合いのオブジェクトに適しています。RGB マスクを使用してから、マスクの色範囲に基づくテクスチャを適用する方法もあります。

次の画像は、色つけされた柱にグレースケールテクスチャを適用しています。

4. テクスチャチャンネルパッキング

複数のテクスチャを 1 つにパッキングするには、テクスチャチャンネルを使用します。

テクスチャチャンネルパッキングは 3 つのマップを 1 つのテクスチャにまとめることができるため、テクスチャメモリの節約に役立ちます。これは、言うなればテクスチャサンプラーが少なくなることを意味しています。

テクスチャパッキングは、一般的にラフネス、スムースネス、メタリックを 1 つのテクスチャにパッキングするために使用されますが、任意のテクスチャマスクに適用することもできます。

重要度の高いマスクの保存には、緑のチャンネルを使用します。これは、人の目は緑に敏感で、青に敏感ではないためで、通常、緑のチャンネルの方がビット数は多くなります。

次の画像は、アンビエントオクルージョン、ラフネス/スムースネス、メタリックデータを利用可能な各色チャンネルにパッキングし、すべてを 1 ファイルにまとめたテクスチャの例です。

5. まとめ

テクスチャパッキング、UV 展開、選択的なテクスチャのディテールを使用してアプリケーションを最適化できる状況を判断するのが重要です。これらの手法が効果を発揮する状況は自明なものばかりではありません。しかし、該当する状況で手法を実践すれば、モバイルアプリケーションのパフォーマンスが高まります。次のチュートリアルでは、アルファチャンネルと法線マップを使用した最適化に関するベストプラクティスを説明します。

Complete this Tutorial