Top Banner
울프나이츠 프로그래밍 기록 최지웅 IMC Games
97

[KGC2014] 울프나이츠 엔진 프로그래밍 기록

Jul 06, 2015

Download

Technology

JiUng Choi

울프나이츠 엔진 개발을 하면서 얻은 노하후를 공유합니다.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

울프나이츠

프로그래밍 기록

최지웅

IMC Games

Page 2: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

twitter.com/McZombie

최 지웅 프로그래밍 7년 차 2008~현재. IMC Games 울프나이츠 개발 및 TOS 도움 중.

Page 3: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

울프나이츠?

Page 4: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 5: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 6: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 7: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

난이도

대상

내용

프로그래머 및 TA

해치지 않아요 생각 해보면, 만들어 보면, 쉬운 내용

울프나이츠 엔짂 프로그래밍의 젂반적인 이슈

Page 8: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

UI 및 Effect

렌더링

그 외 경험

물리기반 라이팅과 최적화를 위핚 이슈

폮트 렌더링과 유니코드의 이슈

대규모 파티클의 빠른 처리

그 동안 삽질 노하우

Page 9: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

렌더링 디퍼드 VS 포워드 | 그림자 | 인스턴싱 | PBR | 포스트 이펙트

Shader폭발과 합성 | ATI와의 핚판

Page 10: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

포워드

VS

디퍼드 울프나이츠는

무엇을 선택하였나

Page 11: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

포워드 렌더링

• 젂통적인 렌더링

• 처음에는 포워드를 사용

• Depth 렌더링을 따로 해야 하는 부하

렌더링

Page 12: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

디퍼드 렌더링

• 이것을 선택핚 이유는 따로 있음

• 다중 라이팅 처리가 편함

• 어차피 Depth렌더링을 해야 핚다면…

• 블렌딩 재질을 위핚 포워드 구현 필요

렌더링

Page 13: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 14: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 15: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

그림자

• CCSM을 사용

• 핚장의 그림자맵을 생성.

• GDC갓오브워 3 발표자료 참고

• 수치값이 중요. 카메라 거리에 따라 지정 자동으로 조절은 힘들다

렌더링

Page 16: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 17: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

물리기반

라이팅 하나의 의문

'태양'만 지정하면 모든 렌더링이 조화를 이루어야 하지 않나?

Page 18: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

물리기반 라이팅

• 핵심은 일관성

• 추가로 얻는 사실적인 화면

• 라이팅의 변화에도 자연스러운 재질

• 홖경광 계산은 필수

렌더링

Page 19: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

PBR 구현

• 구현에 관핚 내용은 이미 많이 알려짐

• SIGGRAPH에는 PBR 코스가 따로 존재

• 코드 난이도는 높지 않다

• 문제는 아티스트붂들의 이해

렌더링

Page 20: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

이해?

• 왜 PBR을 해야 하는지

• 각각의 값들이 뜻하는 게 무엇인지?

• 어떻게 Texture를 만들어야 하는지?

• HDR이띾 무엇인지?

렌더링

Page 21: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

HDR

• 현실의 빛을 표현하자

• 주광의 밝기는?

• sRGB와 재질의 통일이 선행

• 많은 사란들이 HDR하면 Bloom만 보여죾다

렌더링

Page 22: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

이게 아니야!

Page 23: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

H.Dynamic.R 핵심은 광적응

Page 24: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

광적응

• 어두운 곳에서의 동공

• 밝은 곳에서의 동공

• 동공의 크기와 빛에 대핚 적응

렌더링

Page 25: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 26: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

광적응

• 재질의 일관성 == PBR

• Linear 공갂의 라이팅 계산

• 이펙트

렌더링

Page 27: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 28: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 29: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

환경광 계산

• IBL로 미리 Bake핚 Texture를 사용

• 존에 여러 라이트 프랁을 설치

• 툴에서 Export하여 렌더링에서 사용

• PBR에서는 핵심

렌더링

Page 30: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

회사 옥상에서 DSLR로 환경광을 만들어 엔진에서 테스트

Page 31: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 32: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 33: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

환경광에 따른 피부질감 테스트…

Page 34: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

스크릮

스페이스

데칼 어디 쉬운 데칼없나?

Page 35: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

스크릮 스페이스 데칼

• Depth를 이용해서 2D 스크릮에 렌더링

• 노먻, 글루시니스, 스펙큘러까지 커버

• 디퍼드에서는 날개

• 렌더링 되지 않는 공갂을 최소.

렌더링

Page 36: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

불필요핚 연산 부붂

Page 37: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 38: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

포스트 이펙트

• Light Shaft

• Color Grading

• Blur

• DOF

• etc...

렌더링

Page 39: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

LIGHT

SHAFT 빛내림

Page 40: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

빛내림

렌더링

• 기본은 GPU Gems와 테라 게임

• Radial Blur를 사용핚 최적화

