파이어몽키 3d 애플리케이션 만들기

34
1 7파이어몽키 3D 애플리케이션 만들기 소개............................................................................................................................................................................ 2 파이어몽키 비즈니스 애플리케이션 플랫폼(FMX)............................................................................................... 3 파이어몽키 3D 초급 ................................................................................................................................................ 6 번째 윈도우 3D 애플리케이션 만들기............................................................................................... 14 3D 애플리케이션에서 HD 인터페이스 작성 ...................................................................................................... 19 HD 애플리케이션에 3D 카메라, 라이트 큐브 추가하기 ............................................................................ 24 3D 파이어몽키 애플리케이션에서 폰트 사용 .................................................................................................... 31 TMesh TCustomMesh .................................................................................................................................... 31 TModel3D............................................................................................................................................................... 32 요약, 전망, 해야 , 참고자료 ....................................................................................................................... 33

Upload: devgear

Post on 10-Jun-2015

357 views

Category:

Software


12 download

DESCRIPTION

파이어몽키를 활용하면 3D, HD를 갖춘 멋진 애플리케이션을 개발할 수 있습니다. 이번 문서에서는 3D 애플리케이션을 만들어봅니다. 단 하나의 코드베이스만으로 윈도우와 맥으로 모두 배포할 수 있는 파이어몽키의 놀라운 기능을 바로 확인해보세요.

TRANSCRIPT

Page 1: 파이어몽키 3D 애플리케이션 만들기

1

7장 – 파이어몽키 3D 애플리케이션 만들기

소개 ............................................................................................................................................................................ 2

파이어몽키 비즈니스 애플리케이션 플랫폼(FMX) ............................................................................................... 3

파이어몽키 3D 초급 ................................................................................................................................................ 6

첫 번째 윈도우 및 맥 3D 애플리케이션 만들기 ............................................................................................... 14

3D 애플리케이션에서 HD 인터페이스 작성 ...................................................................................................... 19

HD 애플리케이션에 3D 카메라, 라이트 및 큐브 추가하기 ............................................................................ 24

3D 파이어몽키 애플리케이션에서 폰트 사용 .................................................................................................... 31

TMesh 와 TCustomMesh .................................................................................................................................... 31

TModel3D............................................................................................................................................................... 32

요약, 전망, 해야 할 일, 참고자료 ....................................................................................................................... 33

Page 2: 파이어몽키 3D 애플리케이션 만들기

2

소개 파이어몽키는 드래그 앤 드롭 사용자 인터페이스 컨트롤의 전체 제품 군을 포함하고 있습니다.

파이어몽키를 사용하여 윈도우 및 맥 용 3D 애플리케이션을 작성하고 HD 애플리케이션에 3D 기능을

추가 할 수 있습니다.

파이어몽키 3D 폼은 대화형 사용자 인터페이스에 대한 조명, 텍스처, 애니메이션 등을 사용하여

완전하게 GPU 구동 3D 표면을 제공합니다. 3D 컨트롤, 오브젝트와 메시는 COLLADA, OBJ등과 같은 파일

포맷을 지원하는 대중적인 3D 디자인 패키지에서 가져올 수 있습니다. TForm3D는 3D 콘텐트로

시작하지만 TViewport3D는 TForm3D와 다르게 2D 형식으로 3D 콘텐트를 표시합니다. 2D와 3D는 중첩

될 수 있습니다.

파이어몽키 3D를 사용하려면 컴퓨터가 그래픽 처리 장치(GPU)를 가지고 있어야 합니다. 대부분의

컴퓨터는 3D 지원 그래픽 칩이 마련되어 있습니다. 윈도우에서 그래픽 칩이 Direct3D 드라이버를

가지고 있다면, 파이어몽키 3D 애플리케이션은 작동합니다. 요즈음의 모든 매킨토시 컴퓨터는 GPU

호환을 포함합니다.

모든 아이폰 및 아이패드 장치는 GPU를 갖추고 있습니다.

7장에서는 윈도우 및 맥킨토시 3D 애플리케이션 디자인에 초점을 맞출 것입니다. 스타일, UI 컨트롤과

데이터베이스의 사용을 포함하여 "5장-파이어몽키 HD 사용자 인터페이스 설계” 와 "6장-데이터 연결"

에서 배운 모든 기능을 사용할 수 있습니다. 아래에 주소에 있는 "윈도우와 맥 개발 시작하기"방문

페이지에 해당 강의 코스 책과 동영상을 참조 할 수 있습니다.

http://www.embarcadero.com/firemonkey/firemonkey-e-learning-series.

Page 3: 파이어몽키 3D 애플리케이션 만들기

3

파이어몽키 비즈니스 애플리케이션 플랫폼(FMX)

FMX는 파이어몽키 애플리케이션 플랫폼의 단위입니다.

파이어몽키는 개인에서 기업까지 전체 범위를 대상으로, 데스크톱 및 다양한 플랫폼에서 시각적으로

매력적인 애플리케이션을 작성하기 위해 데스크톱 및 모바일 장치에서 그래픽 처리 장치 (GPU)를

활용합니다. 파이어몽키의 주요 기능은 다음과 같습니다:

윈도우 창, 메뉴, 타이머, 대화 상자와 같은 OS 기능을 위한 크로스 플랫폼 추상화 계층

2D 및 3D 그래픽

강력한 그래픽 엔진

빠른 실시간 안티 – 알리아스(별칭) 벡터 그래픽, 알파 블렌딩 및 그라디언트로 독립적인

해상도

WYSIWYG 디자이너와 속성 편집기

향상된 GUI 엔진 – 윈도우 창, 텍스트박스, 숫자박스, 메모, 엔젤박스, 리스트박스와 기타 등등

샘플 스타일 테마를 사용한 그래픽 스타일에 기초한 고급 스키닝 엔진

내장된 붓, 펜, 형상 및 변형 세트가 있는 2D 그래픽 도형 원형

향상된 애니메이션은 백그라운드 스레드에서 최소한의 CPU 사용 및 자동 프레임 속도

보정으로 정확하고 사용하기 쉽게 계산됩니다. CPU 사용량 및 자동 프레임 속도 보정

그림자 드리우기와 흐리게 하기 등 소프트웨어에서 렌더링 되는 비트맵 효과

유연한 레이아웃과 도형과 다른 컨트롤들의 조합

레이어드 폼, 유니코드 사용 가능

읽기/쓰기를 지원하는 JPEG, PNG, TI FF, 및 GIF 포맷

다국적-언어 엔진, 에디터와 예제

다음 그림은 주요 클래스의 관계를 보여주는 파이어몽키 계층 구조입니다.

또한 다음에서 개략적인 파이어몽키 계층 구조 포스터(PDF 파일)를 다운로드 받을 수 있습니다

http://www.embarcadero-info.com/firemonkey/firemonkey_chart_poster.pdf.

Page 4: 파이어몽키 3D 애플리케이션 만들기

4

다음은 파이어몽키의 3D 타입 중 일부분의 UML 클래스 다이어그램입니다:

파이어몽키 3D는 iOS에서 OpenGL|ES (델파이 XE2에서만)을 사용하고 맥에서 OpenGL을 사용하고,

윈도우에서 Direct3D를 사용하여 렌더링 됩니다.

Page 5: 파이어몽키 3D 애플리케이션 만들기

5

파이어몽키 3D를 사용하면 윈도우, 맥 및 Ios의 기본 그래픽 렌더링 시스템 차이에 대해 걱정할

필요가 없습니다. 파이어몽키의 컴포넌트를 사용하여 프로그램을 작성하고 각 플랫폼에서 고속 3D

그래픽을 갖게 됩니다.

Page 6: 파이어몽키 3D 애플리케이션 만들기

6

파이어몽키 3D 초급

파이어몽키는 3D 공간에서 오브젝트의 2D 보기를 제공합니다. TForm3D는 3D 콘텐트로 시작하지만

