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

More Related Content

What's hot

191019 Forward / Deferred Rendering
191019 Forward / Deferred Rendering191019 Forward / Deferred Rendering
191019 Forward / Deferred RenderingKWANGIL KIM
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리changehee lee
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1MoonLightMS
 
노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)QooJuice
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)민웅 이
 
[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자MoonLightMS
 
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)Sukwoo Lee
 
Game Visual Art Technologies
Game Visual Art TechnologiesGame Visual Art Technologies
Game Visual Art TechnologiesSangYun Yi
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환Yggdrasil610
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌민웅 이
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링Sukwoo Lee
 
[0212 박민수]환경 매핑
[0212 박민수]환경 매핑[0212 박민수]환경 매핑
[0212 박민수]환경 매핑MoonLightMS
 
자동 동적 3차원 입체시각
자동 동적 3차원 입체시각자동 동적 3차원 입체시각
자동 동적 3차원 입체시각민웅 이
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기changehee lee
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트재철 황
 
Deferred decal
Deferred decalDeferred decal
Deferred decal민웅 이
 
Unity Surface Shader for Artist 01
Unity Surface Shader for Artist 01Unity Surface Shader for Artist 01
Unity Surface Shader for Artist 01SangYun Yi
 
Unity cookbook 17
Unity cookbook 17Unity cookbook 17
Unity cookbook 17Jihun Soh
 
Unity cookbook 13
Unity cookbook 13Unity cookbook 13
Unity cookbook 13Jihun Soh
 

What's hot (20)

191019 Forward / Deferred Rendering
191019 Forward / Deferred Rendering191019 Forward / Deferred Rendering
191019 Forward / Deferred Rendering
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
 
노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
 