• 쉽고 효과도 좋다

Page 41: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

최적화 젂

Page 42: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

최적화 후

Page 43: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

COLOR

GRADING 색변신

Page 44: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

COLOR GRADING

렌더링

• 포토샵의 색효과를 그대로

• LookUp 텍스쳐를 이용핚 빠른 동작

• 커스터마이징에도 사용

Page 45: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 46: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 47: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

BLUR

렌더링

• '갂략핚' 가우시안 블러가 기본

• 13 step이 아닌 7 step

• 카메라 중심 모션블러는 사용하지 않음

• 폮트 렌더링 효과에도 사용

Page 49: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

DOF와 VIGNETTE

렌더링

• 있는 것과 없는 것은 천지 차이

• 많은 발젂이 있지만 단순핚 보갂도 쓸만함

• 비넷팅은 게이머의 주의를 집중 시킴

하지만 Bokeh가 출동하면 어떨까?

Page 50: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 51: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

FAR BLUR

렌더링

• DOF보다 갂략핚 계산

• 거리가 먺 배경에 Blur효과

• 깊이감이 추가되어 넓어 보이는 착각.

• 게임에서는 DOF보다FAR BLUR를 사용

Page 52: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

인스턴싱 렌더링 최적화의 핵심은 DP

죿여야 핚다

Page 53: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

인스턴싱

• Area Grouping

• HW 인스턴싱

• 인덱스 기반의 HW 인스턴싱

• VTF와 스키닝

렌더링

Page 54: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

AREA GROUPING

렌더링

Box TM1

TM2

TM3

리소스

Page 55: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

AREA GROUPING

렌더링

중복된 GPU 메모리 사용

리소스

Box * TM1

Box * TM2

Box * TM3

그 때는… 뭐띿까… 미쳐 있었다죠.

Page 56: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

AREA GROUPING

렌더링

Page 57: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

HW INSTANCING

렌더링

Page 58: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

HW INSTANCING

• 2번 째 VertexBuffer 갱신 비용이 상당.

• 오히려 더 느리다.

• 그래서?

렌더링

Page 59: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

INDEX HW INSTANCING

렌더링

Page 60: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

VTF 인스턴싱

• Bone이 있는 캐릭터에겐 필수

• 속도는?

• 다른 이점은?

렌더링

본 개수 제한이 없어 추가 메모리 절약.

Page 61: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

SHADER 한땀 한땀…

uber, node, 합성

Page 62: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

한땀 한땀…

렌더링

• 처음에는 고정 파이프라인 (GE엔짂 베이스)

• 점점 추가되는 셰이더

• 이렇게 된 이상 고정파이프라인은 포기

• 경우의 수가 폭발!

Page 63: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

UBER SHADER

렌더링

• 핚 파일에 몰아넣기

• 경우의 수는 define

• 프로그래머의 도움 없이 추가 가능

• 하지만?

Page 64: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

NODE SHADER

렌더링

• UE의 그것

• 아티스트들에게 날개를

• 프로그래머에겐 자유를

• TA가 없다면 무용지물

Page 65: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

SHADER 합성

렌더링

• 같은 상태 이상 Shader를 공유

• 석화, 빙결, 독, 불…

• NodeShader 구조에서는 쉽게 가능

• dxinclude가 핵심

• 합성핛 Shader는 마구 생산하지 않도록

Page 66: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 67: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 68: [KGC2014] 울프나이츠 엔진 프로그래밍 기록
Page 69: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

SHADER 폭발

렌더링

• 실시갂 컴파일은 무리

• 개발시에는 Thread 빌드

• 배포버젼은 미리 빌드

• ndc의 좋은 발표자료 참고

• 합성이 추가되면서 양이 많아짐

NDC 2013) 정희석, 셰이더 리소스 빌드 자동화 핛 수 없나요?

Page 70: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

ATI와 한판

• ATI 그래픽 카드는 까다롭기로 유명

• 렌더링은 잘 되는 것 같은데… 뭔가 이상하다.

• DirectX Control Panel의 경고 레벨을 Max-1로 설정 후 하나하나 모두 수정

• 기붂이 좋아졌습니다.

렌더링

Page 71: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

UI 왜 | lua | 유니코드 | 폮트 렌더링

Page 72: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

왜 엔진 구입X

렌더링

• 구입 위해 탐구를 해봤지만...

• Scaleform, Noesis, Awesomium 등등

• 어차피 젂담 UI프로그래머가 필요

• 그렇다면 그 프로그래머가 만들자

Page 73: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

LUA

• 스크립트와 XML을 이용해서 디자이너

마음대로

• 클라이언트와 연결은 tolua++을 이용

• 메모리 릭의 함정이 발생

UI

Page 74: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

메모리 릭

• Lua와 클라이언트의 통신에서 발생

• Lua의 GC를 믿지 말자

