Installation and Deployment Qt 3D Studio 시작하기

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://qt.io/qt3dstudio/uia">;
    <assets initial="second">
        <presentation id="second"    src="second.uip"/>
    </assets>
    <statemachine ref="#logic">
        <visual-states>
            <state ref="Initial">
                <enter>
                    <goto-slide element="main:Scene" rel="next"/>
                </enter>
            </state>
        </visual-states>
    </statemachine>
</application>

프레젠테이션은 실제 개발자가 Studio를 이용하여  다른 모델링툴로 생성된 2D, 3D 어셋을 포함거나 애니메이션, 어떤 액션들을 구성하고 하나 이상의 레이어를 합성하여 화면을 구성하는 파일이다. 프레젠 테이션은 하위 여러 프레젠테이션을 참조하여 구성하는 것도 가능하다. 

아래는 .uip파일의 XML코드인데 실제 화면 구성에 필요한 정보들이 존재한다. QML과 통합하여 어플리케이션을 개발할 때 각 요소의 path로 접근하여 런타임시에 각 요소의 속성을 바꾸는 것도 가능하다.

<?xml version="1.0" encoding="UTF-8" ?>
<UIP version="3" >
    <Project >
        <ProjectSettings author="" company="" presentationWidth="800" presentationHeight="480" maintainAspect="False" >
            <CustomColors count="16" >#ff5500 #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff</CustomColors>
        </ProjectSettings>
        <Classes >
            <Effect id="Corona" name="Corona" sourcepath="effects/Corona.effect" />
            <Behavior id="CameraLookAt" name="CameraLookAt" sourcepath="scripts/CameraLookAt.qml" />
        </Classes>
        <Graph >
            <Scene id="Scene" >
                <Behavior id="CameraLookAt_001" class="#CameraLookAt" />
                <Layer id="Layer" >
                    <Camera id="Camera" />
                    <Light id="Light" />
                    <Effect id="Corona_001" class="#Corona" />
                    <Component id="RoundedCube" >
                        <Model id="RoundedCube_001" >
                            <Material id="Default" name="Default" />
                        </Model>
                    </Component>
                </Layer>
            </Scene>
        </Graph>
        <Logic >
            <State name="Master Slide" component="#Scene" >
                <Add ref="#Layer" />
                <Add ref="#Camera" />
                <Add ref="#Light" />
                <State id="Scene-Slide1" name="Slide1" playmode="Looping" >
                    <Add ref="#CameraLookAt_001" name="CameraLookAt" >
                        <Action id="CameraLookAt-Action" eyeball="True" triggerObject="" event="onPressureDown" targetObject="#CameraLookAt_001" handler="start" />
                    </Add>
                    <Add ref="#Corona_001" name="Corona" />
                    <Add ref="#RoundedCube" name="RoundedCube" >
                        <AnimationTrack property="rotation.x" type="EaseInOut" >0 0 100 100 2.3571 0 100 100 10 0 100 100</AnimationTrack>
                        <AnimationTrack property="rotation.y" type="EaseInOut" >0 0 100 100 2.3571 42 100 100 10 0 100 100</AnimationTrack>
                        <AnimationTrack property="rotation.z" type="EaseInOut" >0 0 100 100 2.3571 56 100 100 10 0 100 100</AnimationTrack>
                    </Add>
                </State>
            </State>
            <State name="Master Slide" component="#RoundedCube" >
                <Add ref="#RoundedCube_001" name="RoundedCube" edgetess="4" endtime="5000" locked="False" pivot="0 0 0" rotation="0 0 0" sourcepath="models/RoundedCube-1/meshes/RoundedCube.mesh" tessellation="None" />
                <Add ref="#Default" locked="False" />
                <State id="RoundedCube-Slide1" name="Slide1" />
            </State>
        </Logic>
    </Project>
</UIP>

아래 QML코드는 마우스 클릭 시 "second" 프레젠테이션에 존재하는 "RoundedCube"의 Material 요소에 접근하여 색상을 바꾸는 간단한 예제 코드이다. 

import QtQuick 2.6
import QtQuick.Window 2.2
import QtStudio3D 1.0
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property bool greenTheme: false
    Studio3D{
        anchors.fill: parent
        Presentation {
            id: cluster
            source: "qrc:/second/second.uia"
            Element{
                id: cubeMaterial
                elementPath: "second:Scene.Layer.RoundedCube.RoundedCube.Default"
            }
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            if(greenTheme)
            {
                cubeMaterial.setAttribute("diffuse.r", 1.0);
                cubeMaterial.setAttribute("diffuse.g", 1.0);
                cubeMaterial.setAttribute("diffuse.b", 1.0);
                greenTheme = false
            }
            else
            {
                cubeMaterial.setAttribute("diffuse.r", 0.0);
                cubeMaterial.setAttribute("diffuse.g", 0.666667);
                cubeMaterial.setAttribute("diffuse.b", 0.0);
                greenTheme = true
            }
        }
    }
}

 

cubeMaterial을 통해 RoundedCube의 Material에 접근가능하다. 참고로 elementPath를 알아내기 쉬운 방법이 있는데 3D Studio의 Layer Pallete에서 특정 요소의 마우스 오른쪽 버튼 메뉴의 "Copy Object Path" 항목을 클릭하면 path가 클립보드로 복사된다. 

 

프레젠테이션은 하나 이상의 레이어를 구성하여 만들어 지는데 레이어는 하위 레이어의 내용위에 그려지는 상위 레이어와 합성되어 프레젠테이션의 시각적 결과가 만들어 진다.

 

프레젠테이션의 구성요소에는 또 슬라이드라는 것이 존재하는데 이것은 마이크로소프트사의 파워포인트를 생각하면 이해하기 쉽다. 파워포인트의 슬라이드 처럼 각 슬라이드에 전혀 다른 콘텐츠를 구성하거나 미세한 변화, 애니메이션 효과를 줄 수 도있다. 

슬라이드를 추가 하려면 오른쪽 마우스 버튼을 클릭하여 "New Slide"를 클릭하거나 기존에 존재하는 슬라이드를 복사하면되고 프로젝트 palette나 액션 palette 의 각 요소들을 슬라이드에 추가하여 구성한다.

다만 이 경우 요소들의 속성들이 마스터 슬라이드에 연결되어 있어서 다른 슬라이드의 요소에 영향을준다.

특정 슬라이드 요소의 속성만을 변경하고자 한다면 속성의 연결을 해제해야 하는데 Inspector palette의 각 속성에서 마우스 오른쪽 버튼을 클릭하여 "Unlink Property from Master Slide" 항목을 선택하면 된다.

 

아래는 간단하게 QML과 통합된 형태로 구현된 예제이다.

소스코드 -> Qt3D_Example.7z 또는 git@gitlab.com:pjk1985/Qt3DStudioExample.git

QML로 통합하여 텍스트 요소의 속성을 다국어 처리하는 방법은 다국어 어플리케이션 개발 문서를 참조하자.