39
전전전 HOONS 전전 WPF 전전 crynut84.tistory.com WPF 3D 기기기기 기기기기 .. 전전전 HOONS 전전 WPF 전전 dklee.net

Wpf3 D 기초부터 활용까지

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Wpf3 D 기초부터 활용까지

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

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

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

Page 2: Wpf3 D 기초부터 활용까지

진행순서

2

3

4

WPF 3D 배경 / Show Case1

WPF 3D 기초 개념

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

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

Page 3: Wpf3 D 기초부터 활용까지

WPF 3D 배경 / Show case

Page 4: Wpf3 D 기초부터 활용까지

전통적인 3D 프로그래밍

Page 5: Wpf3 D 기초부터 활용까지

WPF 3D 등장

WPF 에서 3D API 지원

Page 6: Wpf3 D 기초부터 활용까지

British Library

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

Page 7: Wpf3 D 기초부터 활용까지

You Cube

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

Page 8: Wpf3 D 기초부터 활용까지

Augmented Reality(AR : 증강현실 )

http://shine10e.textcube.com

Page 9: Wpf3 D 기초부터 활용까지

WPF 3D 기초 개념

카메라 , 조명 , 메쉬

Page 11: Wpf3 D 기초부터 활용까지

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

Page 12: Wpf3 D 기초부터 활용까지

ViewPort3D

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

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

• System.Windows.Controls

• 카메라 , 광원 , 모델

Page 13: Wpf3 D 기초부터 활용까지

Camera

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

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

-OrthographicCamera- -PerspectiveCamera-

Page 14: Wpf3 D 기초부터 활용까지

Camera – WPF3D 좌표

Page 15: Wpf3 D 기초부터 활용까지

Camera – PerspectiveCamera

Position

LookDirection

UpDirection

FieldOfView

카메라가 가리키는 방향

카메라의 배치

카메라의 앵글

Camera 의 위치 지정

Page 16: Wpf3 D 기초부터 활용까지

Camera – PerspectiveCamera

Position

Camera 의 위치 지정

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

Page 17: Wpf3 D 기초부터 활용까지

Camera – PerspectiveCamera

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

LookDirection

카메라가 가리키는 방향

Page 18: Wpf3 D 기초부터 활용까지

Camera – PerspectiveCamera

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

UpDirection

카메라의 배치

Page 19: Wpf3 D 기초부터 활용까지

Camera – PerspectiveCamera

65 45 25

FieldOfView

카메라의 앵글

Page 20: Wpf3 D 기초부터 활용까지

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

Page 21: Wpf3 D 기초부터 활용까지

Model

Model

Triangle

Page 22: Wpf3 D 기초부터 활용까지

Model – MeshGeometry3D

Position

TriangleIndices

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

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

Page 23: Wpf3 D 기초부터 활용까지

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” />

Page 24: Wpf3 D 기초부터 활용까지

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” />

Page 25: Wpf3 D 기초부터 활용까지

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)

Page 26: Wpf3 D 기초부터 활용까지

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)

반시계 방향

반시

계 방

Page 27: Wpf3 D 기초부터 활용까지

Model – Meterial( 재질 )

• DiffuseMaterial Class

• 윤기 없는 표면

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

• 2D 의 Brush 사용

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

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

Page 28: Wpf3 D 기초부터 활용까지

Camera Visual3D

PerspectiveCamera

Orthographic

Camera

Model Visual3D

Model3D Visual3DCollection

GeometryModel3D

Light

Directional

Light

AmbientLight

Geometry3D

Material

RotateTransform3D

AxisAngleRotation3

D

DiffuseMaterial

ImageBrush

ViewPort3D

메모리 트리 !Mesh

Geometry3D

Page 29: Wpf3 D 기초부터 활용까지

Light

AmbientLight

가장 간단한 광원

위치와 방향에 관계 없음

Color 속성

DirectionalLight

자연스러운 조명

태양과 같은 원거리

Color 속성

Direction 속성

Page 30: Wpf3 D 기초부터 활용까지

DEMO

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

Page 31: Wpf3 D 기초부터 활용까지

WPF 3D 의 활용

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

Page 32: Wpf3 D 기초부터 활용까지

YUNA CUBE 만들기 !

큐브 회전 텍스쳐 2D 요소

Page 33: Wpf3 D 기초부터 활용까지

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

Page 34: Wpf3 D 기초부터 활용까지

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

3DTools)

3D Tools?-Trackball-ScreenSpaceLines3D…

http://3dtools.codeplex.com

Page 35: Wpf3 D 기초부터 활용까지

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

Page 36: Wpf3 D 기초부터 활용까지

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

Page 37: Wpf3 D 기초부터 활용까지

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

Page 38: Wpf3 D 기초부터 활용까지

WPF 3D with ZAM3D

Page 39: Wpf3 D 기초부터 활용까지

Q & A

Thank You