TViewport3D는 TForm3D와 다르게 2D 형식으로 3D 콘텐트를 표시합니다.

2D와 3D는 중첩 될 수 있습니다. 파이어몽키 3D는 다음과 같이 플랫폼에 특정 라이브러리를

사용합니다:

윈도우에 대한, Direct3D를 라이브러리(Winapi 유니트 범위에서 제공되는 DirectX의 일부)

맥에 대한, OpenGL 라이브러리(Macapi 유니트 범위에서 제공되는)

파이어몽키 3D 좌표 시스템

대부분의 3D 그래픽 서브 시스템은 두 직교 좌표 시스템 중 하나를 (그래픽 애플리케이션과 다른 좌표

시스템을 사용하는 시스템이 있지만) 사용합니다:

(소위)오른쪽 좌표 시스템 – X 양수는 오른쪽에, Y 양수는 위로, Z 양수는 스크린 밖으로

나옵니다. OpenGL은 오브젝트 공간, 월드(모델) 공간, 카메라 공간과 화면 공간 등을 포함한

3D 그래픽에 대해 여러 개의 좌표 시스템을 제공합니다. 월드 공간 OpenGL은 오른쪽 좌표

시스템을 사용합니다.

(소위)왼쪽 좌표 시스템 – X 양수는 오른쪽에, Y 양수는 위로, Z 양수는 스크린 안에 있습니다.

마이크로소프트 Direct3D는 http://msdn.microsoft.com/en-

us/library/windows/desktop/bb204853(v=vs.85).aspx 왼쪽 좌표 시스템을 사용합니다.

Page 7: 파이어몽키 3D 애플리케이션 만들기

7

파이어몽키는 3D 좌표 시스템의 다양한 타입을 지원해야 하기 때문에 자신의 좌표 시스템을 사용하여

X, Y 및 Z 좌표를 변환하여 해당 프로그램의 소스 코드의 한 세트를 작성할 수 있습니다.

3D 오브젝트나 컨트롤의 Position 속성은 오브젝트의 위치에 대한 X, Y 및 Z 값을 포함합니다.

3D 오브젝트에서, 위치는 3D 공간에 대해 상대적입니다. 3D 컨트롤에서, 위치는 부모의 위치를

기준으로 합니다. X, Y 및 Z의 값은 단일 부동 소수점 타입입니다.

양수 X – 3D 오브젝트를 부모의 중앙에서 오른쪽으로

양수 Y – 3D 오브젝트를 부모의 중앙에서 아래로

양수 Z – 3D 오브젝트는 사용자 (화면에)에서 먼 거리에 있습니다

3D에서 회전은 TPosition3D의 RotationAngle의 X, Y, Z 축에서 각도를 지정하며, 회전은 항상 센터에서부터

시작합니다. 회전은 또한 오른쪽 규칙을 따릅니다; 예를 들어, X와 Y 회전 0으로,Z축은 스크린 안에

위치하고, z축에 양수 회전은 시계 방향으로 회전합니다. 2D에서, 스케일링은 원래대로이며, 회전은

조절하기 때문에 사이즈 조절은 회전 전에 발생합니다. 3D에서는, 스케일링과 회전 모두 중심에서부터

발생하기 때문에 순서는 중요하지 않습니다.

3D 오브젝트들

파이어몽키는 3D 오브젝트 몇 가지 종류를 제공합니다:

TCube, TSphere, TCylinder 및 TCone과 같은 기초 3D 도형.

2D 오브젝트는 TText3D 및 TPath3D 같은 3D로 압출됩니다. 압출 된 오브젝트는 삼면이

있습니다: 앞, 원래의 2D 형태; 뒤, 그 형상의 거울 이미지; 그리고 그 모양 사이의 압출의 축.

3D 및 TTextLayer3D와 같은 3D 공간에서 평면 2D 개체.

복잡한 3D 개체에 대한 TMesh.

. OBJ, .DAE. ASE 모델 형식에 대한 3D 모델 파일을 로드 하기 위한 TModel3D

Page 8: 파이어몽키 3D 애플리케이션 만들기

8

오브젝트는 3D 공간에서 TPosition3D를 사용하여 X, Y, Z로 좌표화되어 위치를 정합니다. 높이와

너비뿐만 아니라, 또한 깊이가 있습니다. 3D 공간에서 평면 2D 개체는 아주 적은 코딩으로 임의의 값을

줄 수 있습니다. 3D 오브젝트는 3D 회전 및 스케일링을 갖추고 있습니다. 위치, 크기, 회전 및

스케일링은 모두 오브젝트의 중심점을 기준으로 합니다.

2D 컨트롤과 마찬가지로, 파이어몽키의 모든 3D 컨트롤은 다른 3D 컨트롤의 부모가 될 수 있습니다.

자식의 위치와 회전은 부모를 기준으로 합니다. 부모 개체를 이동하거나 회전하면 해당 컴포넌트의

하위 트리 구조를 재배치합니다. TLayout3D은 다른 개체를 포함하는 특별한 기능이 없는 부모로 사용할

수 있습니다.

HD 표면에 정렬된 2D 오브젝트는 자신의 레이어링을 결정하기 위해, Z-순서의 개념을 필요로 하지만,

3D 공간에서 오브젝트는 본질적으로 순서가 있습니다.

Page 9: 파이어몽키 3D 애플리케이션 만들기

9

카메라

3D 공간의 모든 뷰는 카메라에 의해 제어됩니다. 카메라의 위치와 방향(3D 회전)은 보는 것을

결정합니다. 폼 디자이너에서 사용되는 디자인 카메라가 항상 있으며, 런타임에서 디폴트입니다.

디자인 카메라는 직접 음수-Z축 위에(음수-Y 방향), X-Z 평면에 수직으로, 약간 아래쪽 각진, 위치 0,0,0은

보기의 중심에 있습니다. 다른 카메라를 사용하려면 TViewport3D 또는 TForm3D의 UsingDesignCamera

속성을 False로 설정하고 Camera 속성에 TCamera를 할당합니다. 씬은 여러 카메라를 가질 수 있습니다.

Camera 속성에 다른 하나를 할당 한 후에 수동으로 다시 Repaint를 호출해야 합니다.

볼 수 있는 볼륨은 카메라 앞에서 가까운 평면으로 절두체(frustum)입니다. 카메라와 그 앞 평면

사이에 어떤 것도 보기에서 잘립니다. 시야의 각도는 수직으로 고정되어 있습니다: 뷰포트 / 폼을 더

높게 하는 것은 모든 것을 더 크게 합니다 반면 더 넓게 하면 측면이 더 넓게 보여집니다. 위치와

크기의 단위는 시야의 스케일을 기준으로 합니다.

화면 투영(프로젝션)

카메라에 의해 결정되는 오브젝트의 관점뿐만 아니라, 오브젝트는 3D 게임의 고정 상태 표시기처럼

카메라 포인트에 상관없이 보여지도록 설정할 수 있습니다. 이것은 Projection 속성을 기본

pjCamera에서 pjScreen으로 변경하여 수행됩니다:

Position.Z 에서 제로값:

o XY 0,0는 2D와같이 왼쪽 상단 모서리에 있습니다. (3D 위치는 2D와 같이 그 왼쪽 상단에

있지 않고 여전히 오브젝트의 중심의 위치를 반영합니다.)

o 높이, 너비, 깊이 크기가 시야가 확장 되는 방법에 상관없이 픽셀과 같습니다.

o 픽셀 단위로 렌더링 되기 때문에, 화면 투영을 사용 하는 오브젝트의 크기는

같은 크기로 표시 하기 위해 카메라 프로젝션을 사용 할 때보다 훨씬 큽니다.

o 오브젝트는 절두체(frustum)의 전면 자른 평면 뒤에 약간 나타납니다.

카메라 투영을 사용하는 오브젝트는 앞 평면에 의해 클리핑 되기 전에 씬 투영된 오브젝트

