Qt Quick 3D - Beispiel für ein Himmelsmaterial

Dieses Beispiel zeigt, wie man mit „ SkyMaterial “ einen prozeduralen Himmel rendert und die resultierende Cubemap als Lichtprobe für die bildbasierte Beleuchtung (IBL) auf den PBR-Materialien der Szene verwendet.

Der „ AdvancedSky “-Helper ist eine Unterklasse von „ SkyMaterial “, die ein physikalisch basiertes atmosphärisches Streumodell gemäß Hillaire’s „A Scalable and Production Ready Sky and Atmosphere Rendering Technique“ (2020) implementiert, mit konfigurierbaren Aerosolen, Ozon, Augenhöhe und volumetrischen Wolken, die mittels Ray-Marching erzeugt werden.

Einrichten der Szene

Die Anwendung verwendet „ ApplicationWindow “ mit einer „ View3D “, die das Fenster ausfüllt. Ein Einstellungsfeld überlagert den linken Rand und wird beim Klicken auf die Umschalt-Schaltfläche ein- und ausgeblendet. Die relevanten „ QtQuick3D “-Importe sind:

import QtQuick
import QtQuick.Controls

import QtQuick3D
import QtQuick3D.Helpers

Definition des Himmelsmaterials

AdvancedSky wird innerhalb von „ View3D “ deklariert, sodass es dasselbe „ skyLight “- Node (die Sonne) nutzt:

AdvancedSky {
    id: advancedSky
    skyLight: sun
}

AdvancedSky ist eine Unterklasse von „ SkyMaterial “, die in „ AdvancedSky.qml “ definiert ist. Ihre QML-Eigenschaften werden automatisch als Uniforms an den Fragment-Shader weitergeleitet.

Bildbasierte Beleuchtung

Durch die Zuweisung des Himmelsmaterials zu „ SceneEnvironment::skyMaterial “ wird die prozedural gerenderte Cubemap sowohl als sichtbarer Hintergrund als auch als Quelle für die bildbasierte Beleuchtung der PBR-Materialien in der Szene verwendet:

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

Die glatteste Kugel in der Demo spiegelt den prozeduralen Himmel nahezu perfekt wider; die raueren Kugeln zeigen zunehmend unscharfe Reflexionen, die durch die GGX-Vorfilterkette von „ SkyMaterial “ über der prozeduralen Cubemap erzeugt werden.

Auswahl der Darstellungsweise des Himmels

skyboxMode legt fest, was SkyMaterial für den sichtbaren Hintergrund erzeugt, unabhängig von der für Reflexionen verwendeten IBL-Cube:

• SkyMaterial.Cubemap Hier wird die Radiance-Cubemap (derselbe Cube, der auch für die bildbasierte Beleuchtung verwendet wird) abgefragt; bei einem statischen Himmel wird der Cube also einmal gerendert und dann in jedem Frame mit geringem Aufwand abgefragt. Die Schärfe des Hintergrunds ist bei „ radianceMapSize “ begrenzt. Dies ist der geringste Aufwand pro Frame, wenn sich nur die Kamera bewegt.
• Die „ ScreenSpace “-Modi berechnen den Himmels-Shader in jedem Frame direkt auf dem Bildschirm – mit voller, halber oder viertel Auflösung pro Achse. Sie entkoppeln den sichtbaren Hintergrund vom IBL-Würfel und liefern so einen scharfen Himmel bei dynamischen Bedingungen (sich bewegende Sonne, animierte volumetrische Wolken) auf Kosten eines Renderings pro Frame. Niedrigere Skalierungen tauschen Schärfe gegen Geschwindigkeit ein.

Wechseln Sie im Einstellungsfenster das Kombinationsfeld „Skybox-Modus“, um die Optionen live zu vergleichen: Die Cubemap-Modi bleiben rechenarm, werden jedoch unscharf, wenn sich Sonne und Wolken bewegen, während die Screen-Space-Modi jede Veränderung scharf nachverfolgen.

Verwaltung des Frame-Budgets

iblRenderFrames verteilt den IBL-Vorfilter auf mehrere Frames: Die gleiche Gesamt iblSampleCount e wird schrittweise integriert – ein Abschnitt pro Frame –, bis Konvergenz erreicht ist. Der Standardwert von „ 0 “ führt die Sample-Akkumulation, Normalisierung und Irradiance alle in einem einzigen Frame aus. Eine höhere Einstellung verteilt die Kosten des Vorfilters und sorgt dafür, dass die Szene auch bei hohen IBL-Sample-Anzahlen reaktionsschnell bleibt.

Animation der Sonne

Ein „ FrameAnimation “ bewegt die Sonne bei aktivierter Option „Animate sun“ über den Horizont hin und her. Jede Änderung der Sonnenposition macht den IBL-Akkumulator ungültig, doch bei entsprechender Einstellung von „ iblRenderFrames “ werden die Kosten für den Vorfilter auf mehrere Frames verteilt, sodass kein einzelner Frame die vollen Kosten tragen muss.

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
    }
}

Einstellungsfenster

Das Einstellungsfenster lässt sich über den „ View3D “ ein- und ausblenden; dies erfolgt über die Schaltfläche in der oberen linken Ecke des Ansichtsfensters. Es ist in zwei Gruppen unterteilt.

Himmel

Steuerelemente für das Aussehen des Himmels und der Wolken.

• Sonne animieren – führt einen Ping-Pong-Sonnenlauf über den Horizont aus.
• Zyklusgeschwindigkeit – Geschwindigkeit der Sonnenanimation.
• Sonnenhöhe – Manuelle Sonnenposition in Grad (0° = Morgendämmerung, 90° = Mittag, 180° = Abenddämmerung).
• Wolken aktivieren – Schaltet volumetrische Wolken mit Ray-Marching-Verfahren ein bzw. aus.
• Wolkenbedeckung – Anteil des von Wolken bedeckten Himmels (0 = klar, 1 = bewölkt).
• Wind animieren – verschiebt die Wolken-Rauschtextur in jedem Frame und setzt den IBL-Akkumulator kontinuierlich zurück – ein nützlicher Stresstest für die Steuerung des Frame-Budgets.

Rendering

Steuerelemente, die direkt den Eigenschaften der Basisklasse „ SkyMaterial “ zugeordnet sind.

• Skybox-Modus – siehe skyboxMode.
• IBL-Render-Frames – siehe iblRenderFrames.
• IBL aktivieren – siehe enableIBL.
• Anzahl der IBL-Samples – siehe iblSampleCount.
• Größe der Radiance-Map – siehe radianceMapSize.

Die Kamera reagiert auf die Standardnavigation von WasdController – W/A/S/D sowie Ziehen mit der Maus, um sich umzusehen. Tippen Sie auf das Ansichtsfenster, um den Tastaturfokus darauf zu setzen.

Beispielprojekt auf code.qt.io