• QtitanRibbon |下載試用：遵循Microsoft Ribbon UI Paradigm for Qt技術(shù)的Ribbon UI組件，研究為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart |下載試用：是一個(gè)C++庫(kù)，代表一組，這些控件使您可以快速地為應(yīng)用程序提供漂亮而豐富的圖形。并且支持所有主要的桌

Qt 3D 線框渲染說(shuō)明了如何使用一組自定義著色器繪制單個(gè)實(shí)體（三葉結(jié)）以實(shí)現(xiàn)單通道線框渲染方法。

運(yùn)行示例

要從Qt Creator運(yùn)行示例，請(qǐng)打開(kāi)歡迎模式并從示例中選擇示例。有關(guān)更多信息，請(qǐng)?jiān)L問(wèn)構(gòu)建和運(yùn)行示例。

創(chuàng)建實(shí)體

渲染器方面尋找具有一些幾何體、材質(zhì)和可選的變換的實(shí)體。這些都是以 QComponent 的子類(lèi)的形式指定的，這些子類(lèi)已經(jīng)以Mesh、Material和Transform的形式導(dǎo)出到 QML 引擎中。我們使用這些組件在TrefoilKnot.qml 中創(chuàng)建自定義 QML 項(xiàng)。

我們首先導(dǎo)入Qt3D 2.0提供實(shí)體類(lèi)型和值類(lèi)型助手的模塊，例如 Qt.vector3d()。我們還導(dǎo)入了Qt3D.Renderer提供渲染器方面選取的組件和其他類(lèi)型的模塊：

import Qt3D.Core 2.0
import Qt3D.Render 2.0

要使用其他方面的組件，我們也需要導(dǎo)入相應(yīng)的 QML 模塊。

然后，我們使用實(shí)體類(lèi)型作為自定義 QML 類(lèi)型的根元素，公開(kāi)一些自定義屬性，就像在 QML 中使用任何其他類(lèi)型一樣：

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類(lèi)型還可用于將子對(duì)象組合在一起。這類(lèi)似于Qt Quick 2 中Item類(lèi)型的使用方式。

指定轉(zhuǎn)換

我們實(shí)例化一個(gè)Transform組件和一個(gè)Mesh組件。該變換部件指定當(dāng)繪制與OpenGL的管線渲染器應(yīng)該如何改變的幾何形狀。我們將一組有序的轉(zhuǎn)換組合成一個(gè)單一的Transform組件。這些信息將通過(guò)標(biāo)準(zhǔn)命名的統(tǒng)一變量自動(dòng)提供給我們的著色器：

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

加載動(dòng)態(tài) Per-Vertex 數(shù)據(jù)

該網(wǎng)格組件是非常簡(jiǎn)單的。我們使用它的 source 屬性從 Wavefront Obj 格式的文件中加載一組靜態(tài)幾何體（例如頂點(diǎn)位置、法線向量和紋理坐標(biāo)）。此數(shù)據(jù)是從 Blender 應(yīng)用程序?qū)С龅摹?

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

除了Mesh元素，Qt 3D 還支持通過(guò)基于任務(wù)的引擎調(diào)用的 C++ 鉤子動(dòng)態(tài)生成每個(gè)頂點(diǎn)的屬性數(shù)據(jù)。

聚合組件

然而，僅僅實(shí)例化組件是不夠的。為了讓它們?cè)趯?shí)體上注入特殊行為，實(shí)體必須通過(guò)它的 components 屬性聚合組件：

components: [ transform, mesh, root.material ]

這允許在多個(gè)實(shí)體之間非常容易地共享組件。在這個(gè)例子中，我們有包含在 TrefoilKnot 自定義類(lèi)型中的變換和網(wǎng)格組件。Material類(lèi)型的最終組件由 TrefoilKnot 自定義類(lèi)型的屬性提供。我們稍后將自定義實(shí)體的外觀。

從相機(jī)渲染

我們使用 main.qml 中的 TrefoilKnot 自定義類(lèi)型在屏幕上繪制三葉結(jié)。

我們使用與TrefoilKnot.qml 中相同的導(dǎo)入語(yǔ)句，并為動(dòng)畫(huà)所需的 Qt Quick 模塊添加命名空間導(dǎo)入：

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

我們使用實(shí)體類(lèi)型作為根類(lèi)型只是為了充當(dāng)其子項(xiàng)的父項(xiàng)。從這個(gè)意義上說(shuō)，Entity類(lèi)型很像Item類(lèi)型：

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

RendererSettings 組件使用ForwardRenderer類(lèi)型來(lái)完全配置渲染器，而無(wú)需觸及任何 C++ 代碼：

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

BasicCamera 類(lèi)型是對(duì)表示虛擬相機(jī)的內(nèi)置Camera類(lèi)型的簡(jiǎn)單包裝。它具有諸如近平面和遠(yuǎn)平面、視野、縱橫比、投影類(lèi)型、位置和方向等屬性：

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

的配置類(lèi)型提供了一種用于當(dāng)正在完成其使用的方面和部件適當(dāng)執(zhí)行具有照相機(jī)的鼠標(biāo)控制臨時(shí)解決方法：

 FirstPersonCameraController { camera: mainCamera }

使用多個(gè)相機(jī)并使用幀圖在它們之間進(jìn)行選擇是微不足道的，以進(jìn)行全部或部分場(chǎng)景渲染。

映射材料

Qt 3D 有一個(gè)強(qiáng)大且非常靈活的材料系統(tǒng)，允許多層次的定制。我們使用 WireframeMaterial 自定義類(lèi)型來(lái)包裝Material類(lèi)型：

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 )

然后我們實(shí)例化 TrefoilKnot 類(lèi)型并在其上設(shè)置材質(zhì)：

 TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

Qt 3D 引擎與渲染器方面現(xiàn)在有足夠的信息來(lái)最終使用我們指定的材質(zhì)渲染我們的網(wǎng)格。

使用動(dòng)畫(huà)元素

我們使用 Qt Quick 2 提供的動(dòng)畫(huà)元素為 TrefoilKnot 和 WireframeMaterial 類(lèi)型的屬性設(shè)置動(dòng)畫(huà)。使用 QML 屬性綁定機(jī)制更新類(lèi)型的組件的屬性：

 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基類(lèi)會(huì)注意到屬性更新，并自動(dòng)發(fā)送到渲染器方面中的相應(yīng)對(duì)象。然后渲染器負(fù)責(zé)將屬性更新轉(zhuǎn)換為 GLSL 著色器程序中統(tǒng)一變量的新值。

運(yùn)行示例以查看線框線寬度脈沖的三葉結(jié)。所有繁重的工作都由 GPU 完成。CPU 只需運(yùn)行屬性動(dòng)畫(huà)并將場(chǎng)景圖和幀圖轉(zhuǎn)換為原始 OpenGL 調(diào)用。

也可以通過(guò)自定義著色器程序和材質(zhì)在 GPU 上制作動(dòng)畫(huà)。

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

想要了解或購(gòu)買(mǎi)Qt正版授權(quán)的朋友，歡迎

Qt技術(shù)交流交流群開(kāi)通，QQ搜索群號(hào)“765444821”或者掃描二維碼加入