[0602 박민근] direct2 d

133
차차차 2D 차차차차 차차차차차 Direct2D VS 2010 차차 차차차차 (http ://vsts2010.net ) 2011.06.02 차차차

Transcript of [0602 박민근] direct2 d

Page 1: [0602 박민근] direct2 d

차세대 2D 그래픽스 라이브러리

Direct2DVS 2010 공식 팀블로그(http://vsts2010.net)

2011.06.02

박민근

Page 2: [0602 박민근] direct2 d
Page 3: [0602 박민근] direct2 d

Direct2D 란 ?

Windows7 을 위한 새로운 2D 그래픽스 API

GDI,GDI+ 를 대체하는 차세대 그래픽스 API

Page 4: [0602 박민근] direct2 d

High Performance

하드웨어 가속 지원 (immedate-mode)

Page 5: [0602 박민근] direct2 d

High Quality

Per-Primitive AntialiasingClearType Text

Page 6: [0602 박민근] direct2 d

DEMO

Page 7: [0602 박민근] direct2 d

GDI vs Direct2D

http://zoome.jp/pcuser/diary/14

Page 8: [0602 박민근] direct2 d

Direct 2D & Direct3D

http://www.youtube.com/watch?v=-879yxtHLRI

Page 9: [0602 박민근] direct2 d

가능한 것들

2D 도형들 (Line, 도형 , Curve 등 )비트맵 ( 거의 모든 포맷 ,JPG,PNG 등 )텍스트 ( 텍스트 변형 , 회전 )

Page 10: [0602 박민근] direct2 d

기존 API 와 상호 운영 가능

GDI, GDI+Direct3DMFC 호환(VS 2010 SP1)

Page 11: [0602 박민근] direct2 d

Direct2D 아키텍쳐 레이어

Page 12: [0602 박민근] direct2 d

C, C++ 에서 사용이 기본

Windows API Pack for .NET Frame-work 를 이용하면 .NET 에서도 사용은 가능

Native Code 기반

Page 13: [0602 박민근] direct2 d

사용 대상

대규모 Native 어플리케이션 개발자

컨트롤 툴킷 및 라이브러리 개발자

Server-Side 2D 그래픽 렌더링이 필요한 개발자

Direct3D 를 사용하면서 , 간단하고 고성능의 2D 도형과 텍스트를 이용한 메뉴나 UI, HUD 등을 개발하는 개발자

Page 14: [0602 박민근] direct2 d

요구 사항

Windows SDK 에 포함되어 있음

윈도우 7, 윈도우 비스타 SP2 이상

DirectX 10.1 이상

Page 15: [0602 박민근] direct2 d

Why Direct2D?

Page 16: [0602 박민근] direct2 d

게임 개발시 2D 그래픽 라이브러리의

필요성

Page 17: [0602 박민근] direct2 d

컷신 연출툴

마테리얼 개발툴

퀘스트 툴

각종 게임 개발툴

Page 18: [0602 박민근] direct2 d
Page 19: [0602 박민근] direct2 d

그럼 기존에는 ?

Page 20: [0602 박민근] direct2 d

구현이 간단함

2D 그래픽이 필요한 툴에서만 사용 가능하다

하드웨어 가속이 지원되지 않는다

게임에서는 사용 불가능하다 – Direct3D 와 연동이 안됨

GDI, GDI+ 사용

Page 21: [0602 박민근] direct2 d

Direct3D 사용

그래픽 속도가 필요한 경우

배보다 배꼽이 더크다

Page 22: [0602 박민근] direct2 d

하드웨어 가속 지원

구현이 상당히 편하고 , 간단하다

하지만 , .NET 전용

게임 (C++) 에서는 당연히 사용 불가

WPF(Windows Presenta-tion Foundation) 사용

Page 23: [0602 박민근] direct2 d

그래서… Direct2D 는 ?

Page 24: [0602 박민근] direct2 d

AntiAliasing 지원 – 예쁘게

나온다

Direct3D 와 같이 사용 가능

게임내에서도 사용 가능

하드웨어 가속 지원

Page 25: [0602 박민근] direct2 d

- Direct3D 보다는 간결함- GDI 보다는 조금 복잡함

기능이 많지 않으며 , 간단해서 쉽게 익힐 수 있음

사용하기 위한 코드가 간단하다

Page 26: [0602 박민근] direct2 d

활용 방향

Page 27: [0602 박민근] direct2 d

이미 IE9, Firefox, 크롬에서는 사용중

하드웨어 가속 웹 렌더링에서 사용 (HTML5)

Page 28: [0602 박민근] direct2 d

게임 UI 라이브러리로 사용하는 건 무리

요구 사항Window7 이상DirectX 10.1 이상

Page 29: [0602 박민근] direct2 d

게임 개발 툴에서 활용 가능성

2D 그래픽으로만 이루어진 개발툴이 의외로 많다- 이걸 위해서 Direct3D 를 사용하는 건 무리

2D 도형을 이용한 개발툴의 기능이 필요하다

Page 30: [0602 박민근] direct2 d

샘플 프로젝트에서 활용

시각화 샘플 프로젝트

알고리즘 시각화 프로젝트

간단한 2D 게임 만들기

Page 31: [0602 박민근] direct2 d

Direct2D 시작하기

Page 32: [0602 박민근] direct2 d

Illustration of two rectangles on a grid background

Page 33: [0602 박민근] direct2 d

1. 헤더 파일 추가

Page 34: [0602 박민근] direct2 d

2. 관련 객체 변수 선언

Page 35: [0602 박민근] direct2 d

2. Direct2D Factory 생성

Page 36: [0602 박민근] direct2 d

3. 렌더타겟 생성

Page 37: [0602 박민근] direct2 d

4. 컬러 브러쉬 생성

Page 38: [0602 박민근] direct2 d

4. 렌더 타겟 준비

Page 39: [0602 박민근] direct2 d

5. 배경 그리드 렌더링

Page 40: [0602 박민근] direct2 d

6. 사각형 렌더링

Page 41: [0602 박민근] direct2 d

7. 렌더타겟 완료

Page 42: [0602 박민근] direct2 d

VS 2010 SP1 에는 MFC 에 다 통합되어 있다 !!

위 작업들 할 필요 없음 !http://msdn.microsoft.com/ko-kr/library/gg482848.aspx

Page 43: [0602 박민근] direct2 d
Page 44: [0602 박민근] direct2 d

Direct2D 의 여러 기능들

Page 45: [0602 박민근] direct2 d

Advanced Path Geometries Example

http://msdn.microsoft.com/en-us/library/ee461072(v=VS.85).aspx

Illustration of a river, mountains, and the sun

Page 46: [0602 박민근] direct2 d

Geometries Example

Illustration of several simple and path geometries

Illustration of several simple and path geometries

http://msdn.microsoft.com/en-us/library/ee329938(v=VS.85).aspx

Page 47: [0602 박민근] direct2 d

Brush Types Example

Illustration of solid color brush, linear gradi-ent brush, radial gradient brush, and bitmap brush

http://msdn.microsoft.com/en-us/library/dd799414(v=VS.85).aspx

Page 48: [0602 박민근] direct2 d

Clip with Axis Aligned Rectangle Example

Illustration of a goldfish and a clipped region of the goldfish

http://msdn.microsoft.com/en-us/library/dd756624(v=VS.85).aspx

Page 49: [0602 박민근] direct2 d

Clip with a Bitmap Mask Example

Illustration of a goldfish and a clipped region of the goldfish by using a bitmap mask

http://msdn.microsoft.com/en-us/library/dd756625(v=VS.85).aspx

Page 50: [0602 박민근] direct2 d

Clip with Layers Example

Illustration of a goldfish and a clipped region of the goldfish by using layers

http://msdn.microsoft.com/en-us/library/dd756626(v=VS.85).aspx

Page 51: [0602 박민근] direct2 d

Combine Geometries Example

Illustration of two geometries and the resulting geometry af-ter various combination operations

http://msdn.microsoft.com/en-us/library/dd370923(v=VS.85).aspx

Page 52: [0602 박민근] direct2 d

Create Geometry Groups Example

Illustration of composite geometry groups with the two fill modes

http://msdn.microsoft.com/en-us/library/dd756627(v=VS.85).aspx

Page 53: [0602 박민근] direct2 d

Draw Bitmap With Extend Mode Example

Illustration of various effects of extend modehttp://msdn.microsoft.com/en-us/libra

ry/dd940315(v=VS.85).aspx

Page 54: [0602 박민근] direct2 d

Layers with Parameters Example

Illustrations of three bitmaps and the resulting images after con-tent bounds, opacity masks, or geometric masks are applied to them

http://msdn.microsoft.com/en-us/library/ee329942(v=VS.85).aspx

Page 55: [0602 박민근] direct2 d

Multiple Transforms Example

Diagram of a square being rotated and then trans-lated

http://msdn.microsoft.com/en-us/library/dd799446(v=VS.85).aspx

Page 56: [0602 박민근] direct2 d

Opacity Masks Example

Illustration of three bitmaps with different opacity masks applied to them

http://msdn.microsoft.com/en-us/library/dd372307(v=VS.85).aspx

Page 57: [0602 박민근] direct2 d

Stroke Style Example

Illustration of line join styles (miter line join, round line join, bevel line join, and miter or bevel line join)

http://msdn.microsoft.com/en-us/library/dd317107(v=VS.85).aspx

Page 58: [0602 박민근] direct2 d

Direct2D & Direct3D 같이 사용하기

Page 59: [0602 박민근] direct2 d
Page 60: [0602 박민근] direct2 d

Direct3D 10.1 버전 이상부터 Direct2D 와 같이 사용이 가능하다

• 2D 화면을 3D 화면의 백그라운드 이미지로 사용하거나

• 2D 화면을 3D 오브젝트의 텍스쳐로 사용하거나

• 2D 텍스트를 3D 화면에 표시하거나

• 2D 오브젝트로 3D 게임의 UI 로 사용하거나

Page 61: [0602 박민근] direct2 d

DXGI 를 통해서 서로 사용이 가능하다

• IDXGISurface, ID2D1RenderTarget 을 이용하여 Direct2D 컨텐츠를 Direct3D 서페이스에 Direct2D 컨텐츠를 렌더링할 수 있다 .

• IDXGISurface 에서 CreateShaderBitmap을 사용하여 ID2D1Bitmap 을 생성하여 , Di-rect3D 의 씬을 거기에 Direct2D 로 렌더링 할 수 있다 .

Page 62: [0602 박민근] direct2 d

자세한 내용은 DX10.1 이상의 아키텍쳐를 이해해고 있어야 하기 때문에 , 생략… .

MSDN 에 자세한 설명과 , 샘플 코드가 있습니다 .

Direct2D and Direct3D Interoperability Overview

Page 63: [0602 박민근] direct2 d

결론

Page 64: [0602 박민근] direct2 d

GDI, GDI+ 를 대체하는 최신의 2D 그래픽스 라이브러리

Page 65: [0602 박민근] direct2 d

C++ 로 만들어야 하는 게임 개발툴에서 유용할 듯

- 셰이더 에디터 , 마테리얼 에디터 , 컷신 연출툴

Page 66: [0602 박민근] direct2 d

2D 프로토 타입 or 2D 게임 개발시 유용할 듯

Page 67: [0602 박민근] direct2 d

상용 게임의 UI 에 적용하는 것은 무리

- 요구 사항 제한

Page 69: [0602 박민근] direct2 d

Direct2D 란 ?

Windows7 을 위한 새로운 2D 그래픽스 API

GDI,GDI+ 를 대체하는 차세대 그래픽스 API

Page 70: [0602 박민근] direct2 d

High Performance

하드웨어 가속 지원 (immedate-mode)

Page 71: [0602 박민근] direct2 d

High Quality

Per-Primitive AntialiasingClearType Text

Page 72: [0602 박민근] direct2 d

DEMO

Page 73: [0602 박민근] direct2 d

GDI vs Direct2D

http://zoome.jp/pcuser/diary/14

Page 74: [0602 박민근] direct2 d

Direct 2D & Direct3D

http://www.youtube.com/watch?v=-879yxtHLRI

Page 75: [0602 박민근] direct2 d

가능한 것들

2D 도형들 (Line, 도형 , Curve 등 )비트맵 텍스트 ( 텍스트 변형 , 회전 )

Page 76: [0602 박민근] direct2 d

기존 API 와 상호 운영 가능

GDI, GDI+Direct3D

Page 77: [0602 박민근] direct2 d

Direct2D 아키텍쳐 레이어

Page 78: [0602 박민근] direct2 d

C, C++ 에서 사용이 기본

Windows API Pack for .NET Framework 를 이용하면NET 에서도 사용은 가능

Native Code 기반

Page 79: [0602 박민근] direct2 d

사용 대상대규모 Native 어플리케이션 개발자

컨트롤 툴킷 및 라이브러리 개발자

Server-Side 2D 그래픽 렌더링이 필요한 개발자

Direct3D 를 사용하면서 , 간단하고 고성능의 2D 도형과 텍스트를 이용한 메뉴나 UI, HUD 등을 개발하는 개발자

Page 80: [0602 박민근] direct2 d

요구 사항

Windows SDK 에 포함되어 있음

윈도우 7, 윈도우 비스타 SP2 이상

DirectX 10.1 이상

Page 81: [0602 박민근] direct2 d

Why Direct2D?

Page 82: [0602 박민근] direct2 d

게임 개발시 2D 그래픽 라이브러리의

필요성

Page 83: [0602 박민근] direct2 d

컷신 연출툴

마테리얼 개발툴

퀘스트 툴

각종 게임 개발툴

Page 84: [0602 박민근] direct2 d

게임 UI, HUD

Page 85: [0602 박민근] direct2 d

그럼 기존에는 ?

Page 86: [0602 박민근] direct2 d

구현이 간단함

2D 그래픽이 필요한 툴에서만 사용 가능하다

하드웨어 가속이 지원되지 않는다

게임에서는 사용 불가능하다 – Direct3D 와 연동이 안됨

GDI, GDI+ 사용

Page 87: [0602 박민근] direct2 d

Direct3D 사용

그래픽 속도가 필요한 경우

배보다 배꼽이 더크다

Page 88: [0602 박민근] direct2 d

하드웨어 가속 지원

구현이 상당히 편하고 , 간단하다

하지만 , .NET 전용

게임에서는 당연히 사용 불가

WPF(Windows Presentation Foun-dation) 사용

Page 89: [0602 박민근] direct2 d

그래서… Direct2D 는 ?

Page 90: [0602 박민근] direct2 d

AntiAliasing 지원 – 예쁘게

나온다

Direct3D 와 같이 사용 가능

게임내에서도 사용 가능

하드웨어 가속 지원

Page 91: [0602 박민근] direct2 d

- Direct3D 보다는 간결함- GDI 보다는 조금 복잡함

기능이 많지 않으며 , 간단해서 쉽게 익힐 수 있음

사용하기 위한 코드가 간단하다

Page 92: [0602 박민근] direct2 d

활용 방향

Page 93: [0602 박민근] direct2 d

이미 IE9, Firefox, 크롬에서는 사용중

하드웨어 가속 웹 렌더링에서 사용 (HTML5)

Page 94: [0602 박민근] direct2 d

게임 UI 라이브러리로 사용하는 건 무리

요구 사항Window7 이상DirectX 10.1 이상

Page 95: [0602 박민근] direct2 d

게임 개발 툴에서 활용 가능성

2D 그래픽으로만 이루어진 개발툴이 의외로 많다- 이걸 위해서 Direct3D 를 사용하는 건 무리

2D 도형을 이용한 툴의 기능이 필요하다

Page 96: [0602 박민근] direct2 d

샘플 프로젝트에서 활용

스터디용 샘플 프로젝트

알고리즘 시각화 프로젝트

간단한 게임 만들기 - 해보리

Page 97: [0602 박민근] direct2 d

Direct2D 시작하기

Page 98: [0602 박민근] direct2 d

Illustration of two rectangles on a grid background

Page 99: [0602 박민근] direct2 d

1. 헤더 파일 추가

Page 100: [0602 박민근] direct2 d

2. 관련 객체 변수 선언

Page 101: [0602 박민근] direct2 d

2. Direct2D Factory 생성

Page 102: [0602 박민근] direct2 d

3. 렌더타겟 생성

Page 103: [0602 박민근] direct2 d

4. 컬러 브러쉬 생성

Page 104: [0602 박민근] direct2 d

4. 렌더 타겟 준비

Page 105: [0602 박민근] direct2 d

5. 배경 그리드 렌더링

Page 106: [0602 박민근] direct2 d

6. 사각형 렌더링

Page 107: [0602 박민근] direct2 d

7. 렌더타겟 완료

Page 108: [0602 박민근] direct2 d

Direct2D 의 여러 기능들

Page 109: [0602 박민근] direct2 d

Advanced Path Geometries Example

http://msdn.microsoft.com/en-us/library/ee461072(v=VS.85).aspx

Illustration of a river, mountains, and the sun

Page 110: [0602 박민근] direct2 d

Geometries Example

Illustration of several simple and path geometries

Illustration of several simple and path geometries

http://msdn.microsoft.com/en-us/library/ee329938(v=VS.85).aspx

Page 111: [0602 박민근] direct2 d

Brush Types Example

Illustration of solid color brush, linear gradi-ent brush, radial gradient brush, and bitmap brush

http://msdn.microsoft.com/en-us/library/dd799414(v=VS.85).aspx

Page 112: [0602 박민근] direct2 d

Clip with Axis Aligned Rectangle Example

Illustration of a goldfish and a clipped region of the goldfish

http://msdn.microsoft.com/en-us/library/dd756624(v=VS.85).aspx

Page 113: [0602 박민근] direct2 d

Clip with a Bitmap Mask Example

Illustration of a goldfish and a clipped region of the goldfish by using a bitmap mask

http://msdn.microsoft.com/en-us/library/dd756625(v=VS.85).aspx

Page 114: [0602 박민근] direct2 d

Clip with Layers Example

Illustration of a goldfish and a clipped region of the goldfish by using layers

http://msdn.microsoft.com/en-us/library/dd756626(v=VS.85).aspx

Page 115: [0602 박민근] direct2 d

Combine Geometries Example

Illustration of two geometries and the resulting geometry af-ter various combination operations

http://msdn.microsoft.com/en-us/library/dd370923(v=VS.85).aspx

Page 116: [0602 박민근] direct2 d

Create Geometry Groups Example

Illustration of composite geometry groups with the two fill modes

http://msdn.microsoft.com/en-us/library/dd756627(v=VS.85).aspx

Page 117: [0602 박민근] direct2 d

Draw Bitmap With Extend Mode Example

Illustration of various effects of extend modehttp://msdn.microsoft.com/en-us/libra

ry/dd940315(v=VS.85).aspx

Page 118: [0602 박민근] direct2 d

Layers with Parameters Example

Illustrations of three bitmaps and the resulting images after con-tent bounds, opacity masks, or geometric masks are applied to them

http://msdn.microsoft.com/en-us/library/ee329942(v=VS.85).aspx

Page 119: [0602 박민근] direct2 d

Multiple Transforms Example

Diagram of a square being rotated and then trans-lated

http://msdn.microsoft.com/en-us/library/dd799446(v=VS.85).aspx

Page 120: [0602 박민근] direct2 d

Opacity Masks Example

Illustration of three bitmaps with different opacity masks applied to them

http://msdn.microsoft.com/en-us/library/dd372307(v=VS.85).aspx

Page 121: [0602 박민근] direct2 d

Stroke Style Example

Illustration of line join styles (miter line join, round line join, bevel line join, and miter or bevel line join)

http://msdn.microsoft.com/en-us/library/dd317107(v=VS.85).aspx

Page 122: [0602 박민근] direct2 d

Direct2D & Direct3D 같이 사용하기

Page 123: [0602 박민근] direct2 d
Page 124: [0602 박민근] direct2 d

Direct3D 10.1 버전 이상부터 Direct2D 와 같이 사용이 가능하다

• 2D 화면을 3D 화면의 백그라운드 이미지로 사용하거나

• 2D 화면을 3D 오브젝트의 텍스쳐로 사용하거나

• 2D 텍스트를 3D 화면에 표시하거나

• 2D 오브젝트로 3D 게임의 UI 로 사용하거나

Page 125: [0602 박민근] direct2 d

DXGI 를 통해서 서로 사용이 가능하다

• IDXGISurface, ID2D1RenderTarget 을 이용하여 Direct2D 컨텐츠를 Direct3D 서페이스에 Direct2D 컨텐츠를 렌더링할 수 있다 .

• IDXGISurface 에서 CreateShaderBitmap을 사용하여 ID2D1Bitmap 을 생성하여 , Di-rect3D 의 씬을 거기에 Direct2D 로 렌더링 할 수 있다 .

Page 126: [0602 박민근] direct2 d

자세한 내용은 DX10.1 이상의 아키텍쳐를 이해해고 있어야 하기 때문에 , 생략… .

MSDN 에 자세한 설명과 , 샘플 코드가 있습니다 .

Direct2D and Direct3D Interoperability Overview

Page 127: [0602 박민근] direct2 d

결론

Page 128: [0602 박민근] direct2 d

GDI, GDI+ 를 대체하는 최신의 2D 그래픽스 라이브러리

Page 129: [0602 박민근] direct2 d

C++ 로 만들어야 하는 게임 개발툴에서 유용할 듯

- 셰이더 에디터 , 마테리얼 에디터 , 컷신 연출툴

Page 130: [0602 박민근] direct2 d

2D 프로토 타입 or 2D 게임 개발시 유용할 듯

Page 131: [0602 박민근] direct2 d

스터디의 샘플 프로젝트 제작시에도 유용할 듯

Page 132: [0602 박민근] direct2 d

상용 게임의 UI 에 적용하는 것은 무리- 요구 사항 제한