앞에 나타날 수 있는 작은 차이가 있습니다.

Position.Z 에서 0 보다 큰 값(보는 사람에서 먼):

o 렌더링 된 사이즈가 더 작습니다.

o 뷰를 축소하는 것은 오브젝트를 뒤로 더 밀어 놓아 심지어 더 작게 만듭니다.

o 뷰를 확대하는 것은 오브젝트를 더 가깝게 가져와 더 크게 만듭니다.

Position.Z 에서 0 보다 적은 값(보는 사람을 향해):

o 렌더링 된 사이즈가 더 큽니다.

o 뷰를 축소하는 것은 오브젝트를 더 가깝게 가져와 심지어 더 크게 만듭니다.

o 뷰를 축소하거나 Position.Z을 직접 설정하여 너무 가깝게 가져오면 오브젝트는 절두체의

앞면을 지나 이동하며, 뷰가 사라지게 됩니다.

o 뷰를 확대하는 것은 오브젝트를 뒤로 더 밀어 더 작게 만듭니다.

Page 10: 파이어몽키 3D 애플리케이션 만들기

10

폼 디자이너에서 오브젝트의 투영(Projection) 변경은 위치를 다시 계산합니다 그래서 움직이지 않고,

또한 크기를 조정합니다.

카메라 붐

사용자가 제어하는 모든 방향에서 오브젝트 또는 씬을 보는 것은, 일반적인 3D 애플리케이션입니다.

적절한 카메라 앵글을 맞출 수 있는 위치와 방향을 계산 할 수 있지만 가상 카메라 붐을 만들기가 더

쉽습니다:

1. 관심 오브젝트와 같은 위치, 또는 씬의 중심에, TDummy처럼 보이지 않는 오브젝트를

생성합니다.

2. 오브젝트의 자식으로 TCamera를 생성합니다.

a. 축 중 하나에 원하는 거리에 위치를 설정합니다.

b. 필요한 경우, RotationAngle를 설정하여 카메라가 위치에 축을 따라 다시 가리킵니다.

카메라가 거꾸로 되지 않았는지 확인합니다

3. 이제 Dummy 개체의 RotationAngle을 변경하여 간단하게 오브젝트 주위에 카메라를 회전시킬 수

있습니다. 카메라는 정확한 거리를 유지하고 자동으로 직접 중심을 향해 가리킵니다.

4. 카메라의 자식으로 라이트를 추가하면 카메라가 움직이는 것처럼 빛의 거리와 방향을

유지합니다.

라이팅

일반적으로 3D 개체는 빛이 추가되지 않은 한 특징이 없는 검은 색 덩어리입니다. 하나 이상의 TLight

오브젝트는 3D 오브젝트의 LightType 속성에 따라 3D 공간에서 빛을 정의합니다:

ltDirectional - 방향 표시등이 주어진 각도에서 일정합니다. 태양의 빛은 일반적인

아날로그입니다: 지구의 지역화된 곳으로부터 멀리 떨어진 – 마일이 아닌 야드로 – 모든

아이템들이 동시에 비춰집니다. 방향 표시등의 위치는 효과와 관련이 없습니다. (폼

디자이너에서 클릭하려고 하면 그 위치는 연관이 있습니다) 중요한 것은, RotationAngle에 의해

정의된 빛 포인트의 방향과 부모의 RotationAngle입니다.

ltPoint - 포인트 등은 노출 된 전구 (줄기가 없는)같은 것입니다. 그것은 모든 방향으로

방출하고

거리가 떨어져 있습니다. RotationAngle는 아무런 영향을 미치지 않습니다. 중요한 것은 부모의

위치 및 회전에 영향을 받는 위치입니다

ltSpot -스팟 라이트는 위치와 회전 모두에 따라 달라집니다, 그리고 거리와 떨어집니다.

3D 공간에서 평면 2D 개체를 필요하지 않으며, 빛의 영향을 받지 않습니다. 그들은 추가 된

3D 관점과 같이 평소와 같이 나타납니다.

물질(Material)

Page 11: 파이어몽키 3D 애플리케이션 만들기

11

3D 개체의 표면은 그 물질에 의해 정의됩니다. 원시 3D 개체는 하나의 Material 속성을 가지고

있습니다. 압출 개체는 추가적으로 MaterialBack와 MaterialShaft 속성이 있습니다. 그 속성의 일부는

표면이 빛으로 표시하는 방법을 제어하는 색상입니다:

Emissive(방출)색은 표면이 자신의 빛, 또는 빛을 방출할 것인지 여부를 결정합니다. 디폴트

값은 널 값입니다(제로-투명도 검은색): 오브젝트는 일반적으로 활활타게 빛나지 않고

보여지는 밝은 빛이 필요합니다. 색상을 설정함으로써 빛이 없는 표면은 색으로 표시됩니다.

점등되면, 방출 색이 빛으로 인한 다른 색상과 함께 혼합됩니다.

Ambient(주위)색은 볼 수 있도록 표면에 기본 색을 제공합니다. 현실 세계에서는 빛이 표면에

여러 방향으로부터 반영됩니다; 하지만 3D 씬에서 그 모든 빛을 정의하기 어렵습니다. 따라서

공간에서 주변 색상은 빛에 의해 활성화됩니다. (빛이 없으면, 아무런 영향을 받지 않습니다.)

표면은 그 색으로 비교적 균일하게 색상이 나타납니다. 모든 방향 빛으로 – 표면에서 지정할

필요가 없습니다 – 모든 것이 평평하게 보일 것입니다. 포인트 조명 및 스팟 조명을 함께

사용하여 거리가 멀어지면 색이 엷어집니다.

Diffuse(확산)색은 입사 각도를 포함하여, 빛과 직접 상호 작용합니다. 빛이 없으면 아무런

영향을 미치지 않습니다. Ambient(주위)과 Diffuse(확산)을 동일한 색상으로 설정하는 것이

일반적입니다.

Specular(반사)색상은 여러 각도에서 확산 빛 대신에 특정 각도로 입사 광을 반영하여 광택

표면을 시뮬레이션 합니다. 빛이 없으면 아무런 영향을 미치지 않습니다. 기본값은 흰색으로

색상을 변경하지 않고 빛을 반사합니다.

구획 - 너비, 높이, 깊이

TSphere, TCode, TCube, TCylinder 등과 같은 3D 개체의 경우 SubdivisionsWidth, SubdivisionsHeight 및

SubdivisionsDepth 속성을 설정하여 표면의 부드러움을 제어 할 수 있습니다.

SubdivisionsWidth는 SubdivisionsHeight 및 SubdivisionsDepth 속성은3D 오브젝트가 갖게 되는 동일한

구획이 얼마인지 지정합니다. 구획의 큰 숫자는 매끄러운 표면을 생성합니다. 각 속성의 기본 값은

1입니다.

Page 12: 파이어몽키 3D 애플리케이션 만들기

12

2D 와 3D 혼합

3D 오브젝트는 3D 컨테이너에 배치합니다. 2D 컨테이너(TForm과 같은)에 직접 배치 하면 3D

개체는(TCube와 같은) 렌더링 되지 않습니다. 반대로, 3D 컨테이너에(TForm3D과 같은) 직접 배치한다면

2D 오브젝트는(TButton과 같은) 렌더링 되지 않습니다. 두 클래스는 2D 및 3D 콘텐트의 혼합 중첩을

허용 합니다:

TLayer3D는 2D 콘텐트가 포함 된 3D 개체입니다. 3D 공간에 존재 하는 유리의 직사각형 시트

같습니다.

TViewport3D는 3D 콘텐트가 포함 된 2D 개체입니다. TForm3D 마찬가지로 3D 공간에

"창"입니다.

이러한 컨테이너들을 중첩할 수 있습니다. 예를 들어, 아래와 같은 개체 계층 구조를 가질 수 있습니다:

