한국어
Qt
 

Qt3D의 QML타입으로 외부 3D Mesh 데이터(.obj 파일)을 Rendering하는방법과 그를 위해 기본적으로 필요한 모듈, 간단한 사용 예제를 소개한다.

 

다음과 같이 obj 파일로 모델링된 도시(City) Mesh 데이터가 있다. 이 3D Mesh 데이터를 응용프로그램 안에 넣고, 텍스처를 입히고, 재질 및 효과를주고 싶다고 치자. Qt3D로 이런일들이 가능하지만 여기서는 단순히 3D 데이터를 넣고 기본 컬러만 설정할 것이다.

CityModeling.png

 

먼저 2D 또는 3D 렌더링, 사용자 입력등을 처리하는 QtQuick 응용 프로그램의 경우 *.pro 파일에 다음 줄을 추가한다.

QT += qml quick 3dcore 3drender 3dinput 3dlogic 3dextras 3danimation

 

다음과 같이 QML모듈이 필요하다.

// QtQuick2와 Scene통합을 제공
import QtQuick.Scene3D 2.12 

// 사용되는 QML 모듈
import Qt3D.Core 2.12
import Qt3D.Render 2.12
import Qt3D.Extras 2.12
import Qt3D.Input 2.12

 

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQuickView view;
    view.resize(640, 480);
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();

    return app.exec();
}

 

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Scene3D 2.12


import Qt3D.Core 2.12
import Qt3D.Render 2.12
import Qt3D.Extras 2.12
import Qt3D.Input 2.12

Item {
    visible: true
    width: 640
    height: 480

    // Scene
    Rectangle{
        anchors.fill: parent

        Scene3D{
            focus: true
            anchors.fill: parent
            aspects: ["input", "logic"]
            cameraAspectRatioMode: Scene3D.AutomaticAspectRatio

            Entity {
                id: sceneRoot

                Camera {
                    id: camera
                    projectionType: CameraLens.PerspectiveProjection
                    fieldOfView: 45
                    nearPlane: 1.0
                    farPlane: 1000.0
                    position: Qt.vector3d(9.02537, 32.57, 30.6101)
                    upVector: Qt.vector3d(-0.159851, 0.950096, -0.267888)
                    viewCenter: Qt.vector3d(-11.2513, 16.2316, -8.57445)
                }

                FirstPersonCameraController {
                    camera: camera
                }

                Entity {
                    DirectionalLight {
                        id: directional
                        worldDirection: Qt.vector3d(0.3, -1.0, 5.0).normalized();
                        color: "#fff2a3"
                        intensity: 0.01
                    }
                    Transform {
                        id: lightpostransform
                        translation: Qt.vector3d(0.0, 50.0, 60.0)
                    }
                    components: [lightpostransform, directional]
                }

                Entity {
                    PointLight {
                        id: pointL
                        color: "#fff2a3"
                    }
                    Transform{
                        id: plightpostransform
                        translation: Qt.vector3d(0.0, 4.0, 15.0)
                    }
                    components: [plightpostransform, pointL]
                }

                RenderSettings {
                    id: render
                    activeFrameGraph: ForwardRenderer {
                        id: renderer
                        clearColor: "midnightblue"
                        camera: camera
                    }
                }

                InputSettings { id: input }

                components:[render, input]

                Entity {
                    Mesh {
                        id: vehiclemesh
                        source: "qrc:/object/asset/TheCity.obj"
                    }

                    Transform {
                        id: transform
                        property real scale: 0.1 //1.0
                        scale3D: Qt.vector3d(scale, scale, scale)
                        rotationX: 0.0
                        rotationY: 35.0
                        rotationZ: 0.0
                    }

                    VehicleMaterial{
                        id: material
                    }

                    Entity {
                        components: [vehiclemesh, transform, material]
                    }
                }
            }
        }
    }
}

 

VehicleMaterial.qml

