面剔除 (Face Culling) 技术详解

面剔除 (Face Culling) 技术详解

在 3D 图形渲染中，大多数物体是由许多小的多边形（通常是三角形）组成的。每个多边形都有两个面：正面（Front Face）和背面（Back Face）。

为什么需要面剔除？

1. 性能优化：对于不透明的闭合物体（例如一个立方体、一个球体），当观察者从外部观察时，其背向观察者的面是不可见的。渲染这些不可见的面会浪费 GPU 的计算资源。面剔除技术就是识别并“剔除”这些不可见的面，不对它们进行后续的渲染计算（如光照、纹理采样等），从而显著提高渲染效率和帧率。
2. 视觉正确性：有时，错误的剔除设置或模型问题（如法线反转）可能导致物体看起来“透明”或“破洞”。正确使用面剔除有助于保证渲染效果的正确性。

如何判断正面和背面？

判断一个面是正面还是背面主要依赖于以下两点：

1. 顶点环绕顺序 (Winding Order)：

   • 构成多边形的顶点通常会按照特定的顺序（顺时针 CW - Clockwise 或逆时针 CCW - Counter-Clockwise）来定义。
   • OpenGL（Qt 3D 底层依赖的图形 API 之一）的默认约定是：逆时针 (CCW) 环绕的顶点定义为正面 (Front Face)。顺时针 (CW) 环绕的顶点则定义为背面 (Back Face)。
   • 这个顺序是在物体建模时确定的。

2. 观察者视角：

   • 当模型被投影到2D屏幕空间时，GPU会根据顶点在屏幕上的环绕顺序来判断它相对于摄像机是正面还是背面。

剔除过程

在渲染管线中，面剔除通常发生在几何处理阶段之后、光栅化阶段之前。GPU 会检查每个三角形的朝向：

• 如果设置为剔除背面，并且三角形被判断为背面，则该三角形会被丢弃，不会进入后续的渲染步骤。
• 如果设置为剔除正面，则正面三角形会被丢弃。
• 如果设置为不剔除，则所有面都会被处理。

QML 中的 CullFace 类型

在 Qt 3D 中，CullFace QML 类型用于控制渲染时的面剔除行为。它是 RenderState 的一种，通常被添加到 Entity 的 RenderStateSet 组件中。

主要属性：

• mode: 这是 CullFace 最核心的属性，用于指定剔除模式。它有以下几个枚举值：
  • CullFace.NoCulling: 不进行任何面剔除。正面和背面都会被渲染。
    • 适用场景：渲染双面材质的物体（如一片叶子、一张纸），或者当需要看到物体内部结构时，或者某些透明效果。
  • CullFace.Front: 剔除正面，只渲染背面。
    • 适用场景：不常用，但可用于一些特殊效果，例如从内部观察一个天空盒，或者想要物体看起来“里外反转”的效果。
  • CullFace.Back: 剔除背面，只渲染正面。这是最常用也是默认的剔除模式，因为对于大多数闭合的实心物体，背面是不可见的。
    • 适用场景：几乎所有不透明的闭合实体。
  • CullFace.FrontAndBack: 同时剔除正面和背面。这将导致应用了此状态的物体完全不可见。
    • 适用场景：非常罕见，可能用于调试或完全隐藏某个物体而不移除它。

如何在 QML 中使用 CullFace：

CullFace 状态需要被添加到一个 RenderStateSet 中，而这个 RenderStateSet 则作为组件被添加到一个 Entity 上。

import QtQuick 2.15
import Qt3D.Core 2.15
import Qt3D.Render 2.15
import Qt3D.Input 2.15
import Qt3D.Extras 2.15

