Qt 3D: 와이어프레임 QML 예제

Qt 3D 와이어프레임 렌더링은 단일 패스 와이어프레임 렌더링 방법을 구현하기 위해 사용자 정의 셰이더 세트를 사용하여 단일 엔티티(트레포일 매듭)를 그리는 방법을 설명합니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행을 참조하세요.

엔티티 생성

렌더러 측면에서는 일부 지오메트리, 머티리얼 및 선택적으로 트랜스폼이 있는 엔티티를 찾습니다. 이러한 요소는 모두 Mesh, Material, Transform 의 형태로 QML 엔진에 익스포트된 QComponent의 서브클래스 형태로 지정됩니다. 이러한 컴포넌트를 사용하여 TrefoilKnot.qml에서 사용자 정의 QML 항목을 만듭니다.

먼저 Entity 유형 및 값 유형 헬퍼를 제공하는 Qt3D 2.0 모듈을 가져오는 것으로 시작합니다(예: 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 컴포넌트는 매우 간단합니다. 소스 프로퍼티를 사용하여 웨이브프론트 오브젝트 형식의 파일에서 정적 지오메트리 세트(예: 버텍스 위치, 노멀 벡터, 텍스처 좌표)를 로드하면 됩니다. 이 데이터는 블렌더 애플리케이션에서 내보낸 것입니다.

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

Mesh 요소 외에도 Qt 3D 에서는 작업 기반 엔진에서 호출되는 C++ 훅을 통해 버텍스별 속성 데이터를 동적으로 생성할 수 있습니다.

컴포넌트 집계

하지만 단순히 컴포넌트를 인스턴스화하는 것만으로는 충분하지 않습니다. 컴포넌트가 엔티티에 특별한 동작을 부여하려면 엔티티가 컴포넌트 속성을 통해 컴포넌트를 집계해야 합니다:

    components: [ transform, mesh, root.material ]

이를 통해 여러 엔티티 간에 컴포넌트를 매우 쉽게 공유할 수 있습니다. 이 예시에서는 변형과 메시를 위한 컴포넌트가 TrefoilKnot 사용자 정의 유형에 포함되어 있습니다. 최종 컴포넌트인 Material 유형은 TrefoilKnot 사용자 정의 유형의 프로퍼티에 의해 제공됩니다. 나중에 엔티티의 모양을 커스터마이즈할 것입니다.

카메라에서 렌더링하기

main.qml의 TrefoilKnot 사용자 정의 유형을 사용하여 화면에 물방울 매듭을 그립니다.

애니메이션에 필요한 Qt Quick 모듈에 대한 네임스페이스 가져오기를 추가하여 TrefoilKnot.qml에서와 동일한 가져오기 문을 사용합니다:

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 에는 여러 수준의 커스터마이징이 가능한 강력하고 매우 유연한 머티리얼 시스템이 있습니다. 와이어프레임머티리얼 커스텀 타입을 사용하여 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에서 제공하는 애니메이션 요소를 사용하여 트레포일노트와 와이어프레임 머티리얼 타입의 프로퍼티에 애니메이션을 적용합니다. 한 유형의 컴포넌트의 프로퍼티는 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