Qt Quick 3D - 空のマテリアル例

この例では、SkyMaterial を使用してプロシージャルな空をレンダリングし、その結果として生成されたキューブマップを、シーンの PBR マテリアルにおけるイメージベースライティング（IBL）のライトプローブとして使用する方法について説明します。

AdvancedSky ヘルパーは、SkyMaterial のサブクラスであり、Hillaire の「A Scalable and Production Ready Sky and Atmosphere Rendering Technique」（2020）に基づく物理ベースの大気散乱モデルを実装しています。エアロゾル、オゾン、視線高度、およびレイマーチ法によるボリュームクラウドを設定可能です。

シーンの設定

このアプリケーションでは、ウィンドウ全体をView3D で埋め尽くした状態でApplicationWindow を使用します。設定パネルは左端にオーバーレイ表示され、トグルボタンをクリックするとスライドして表示・非表示が切り替わります。関連するQtQuick3D のインポートは以下の通りです：

import QtQuick
import QtQuick.Controls

import QtQuick3D
import QtQuick3D.Helpers

スカイマテリアルの定義

AdvancedSky はView3D 内で宣言されているため、同じskyLight のNode （太陽）を共有します：

AdvancedSky {
    id: advancedSky
    skyLight: sun
}

AdvancedSky は、AdvancedSky.qml 内で定義されたSkyMaterial のサブクラスです。そのQMLプロパティは、自動的にユニフォームとしてフラグメントシェーダーに転送されます。

画像ベースのライティング

SceneEnvironment::skyMaterial にスカイマテリアルを割り当てることで、手続き的にレンダリングされたキューブマップが、可視背景としてだけでなく、シーン内のPBRマテリアルに対する画像ベースライティングの光源としても使用されます：

environment: SceneEnvironment {
    backgroundMode: SceneEnvironment.SkyMaterial
    skyMaterial: advancedSky
    probeExposure: 0.25
    tonemapMode: SceneEnvironment.TonemapModeAces
}

デモ内の最も滑らかな球体は、プロシージャルな空をほぼ完璧に映し出しています。一方、表面が粗い球体では、SkyMaterial のプロシージャルなキューブマップに対して適用されるGGXプリフィルターチェーンによって生成された、徐々にぼやけていく反射が見られます。

空の描画方法の選択

skyboxMode は、反射に使用されるIBLキューブとは独立して、SkyMaterial が可視背景として生成する内容を選択します：

• SkyMaterial.Cubemap ラディアンス・キューブマップ（イメージベースライティングに使用されるものと同じキューブ）をサンプリングするため、静的な空の場合、キューブは一度レンダリングされた後、毎フレーム低コストでサンプリングされます。背景の鮮明度は「radianceMapSize 」に制限されます。これは、カメラのみが移動する場合に、1フレームあたりのコストが最も低くなります。
• ScreenSpace モードでは、各軸ごとにフル解像度、半解像度、または4分の1解像度で、毎フレーム画面上で直接スカイシェーダーを評価します。これにより、可視背景とIBLキューブが切り離され、1フレームごとのレンダリングコストを支払う代わりに、動的な状況（太陽の移動、アニメーション化されたボリュームクラウドなど）でも鮮明な空が得られます。スケールを低く設定すると、鮮明さを犠牲にして処理速度が向上します。

設定パネルの「Skyboxモード」コンボボックスを切り替えて、各オプションをリアルタイムで比較してみてください。キューブマップモードは処理負荷が低いままですが、太陽や雲が動くにつれて画像がぼやけていきます。一方、スクリーンスペースモードはあらゆる変化を鮮明に追跡します。

フレームバジェットの管理

iblRenderFrames IBLプリフィルターを複数のフレームに分散させます。合計iblSampleCount は、収束するまで1フレームにつき1スライスずつ、段階的に積分されます。デフォルト値の0 では、サンプルの蓄積、正規化、および放射照度の計算がすべて1フレーム内で行われます。この値を大きく設定すると、プリフィルターの処理負荷が分散され、IBLサンプル数が多い場合でもシーンの応答性を維持できます。

太陽のアニメーション

「Animate sun」トグルがオンの場合、FrameAnimation が太陽を地平線上で前後に移動させます。太陽の位置が変更されるたびにIBLアキュムレータは無効化されますが、iblRenderFrames を適切に設定しておけば、プリフィルターの処理コストが各フレームに分散され、1つのフレームだけで全コストを負担することはありません。

FrameAnimation {
    id: sunAnimator
    running: settingsPane.animateSun

    property real t: 0
    property real lastT: 0
    property int direction: 1

    onTriggered: {
        const min = -180
        const max = 0
        lastT = t
        t += direction * frameTime * settingsPane.sunSweepSpeed
        sun.eulerRotation.x = min + (Math.sin(t) * 0.5 + 0.5) * (max - min)
    }

    function updatePhaseFromSun() {
        const min = -180
        const max = 0
        let norm = Math.max(0.0, Math.min(1.0, (sun.eulerRotation.x - min) / (max - min)))
        t = Math.asin(norm * 2.0 - 1.0)
        direction = lastT < t ? 1 : -1
    }
}

設定パネル

設定パネルは、ビューポートの左上隅にあるボタンで切り替えられ、View3D の上をスライドして表示・非表示になります。このパネルは2つのグループに分かれています。

空

空の外観や雲に関するコントロールです。

• 太陽のアニメーション— 地平線を横切って、ピンポンように太陽が移動します。
• サイクル速度— 太陽アニメーションのスイープ速度。
• 太陽の高度— 手動で設定する太陽の位置（度単位、0° = 夜明け、90° = 正午、180° = 夕暮れ）。
• 雲を有効にする— レイマーチ法による体積雲の表示を切り替えます。
• 雲の被覆率— 雲に覆われている空の割合（0 = 晴れ、1 = 曇り）。
• 風のアニメーション— フレームごとに雲のノイズテクスチャをずらし、IBL アキュムレータを継続的に無効にします。これは、フレームバジェット制御のストレステストとして役立ちます。

レンダリング

SkyMaterial の基底クラスのプロパティに直接対応するコントロール。

• スカイボックスモード— 「skyboxMode 」を参照してください。
• IBL レンダリングフレーム—iblRenderFrames を参照してください。
• IBL を有効にする—enableIBL を参照してください。
• IBL サンプル数— 「iblSampleCount 」を参照してください。
• ラディアンスマップのサイズ—radianceMapSize を参照してください。

カメラは、WasdController の標準的な操作に対応しています — W/A/S/D キーとマウスドラッグで周囲を見回せます。ビューポートをタップすると、キーボードフォーカスが移動します。

サンプルプロジェクト @ code.qt.io