Entity {
    id: root

    // 1. 相机设置
    Camera {
        id: camera
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 45
        aspectRatio: scene3D.width / scene3D.height
        nearPlane: 0.1
        farPlane: 1000.0
        position: Qt.vector3d(0, 1.5, 5) // 将相机向后移动一点以便观察
        upVector: Qt.vector3d(0, 1, 0)
        viewCenter: Qt.vector3d(0, 0, 0)
    }

    // 相机控制器
    OrbitCameraController { camera: camera }

    // 2. 光源
    components: [
        RenderSettings {
            activeFrameGraph: ForwardRenderer {
                camera: camera
                clearColor: "lightgray" // 背景色
            }
        },
        InputSettings {} // 用于相机控制器
    ]

    DirectionalLight {
        color: "white"
        intensity: 0.8
        worldDirection: Qt.vector3d(0.5, -1, -0.5) // 光照方向
    }

    // 3. 要渲染的实体 (例如一个立方体)
    Entity {
        id: cubeEntity
        
        // 几何形状
        CubeMesh {
            id: cubeMesh
            dimensions: Qt.vector3d(2, 2, 2) // 2x2x2 的立方体
        }

        // 材质
        PhongMaterial {
            id: cubeMaterial
            diffuse: "dodgerblue" // 漫反射颜色
            ambient: "steelblue"  // 环境光颜色
        }

        // RenderStateSet 和 CullFace
        RenderStateSet {
            id: cubeRenderStates
            renderStates: [
                CullFace {
                    id: cullingState
                    // 默认情况下，如果未指定，通常是 CullFace.Back
                    // mode: CullFace.Back // 明确指定剔除背面 (最常见)
                    // mode: CullFace.NoCulling // 不剔除，可以看到立方体内部 (如果相机进入)
                    // mode: CullFace.Front // 剔除正面，从外部看立方体可能会消失或看起来像"内部"
                    mode: CullFace.Back // 初始设置为剔除背面
                }
                // 可以添加其他渲染状态，例如 DepthTest, BlendEquation 等
            ]
        }

        // 将几何体、材质和渲染状态组合到 Transform 中
        Transform {
            id: cubeTransform
            // 可以设置旋转、平移、缩放等
        }

        components: [ cubeMesh, cubeMaterial, cubeTransform, cubeRenderStates ]
    }

    // 用于演示不同剔除模式的按钮 (可选)
    // 你可以在运行时通过点击按钮改变 cullingState.mode 来观察效果
    /*
    Column {
        anchors.left: parent.left; anchors.top: parent.top; anchors.margins: 10
        spacing: 5
        Button { text: "Cull Back"; onClicked: cullingState.mode = CullFace.Back }
        Button { text: "Cull Front"; onClicked: cullingState.mode = CullFace.Front }
        Button { text: "No Culling"; onClicked: cullingState.mode = CullFace.NoCulling }
        Button { text: "Cull Front & Back"; onClicked: cullingState.mode = CullFace.FrontAndBack }
    }
    */
}

// 需要一个 Scene3D 视图来显示
/*
Window {
    width: 800
    height: 600
    visible: true
    title: "CullFace Demo"

    Scene3D {
        id: scene3D
        anchors.fill: parent
        focus: true // 允许输入
        aspects: ["render", "input", "logic"] // 启用渲染、输入和逻辑处理
        Entity { source: "CullFaceExample.qml" } // 假设上面的QML代码保存在CullFaceExample.qml
    }
}
*/

实验和观察：

1. mode: CullFace.Back (默认或明确设置):

   • 当你围绕立方体旋转相机时，你只能看到立方体的外表面。如果你能以某种方式将相机移到立方体内部（例如，通过修改相机位置或使立方体非常大），你会发现内部是“透明”的，因为背向你的内部面被剔除了。

2. mode: CullFace.NoCulling:

   • 当你围绕立方体旋转时，外观可能与 CullFace.Back 类似。
   • 但是，如果你将相机移到立方体内部，你会看到立方体的内表面。所有面都被渲染了。
   • 对于一个单面的 PlaneMesh，如果使用 CullFace.Back，你只能从一个方向看到它。如果使用 CullFace.NoCulling，则两面都可见。

3. mode: CullFace.Front:

   • 当你从外部观察立方体时，立方体可能会变得不可见，或者看起来很奇怪（像是你看到了内部的颜色）。这是因为你正对着的面（正面）被剔除了，而你看到的可能是从对面透过来的背面（如果背面也朝向你）。
   • 如果相机进入立方体内部，你可能会看到立方体的外表面（因为此时外表面相对于内部的你来说是“背面”）。

4. mode: CullFace.FrontAndBack:

   • 立方体将完全不可见。

重要注意事项：

• 顶点环绕顺序：面剔除的正确工作依赖于模型顶点正确的环绕顺序。如果模型在建模时环绕顺序混乱或不一致（例如，一些面是 CCW，一些是 CW），那么面剔除的结果可能会出乎意料，一些面可能会错误地消失。
• 透明物体：对于具有透明或半透明材质的物体，通常需要禁用面剔除 (CullFace.NoCulling)，并结合正确的混合模式 (BlendEquation) 和深度测试 (DepthTest) 设置，以确保透明效果正确渲染。因为透明物体的前后两个面可能都需要被看到。
• 性能：始终优先使用 CullFace.Back（或让系统默认）来剔除背面，以获得最佳性能，除非有特定需求要渲染双面或实现特殊效果。

通过理解面剔除的原理和 CullFace QML 类型的使用，你可以更有效地控制 3D 场景的渲染行为，优化性能并实现预期的视觉效果。