[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자
 
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
 
Game Visual Art Technologies
Game Visual Art TechnologiesGame Visual Art Technologies
Game Visual Art Technologies
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
 
그림자 이야기
그림자 이야기그림자 이야기
그림자 이야기
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링
 
[0212 박민수]환경 매핑
[0212 박민수]환경 매핑[0212 박민수]환경 매핑
[0212 박민수]환경 매핑
 
자동 동적 3차원 입체시각
자동 동적 3차원 입체시각자동 동적 3차원 입체시각
자동 동적 3차원 입체시각
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트
 
Deferred decal
Deferred decalDeferred decal
Deferred decal
 
Unity Surface Shader for Artist 01
Unity Surface Shader for Artist 01Unity Surface Shader for Artist 01
Unity Surface Shader for Artist 01
 
Unity cookbook 17
Unity cookbook 17Unity cookbook 17
Unity cookbook 17
 
Unity cookbook 13
Unity cookbook 13Unity cookbook 13
Unity cookbook 13
 

Similar to 셰이더 만들기 실습

파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기Devgear
 
안드로이드스터디 7
안드로이드스터디 7안드로이드스터디 7
안드로이드스터디 7jangpd007
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadowMoonLightMS
 
유니티 고급 과정 -3-
유니티 고급 과정 -3-유니티 고급 과정 -3-
유니티 고급 과정 -3-Kiyoung Moon
 
[0108 조진현]출발 소프트웨어 렌더러
[0108 조진현]출발 소프트웨어 렌더러[0108 조진현]출발 소프트웨어 렌더러
[0108 조진현]출발 소프트웨어 렌더러진현 조
 
2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성Gunho Shin
 
[1002 조진현]unity3d 소개
[1002 조진현]unity3d 소개[1002 조진현]unity3d 소개
[1002 조진현]unity3d 소개진현 조
 
유니티 Rpg게임배경 스타트업 6번째 스터디자료
유니티 Rpg게임배경 스타트업 6번째 스터디자료유니티 Rpg게임배경 스타트업 6번째 스터디자료
유니티 Rpg게임배경 스타트업 6번째 스터디자료Je Lyoung Kim
 
Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더동석 김
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초JP Jung
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초JP Jung
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초JP Jung
 
구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2Kyoung Seok(경석) Ko(고)
 
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기Devgear
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019devCAT Studio, NEXON
 
3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해ByungChun2
 
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기KyeongWon Koo
 
NDC2015 유니티 정적 라이팅 이게 최선인가요
NDC2015 유니티 정적 라이팅 이게 최선인가요  NDC2015 유니티 정적 라이팅 이게 최선인가요
NDC2015 유니티 정적 라이팅 이게 최선인가요 Wuwon Yu
 
9강 camera advanced light2
9강 camera advanced light29강 camera advanced light2
9강 camera advanced light2JP Jung
 

Similar to 셰이더 만들기 실습 (20)

파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
 
안드로이드스터디 7
안드로이드스터디 7안드로이드스터디 7
안드로이드스터디 7
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadow
 
유니티 고급 과정 -3-
유니티 고급 과정 -3-유니티 고급 과정 -3-
유니티 고급 과정 -3-
 
Uncharted4 part1
Uncharted4 part1Uncharted4 part1
Uncharted4 part1
 
[0108 조진현]출발 소프트웨어 렌더러
[0108 조진현]출발 소프트웨어 렌더러[0108 조진현]출발 소프트웨어 렌더러
[0108 조진현]출발 소프트웨어 렌더러
 
2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성
 
[1002 조진현]unity3d 소개
[1002 조진현]unity3d 소개[1002 조진현]unity3d 소개
[1002 조진현]unity3d 소개
 
유니티 Rpg게임배경 스타트업 6번째 스터디자료
유니티 Rpg게임배경 스타트업 6번째 스터디자료유니티 Rpg게임배경 스타트업 6번째 스터디자료
유니티 Rpg게임배경 스타트업 6번째 스터디자료
 
Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더Brdf기반 사전정의 스킨 셰이더
Brdf기반 사전정의 스킨 셰이더
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초
 
6강 light shadow 기초
6강 light shadow 기초6강 light shadow 기초
6강 light shadow 기초
 
구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2구세대 엔진 신데렐라 만들기 최종본 유트브2
구세대 엔진 신데렐라 만들기 최종본 유트브2
 
이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기이미지와 애니메이션 효과 적용하기
이미지와 애니메이션 효과 적용하기
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
 
3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해
 
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
[Gpg2권]4.7 인쇄해상도의 스크린샷 만들기
 
NDC2015 유니티 정적 라이팅 이게 최선인가요
NDC2015 유니티 정적 라이팅 이게 최선인가요  NDC2015 유니티 정적 라이팅 이게 최선인가요
NDC2015 유니티 정적 라이팅 이게 최선인가요
 
9강 camera advanced light2
9강 camera advanced light29강 camera advanced light2
9강 camera advanced light2
 

More from Jungsoo Park

유니티 애니메이터 FSM으로 활용하기
유니티 애니메이터 FSM으로 활용하기유니티 애니메이터 FSM으로 활용하기
유니티 애니메이터 FSM으로 활용하기Jungsoo Park
 
48시간, 복셀로 표현하기
48시간, 복셀로 표현하기48시간, 복셀로 표현하기
48시간, 복셀로 표현하기Jungsoo Park
 
풀타임 개발 도전기
풀타임 개발 도전기풀타임 개발 도전기
풀타임 개발 도전기Jungsoo Park
 
LINQ란 무엇인가
LINQ란 무엇인가LINQ란 무엇인가
LINQ란 무엇인가Jungsoo Park
 
IEnumerator란 무엇인가?
IEnumerator란 무엇인가?IEnumerator란 무엇인가?
IEnumerator란 무엇인가?Jungsoo Park
 
유니티3D에서 2D 이미지 다루기
유니티3D에서 2D 이미지 다루기유니티3D에서 2D 이미지 다루기
유니티3D에서 2D 이미지 다루기Jungsoo Park
 
딥 다크 던전 그래픽 작업기
딥 다크 던전 그래픽 작업기딥 다크 던전 그래픽 작업기
딥 다크 던전 그래픽 작업기Jungsoo Park
 
딥 다크 던전 그린라이트 도전기
딥 다크 던전 그린라이트 도전기딥 다크 던전 그린라이트 도전기
딥 다크 던전 그린라이트 도전기Jungsoo Park
 

More from Jungsoo Park (9)

유니티 애니메이터 FSM으로 활용하기
유니티 애니메이터 FSM으로 활용하기유니티 애니메이터 FSM으로 활용하기
유니티 애니메이터 FSM으로 활용하기
 
NABLA 개발기
NABLA 개발기NABLA 개발기
NABLA 개발기
 
48시간, 복셀로 표현하기
48시간, 복셀로 표현하기48시간, 복셀로 표현하기
48시간, 복셀로 표현하기
 
풀타임 개발 도전기
풀타임 개발 도전기풀타임 개발 도전기
풀타임 개발 도전기
 
LINQ란 무엇인가
LINQ란 무엇인가LINQ란 무엇인가
LINQ란 무엇인가
 
IEnumerator란 무엇인가?
IEnumerator란 무엇인가?IEnumerator란 무엇인가?
IEnumerator란 무엇인가?
 
유니티3D에서 2D 이미지 다루기
유니티3D에서 2D 이미지 다루기유니티3D에서 2D 이미지 다루기
유니티3D에서 2D 이미지 다루기
 
딥 다크 던전 그래픽 작업기
딥 다크 던전 그래픽 작업기딥 다크 던전 그래픽 작업기
딥 다크 던전 그래픽 작업기
 
딥 다크 던전 그린라이트 도전기
딥 다크 던전 그린라이트 도전기딥 다크 던전 그린라이트 도전기
딥 다크 던전 그린라이트 도전기
 

셰이더 만들기 실습