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 の「チュートリアル：ビルドと実行」を参照してください。

エンティティの作成

レンダラーアスペクトは、ジオメトリ、マテリアル、およびオプションで変換を持つエンティティを探します。これらはすべて、Mesh 、Material 、Transform の形式でQMLエンジンにエクスポートされたQComponentのサブクラスとして指定されます。これらのコンポーネントを使用して、TrefoilKnot.qml内でカスタムQMLアイテムを作成します。

まず、Entity 型やQt.vector3d()などの値型ヘルパーを提供するQt3D 2.0 モジュールをインポートします。また、レンダラーアスペクトで取り込まれるコンポーネントやその他の型を提供する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コンポーネントは、C++コードに一切手を加えることなくレンダラーを完全に構成するために、ForwardRenderer型を使用しています：

    // 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 には、多段階のカスタマイズが可能な、堅牢かつ非常に柔軟なマテリアルシステムが備わっています。ここでは、Material 型をラップするために、WireframeMaterialというカスタム型を使用します：

    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