import Qt3D.Core 2.12
import Qt3D.Render 2.12

Material {
    id: material

    property vector3d lightPosition: Qt.vector3d(30.0, 30.0, 0.0)
    property vector3d lightIntensity: Qt.vector3d(1.0, 1.0, 1.0)

    property color ambientColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
    property color diffuseColor: Qt.rgba(0.7, 0.7, 0.9, 1.0)
    property color specularColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
    property real shininess: 150.0

    parameters: [
        Parameter { name: "ka"; value: Qt.vector3d(material.ambientColor.r, material.ambientColor.g, material.ambientColor.b) },
        Parameter { name: "kd"; value: Qt.vector3d(material.diffuseColor.r, material.diffuseColor.g, material.diffuseColor.b) },
        Parameter { name: "ks"; value: Qt.vector3d(material.specularColor.r, material.specularColor.g, material.specularColor.b) },
        Parameter { name: "shininess"; value: material.shininess }
    ]

    effect: Effect {
        property string vertex: "qrc:/shaders/program/simpleColor.vert"
        property string fragment: "qrc:/shaders/program/simpleColor.frag"

        FilterKey {
            id: forward
            name: "renderingStyle"
            value: "forward"
        }

        ShaderProgram {
            id: gl3Shader
            vertexShaderCode: loadSource(parent.vertex)
            fragmentShaderCode: loadSource(parent.fragment)
        }

        AlphaCoverage { id: alphaCoverage }

        DepthTest {
            id: depth
            depthFunction: DepthTest.Less
        }

        techniques: [
            // OpenGL 3.1
            Technique {
                parameters: [
                    Parameter { name: "light.position"; value: Qt.vector4d( 0.0, 0.0, 0.0, 1.0 ) },
                    Parameter { name: "light.intensity"; value: Qt.vector3d( 1.0, 1.0, 1.0 ) }
                ]

                filterKeys: [ forward ]
                graphicsApiFilter {
                    api: GraphicsApiFilter.OpenGL
                    profile: GraphicsApiFilter.CoreProfile
                    majorVersion: 3
                    minorVersion: 1
                }
                renderPasses: RenderPass {
                    shaderProgram: gl3Shader
                    renderStates: [alphaCoverage ]
                }
            }
        ]
    }
}

 

Scene3D : QtQuick2 와 Scene의 통합을 제공

Carmera : 장면이 렌더링 될 시점을 정의.

Entity : 여러 Component3D 인스턴스를 집계 할 수있는 노드 서브 클래스.

QNode.png

 

렌더링과 관련된 QComponent는 다음과 같다.

 

Mesh : 외부 사용자 3D Mesh 데이터

Material : 머티리얼은 엔티티의 렌더링을 지정하는 방법을 제공.

  • Effect : 재료에 대한 렌더링 효과를 생성하기 위해 해당 기술에서 사용되는 일련의 기술과 매개 변수를 결합.
  • Technique : 지정된 그래픽 API가 렌더링 할 수있는 렌더링 기법을 함께 정의하는 RenderPass 객체, FilterKey 객체, Parameter 객체 및 GraphicsApiFilter 세트를 지정

Transform : 메쉬에서 변형을 수행하는 데 사용.

 

예제에서 사용되는 셰이더 프로그램

simpleColor.frag

#version 330 core

//uniform mat4 viewMatrix;

uniform struct LightInfo {
    vec4 position;
    vec3 intensity;
} light;

uniform vec3 ka;            // Ambient reflectivity
uniform vec3 kd;            // Diffuse reflectivity
uniform vec3 ks;            // Specular reflectivity
uniform float shininess;    // Specular shininess factor

in vec3 position;
in vec3 normal;

out vec4 fragColor;