또한, 몇 클래스는 2D 콘텐트를 직접 3D로 호스팅 합니다:

TTextLayer3D 텍스트를 표시합니다

TImage3D 비트맵 이미지를 표시합니다

TDummy

3D 더미 개체에 대한 클래스를 나타냅니다. TDummy는 TModel3D에 대한 조상 클래스이며 내부적으로

TViewport3D 사용합니다. TDummy도 3D 개체에 대한 컨테이너로 사용할 수 있습니다. 다른 3D

컨트롤들을 그룹화 하여 함께 이동하고 회전 할 수 있도록 TDummy 컨트롤을 사용합니다.

TProxyObject

TProxyObject는 프록시 개체에 대한 추상적인 컨테이너 클래스입니다. TProxyObject은 TProxyObject가

나타내는 개체가 있는 SourceObject 필드가 포함되어 있습니다. TProxyObject를 사용하여 코드에서

동적으로 3D 장면을 만들 수 있습니다. 그래픽 집약적인 작업은 원본 개체에서만 수행되기 때문에

TProxyObject를 사용하면 메모리를 절약할 수 있고 실행 속도를 향상시킬 수 있습니다.

Page 13: 파이어몽키 3D 애플리케이션 만들기

13

폰트 지원

파이어몽키에서 폰트 크기는 디바이스 독립적 픽셀 (DIPs)로 표현됩니다. OS X에서는 기본으로 인치 당

72점 (또는 픽셀) 또는 DPI로 표시되기 때문에 포인트 값은 픽셀과 동일합니다. 윈도우

텍스트는(DirectWrite API 수준에서) 디바이스 독립적인 픽셀(인치 당 96) 또는 DIPs로 크기를 나타냅니다,

그리고 기본값이 96 DPI로 설정되고 표시됩니다. 따라서 두 경우 모두에서, 폰트 크기 단위와

디스플레이 해상도 사이에 일대일 대응이 있습니다.

윈도우와 OS X 모두에서 텍스트는 같은 높이가 될 것입니다. (각 플랫폼 폰트를 렌더링 하는 방법은

미묘한 차이가 발생할 수 있습니다.)

예를 들어, 폰트 크기가 24 라고 가정 해 보겠습니다. 윈도우에서, 24 DIPs는 24/96 또는 1/4 인치

높이입니다. 96 DPI 스크린에서 1/4-인치는 24 픽셀입니다. OS X에서, 24 포인트는 24/72 또는 1/3 인치

높이입니다. 72 DPI 스크린에서 1/3-인치는 24 픽셀입니다.

윈도우에서 포인트로 크기를 나타내는 텍스트는 동일한 숫자 값에서 더 크게 나타납니다. 예를 들어,

96 DPI 에서 24 포인트는 32 픽셀 높이입니다.

폰트의 Family 속성을 설정하여 폰트의 글꼴을 지정합니다. 폰트의 Style 속성으로 글꼴을 사용하는

문자에 특별한 특성을 추가합니다. 스타일은 다음에서 0 개 이상의 값을 포함하는 집합입니다:

fsBold – 폰트가 굵게 됩니다.

fsItalic – 폰트가 이태리 체 입니다.

fsUnderline – 폰트에 줄이 그어집니다.

fsStrikeOut - 글꼴은 수평 라인으로 표시됩니다.

Page 14: 파이어몽키 3D 애플리케이션 만들기

14

첫 번째 윈도우 및 맥 3D 애플리케이션 만들기

첫 번째 윈도우 및 맥 3D 애플리케이션을 작성하려면 다음 단계를 따라 진행합니다.

1단계: File > New > Other > C++Builder Projects > FireMonkey 3D Application 및 File > New >

Other > Delphi Projects > FireMonkey 3D Application를 사용하여 파이어몽키 3D 애플리케이션을 위한

새로운 프로젝트를 생성하고 기본 폼(FMX.Forms.TForm3D)을 표시 하면서 파이어몽키 폼 디자이너가

열립니다.

TForm3D는 표준 파이어몽키 3D 애플리케이션 창을 나타냅니다. 3D 폼은 애플리케이션의 메인 윈도우,

대화 상자, 또는 다른 화면들을 나타낼 수 있습니다. 3D 폼은 TText3D, TGrid3D, 기타 등등과 같은

파이어몽키 3D 개체를 포함 할 수 있습니다. 3D 폼에서 사용할 수 있는 모든 오브젝트들은 Objects3D

유니트에 있습니다.

2단계: 툴 팔레드에서, 아래 2 개의 파이어몽키 3D 컴포넌트를 추가합니다(IDE 인사이트를 사용하거나

검색 필드에서 컴포넌트 이름을 입력하고 리턴 키를 누릅니다):

TLight TCube

개의 컴포넌트를 분리합니다(TLight 컴포넌트를 폼의 왼쪽 상단으로 드래그하여). TLight의 LightType

속성은 ltDirectional, ltPoint 와 ltSpot로 지정 할 수 있습니다. LightType을 기본 값인 ltDirectional로

지정합니다. 3D 폼과 두 개의 하위 컴포넌트를 사용한 IDE는 다음과 같습니다:

3단계: 파이어몽키 폼 디자이너에서, 파이어몽키 3D 폼과 필요한 컴포넌트의 위치와 크기를

적용합니다:

Page 15: 파이어몽키 3D 애플리케이션 만들기

15

오브젝트를 이동하기 위해 간단하게 드래그-드롭합니다.

3D 컴포넌트를 회전하기 위해, 컴포넌트를 클릭할 때 나타나는 3 개의 파란색 핸들을

사용합니다. 각 핸들은 공간에서 연관된 평면에서 컴포넌트를 회전합니다(그것은 x ,y, 또는 z

정점입니다). 핸들을 클릭했을 때, 붉은색이 되는데 그 것은 활성 핸들임을 나타냅니다.

참고: 오브젝트 인스펙터에서 또한 RotationAngle 속성을 사용 할 수 있습니다(x, y, 및 z)

컴포넌트 사이즈를 조절하기 위해, 컴포넌트의 한 구석에 있는 작은 파란색 큐브인

사이즈조절 컨트롤을 사용합니다. resizer는 한 번에 하나의 면에서 작동하며 resizer는

선택된(활성화된)면에 있는 큐브의 측면에 빨간색입니다. 참고: 또한 오브젝트 인스펙터에서

속성들을 사용할 수 있습니다 (TCube의 경우, 크기 관련 속성은 Depth, Width, 및 Height).

2 단계 끝에 포함 된 그림에서, 라이트의 RotationAngle 속성을 큐브 아래로 가리키도록 설정합니다.

큐브의 크기를 크게 조정하고 왼쪽으로 회전했습니다.

4 단계: 오브젝트 인스펙터를 사용하여, TCube 컴포넌트의 속성들의 값을 설정합니다:

TCube의 색상과 질감을 지정 하려면 Material 속성을 사용합니다.

오브젝트 인스펙터에서 Material 속성 왼쪽의 플러스 기호를 클릭하여 Material의 Ambient,

Diffuse 및 Emissive 서브-속성을 지정합니다. 또한 Material 필드에서 [...] 를 클릭 하여 그래픽

소재 디자이너를 사용 할 수 있습니다.

예제에서, 큐브의 Material 속성의 Ambient, Diffuse 와 Emissive 하위-속성 색상을 각각 Blue, BlueViolet 와

DarkSlateGray로 지정하였습니다.

참고: 델파이 XE3의 경우는 LightMatierial 컴포넌트를 별도로 사용하여 Ambient, Diffuse 및 Emissive

Page 16: 파이어몽키 3D 애플리케이션 만들기

16

속성을 지정하고 Cube 컴포넌트의 Matierial 속성에 연결합니다.

5단계: 오브젝트 인스펙터에서, 폼의 Color 속성을 변경합니다. 폼의 Color 속성을 MistyRose로

