wpf3 d 기초부터 활용까지

전호진 HOONS 닷넷 WPF 시삽crynut84.tistory.com

WPF 3D 기초부터 활용까지 ..

이동규HOONS 닷넷 WPF 시삽dklee.net

진행순서

2

3

4

WPF 3D 배경 / Show Case1

WPF 3D 기초 개념

예제로 알아보는 WPF 3D 활용

3D 삼각형 만들기 ( 라이브 코딩 )

WPF 3D 배경 / Show case

전통적인 3D 프로그래밍

WPF 3D 등장

WPF 에서 3D API 지원

British Library

http://ttpdownload.bl.uk/app_files/xbap/BrowserApp.xbap

You Cube

http://www.chriscavanagh.com/chris/WPFBrowser/pub-lish.htm

Augmented Reality(AR : 증강현실 )

http://shine10e.textcube.com

WPF 3D 기초 개념

카메라 , 조명 , 메쉬

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

ViewPort3D

•2D 와 3D 사이의 매개체

• 일반적인 컨트롤 레이아웃과 동일

• System.Windows.Controls

• 카메라 , 광원 , 모델

Camera

3D 모델을 보는 눈과 같은기능 3D 모델이 2D 로 변환되는 방법 결정 PerspectiveCamera 는 실생활에서

사물을 보는 것과 동일한 효과

-OrthographicCamera- -PerspectiveCamera-

Camera – WPF3D 좌표

Camera – PerspectiveCamera

Position

LookDirection

UpDirection

FieldOfView

카메라가 가리키는 방향

카메라의 배치

카메라의 앵글

Camera 의 위치 지정

Camera – PerspectiveCamera

Position

Camera 의 위치 지정

0, 0, 4 -1, 0, 4 1, 0, 4

Camera – PerspectiveCamera

-0.33, 0, -1 -1, 0, 0 0.33, 0, 1

LookDirection

카메라가 가리키는 방향

Camera – PerspectiveCamera

-0.5, 1, 0 0, 1, 0 0.5, 1, 0

UpDirection

카메라의 배치

Camera – PerspectiveCamera

65 45 25

FieldOfView

카메라의 앵글

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

Model

Model

Triangle

Model – MeshGeometry3D

Position

TriangleIndices

일련의 점들을 정의 최소한 3 개의 값 Mesh 의 순서 필요

Position 의 인덱스 삼각형의 구성 방법

Model – MeshGeometry3D

Z-

X-

Y+

Z+

Y-

X+

1

2

-4

-3

-2

-1

0

-1

-2

-3

<MeshGeometry3D Position=“0 1 -4, 0 0 -4, 0 1 0, 0 0 0” TriangleIndices=“0 1 2, 1 3 2” />

Model – MeshGeometry3D

Z-

X-

Y+

Z+

Y-

X+

1

2

-4

-3

-2

-1

0

-1

-2

-3

<MeshGeometry3D Position=“0 1 -4, 0 0 -4, 0 1 0, 0 0 0” TriangleIndices=“0 1 2, 1 3 2” />

Model – MeshGeometry3D

Z-

X-

Y+

Z+

Y-

X+

1

2

-4

-3

-2

-1

0

-1

-2

-3

<MeshGeometry3D Position=“0 1 -4, 0 0 -4, 0 1 0, 0 0 0” TriangleIndices=“0 1 2, 1 3 2” />

(0, 1, -4)

(0, 0, -4)

(0, 1, 0)

(0, 0, 0)

Model – MeshGeometry3D

Z-

X-

Y+

Z+

Y-

X+

1

2

-4

-3

-2

-1

0

-1

-2

-3

<MeshGeometry3D Position=“0 1 -4, 0 0 -4, 0 1 0, 0 0 0” TriangleIndices=“0 1 2, 1 3 2” />

(0, 1, -4)

(0, 0, -4)

(0, 1, 0)

(0, 0, 0)

반시계 방향

반시

계 방

향

Model – Meterial( 재질 )

• DiffuseMaterial Class

• 윤기 없는 표면

• 광원 ( 빛 ) 에 따라 밝기 결정

• 2D 의 Brush 사용

• 단색 , 그라데이션 , 비트맵 , 드로잉 , Visual

• 앞면과 뒷면의 재질을 다르게 정의 가능

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

Light

AmbientLight

가장 간단한 광원

위치와 방향에 관계 없음

Color 속성

DirectionalLight

자연스러운 조명

태양과 같은 원거리

Color 속성

Direction 속성

DEMO

간단한 삼각형 그리기 예제로 알아보는 WPF3D 의 기본 개념

WPF 3D 의 활용

• 연아 큐브 만들기 !• 3rd Party Tools• ZAM3D 의 활용

YUNA CUBE 만들기 !

큐브 회전 텍스쳐 2D 요소

YUNA CUBE 만들기 (1/4)• 큐브 추가

YUNA CUBE 만들기 (2/4)• 슬라이드 - 축회전• 마우스 - 트랙볼 회전 (using

3DTools)

3D Tools?-Trackball-ScreenSpaceLines3D…

http://3dtools.codeplex.com

YUNA CUBE 만들기 (3/4)• 텍스쳐 ( 연아 입히기 +_+)

YUNA CUBE 만들기 (4/4)• 2D 요소 삽입

WPF 3D + TOOLS• 3rd Party Tools• ZAM 3D• Blender• Maya• LightWave• 3DS MAX

WPF 3D with ZAM3D

Q & A

Thank You