Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

셰이더 만들기 실습

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Prochain SlideShare
셰이더가 뭐에요?
셰이더가 뭐에요?
Chargement dans…3
×

Consultez-les par la suite

1 sur 29 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à 셰이더 만들기 실습 (20)

Publicité

Plus récents (20)

Publicité

셰이더 만들기 실습

  1. 1. 텍스트 셰이더 만들기 실습 빌보드 노멀맵 셰이더 제작기
  2. 2. 셰이더가 뭐더라? 컴퓨터 그래픽스 분야에서 셰이 더(shader)는 소프트웨어 명령 의 집합으로 주로 그래픽 하드웨 어의 렌더링 효과를 계산하는 데 쓰인다. 셰이더는 그래픽 처리 장치 (GPU)의 프로그래밍이 가능한 렌더링 파이프라인을 프로그래 밍하는 데 쓰인다. 요약하면 데이터 쪼가리를 모니 터 밖으로 꺼내주는 코드
  3. 3. 빌보드 노멀맵 셰이더를 만들어 보자! 셰이더가 뭔지 배웠으니...
  4. 4. 빌보드가 뭔가요? 어느 방향에서 봐도 카메 라를 향해 그림을 보여주 기 공간상에 판떼기를 세워 놓은 것 같다고 해서 “빌 보드” 3D 공간에서 2D 스프라 이트를 사용하고 싶을 때 쓰는 방법!
  5. 5. 스프라이트에 노멀맵을 쓰 면...? 이미지에서 각 부분이 향하는 방향을 지정할 수 있다 2D 이미지에 동적으로 광원효과를 적용할 수 있다!
  6. 6. 빌보드 노멀맵 셰이더를 만들어 보자! 어느 방향에서 봐 도 같은 모양으로 보이는 노멀맵을 사용해 서 표면의 각도를 표현한
  7. 7. 물론, 이미 존재하는 기술 스프라이트에 노멀맵을 입혀 동적 광원효과를 주는 방법은 예전부터 꾸준히 쓰임 그런데, 빌보드와 3D 배 경을 이용해 시점변환을 구현하는 경우는 드물다 시점을 돌릴 수 있는 쿼 터뷰 느낌으로 만들어보 자!
  8. 8. 저번에 했던 이야기 공간상의 좌표 화면 좌표 좌표계 변 환 픽셀 배열 Rasterize
  9. 9. 저번에 했던 이야기 공간상의 좌표 화면 좌표 좌표계 변 환 픽셀 배열 Rasterize 좌표계 변환을 할 때 빌보드를 구현하고 픽셀 셰이더에서 노멀맵 라이팅을 구현하면 되겠다!
  10. 10. 텍스트 1단계 : 빌보드 일단 빌보드만 구현해 보자!
  11. 11. 기존 좌표계 변환 방법 (0,0,0) (0,5,0) (13,25,7) (14,27,5) 모델 좌표계 카메라 좌표계 좌표계 변환 좌표계 변환
  12. 12. 빌보드 셰이더의 좌표계 변 환 (0,0,0) (0,5,0) 모델 좌표계 카메라 좌표계 (13,25,7) (13,30,7) 좌표계 변환 변환된 중심점의 좌표에 상대좌표를 더한다
  13. 13. 텍스트 2단계 : 노멀맵 노멀맵이 있어야 광원효과를 주지!
  14. 14. 노멀맵 제작 툴 : Unflattener 상하좌우 방향에서 빛을 비추었을 때의 명암을 그 려서 넣으면 노멀맵을 생 성해 준다 노멀맵을 직접 그려서 만 드는 것보다는 직관적임 +
  15. 15. 노멀맵 라이팅 구현하기 1. 빛의 입사각을 입력받 음 2. 해당 픽셀의 노멀벡터 를 노멀맵에서 얻음 3. 입사각과 노멀벡터를 내적
  16. 16. 텍스트 3단계 : 빌보드에 노멀맵 적용 그리고 문제 해결 과정
  17. 17. 광원의 방향이 이상한 문제 카메라를 돌리면 빛의 방 향과 그림자의 방향이 일 치하지 않는 문제가 발생 빛 계산은 실제 모델과 빛 의 방향을 이용해서 하고, 화면에 표시할 땐 카메라 에 맞게 돌려서 표시하기 때문 ??!
  18. 18. 문제점 분석 카메라에 보이는 모델이 회전되어 나타나므로 빛의 방향 역시 회전된 것처럼 보인다! 문제 해결을 위해 카메라 방향에 맞춰서 빛의 방향을 수정 실제 빛의 방향 실제 광원 실제 모델
  19. 19. 문제점 분석 카메라에 보이는 모델이 회전되어 나타나므로 빛의 방향 역시 회전된 것처럼 보인다! 문제 해결을 위해 카메라 방향에 맞춰서 빛의 방향을 수정 카메라에 보이는 모델 카메라에 보이는 빛의 방향
  20. 20. 문제점 분석 카메라에 보이는 모델이 회전되어 나타나므로 빛의 방향 역시 회전된 것처럼 보인다! 문제 해결을 위해 카메라 방향에 맞춰서 빛의 방향을 수정 가상의 광원
  21. 21. 텍스트
  22. 22. 그림자가 없으니 이상하다
  23. 23. 그림자 추가하기 실제로 표시되지 않고, 그림자만 표시하는 캡슐 모양 오브젝트를 추가 그림자만 표시하는 쉐이 더는 구글링해서 얻음
  24. 24. 문제점 발견 그림자가 발에 붙지 않 는다
  25. 25. 문제점 분석 Pivot point가 스프라이 트의 중심이므로 3D 메 시와 발 부분에서 일치 하지 않음 Pivot point를 발로 옮길 필요가 있다!
  26. 26. Pivot point 구현 좌표계 변환할 때 특정 숫자를 더해주는 것으로 구현
  27. 27. Future work 애니메이션이 가능하도 록 C# 스크립트와 연동 상위 오브젝트의 좌표를 기준점으로 표현해야 스 켈레탈 애니메이션이 가 능할 듯 작업중!

×