지정합니다. 다음 그림에서, 파이어몽키 폼 디자이너 주변의 다양한 IDE 창들뿐만 아니라 세 핸들 두

개와 큐브 위의 resizer, 재배치 된 라이트와 큐브 컴포넌트를 볼 수 있습니다:

6단계: 프로젝트를 저장하고 F9를 눌러 윈도우에서 프로그램을 실행합니다. 윈도우에서 실행하는

프로그램은 다음과 같은 모습일 것입니다:

Page 17: 파이어몽키 3D 애플리케이션 만들기

17

7단계: 프로젝트 매니저에서 타깃 플랫폼에 OSX를 추가합니다 (맥에서 PAServer가 실행하고 있는 것을

기억하십시오). F9를 눌러 맥에서 프로그램을 실행합니다. 맥에서 실행하는 프로그램은 다음과 같은

모습일 것입니다:

윈도우 및 맥 용 첫 3D 애플리케이션을 작성했습니다. 프로젝트를 저장해야 합니다. 우리는 다음

섹션에서 프로젝트에 HD 인터페이스를 추가하기 위하여 프로젝트를 확장할 것입니다.

Page 18: 파이어몽키 3D 애플리케이션 만들기

18

Page 19: 파이어몽키 3D 애플리케이션 만들기

19

3D 애플리케이션에서 HD 인터페이스 작성

3D 애플리케이션은 버튼 또는 리스트들과 같은 HD 컴포넌트를 직접 사용 할 수 없습니다. 그렇지만

3D 와 HD 씬 사이에 브리지를 만들어 이런 문제를 간단하게 해결하는 방법이 있습니다. 파이어몽키는

이런 목적으로

TLayer3D 컴포넌트를 제공합니다. 3D 프로젝트에 TLayer3D 과 HD 컨트롤을 추가하기 위해 다음과 같은

단계들을 수행합니다.

1단계: 오브젝트 인스펙터나 스트럭처 뷰에서 선택된 폼으로, 툴 팔레트에서 TLayer3D를 더블

클릭합니다. TLayer3D 컴포넌트가 폼 위에 표시됩니다. 이제 파이어몽키 HD 컴포넌트들에 대한

표면으로 TLayer3D 컴포넌트를 사용합니다.

2단계: 폼 디자이너에서 볼 수 있듯이, TLayer3D 컴포넌트는 씬으로 다 가려집니다. HD 컨트롤을

포함하고 있는 스테이지와 레이어 모두 보이게 하기 위해 오브젝트 인스펙터에서 TLayer3D 컴포넌트의

다음 속성들을 설정합니다:

TLayer3D 의 Projection 속성을 pjScreen로 지정합니다. 화면 투영은 고정 (눈에 보이지

않는)카메라로 평면 화면 픽셀-대-픽셀 프로젝션이며 3D-절두체(frustum)의 전면은 지금 평면

화면입니다

각 오브젝트는 여전히 3D 이지만 2D처럼 조작할 수 있습니다.

Align 속성을 alRight로 Width 속성을 175로 지정합니다(다음 단계에서 TLayer3D안에 몇 개의

TButtons 을 추가할 것입니다).

3단계: 스트럭처 뷰에서 TLayer3D를 선택하고, 12개의 TButtons 을 추가하고 2개 버튼씩 6 개의 그룹을

만듭니다. 이 버튼들 중 열 개는 큐브의 높이, 너비, 깊이, 위치 및 회전을 제어하기 위해 사용합니다. 2

개의 버튼은 라이트를 제어하기 위해 사용됩니다. 폼은 다음과 같은 모습으로 보일 것입니다:

Page 20: 파이어몽키 3D 애플리케이션 만들기

20

4단계: 버튼들의 Text 와 Name 속성을 쌍으로 수정합니다:

Text: 너비 증가, Name: IncreaseWidth

Text: 너비 감소, Name: DecreaseWidth

Text: 높이 증가, Name: IncreaseHeight

Text: 높이 감소, Name: DecreaseHeight

Text: 깊이 증가, Name: IncreaseDepth

Text: 깊이 감소, Name: DecreaseDepth

Text: 라이트 끄기, Name: LightOff

Text: 라이트 켜기, Name: LightOn

Text: 왼쪽으로 이동, Name: MoveLeft

Text: 오른쪽으로 이동, Name: MoveRight

Text: 시계 방향으로 회전, Name: RotateClockwise

Text: 반 시계 방향으로 회전, Name: RotateCounterClockwise

화면이 다음과 같이 보여집니다:

Page 21: 파이어몽키 3D 애플리케이션 만들기

21

5단계: 각 버튼들의 이벤트 핸들러를 추가합니다.

각 증가 및 감소 버튼들을 더블 클릭하여 큐브의 너비, 높이 및 깊이 속성을 각 이벤트

핸들러에서 1씩 증가하고 감소합니다.

각 라이트 버튼들을 더블 클릭하여 라이트를 켜기는 Enabled 속성을 True(델파이에서) 와 1

로(C++에서) 라이트를 끄기는 False (델파이) 와 0 (C++)으로 지정합니다.

각 이동 버튼들을 더블 클릭하여 왼쪽으로 이동은 큐브의 Position.X 속성에서 1을 빼고

오른쪽으로 이동은 1을 더합니다

각 회전 버튼들을 더블 클릭하고 시계 방향으로 회전에 대해서는 RotationAngle.X 속성에서 10

(각도)값을 더하고 반 시계 방향으로 회전은 10 (각도)값을 뺍니다.

다음은 델파이와 C++ 이벤트 핸들러 코드입니다:

델파이 코드:

procedure TForm2.IncreaseWidthClick(Sender: TObject); begin Cube1.Width := Cube1.Width + 1 end; procedure TForm2.DecreaseWidthClick(Sender: TObject); begin Cube1.Width := Cube1.Width - 1; end; procedure TForm2.IncreaseHeightClick(Sender: TObject); begin Cube1.Height := Cube1.Height + 1 end; procedure TForm2.DecreaseHeightClick(Sender: TObject); begin Cube1.Height := Cube1.Height - 1 end;

Page 22: 파이어몽키 3D 애플리케이션 만들기

22

procedure TForm2.IncreaseDepthClick(Sender: TObject); begin Cube1.Depth := Cube1.Depth + 1 end; procedure TForm2.DecreaseDepthClick(Sender: TObject); begin Cube1.Depth := Cube1.Depth - 1 end; procedure TForm2.LightOffClick(Sender: TObject); begin Light1.Enabled := False end; procedure TForm2.LightOnClick(Sender: TObject); begin Light1.Enabled := True end; procedure TForm2.MoveLeftClick(Sender: TObject); begin Cube1.Position.X := Cube1.Position.X - 1 end; procedure TForm2.MoveRightClick(Sender: TObject); begin Cube1.Position.X := Cube1.Position.X + 1 end; procedure TForm2.RotateClockwiseClick(Sender: TObject); begin Cube1.RotationAngle.X := Cube1.RotationAngle.X + 10 end; procedure TForm2.RotateCounterClockwiseClick(Sender: TObject); begin Cube1.RotationAngle.X := Cube1.RotationAngle.X -10 end; C++ Code: //------------------------------------------------------- void __fastcall TForm3D2::IncreaseWidthClick(TObject *Sender) { Cube1->Width = Cube1->Width + 1; } //------------------------------------------------------- void __fastcall TForm3D2::DecreaseWidthClick(TObject *Sender) { Cube1->Width = Cube1->Width - 1; } //------------------------------------------------------- void __fastcall TForm3D2::IncreaseHeightClick(TObject *Sender) { Cube1->Height = Cube1->Height + 1; } //------------------------------------------------------- void __fastcall TForm3D2::DecreaseHeightClick(TObject *Sender) { Cube1->Height = Cube1->Height - 1;

Page 23: 파이어몽키 3D 애플리케이션 만들기

