리얼타임 콘텐츠 제작환경에서 그래픽스를 이해했을때 어떤 다양한 제작이 가능한지 짧게나마 다루었습니다. 아시아CGI애니메이션센터 게임엔진 이용 3D콘텐츠 제작 기술 워크숍 2017.12.15 서귀포시 엠스테이호텔

1. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
김원기
2017.12.15.
유니티코리아 마스터즈 1, 2기

2. 리얼타임 엔진을 이용한 다양한 애니메이션 제작 사례

3. 실시간 그래픽에서는 어떻게 화면을 그려내는가?

4. “열심히 에셋 작업해서 엔진에 올려봤더니 이래요..”

5. Albedo, Metallic, Smoothness?
Smoothness Source?

6. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
6
CPU / GPU
많은 버텍스와 픽셀을 처리하기 위한 병렬처리 프로세서
https://thebookofshaders.com/01/

7. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
7
Shader
GPU 프로그래밍 언어, 병렬처리
화면의 x좌표를 출력했을때 화면의 y좌표를 출력했을때

8. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
8
Rendering Workflow of Unity3D
모델링 데이터와 텍스쳐/프로퍼티 값을 셰이더에 전달하여 오브젝트를 Draw
https://www.alanzucconi.com/2015/06/10/a-gentle-introduction-to-shaders-in-unity3d/

9. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
9
메쉬(vertex) 데이터가 갖는 값들
버텍스 위치 / 노멀 / UV좌표 등..

10. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
10
노멀 Normal, 벡터 Vector
방향(벡터)은 숫자로 표현할 수 있음. (1,0)오른쪽, (0,1)윗쪽…

11. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
11
램버트 Lambert
Normal dot LightDirection
Dot Product(내적)
(x1, y1) dot (x2, y2)
= x1*x2 + y1*y2
N(1,0), L(1,0) = 1 + 0 = 1
N(0,1), L(1,0) = 0 + 0 = 0
N(-1,0), L(1,0) = -1 + 0 = -1
N(0.707, 0.707), L(1,0) = 0.707 + 0 = 0.707
1
0.707
0
-1
0
0.707
-0.707-0.707

12. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
12
퐁 Phong / 블린퐁 BlinnPhong
ReflectDirection dot View / Half dot Normal
pow(NH,15) pow(NH,75)

13. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
13
노멀맵 Normal map
방향의(x,y,z) = 이미지의(r,g,b)

14. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
14
Falloff 혹은 Fresnel
Normal dot ViewDirection

15. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
15
Add / Multiply
(0,0,0) + (1,0,0) = ? / (1,1,1) * (1,0,0) =?
+

16. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
16
뭔가 마구마구 섞입니다
NL*texture + NV + NH + .. + …
뭔가 잘못된 것 같은 느낌..
specular에 텍스쳐를 주고 림라이트에 강약을 주고..

17. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
17
PBR셰이더 + PostProcessing
Unity Standard Shader

18. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
18
PBR의 특징(1) - 에너지보존법칙
사물이 반사하는 광량은 같다. 표면의 Roughness와 반사굴절률(Metallic)

19. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
19
PBR의 특징(2) - IBL(Image Based Lighting)
Specular는 잊으세요. 광원의 반사입니다. 모든 사물은 반사합니다. 청바지도 반사합니다.

20. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
20
환경은 미리 큐브맵으로 구워놓습니다.
유니티는 Reflection Probe, 언리얼은 Reflection Capture

21. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
21
많은 차세대 텍스쳐링 도구들
Substance Designer, Painter / Mari / Quixel

22. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
22
애니메이션 IP Look Development 적용사례(1)
2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트

23. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
23
애니메이션 IP Look Development 적용사례(2)
2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트

24. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
24
CaseStudy - StreetFighter의 NPR
Normal맵으로 붓 터치 느낌 추가
http://www.inven.co.kr/webzine/news/?news=157296

25. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
25
CaseStudy - Guilty Gear의 셀셰이딩
2D 셀애니메이션 느낌을 위한 노멀 수정
http://se-arts.com/220059340171

26. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
26
Cell Shading?
dot의 결과값은 -1~1. n보다 작으면 어두운색, 크면 밝은색

27. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
27
CaseStudy - The Gift의 Fur Shader
Shell Texturing과 Flow map 활용
https://www.youtube.com/watch?v=d5XYNRH1nns&feature=youtu.be&t=20m48s
Unite Europe 2016 - Making of THE GIFT: Game Changer in Film Production
https://github.com/marza-realtime/GIFT_PorterDoll

28. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
28
Shell Texturing?
여러 겹의 mesh를 덧그려서 털의 깊이 느낌 구현
https://github.com/jose-villegas/FurRendering

29. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
29
CaseStudy - Adam의 cloth
Cloth시뮬레이션 결과를 Alembic 시퀀스로 import

30. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
30
리얼타임 영상 구현사례(1)
SK티움 전시관에서 운영 중인 홀로렌즈 대응 증강현실 영상
https://vimeo.com/231237563

31. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
31
리얼타임 영상 구현사례(2)
지형 스캔 효과 / 트랜지션 효과 / 지형 Clipping 셰이더
https://vimeo.com/227627974
•지형을 스캔하며 서서히 보여지는 효과
•컷 사이의 연결을 위한 리얼타임 트랜지션 효과
•지정영역에만 지형을 보이기 위한 clipping 셰이더

32. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
32
리얼타임 애니메이션 제작 관련 참고 영상들
https://youtu.be/tvcu4oIcFuA
Unite 2016 - Unity for Films
https://youtu.be/d5XYNRH1nns
Unite Europe 2016 - Making of THE GIFT: Game Changer in Film Production
https://youtu.be/NSQcBZcvqpg
The Jungle Book Vfx
https://youtu.be/r_A92G47_AI
Unite '17 Seoul Keynote / 7. Baobab Studio
https://blogs.unity3d.com/kr/2017/01/04/adam-vfx-in-the-real-time-short-film/
Adam ­ VFX in the real-time short film

33. 감사합니다.
kimwonky@gmail.com
김원기