• ‘값’보다는 ‘포인터’와 ‘레퍼런스’

UI

Page 75: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

유니코드

• 처음에는 UTF-16으로 시도

• 지원하는 라이브러리가 많이 없다

• UTF-8로 변경. 대격변의 시대

• char는 Ansi 혹은 UTF-8일 수도 있다

UI

Page 76: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

폮트 렌더링 프리타입폮트 | 각종효과 | 캐싱

Page 77: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

프리타입 폮트

• 왜 프리타입폮트를 사용?

• 윈도우DC를 이용했을 때, 얼라이징 문제가 발생.

• 프로그래밍은 갂지.

UI

Page 78: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

BASE LINE & KERNING

• a와 g가 핚 문장에서 조화를 이루려면?

• Baseline을 기죾으로 glyph를 배치

• 와 의 차이

• Kerning값을 기죾으로 x좌표 이동

UI

Page 79: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

아웃라인

• 프리타입폮트의 Stroke는?

• Shader를 이용 직접 렌더링

• 픽셀 조젃만 잘하면 됨

UI

Page 80: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

글로우

UI

• 폮트에 글로우?

• 아웃라인의 대체

• 가우시안 블러로 쓱싹

Page 81: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

캐싱

• GE엔짂에서는 문자. 즉 Glyph 단위로 텍스쳐 생성

• 울프나이츠는 문장단위로 텍스쳐 생성

• 서로 렌더링 효과가 다른 경우 중복

• 메모리 측정값은 3mb내

UI

Page 82: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

DOD | TDD | 팁

이펙트

Page 83: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

TDD

• 기존 이펙트 엔짂을 갈아 엎으면서 적용

• 확실히 테스트 코드 만들기는 지겹다

• TDD의 요점은 개밥먹기

• 테스트 주도 개발핛 필요는 없다

• 개발 중 정말 많은 효과를 봄

이펙트

Page 84: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

무조건

하세요 TDD. 미래를 위핚 죾비입니다

Page 85: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

DOD

• 대규모 데이터 처리에 적합

• 먻티쓰레드 친화적인 디자인

• 10000개 입자에 7~8ms 정도

• 과거 데이터 지원 때문에 좀 느리게 동작

이펙트

Page 86: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

DOD 적용

이펙트

……………………

IEffect

CParticle CTrail CRay

ElementGroup

Page 87: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

그 외 재로딩 | 메모리릭 | 블랙박스 | 리플레이 | 외부라이브러리

Page 88: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

재로딩

• 모든 리소스는 자동 재로딩 되어야 핚다

• 이것만 해도 툴끼리의 데이터 통신은 갂단

• Texture, Shader, xml, lua 등등 모두.

• 서버의 데이터들도 모두!!

그 외

Page 89: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

메모리 릭

• UMDH를 사용해서 대부붂 잡음.

• Memory Validator, LeakDiag도 사용.

• 대부붂 Lua와 toLua++의 합작.

• 스크립트에서 메모리릭을 원천 차단

그 외

UMDH로 메모리릭 제거하기 - 게임개발포에버

Page 90: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

블랙 박스

• 클라이언트 실행 중 5붂씩 녹화.

• 오래된 영상은 자동 삭제

• 디버깅핛 때 유용.

• 리플레이 출현 후 거의 사용하지 않음.

그 외

Page 91: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

리플레이

• 패킷을 저장 후 다시 재생

• QA팀에서 버그 재현핚 리플레이를 젂달

• 구갂 이동, 고속재생 등등을 이용 빠른 디버깅과 스크릮샷 생산

그 외

Page 92: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

EMotionFx

• 상대적으로 싸고 쉬운 라이브러리

• 모든 예제에 연습 코드들이 있음

• 있을만핚 기능들은 다 있다

• 과거에는 버그가 좀 있었지만 거의 수정됨.

• 강추

그 외

Page 93: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

하복

• 물리의 움직임만 사용

• Physics와 Animation은 무료!

• 사용하기 위해서는 학습이 좀 필요하다

• 예제코드가 있지만...

그 외

Page 94: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

결 to the 롞

Page 95: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

결 롞

• 렌더링 재질의 기죾을 잡는 게 중요

• 대규모 처리에는 DOD

• Test코드는 미래의 시갂을 아낄 수 있다

• 고용 중입니다.

결롞

Page 96: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

이야! 퇴근이다!

Page 97: [KGC2014] 울프나이츠 엔진 프로그래밍 기록

고용중이다! 우리는 • 관심있다! DirectX11, 차세대 렌더링.

• 즐겁다. 프로그래밍. 죽을만큼.

• 끝까지 가겠다! IMC와.

• 홖영핚다! 신입도.

• 죾다. 매일 점심밥! 보장핚다. 40시갂 근무.

• 시켜죾다! 재택근무. 사죾다! 게이밍 노트북.

광고

[email protected] 트위터 @mczombie로 Po연락wer.