23

} //------------------------------------------------------- void __fastcall TForm3D2::IncreaseDepthClick(TObject *Sender) { Cube1->Depth = Cube1->Depth + 1; } //------------------------------------------------------- void __fastcall TForm3D2::DecreaseDepthClick(TObject *Sender) { Cube1->Depth = Cube1->Depth - 1; } //------------------------------------------------------- void __fastcall TForm3D2::LightOffClick(TObject *Sender) { Light1->Enabled = False; } //------------------------------------------------------- void __fastcall TForm3D2::LightOnClick(TObject *Sender) { Light1->Enabled = True; } //------------------------------------------------------- void __fastcall TForm3D2::MoveLeftClick(TObject *Sender) { Cube1->Position->X = Cube1->Position->X - 1; } //------------------------------------------------------- void __fastcall TForm3D2::MoveRightClick(TObject *Sender) { Cube1->Position->X = Cube1->Position->X + 1; } //------------------------------------------------------- void __fastcall TForm3D2::RotateClockwiseClick(TObject *Sender) { Cube1->RotationAngle->X = Cube1->RotationAngle->X + 10; } //------------------------------------------------------- void __fastcall TForm3D2::RotateCounterClockwiseClick( TObject *Sender) { Cube1->RotationAngle->X = Cube1->RotationAngle->X - 10; } //-------------------------------------------------------

6단계: F9를 눌러 프로젝트를 실행합니다. 증가/감소 버튼들을 클릭했을 때, 큐브의 크기가 변경됩니다.

라이트 끄기는 큐브가 빛이나 그림자가 없다는 것을 의미하며, 그래서 전체적으로 어둡습니다. 라이트

켜기 버튼을 클릭하면 빛이 다시 켜집니다. 왼쪽 이동 / 오른쪽 이동 버튼을 클릭하면, 큐브의 위치가

바뀝니다.

왼쪽 이동 버튼을 클릭합니다. 큐브가 왼쪽으로 이동합니다. 시계 방향으로 회전/ 반 시계 방향으로

회전 버튼을 클릭하면, 큐브의 회전 각도가 변경됩니다. 시계 방향으로 회전 버튼을 몇 번 클릭합니다.

큐브가 오른쪽으로 기울어집니다. 기울어질 때 빛의 효과가 큐브에 그림자를 어떻게 변경하는지

관찰합니다.

Page 24: 파이어몽키 3D 애플리케이션 만들기

24

HD 애플리케이션에 3D 카메라, 라이트 및 큐브 추가하기

윈도우와 맥 용 HD 애플리케이션이 있다면 TViewPort3D 컴포넌트를 사용하여 3D를 추가 할 수

있습니다. 다음 예제는 HD, 3D 와 여러 개의 카메라를 조합하는 방법을 보여줍니다. 씬에서 뷰포트로

씬의 관점과 오브젝트의 투영을 정의하기 위해서 TCamera 오브젝트 사용 방법에 대해서 배워

보겠습니다.

다음 단계들을 수행하여 HD 애플리케이션에 3D 컴포넌트를 추가합니다.

1단계: HD 프로젝트 시작하기

File > New > FireMonkey HD Application – Delphi 또는 File > New > FireMonkey HD Application – C++Builder를

선택하여 HD 애플리케이션을 시작합니다. 폼 디자이너에서 UI의 컨트롤 패널과 뷰 포트 두 부분을

작성합니다. 폼의 Caption 속성을 “HD 및 3D 윈도우/맥 애플리케이션”으로 지정합니다.

2단계: 컨트롤 패널 작성하기

카메라의 위치와 회전 각도에 따라 씬의 관점과 투영이 어떻게 변경되는지 관찰할 수 있도록, TCamera

컴포넌트의 속성을 변경하는 컨트롤 패널을 생성합니다.

툴 팔레트에서 TLayout 컴포넌트를 찾아 추가합니다. Align 속성을 alRight로 Width 속성을 150

로 설정합니다. Name 속성을 “ControlPanelLayout”로 지정합니다.

TLayout안에 포함되도록 TGroupBox 컴포넌트를 3개 추가합니다. 그룹 박스2와 3의 Height

속성을 120으로 지정합니다. 각 그룹박스의 Width 속성을 137로 지정합니다. 레이아웃 영역에

3 개의 그룹 박스들이 균등하게 배치됩니다.

첫 번째 그룹박스의 Text 속성을 “카메라”로 설정합니다. 첫 번째 그룹박스의 Name 속성을

“CameraGroupBox”로 설정합니다. TRadioButton 컴포넌트 3개를 첫 번째 그룹 박스에 추가하고

각 Text 속성을 “카메라1”, “카메라2” 와 “카메라3”로 지정합니다.

두 번째 그룹박스의 Text 속성을 “위치”로 설정합니다. 두 번째 그룹박스의 Name 속성을

“PositionGroupBox” 로 설정합니다. TLayout 컴포넌트 3개를 두 번째 그룹 박스에 추가합니다.

각 레이아웃의 Height 속성을 25로 Width 속성을 121로 지정합니다. TLayout 안에 TLabel 과

TTrackBar을 추가합니다. 각 레이블의 Align 속성을 alLeft로 Text 속성을 각각 “X:”, “Y:”, “Z:”로

지정합니다. 각 트랙 바의 Align 속성을 alRight로 Width 속성을 110으로 설정합니다. 각 트랙

바의 Min 속성을 -20으로 Max 속성을 20으로 설정합니다.

트랙 바의 Name 속성을 “TrackBar_PositionX”, “TrackBar_PositionY”와 “TrackBar_PositionZ”로 각각

지정합니다.

세 번째 그룹박스의 Text 속성을 “RotationAngle”로 Name 속성을 “RotationGroupBox”로

지정합니다. 세 번째 그룹박스에 TLayout 컴포넌트 개를 추가합니다. 각 레이아웃의 Height

속성을 25로 Width 속성을 121로 지정합니다. 각 레이아웃 안에 TLabel 과 TTrackBar를

추가합니다. 각 레이블의 Align 속성을 alLeft로 Text 속성을 “X:”, “Y:”, “Z:”로 지정합니다. 각

Page 25: 파이어몽키 3D 애플리케이션 만들기

25

트랙 바의 Align 속성을 alRight로 Width 속성을 110로 지정합니다. 각 트랙 바의 Min 속성을 -

90으로 Max 속성을 90으로 지정합니다. 트랙 바의 Name 속성을 각각

“TrackBar_RotationAngleX”, “TrackBar_RotationAngleY”와 TrackBar_RotationAngleZ”로 지정합니다.

TTrackBar 오브젝트의 값을 보기 위해, TLabel 컴포넌트를 RotationAngle 그룹 박스의 아래

위치에 추가합니다. 각 레이블의 Text 속성을 “X:0, Y:0, Z:0”으로 지정합니다. 레이블의 Name

속성을 “PositionLabel” 와 “RotationLabel”으로 각각 지정합니다.

HD/3D 애플리케이션의 컨트롤 패널에 대한 스트럭처 뷰와 폼 디자이너가 다음과 같이 보일 것입니다:

3단계: 뷰 포트 작성

HD 애플리케이션 안에 3D 오브젝트를 포함하기 위해 TViewPort3D 컴포넌트를 사용합니다.

툴 팔레트에서, TViewport3D 컴포넌트를 찾아 폼 위에 추가합니다. Align 속성을 alClient로

UseDesignCamera 속성을 False로 지정합니다.

선택한 ViewPort3D에, 툴 팔레트로부터, 다음과 같은 파이어몽키 3D 컴포넌트를 추가합니다:

o TCamera 컴포넌트 3 개를 추가합니다. 카메라1의 Position 속성을 -5, - 4, -7로 카메라2의

Position 속성을 5, -4, -7로 카메라3의 Position 속성을 0, 2, - 7로 지정합니다.

o TCube 컴포넌트 2개를 추가합니다. Cube1의 Material.Ambient 속성을 레드로 Material.FillMode

