ボリュームレンダリングにおける2Dテクスチャ配列と3Dテクスチャの比較

こんにちは。情熱開発部プログラム課所属の廣江です。

少し前に「Clair Obscur: Expedition 33」をプレイしていたのですが、ボリュームレンダリングやってそうだなー。。自分でもやってみたい！！

ということで、色々と調べていました。

その中でどうやら2Dテクスチャ配列を使用している場合があるという情報がありました。

基本的にボリュームレンダリングでは3Dテクスチャを使用するものと考えていたのですが、確かにデータ構造は似ているので2Dテクスチャ配列も使えそうですね。

2Dテクスチャ配列と3Dテクスチャでどういう違いがあるのでしょうか？

今回はボリュームレンダリングで使用する観点から、2Dテクスチャ配列と3Dテクスチャの違いについて検証を行ってみようと思います！

※Unity 6000.0.40f1を使用

1 2Dテクスチャ配列と3Dテクスチャ
2 検証の準備
- 2.1 テクスチャ準備
- 2.2 テクスチャ参照用のシェーダを作成
3 検証
- 3.1 見た目の比較
- 3.2 パフォーマンスの比較
4 まとめ
5 参考文献

2Dテクスチャ配列と3Dテクスチャ

まずは2Dテクスチャ配列と3Dテクスチャのスペックについて比較してみます。
（テクスチャ構造の詳細については、Direct3D 11 のテクスチャの概要をご参照ください）

ボリュームレンダリングをやる上で、Z軸が補間されるかは、見た目の品質的に重要そうですね。

品質的に3Dテクスチャの方がよさそうですが、何か2Dテクスチャ配列を採用するメリットはあるんでしょうか？

ということでChatGPT先生に聞いてみました！
ChatGPT先生によると、「3Dテクスチャはキャッシュのヒット率が低くなる傾向にある」とのことでした。

このあたり色々と調べてみたのですが、明確に3Dテクスチャのキャッシュについて説明されているものが見つかりませんでした。

うーん、これは検証して確認してみるしかないですね！

検証の準備

検証のために、テクスチャとボリュームレンダリング用のシェーダを用意します。

テクスチャ準備

まずはそれぞれのテクスチャを用意します。

UnityではテクスチャのInspectorでTexture Shapeを変更して、タイル状に並んでいるテクスチャをTexture2DArrayまたは、Texture3Dにすることができます。
ColumnsとRowsは縦横のタイル数を指定します。

これだけでテクスチャの準備は完了！Unity便利ですね～

テクスチャ参照用のシェーダを作成

次は検証用のシェーダを作成します。

今回はBox内でレイマーチングを行い、2Dテクスチャ配列または、3Dテクスチャをサンプリングして描画するシェーダを作成します。

こちらはBoxのオブジェクト空間でレイマーチングを行うシェーダです。
テクスチャサンプリングのパフォーマンスも検証したいため、無駄な処理は省きシンプルな実装にしています。

float4 RaymarchingVolumetricFog(RaymarchingData raymarchingData)
{
    const int c_MaxSteps = 256;
    const float c_StepSize = max(raymarchingData.rayMaxDistance / c_MaxSteps, 0.001);
    const float c_StepWeight = 1.0 / (float) c_MaxSteps;
    const float3 c_BoxSize = float3(2, 2, 2);  // 仮でBoxサイズは固定
    const float3 c_HalfBoxSize = c_BoxSize / 2;

    float sum = 0;
    for (int i = 0; i < c_MaxSteps; ++i)
    {
        float t = i * c_StepSize;
        float3 rayPosOS = raymarchingData.rayStartOS + raymarchingData.rayDirOS * t;

        float3 samplePos = saturate((rayPosOS + c_HalfBoxSize) / c_BoxSize);
        float density = SampleDensity(samplePos);
        density = saturate(density - (1 - _DensityStrength));
        sum += density * c_StepWeight;

        if (raymarchingData.rayMaxDistance <= t)
            break;
    }
    return float4(_FogColor.rgb, sum);
}

以下はテクスチャをサンプリングする関数です。
引数のsamplePosはオブジェクト空間で正規化した座標です。

また、ShaderKeywordで使用するテクスチャを切り替え出来るようにしておきます。

float SampleDensity(float3 samplePos)
{
#if defined(USE_3D_VOLUME)
    float3 uvw = float3(samplePos.x * _TillingX, samplePos.z * _TillingY, samplePos.y);
    float density = SAMPLE_TEXTURE3D(_DensityTexture3D, sampler_DensityTexture3D, uvw).r;
    return density;
#else
    const float c_TextureSlices = 16;
    int sliceIndex = clamp(float(samplePos.y * c_TextureSlices), 0, c_TextureSlices);
    float density = SAMPLE_TEXTURE2D_ARRAY(_DensityTexture, sampler_DensityTexture, float2(samplePos.x * _TillingX, samplePos.z * _TillingY), sliceIndex).r;
    return density;
#endif
}

一応RaymarchingDataの中身も貼っておきます。

struct RaymarchingData
{
    float3 rayDirOS;        // オブジェクト空間のレイベクトル
    float3 rayStartOS;      // オブジェクト空間のレイ開始座標
    float rayMaxDistance;   // レイの最大距離
};