Qt Quick 3D - Exemple de passes utilisateur

}

L'exemple de passes utilisateur montre comment créer des passes de rendu personnalisées dans Qt Quick 3D. Il montre une scène 3D simple dont le rendu utilise plusieurs passes de rendu définies par l'utilisateur pour obtenir une technique d'éclairage différé simplifiée.

Désactivation des passes de rendu internes

Par défaut, Qt Quick 3D utilise un ensemble de passes de rendu internes pour effectuer le rendu de la scène 3D. Il peut arriver que vous souhaitiez désactiver ces passes internes et mettre en œuvre votre propre pipeline de rendu à l'aide de passes de rendu définies par l'utilisateur.

Pour désactiver les passes de rendu internes, définissez la propriété renderOverrides de View3D sur View3D.DisableInternalPasses.

View3D {
    id: view3D
    anchors.fill: parent
    renderOverrides: View3D.DisableInternalPasses
    environment: SceneEnvironment {
        lightProbe: Texture {
            textureData: ProceduralSkyTextureData {
            }
        }
        backgroundMode: SceneEnvironment.SkyBox
    }

Si vous désactivez les passes de rendu internes, vous devrez fournir le résultat de la passe de couleur principale pour que le site View3D puisse afficher quoi que ce soit à l'écran.

Passe de tampon géométrique

Dans cet exemple, la première passe de rendu personnalisée est une passe de tampon géométrique (G-buffer) qui effectue le rendu de la géométrie de la scène dans plusieurs cibles de rendu, en stockant différentes propriétés de matériaux dans chaque cible. L'exemple fourni est un sous-ensemble des propriétés complètes des matériaux fournies par Qt Quick 3D materials, en se concentrant sur les propriétés nécessaires pour une implémentation de base de l'éclairage différé.

Notre RenderPass est défini dans GBufferPass.qml:

RenderPass {
    id: gbufferPass
    clearColor: Qt.rgba(0.0, 0.0, 0.0, 0.0)

    property alias layerMask: filter.layerMask
    required property RenderPassTexture depthTexture

    RenderPassTexture {
        id: gbuffer0
        format: RenderPassTexture.RGBA16F
        // rgb: baseColor (linear), a: metalness
    }

    RenderPassTexture {
        id: gbuffer1
        format: RenderPassTexture.RGBA16F
        // rgb: normal, a: roughness
    }

    RenderPassTexture {
        id: gbuffer2
        format: RenderPassTexture.RGBA16F
        // rgb: emissive, a: ao/spare
    }

    commands: [
        ColorAttachment { target: gbuffer0; name: "GBUFFER0" },
        ColorAttachment { target: gbuffer1; name: "GBUFFER1" },
        ColorAttachment { target: gbuffer2; name: "GBUFFER2" },
        DepthTextureAttachment { target: gbufferPass.depthTexture },
        RenderablesFilter {
            id: filter
            renderableTypes: RenderablesFilter.Opaque
        }
    ]

    materialMode: RenderPass.AugmentMaterial
    augmentShader: "gbuffer_augment.glsl"
}

Il définit 3 attachements de couleur et 1 attachement de profondeur. La passe nécessite 3 textures qui sont définies en tant qu'objets RenderPassTexture à l'intérieur de RenderPass. Ces 3 RenderPassTextures sont utilisées comme cibles pour les attachements de couleur de la passe, et l'attachement de profondeur utilise une texture de profondeur fournie à l'extérieur de la passe.

Le site RenderPass lui-même est configuré en mode AugmentMaterial, ce qui signifie qu'il augmentera les matériaux des objets rendus à l'aide d'un code de nuanceur supplémentaire. Le shader d'augmentation est fourni dans le fichier gbuffer_augment.glsl, qui fournit les propriétés matérielles requises aux multiples cibles de rendu.

void MAIN_FRAGMENT_AUGMENT()
{
    vec3 baseColor   = BASE_COLOR.rgb;
    float metalness  = METALNESS;
    float roughness  = ROUGHNESS;
    vec3 worldNormal = normalize(WORLD_NORMAL);

    // GBuffer 0: albedo + metalness
    GBUFFER0 = vec4(baseColor, metalness);

    // GBuffer 1: normal (encoded to 0..1) + roughness
    GBUFFER1 = vec4(worldNormal * 0.5 + 0.5, roughness);

    // GBuffer 2: world position
    GBUFFER2 = vec4(qt_varWorldPos, 1.0);
}

Vous voyez ici comment la couleur de base, la dureté du métal, la normale du monde, la rugosité et la position du monde sont stockées dans les trois couleurs du G-buffer.

Pour utiliser la passe du tampon G dans le pipeline de rendu, nous devons en créer une instance dans Main.qml et fournir la texture de profondeur requise :

RenderPassTexture {
    id: mainDepthStencilTexture
    format: RenderPassTexture.Depth24Stencil8
}
GBufferPass {
    id: gbufferPass
    layerMask: ContentLayer.Layer0 | ContentLayer.Layer1
    depthTexture: mainDepthStencilTexture
}

RenderOutputProvider {
    id: gbuffer0Provider
    textureSource: RenderOutputProvider.UserPassTexture
    renderPass: gbufferPass
    attachmentSelector: RenderOutputProvider.Attachment0
}

RenderOutputProvider {
    id: gbuffer1Provider
    textureSource: RenderOutputProvider.UserPassTexture
    renderPass: gbufferPass
    attachmentSelector: RenderOutputProvider.Attachment1
}

RenderOutputProvider {
    id: gbuffer2Provider
    textureSource: RenderOutputProvider.UserPassTexture
    renderPass: gbufferPass
    attachmentSelector: RenderOutputProvider.Attachment2
}

Trois instances de RenderPassTexture sont créées pour fournir des références aux textures de tampon G rendues, qui seront utilisées dans la passe d'éclairage suivante.

La propriété layerMask de la passe G-buffer est définie de manière à ne rendre que les objets qui se trouvent sur ContentLayer.Layer0 et ContentLayer.Layer1. Cela nous permet de contrôler quels objets sont rendus dans la passe G-buffer en réglant leur propriété layers en conséquence.

Passe d'éclairage différé

La deuxième passe de rendu personnalisée est une passe d'éclairage différé qui utilise les données stockées dans le tampon G pour calculer l'éclairage de la scène. Cette passe rend un quad plein écran qui échantillonne les textures du G-buffer et applique les calculs d'éclairage dans le fragment shader.

La passe d'éclairage différé est définie comme suit dans Main.qml:

Model {
    id: deferredLightingQuad
    layers: ContentLayer.Layer13
    castsShadows: false
    receivesShadows: false
    geometry: PlaneGeometry {
        // geometry doesn't matter, just need 4 verts
        plane: PlaneGeometry.XY
    }
    materials: [
        CustomMaterial {
            id: lightingPassMaterial
            property TextureInput gbuffer0: TextureInput {
                enabled: true
                texture: Texture {
                    textureProvider: gbuffer0Provider
                }
            }
            property TextureInput gbuffer1: TextureInput {
                enabled: true
                texture: Texture {
                    textureProvider: gbuffer1Provider
                }
            }
            property TextureInput gbuffer2: TextureInput {
                enabled: true
                texture: Texture {
                    textureProvider: gbuffer2Provider
                }
            }
            shadingMode: CustomMaterial.Unshaded
            fragmentShader: "lighting.frag"
            vertexShader: "lighting.vert"
        }
    ]
}

RenderPass {
    id: deferredLightingPass

    readonly property Texture gbuffer0: Texture { textureProvider: gbuffer0Provider }
    readonly property Texture gbuffer1: Texture { textureProvider: gbuffer1Provider }
    readonly property Texture gbuffer2: Texture { textureProvider: gbuffer2Provider }

    materialMode: RenderPass.OriginalMaterial

    commands: [
        ColorAttachment { target: mainColorTexture },
        DepthStencilAttachment {},
        RenderablesFilter { layerMask: ContentLayer.Layer13 }
    ]

}

Le modèle deferredLightingQuad utilise un CustomMaterial avec des vertex et des fragment shaders définis dans les fichiers lighting.vert et lighting.frag. Le fichier CustomMaterial possède trois propriétés TextureInput qui sont utilisées pour transmettre les textures du tampon G aux nuanceurs.

Le fichier deferredLightingPass RenderPass rend le quadrant plein écran avec la texture de couleur principale du fichier View3D. Il utilise un fichier RenderablesFilter pour rendre uniquement les objets sur ContentLayer.Layer13, qui est l'endroit où le modèle deferredLightingQuad est placé.

Rendu à l'écran

Enfin, pour afficher le résultat de nos passes de rendu personnalisées à l'écran, nous devons nous assurer que la texture de couleur principale de View3D est mise à jour avec le résultat de la passe d'éclairage différé.

SimpleQuadRenderer {
    texture: Texture {
        textureProvider: mainColorTextureProvider
    }
}

RenderPassTexture {
    id: mainColorTexture
    format: RenderPassTexture.RGBA16F
}

RenderOutputProvider {
    id: mainColorTextureProvider
    textureSource: RenderOutputProvider.UserPassTexture
    renderPass: deferredLightingPass
    attachmentSelector: RenderOutputProvider.Attachment0
}

Ici, le SimpleQuadRenderer est utilisé pour effectuer le rendu de la texture de couleur principale de View3D à l'aide de la texture fournie par deferredLightingPass.

Il s'agit d'un exemple très simplifié d'utilisation de passes utilisateur personnalisées dans Qt Quick 3D.

Exemple de projet @ code.qt.io