속성을 fmWireFrame로 지정합니다. Cube1의 Height, Width, Depth 속성을 각각 5로 지정합니다.

Page 26: 파이어몽키 3D 애플리케이션 만들기

26

Cube1의 Position 속성을 0,0,5로 지정합니다.

Cube2의 Material.Ambient 속성을 블루로 Material.FillMode 속성을 fmWireFrame로 지정합니다.

Cube2의 Height, Width, Depth 속성을 각각 3으로 지정합니다. Cube2의 Position 속성을 5, - 2,

5로 지정합니다.

o TLight 컴포넌트를 2 개 추가합니다. 모든 라이트의 LightType 속성을 ltPoint로 설정합니다.

Light1의

Position 속성을 5 -6,0로 Light2의 Position 속성을 -4,4,0로 지정합니다.

TCube 오브젝트는 뷰 포트에서 볼 수 있는 3D 개체입니다. TCamera 오브젝트는 오브젝트가 보여지는

곳에서부터 위치를 정의하기 위해 사용합니다. TLight 오브젝트는 카메라의 위치에 따라 3D 오브젝트의

빛에 영향을 줍니다.

3D 컴포넌트를 추가한 후에, 스트럭처 뷰와 폼 디자이너가 다음과 같이 보일 것입니다:

Page 27: 파이어몽키 3D 애플리케이션 만들기

27

Page 28: 파이어몽키 3D 애플리케이션 만들기

28

4단계: 이벤트 핸들러 추가하기

카메라 라디오 버튼의 OnClick 이벤트 핸들러를 작성합니다. 세 개의 위치 트랙 바의 OnChange 이벤트

핸들러 “TrackBar_PositionChange”를 추가합니다. 세 개의 회전 트랙 바의 OnChange 이벤트 핸들러

“TrackBar_RotationAngleChange”를 추가합니다”.

{ Delphi: for choosing the camera } procedure TForm2.RadioButton1Click(Sender: TObject); begin CameraChange(Camera1); end; procedure TForm2.RadioButton2Click(Sender: TObject); begin CameraChange(Camera2); end;

procedure TForm2.RadioButton3Click(Sender: TObject); begin CameraChange(Camera3); end; // Delphi code for changing the camera position procedure TForm2.TrackBar_PositionChange(Sender: TObject); begin with Viewport3D1 do begin if not FIsChangingCamera then begin Camera.Position.X := TrackBar_PositionX.Value; Camera.Position.Y := TrackBar_PositionY.Value; Camera.Position.Z := TrackBar_PositionZ.Value; Repaint; end; with Camera.Position do begin { Updating the displayed values of the coordinates } PositionLabel.Text := Format('X: %d, Y: %d, Z: %d', [Round(X), Round(Y), Round(Z)]); end; end; end; // Delphi: for changing the rotation angle of the camera procedure TForm2.TrackBar_RotationAngleChange(Sender: TObject); begin with Viewport3D1 do begin if not FIsChangingCamera then begin Camera.RotationAngle.X := TrackBar_RotationAngleX.Value; Camera.RotationAngle.Y := TrackBar_RotationAngleY.Value; Camera.RotationAngle.Z := TrackBar_RotationAngleZ.Value; Repaint; end; with Camera.RotationAngle do begin { Updating the displayed values of the coordinates } RotationLabel.Text := Format('X: %d, Y: %d, Z: %d', [Round(X), Round(Y), Round(Z)]); end; end; end; // C++ code for choosing the camera void __fastcall TForm2::RadioButton1Click(TObject *Sender) {

Page 29: 파이어몽키 3D 애플리케이션 만들기

29

CameraChange(Camera1); } //---------------------------------------------------------- void __fastcall TForm2::RadioButton2Click(TObject *Sender) { CameraChange(Camera2); } //---------------------------------------------------------- void __fastcall TForm2::RadioButton3Click(TObject *Sender) { CameraChange(Camera3); } // C++ code for changing the coordinates of the camera position void __fastcall TForm2::TrackBar_PositionChange(TObject *Sender) { if (!Form2->FIsChangingCamera) { Viewport3D1->Camera->Position->X = TrackBar_PositionX->Value; Viewport3D1->Camera->Position->Y = TrackBar_PositionY->Value; Viewport3D1->Camera->Position->Z = TrackBar_PositionZ->Value; Viewport3D1->Repaint(); } // Update the displayed values of the coordinates TVarRec vr[] = { round(Viewport3D1->Camera->Position->X), round(Viewport3D1->Camera->Position->Y), round(Viewport3D1->Camera->Position->Z) }; PositionLabel->Text = Format("X: %d, Y: %d, Z: %d",vr,3);

}

// C++ code for changing the rotation angle of the camera void __fastcall TForm2::TrackBar_RotationAngleChange( TObject *Sender) { if (!Form2->FIsChangingCamera) { Viewport3D1->Camera->RotationAngle->X = TrackBar_RotationAngleX->Value; Viewport3D1->Camera->RotationAngle->Y = TrackBar_RotationAngleY->Value; Viewport3D1->Camera->RotationAngle->Z = TrackBar_RotationAngleZ->Value; Viewport3D1->Repaint(); } // Update the displayed values of the coordinates TVarRec vr[] = { round(Viewport3D1->Camera->RotationAngle->X), round(Viewport3D1->Camera->RotationAngle->Y), round(Viewport3D1->Camera->RotationAngle->Z) }; RotationLabel->Text = Format("X: %d, Y: %d, Z: %d",vr,3);

}

5단계: Private 변수와 프로시저 추가

변수 FIsChangingCamera 와 프로시저 CameraChange를 다음과 같이 폼 선언 부의 private 섹션에

추가합니다.

private 불린 형 변수 FIsChangingCamera는 프로그램에서 버튼 클릭 이벤트 핸들러가 TrackBar 이벤트

핸들러를 유지하기 위해 camera 속성을 업데이트하고 동시에 카메라를 업데이트하려고 하는지

Page 30: 파이어몽키 3D 애플리케이션 만들기

30

알려줍니다.

// Delphi code for the form class declaration private { Private declarations } FIsChangingCamera : boolean; procedure CameraChange(Sender:TObject); // C++ code for the form class declaration private: // User declarations bool FIsChangingCamera; void CameraChange(TObject *Sender);

CameraChange 프로시저는 한 개의 카메라 속성이 변경되면 세 개의 카메라 모두에 제공되도록 하는

메소드 입니다. CameraChange 메소드에 대한 구현부분입니다:

// Delphi code for the CameraChange method implementation procedure TForm2.CameraChange(Sender: TObject); begin with Viewport3D1 do begin FIsChangingCamera := True; try Camera := Sender as TCamera; TrackBar_PositionX.Value := Camera.Position.X; TrackBar_PositionY.Value := Camera.Position.Y; TrackBar_PositionZ.Value := Camera.Position.Z; Repaint; finally FIsChangingCamera := False; end; end; end;

// C++ code for the CameraChange method implementation void TForm2::CameraChange(TObject *Sender) { FIsChangingCamera = True; try { Viewport3D1->Camera = dynamic_cast<TCamera*>(Sender); TrackBar_PositionX->Value = Viewport3D1->Camera->Position->X; TrackBar_PositionY->Value = Viewport3D1->Camera->Position->Y; TrackBar_PositionZ->Value = Viewport3D1->Camera->Position->Z; Viewport3D1->Repaint(); } __finally { FIsChangingCamera = False; } }

C++ 에서 또한 위치와 회전 레이블을 위해 반올림을 구현한 헬퍼 함수가 있습니다.

메인 소스 코드에 다음과 같이 추가합니다:

// C++ code for rounding values for the //position and rotation label int round(float a) { if (a < 0) return int(a - 0.5); else return int(a + 0.5);

Page 31: 파이어몽키 3D 애플리케이션 만들기

31

}

6단계: 프로그램 실행

