Qt 3D：QML 线框图示例

Qt 3D “线框渲染”示例演示了如何使用自定义着色器集绘制单个实体（三叶结），以实现单通道线框渲染方法。

运行示例

您可以通过以下方式运行该示例：

• Qt Creator

  打开Welcome 模式，并从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在“Command Palette ”中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关详细信息，请参阅Qt Extension for Visual Studio Code ：教程：构建与运行。

创建实体

渲染器会查找具有几何体、材质以及可选变换的实体。这些实体均以 QComponent 的子类形式指定，并已通过Mesh 、Material 和Transform 导出到 QML 引擎中。我们使用这些组件在TrefoilKnot.qml 中创建自定义 QML 项。

首先，我们导入Qt3D 2.0 模块，该模块提供了Entity 类型以及值类型辅助函数（如 Qt.vector3d()）。我们还导入Qt3D.Renderer 模块，该模块提供了组件以及渲染器方面所采用的其他类型：

import Qt3D.Core 2.0
import Qt3D.Render 2.0

若要使用其他方面的组件，我们还需要导入相应的 QML 模块。

随后，我们将Entity 类型用作自定义QML类型的根元素，并像在QML中处理任何其他类型一样，暴露一些自定义属性：

Entity {
    id: root

    property real x: 0.0
    property real y: 0.0
    property real z: 0.0
    property real scale: 1.0
    property real theta: 0.0
    property real phi: 0.0
    property Material material

除了聚合组件外，Entity 类型还可用于将子对象分组。这类似于Qt Quick 2中Item 类型的使用方式。

指定变换

我们实例化一个 `Transform ` 组件和一个 `Mesh ` 组件。`Transform ` 组件指定了渲染器在通过 OpenGL 管道绘制几何体时应如何对其进行变换。我们将一组有序的变换组合到单个 `Transform ` 组件中。这些信息将通过标准的命名统一变量自动提供给我们的着色器：

    Transform {
        id: transform
        translation: Qt.vector3d(root.x, root.y, root.z)
        rotation: fromEulerAngles(theta, phi, 0)
        scale: root.scale
    }

加载动态的顶点级数据

Mesh 组件非常简单。我们利用其source属性，从Wavefront Obj格式的文件中加载一组静态几何数据（如顶点位置、法线向量和纹理坐标）。这些数据是从Blender应用程序中导出的。

    Mesh {
        id: mesh
        source: "qrc:/assets/obj/trefoil.obj"
    }

除了 `Mesh ` 组件外，Qt 3D 还支持通过基于任务的引擎调用的 C++ 钩子，动态生成顶点级属性数据。

组件聚合

然而，仅实例化组件还远远不够。为了使它们为实体赋予特殊行为，实体必须通过其 components 属性聚合这些组件：

    components: [ transform, mesh, root.material ]

这使得组件可以在多个实体之间非常轻松地共享。在此示例中，我们拥有用于变换和网格的组件，它们包含在 TrefoilKnot 自定义类型中。最后一个类型为 `Material` 的组件由 TrefoilKnot 自定义类型的属性提供。我们稍后将自定义该实体的外观。

通过摄像机进行渲染

我们在main.qml中使用 TrefoilKnot 自定义类型在屏幕上绘制三叶结。

我们使用了与TrefoilKnot.qml 中相同的导入语句，此外还添加了针对Qt Quick 模块的命名空间导入，该模块是我们进行动画效果时所需的：

import QtQuick 2.1 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.0

我们将Entity 类型用作根类型，仅是为了使其充当子节点的父节点。从这个意义上说，Entity 类型与Item 类型非常相似：

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

RendererSettings 组件使用 ForwardRenderer 类型来完全配置渲染器，而无需触及任何 C++ 代码：

    // Render from the mainCamera
    components: [
        RenderSettings {
            activeFrameGraph: ForwardRenderer {
                id: renderer
                camera: mainCamera
            }
        },
        // Event Source will be set by the Qt3DQuickWindow
        InputSettings { }
    ]

BasicCamera 类型是对内置Camera 类型的简单封装，该类型表示一个虚拟摄像机。它具有近平面、远平面、视场角、宽高比、投影类型、位置和方向等属性：

    BasicCamera {
        id: mainCamera
        position: Qt.vector3d( 0.0, 0.0, 15.0 )
    }

Configuration类型提供了一种临时解决方案，用于在通过方面和组件实现正式功能之前，通过鼠标控制摄像机：

    FirstPersonCameraController { camera: mainCamera }

使用多个摄像机并通过帧图在场景渲染的全部或部分过程中在它们之间进行切换，操作非常简单。

材质映射

Qt 3D 拥有一个强大且非常灵活的材质系统，支持多层次的自定义。我们使用自定义类型 `WireframeMaterial` 来封装 `Material ` 类型：

    WireframeMaterial {
        id: wireframeMaterial
        effect: WireframeEffect {}
        ambient: Qt.rgba( 0.2, 0.0, 0.0, 1.0 )
        diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )

随后，我们实例化 TrefoilKnot 类型并为其设置材质：

    TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

Qt 3D 引擎结合渲染器切面后，现已拥有足够的信息，可以最终使用我们指定的材质渲染网格。

使用动画元素

我们使用Qt Quick 2提供的动画元素来对TrefoilKnot和WireframeMaterial类型的属性进行动画处理。类型中各组件的属性通过QML属性绑定机制进行更新：

        QQ2.SequentialAnimation {
            loops: QQ2.Animation.Infinite
            running: true

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 0.8
                to: 1.8
            }

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 1.8
                to: 0.8
            }

            QQ2.PauseAnimation { duration: 1500 }
        }

QNode 基类会检测到属性更新，并自动将其传递给渲染器方面中的相应对象。随后，渲染器负责将属性更新转换为 GLSL 着色器程序中统一变量的新的值。

运行示例，即可看到三叶结的线框线宽在脉动。所有繁重的计算工作均由 GPU 完成。CPU 只需运行属性动画，并将场景图和帧图转换为原始的 OpenGL 调用。

此外，还可以通过自定义着色器程序和材质在 GPU 上实现动画效果。

示例项目 @ code.qt.io