天天看点

Qt 3D:线框 QML 示例

实现单通道线框渲染方法的 Qt 3D QML 应用程序。

Qt 3D:线框 QML 示例

Qt 3D 线框渲染说明了如何使用一组自定义着色器绘制单个实体(三叶结)以实现单通道线框渲染方法。Qt技术交流交流群开通,QQ搜索群号“7654444821”加入

下载Qt6最新试用版

运行示例

要从Qt Creator运行示例,请打开欢迎模式并从示例中选择示例。有关更多信息,请访问构建和运行示例。

创建实体

渲染器方面寻找具有一些几何体、材质和可选的变换的实体。这些都是以 QComponent 的子类的形式指定的,这些子类已经以Mesh、Material和Transform的形式导出到 QML 引擎中。我们使用这些组件在TrefoilKnot.qml 中创建自定义 QML 项。

我们首先导入Qt3D 2.0提供实体类型和值类型助手的模块,例如 Qt.vector3d()。我们还导入了Qt3D.Renderer提供渲染器方面选取的组件和其他类型的模块:

import Qt3D.Core 2.0
import Qt3D.Render 2.0
           

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

然后,我们使用实体类型作为自定义 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组件。该变换部件指定当绘制与OpenGL的管线渲染器应该如何改变的几何形状。我们将一组有序的转换组合成一个单一的Transform组件。这些信息将通过标准命名的统一变量自动提供给我们的着色器:

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

加载动态 Per-Vertex 数据

该网格组件是非常简单的。我们使用它的 source 属性从 Wavefront Obj 格式的文件中加载一组静态几何体(例如顶点位置、法线向量和纹理坐标)。此数据是从 Blender 应用程序导出的。

Mesh {
        id: mesh
        source: "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类型很像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 )
    }
           

的配置类型提供了一种用于当正在完成其使用的方面和部件适当执行具有照相机的鼠标控制临时解决方法:

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 上制作动画。

Qt组件推荐

  • QtitanRibbon |下载试用:遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件,研究为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
  • QtitanChart |下载试用:是一个C++库,代表一组,这些控件使您可以快速地为应用程序提供漂亮而丰富的图形。并且支持所有主要的桌

================================================== ==

Qt技术交流交流群开通,QQ搜索群号“7654444821”或者扫描二维码加入

Qt 3D:线框 QML 示例

继续阅读