Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
김원기
2017.12.15.
유니티코리아 마스터즈 1, 2기
리얼타임 엔진을 이용한 다양한 애니메이션 제작 사례
실시간 그래픽에서는 어떻게 화면을 그려내는가?
“열심히 에셋 작업해서 엔진에 올려봤더니 이래요..”
Albedo, Metallic, Smoothness?
Smoothness Source?
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
6
CPU / GPU
많은 버텍스와 픽셀을 처리하기 위한 병렬처리 프로세서
https://thebookofshaders.com/01/
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
7
Shader
GPU 프로그래밍 언어, 병렬처리
화면의 x좌표를 출력했을때 화면의 y좌표를 출력했을때
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
8
Rendering Workflow of Unity3D
모델링 데이터와 텍스쳐/프로퍼티 값을 셰이더에 전달하여 오브젝트를 Draw
https://www.a...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
9
메쉬(vertex) 데이터가 갖는 값들
버텍스 위치 / 노멀 / UV좌표 등..
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
10
노멀 Normal, 벡터 Vector
방향(벡터)은 숫자로 표현할 수 있음. (1,0)오른쪽, (0,1)윗쪽…
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
11
램버트 Lambert
Normal dot LightDirection
Dot Product(내적)

(x1, y1) dot (x2, y2)