F9를 눌러 프로그램을 실행하고 카메라 선택, 위치 트랙 바, 회전 각도 트랙 바를 추적 할 수 있습니다.

3D 파이어몽키 애플리케이션에서 폰트 사용

HD 컴포넌트를 사용하거나 TText3D 컴포넌트를 사용하여 3D 애플리케이션에서 폰트를 사용할 수

있습니다. 다음의 간단한 예제는 TText3D를 사용합니다.

http://docwiki.embarcadero.com/CodeExamples/en/FMXTFont_(Delphi)

아래 주소의 RAD Studio 샘플 프로젝트에서 전체 3D 텍스트 예제를 보실 수 있습니다

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/trunk/FireMonkey/3DTextEditor/

이 예제는 비디오로도 되어있습니다. http://www.youtube.com/watch?v=VIRQrlKQi2M.

TMesh 와 TCustomMesh TMesh는 3D 애플리케이션에서 사용되는 3D 와이어 프레임(메쉬)을 나타냅니다. TMesh 클래스는

오브젝트 인스펙터를 통해 IDE 내에서 디자인 시에 3D 와이어프레임을 사용할 수 있도록 하기 위해,

조상 클래스인, TCustomMesh에서 받은 속성들을 표시합니다. 코드에서 실행 시점에 TMesh 오브젝트를

생성하고 사용할 수 있습니다.

TCustomMesh는 또한 다른 3D 형태의 기본 골격으로 사용됩니다. TCustomMesh은 TCube, TPlane, TDisk,

TSphere, TCylinder, TRoundCube 및 TCone와 같은 비 압출 3D 형상에 대한 기본 클래스입니다:

앤더스 올슨은 윈도우, 맥에서 델파이와 C+ + 을 사용하여 3D 연산 및 웨이브 시각화를 위해 TMesh를

사용하는 방법을 보여주는 몇 가지 EDN 기사를 작성했습니다.

파이어몽키와 델파이를 사용하여 사용자 정의 메쉬를 생성하여 수학 함수를 시각화 -

http://edn.embarcadero.com/article/42007

파이어몽키와 C++을 사용하여 사용자 정의 메쉬를 생성하여 수학 함수를 시각화 -

http://edn.embarcadero.com/article/42114

파이어몽키와 델파이를 사용하여 웨이브 참조 시각화 -

http://edn.embarcadero.com/article/42012

파이어몽키와 C++을 사용하여 웨이브 참조 시각화 -

http://edn.embarcadero.com/article/42115

각 프로젝트의 소스 코드는 CodeCentral의 EDN에서 사용할 수 있습니다. 각 기사에 포함 된 링크를

사용하십시오.

TMesh로 3D Studio(3DS) 파일을 가져 오는 방법을 보여주는 델파이 예제가 있습니다.

C:\Users\Public\Documents\RAD Studio\9.0\Samples\FireMonkey\import3ds.

Page 32: 파이어몽키 3D 애플리케이션 만들기

32

TModel3D

TModel3D는 여러 업계 표준 3D 모델 형식을 로드 하기 위해 RAD Studio에 포함 된 컴포넌트입니다.

TModel3D에서 MeshCollection 속성은 와이어프레임의 모음으로 구성된 일반적인 3D 모델을 지원합니다.

TModel3D 컴포넌트는 세 개의 지원되는 3D 모델 포맷: DAE, OBJ 및 ASE중 하나를 로드 합니다.

DAE – COLLADA 3D 모델 파일 포맷

OBJ – Wavefront 3D 모델 파일 포맷

ASE – ASCII 텍스트 포맷으로 ASCII 씬 익스포트 3D 모델 파일

엠바카데로 DocWiki 에서 델파이 도는 C++ 3D TModel3D 애플리케이션 작성을 하기 위한 절차를 보실

수 있습니다:

http://docwiki.embarcadero.com/RADStudio/en/Importing_a_3D_Model_in_a_FireMonkey_Application http://docwiki.embarcadero.com/RADStudio/XE2/en/Applying_Simple_Customizations_to_an_Imported_

3D_Model

설치된

샘플디렉터리에서(C:\Users\Public\Documents\RADStudio\9.0\Samples\FireMonkey\COLLADAModelViewe

r\projects\Model Viewer\src)

TModel3D를 사용하는 모델 보기 델파이 예제를 보실 수 있습니다

Page 33: 파이어몽키 3D 애플리케이션 만들기

33

요약, 전망, 해야 할 일, 참고자료

7 장에서 윈도우와 맥에서 3D 애플리케이션 작성 방법에 대해 배웠습니다. TViewPort3D를 사용하여 3D

컴포넌트를 포함하는 멋진 모습의 3D/ HD 애플리케이션을 작성하기 위해 TCamera, TLight, TMesh 및

TModel3D 등을 포함한 다양한 컴포넌트들에 대해서 배웠습니다.

8장에서는, 애플리케이션에 시각적인 화려함을 추가하기 위해 파이어몽키의 효과 및 애니메이션

컴포넌트의 사용 방법에 대해 배워 보겠습니다.

한편 7장에서 배운 내용을 복습하고 8장을 준비하기 위해 몇 가지 읽어야 할 기사와 시청해야 할

비디오들이 있습니다.

해야 할 일

RAD Studio에 포함되어있는 3D 예제 애플리케이션을 살펴보십시오. 연산 시각화 및 웨이브 상호 작용에

대한 앤더스 올슨의 파이어몽키 3D 관련 기사를 살펴보십시오.

참고 자료 링크

코스 시작하기 방문 페이지 -

http://www.embarcadero.com/firemonkey/firemonkey-e-learning-series

파이어몽키 애플리케이션 플랫폼-

http://docwiki.embarcadero.com/RADStudio/en/FireMonkey_Application_Platform

파이어몽키 3D 기초 - http://docwiki.embarcadero.com/RADStudio/en/FireMonkey_3D

델파이:

RAD Studio 델파이 샘플 프로그램 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/FireMonkey/

델파이를 이용한 윈도우와 맥 용 파이어몽키 3D 텍스트 편집기 작성 -

http://www.youtube.com/watch?v=VIRQrlKQi2M

파이어몽키 3D FireFlow C++ 데모 - C:\Users\Public\Documents\RAD

Studio\9.0\Samples\FireMonkey\FireFlow

파이어몽키 3D 애니메이션 C++ 데모 –

C:\Users\Public\Documents\RAD Studio\9.0\Samples\FireMonkey\AnimationDemo3

3D 텍스트 데모 -

Page 34: 파이어몽키 3D 애플리케이션 만들기

34

BizFlow – 파이어몽키 3D 레코드 보기 - http://www.youtube.com/watch?v=TbIgGRWGA-I

파이어몽키 3D 애플리케이션 쉐이더 “파이어몽키 Dathox 데모” -

http://edn.embarcadero.com/article/41874

파이어몽키를 사용한 시각화 물리- http://edn.embarcadero.com/article/42020

파이어몽키에서 동적으로 3D 씬 생성 -

http://members.adug.org.au/2012/01/02/creating-3d-scenes-dynamically-in-firemonkey/

C++:

RAD Studio C++ 샘플 프로그램 -

http://radstudiodemos.svn.sourceforge.net/viewvc/radstudiodemos/branches/RadStudio_XE2/CPP/FireMonkey/

파이어몽키 3D FireFlow C++ 데모 –

C:\Users\Public\Documents\RAD Studio\9.0\Samples\CPP\FireMonkey\FireFlow

파이어몽키 3D 애니메이션 C++ 데모 –

C:\Users\Public\Documents\RAD Studio\9.0\Samples\CPP\FireMonkey\AnimationDemo3D

이 장은 “윈도우와 맥 개발의 시작을 위한 파이어몽키 코스북”의 7장 내용 전체입니다.

코스북 전체를 PDF로 다운로드 받을 수 있습니다: http://tech.devgear.co.kr/13556