Qt Quick 3D - 级联阴影贴图示例

演示级联阴影贴图。

一排黑色锥体和圆柱体投下长长的阴影,配有层叠式阴影贴图设置面板

本示例演示了如何在DirectionalLight 中使用级联阴影贴图。

让我们来看看该场景的 QML 代码:

View3D {
    id: view
    x: settings.viewX
    y: 0
    width: parent.width - settings.viewX
    height: parent.height
    camera: camera
    environment: SceneEnvironment {
        clearColor: "lightblue"
        backgroundMode: SceneEnvironment.Color
        antialiasingMode: SceneEnvironment.MSAA
        antialiasingQuality: SceneEnvironment.High
    }

    PerspectiveCamera {
        id: camera
        position: Qt.vector3d(458, 300, 515)
        eulerRotation: Qt.vector3d(-14, 19, 0)
        clipFar: settings.clipFar
    }

    DirectionalLight {
        visible: true
        castsShadow: true
        shadowFactor: settings.shadowFactor
        eulerRotation: settings.eulerRotation
        csmSplit1: settings.csmSplit1
        csmSplit2: settings.csmSplit2
        csmSplit3: settings.csmSplit3
        csmNumSplits: settings.csmNumSplits
        shadowMapQuality: settings.shadowMapQuality
        csmBlendRatio: settings.csmBlendRatio
        shadowBias: settings.shadowBias
        pcfFactor: settings.pcfFactor
        softShadowQuality: settings.softShadowQuality
        shadowMapFar: settings.shadowMapFar
        lockShadowmapTexels: settings.lockShadowmapTexels
    }

    Model {
        id: ground
        source: "#Cube"
        scale: Qt.vector3d(25, 0.01, 135)
        z: -5500
        materials: PrincipledMaterial {
            baseColor: "gray"
        }
        castsShadows: false
    }

    Node {
        id: shapeSpawner
        Component.onCompleted: {
            var conesAndCylinderTrio = Qt.createComponent("ConesAndCylinderTrio.qml")
            var z_pos = 0
            for (var i = 0; i < 25; i++) {
                conesAndCylinderTrio.incubateObject(shapeSpawner, {
                                                    "z_positions": [
                                                            z_pos,
                                                            z_pos - 125,
                                                            z_pos - 250
                                                        ]})
                z_pos -= 450
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        propagateComposedEvents: true
        onClicked: {
            settings.drawerVisible = false
            wasd.forceActiveFocus() // focus WASD controller for keyboard input
        }
    }
}

该场景由一个DirectionalLight 、一个PerspectiveCamera 、一个地面Model 以及一长串锥体和圆柱体Model组成。这样布局是为了展示级联技术如何帮助提高场景的图形保真度。如果仅使用一张阴影贴图,会出现图像瑕疵,但通过级联技术可以加以修复。DirectionalLight 包含许多属性,这些属性可通过UI中的设置面板进行调整。

建议读者阅读《阴影映射》一文,以了解不同属性的更多信息,并尝试该示例以观察它们之间的相互作用。

示例项目 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.