= x1*x...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
12
퐁 Phong / 블린퐁 BlinnPhong
ReflectDirection dot View / Half dot Normal
pow(NH,15) pow(...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
13
노멀맵 Normal map
방향의(x,y,z) = 이미지의(r,g,b)
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
14
Falloff 혹은 Fresnel
Normal dot ViewDirection
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
15
Add / Multiply
(0,0,0) + (1,0,0) = ? / (1,1,1) * (1,0,0) =?
+
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
16
뭔가 마구마구 섞입니다
NL*texture + NV + NH + .. + …
뭔가 잘못된 것 같은 느낌..
specular에 텍스쳐를 주고 림라이트에 ...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
17
PBR셰이더 + PostProcessing
Unity Standard Shader
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
18
PBR의 특징(1) - 에너지보존법칙
사물이 반사하는 광량은 같다. 표면의 Roughness와 반사굴절률(Metallic)
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
19
PBR의 특징(2) - IBL(Image Based Lighting)
Specular는 잊으세요. 광원의 반사입니다. 모든 사물은 반사합니다. 청바지도...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
20
환경은 미리 큐브맵으로 구워놓습니다.
유니티는 Reflection Probe, 언리얼은 Reflection Capture
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
21
많은 차세대 텍스쳐링 도구들
Substance Designer, Painter / Mari / Quixel
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
22
애니메이션 IP Look Development 적용사례(1)
2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
23
애니메이션 IP Look Development 적용사례(2)
2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
24
CaseStudy - StreetFighter의 NPR
Normal맵으로 붓 터치 느낌 추가
http://www.inven.co.kr/webzine/n...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
25
CaseStudy - Guilty Gear의 셀셰이딩
2D 셀애니메이션 느낌을 위한 노멀 수정
http://se-arts.com/220059340171
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
26
Cell Shading?
dot의 결과값은 -1~1. n보다 작으면 어두운색, 크면 밝은색
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
27
CaseStudy - The Gift의 Fur Shader
Shell Texturing과 Flow map 활용
https://www.youtube.co...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
28
Shell Texturing?
여러 겹의 mesh를 덧그려서 털의 깊이 느낌 구현
https://github.com/jose-villegas/FurRe...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
29
CaseStudy - Adam의 cloth
Cloth시뮬레이션 결과를 Alembic 시퀀스로 import
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
30
리얼타임 영상 구현사례(1)
SK티움 전시관에서 운영 중인 홀로렌즈 대응 증강현실 영상
https://vimeo.com/231237563
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
31
리얼타임 영상 구현사례(2)
지형 스캔 효과 / 트랜지션 효과 / 지형 Clipping 셰이더
https://vimeo.com/227627974
•지형...
리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과
32
리얼타임 애니메이션 제작 관련 참고 영상들
https://youtu.be/tvcu4oIcFuA
Unite 2016 - Unity for Films
ht...
감사합니다.
kimwonky@gmail.com
김원기
Prochain SlideShare
Chargement dans…5
×

리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과

리얼타임 콘텐츠 제작환경에서 그래픽스를 이해했을때 어떤 다양한 제작이 가능한지 짧게나마 다루었습니다.

아시아CGI애니메이션센터
게임엔진 이용 3D콘텐츠 제작 기술 워크숍
2017.12.15 서귀포시 엠스테이호텔

  • Soyez le premier à commenter

리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과

  1. 1. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 김원기 2017.12.15. 유니티코리아 마스터즈 1, 2기
  2. 2. 리얼타임 엔진을 이용한 다양한 애니메이션 제작 사례
  3. 3. 실시간 그래픽에서는 어떻게 화면을 그려내는가?
  4. 4. “열심히 에셋 작업해서 엔진에 올려봤더니 이래요..”
  5. 5. Albedo, Metallic, Smoothness? Smoothness Source?
  6. 6. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 6 CPU / GPU 많은 버텍스와 픽셀을 처리하기 위한 병렬처리 프로세서 https://thebookofshaders.com/01/
  7. 7. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 7 Shader GPU 프로그래밍 언어, 병렬처리 화면의 x좌표를 출력했을때 화면의 y좌표를 출력했을때
  8. 8. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 8 Rendering Workflow of Unity3D 모델링 데이터와 텍스쳐/프로퍼티 값을 셰이더에 전달하여 오브젝트를 Draw https://www.alanzucconi.com/2015/06/10/a-gentle-introduction-to-shaders-in-unity3d/
  9. 9. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 9 메쉬(vertex) 데이터가 갖는 값들 버텍스 위치 / 노멀 / UV좌표 등..
  10. 10. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 10 노멀 Normal, 벡터 Vector 방향(벡터)은 숫자로 표현할 수 있음. (1,0)오른쪽, (0,1)윗쪽…
  11. 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. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 12 퐁 Phong / 블린퐁 BlinnPhong ReflectDirection dot View / Half dot Normal pow(NH,15) pow(NH,75)
  13. 13. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 13 노멀맵 Normal map 방향의(x,y,z) = 이미지의(r,g,b)
  14. 14. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 14 Falloff 혹은 Fresnel Normal dot ViewDirection
  15. 15. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 15 Add / Multiply (0,0,0) + (1,0,0) = ? / (1,1,1) * (1,0,0) =? +
  16. 16. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 16 뭔가 마구마구 섞입니다 NL*texture + NV + NH + .. + … 뭔가 잘못된 것 같은 느낌.. specular에 텍스쳐를 주고 림라이트에 강약을 주고..
  17. 17. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 17 PBR셰이더 + PostProcessing Unity Standard Shader
  18. 18. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 18 PBR의 특징(1) - 에너지보존법칙 사물이 반사하는 광량은 같다. 표면의 Roughness와 반사굴절률(Metallic)
  19. 19. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 19 PBR의 특징(2) - IBL(Image Based Lighting) Specular는 잊으세요. 광원의 반사입니다. 모든 사물은 반사합니다. 청바지도 반사합니다.
  20. 20. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 20 환경은 미리 큐브맵으로 구워놓습니다. 유니티는 Reflection Probe, 언리얼은 Reflection Capture
  21. 21. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 21 많은 차세대 텍스쳐링 도구들 Substance Designer, Painter / Mari / Quixel
  22. 22. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 22 애니메이션 IP Look Development 적용사례(1) 2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트
  23. 23. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 23 애니메이션 IP Look Development 적용사례(2) 2016 리얼타임 모션캡쳐 애니 연수생 모집 프로젝트
  24. 24. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 24 CaseStudy - StreetFighter의 NPR Normal맵으로 붓 터치 느낌 추가 http://www.inven.co.kr/webzine/news/?news=157296
  25. 25. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 25 CaseStudy - Guilty Gear의 셀셰이딩 2D 셀애니메이션 느낌을 위한 노멀 수정 http://se-arts.com/220059340171
  26. 26. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 26 Cell Shading? dot의 결과값은 -1~1. n보다 작으면 어두운색, 크면 밝은색
  27. 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. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 28 Shell Texturing? 여러 겹의 mesh를 덧그려서 털의 깊이 느낌 구현 https://github.com/jose-villegas/FurRendering
  29. 29. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 29 CaseStudy - Adam의 cloth Cloth시뮬레이션 결과를 Alembic 시퀀스로 import
  30. 30. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 30 리얼타임 영상 구현사례(1) SK티움 전시관에서 운영 중인 홀로렌즈 대응 증강현실 영상 https://vimeo.com/231237563
  31. 31. 리얼타임 환경에서 쉐이더 프로그래밍을 통한 룩디벨롭과 특수효과 31 리얼타임 영상 구현사례(2) 지형 스캔 효과 / 트랜지션 효과 / 지형 Clipping 셰이더 https://vimeo.com/227627974 •지형을 스캔하며 서서히 보여지는 효과 •컷 사이의 연결을 위한 리얼타임 트랜지션 효과 •지정영역에만 지형을 보이기 위한 clipping 셰이더
  32. 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. 33. 감사합니다. kimwonky@gmail.com 김원기

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • yoonheeunikang

    Dec. 29, 2017
  • yujinchoi3597

    Dec. 29, 2017
  • micus74

    Dec. 29, 2017
  • iholdnothing

    Dec. 29, 2017
  • jikkimi

    Dec. 29, 2017
  • gwangzingo

    Dec. 29, 2017
  • HyunwooLim

    Jan. 1, 2018
  • GabCho1

    Jan. 1, 2018
  • ssuser09c175

    Jan. 2, 2018

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

Vues

Nombre de vues

1 292

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

22

Actions

Téléchargements

13

Partages

0

Commentaires

0

Mentions J'aime

9

×