vec3 dsModel(const in vec3 pos, const in vec3 n)
{
    // Calculate the vector from the light to the fragment
    vec3 s = normalize( vec3( light.position ) - pos );

    // Calculate the vector from the fragment to the eye position (the
    // origin since this is in "eye" or "camera" space
    vec3 v = normalize( -pos );

    // Refleft the light beam using the normal at this fragment
    vec3 r = reflect( -s, n );

    // Calculate the diffus component
    vec3 diffuse = vec3( max( dot( s, n ), 0.0 ) );

    // Calculate the specular component
    vec3 specular = vec3( pow( max( dot( r, v ), 0.0 ), shininess ) );

    // Combine the ambient, diffuse and specular contributions
    return light.intensity * ( ka + kd * diffuse + ks * specular );
}

void main()
{
    //output color from material
    fragColor = vec4(dsModel(position, normalize(normal)), 1.0);
}

 

simpleColor.vert

#version 330 core

in vec3 vertexPosition;
in vec3 vertexNormal;

out vec3 position;
out vec3 normal;

uniform mat4 modelView;
uniform mat3 modelViewNormal;
uniform mat4 mvp;

void main()
{
    normal = normalize( modelViewNormal * vertexNormal );
    position = vec3( modelView * vec4( vertexPosition, 1.0 ) );

    gl_Position = mvp * vec4( vertexPosition, 1.0 );
}

 

결과 장면

키보드와 마우스를 이용한 카메라 조작이 가능하다.

Qt3D.png

이 글과 연관된 다른 글
  1. [2020/05/22] ShaderEffect QML Type을 이용한 버튼 클릭 효과 by makersweb (81)
  2. [2019/11/09] Qt Quick 3D 소개 by makersweb (272)
  3. [2018/12/09] ShaderEffect QML Type 을 이용한 그래픽효과 by makersweb (786)
  4. [2018/12/05] Qml에서 커튼효과 구현 예제 - Shader Effects by 운영자 (477)
번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 12031
98 QScopedPointer 소개 및 사용법 makersweb 2019.11.29 160
97 QOpenVirtualkeyboard(Qt 5용 한글 및 영문, 숫자 가상키보드) file makersweb 2019.11.27 461
» Qt3D의 QML 타입으로 3D렌더링 file makersweb 2019.11.20 411
95 라즈베리파이3에서 Boot to Qt 실행해보기 makersweb 2019.11.13 503
94 Qt애플리케이션 객체(QCoreApplication, QGuiApplication, QApplication) 에 대해서 makersweb 2019.11.11 1768
93 Qt Quick 3D 소개 makersweb 2019.11.09 272
92 QPushButton 의 커스텀 이미지버튼 file makersweb 2019.11.05 768
91 qbs 사용 방법(Helloworld) file makersweb 2019.10.23 1254
90 웹기반 Qt Design Viewer [2] file makersweb 2019.10.23 308
89 Qt Creator에서 Qt의존성 라이브러리 자동복사하기 file makersweb 2019.10.19 406
88 Qt for Embedded Linux 화면출력 makersweb 2019.10.17 529
87 Windows에서 Qt 설치 따라하기 file makersweb 2019.10.14 5095
86 Qbs 프로젝트를 정의하기 위해 사용되는 몇가지 중요한 아이템들 file makersweb 2019.10.13 110
85 많은 리소스를 사용하는 Qt프로젝트에서 고려해봐야 할 qmake 옵션 makersweb 2019.10.11 346
84 Qbs에 대한 소개와 설치하는 방법 makersweb 2019.10.09 603
83 OpenGL 렌더링을 QtQuick과 통합하는 방법 file makersweb 2019.10.01 434
82 QML내에서의 시그널, 슬롯 시스템 makersweb 2019.09.29 1363
81 컨테이너에 적재된 객체를 편리하게 삭제하기 makersweb 2019.09.18 277
80 C++로 구현된 모델을 QML의 ListView에서 참조 file makersweb 2019.09.07 1012
79 QSocketNotifier로 파일 디스크립터의 활동감지 makersweb 2019.08.28 640