셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌'

2025. 3. 20. 18:08·Dev./그래픽스 Graphics

💭회고

셰이더는 게임 및 그래픽 디자인에서 중요한 기술로, 3D 객체를 현실적으로 표현하거나 독창적인 효과(마인크래프트 셰이더 효과를 생각하면 이해가 쉽다...!)를 생성하는 데 사용된다. 고라니님의 강의 영상은 셰이더의 기본 개념부터 고급 기법까지 설명하며, 유니티(Unity)에서 셰이더 그래프를 활용하는 방법을 다룬다. 유니티를 기반으로 설명하지만, 유니티 한정이 아니라 언리얼 엔진에서도 충분히 활용할 수 있는 지식들이 담겨있다.

 

(유니티에서만 활용할 수 있는 부분은 Skip하고 학습하였다...!)

 

테크니컬 아티스트(TA)를 준비하고 있다면, 분명 공부하면 좋을 내용이다.

1) 게임 개발에서의 선형대수 응용,

2) 3D 메시 데이터(노멀, 바이노멀, 탄젠트에 대한 개념),

3) 각 좌표계(월드, 로컬, 카메라 등)에 대한 이해

마인크래프트 셰이더 적용 예시


1. 셰이더의 정의

'정점 위치'나 '픽셀 색깔'을 계산하는 함수!

유니티 프로젝트를 만들 때, URP와 HDRP를 볼 수 있다.

아래 사진 보면 알겠지만, RP는 렌더링 파이프라인의 약자이다.

유니티 프젝 생성 시...


렌더링 파이프라인이 뭐야?

➡️ 3D 물체를 2D 화면(즉, 모니터 스크린)까지 표현하는 과정을 뜻한다.

 

1) 정점 조립(Vertex Shader)

  • 물체를 삼각형으로 분해하여 표현.정점을 조립하면 면이 만들어진다 (GPU가 자동 계산함)

로컬 좌표계

  • 정점(Vertex)마다 벡터(노멀, 탄젠트) 정보를 가지고 있다.

2) 투영 변환(좌표계 변환)

  • 오브젝트(로컬) 좌표계
  • 월드 좌표계

  • 카메라 뷰 좌표계 : 기준이 카메라!, XY는 방향이 동일한데, Z 방향이 거꾸로 되어있다.
    • orthographic : 원근법이 적용되지 않음.
    • perspective : 원근법이 적용되어 있음.

3) 클리핑 (절단 좌표계)

  • PC나 모바일(안드로이드, IOS) 등 각각의 기기가 해상도가 다르다. 따라서 가상의 박스를 만들어서 해당 범위(화면 범위)를 벗어난 부분을 잘라낸다.

4) 화면 좌표계 

 

  • 좌하단(0,0)부터 우상단(1920, 1080 : 화면 해상도 크기)까지를 표현한다.

5) 레스터라이저( 래스터화하다(텍스트와 이미지를 프린터 가능한 형태로 전환시키다) )

  • 컴퓨터가 삼각형 면을 읽으면서 정점들을 보간하여 픽셀로 변환한다.

6) 프래그먼트(픽셀) 셰이더

레스터라이저를 마치면, 픽셀 셰이딩을 할 수 있다.

픽셀마다 정보를 가지고 있으니, 접근하여 변경가능하다.

 

➡️ 정리하자면,
1) 정점 조립
2) 버텍스 셰이더(오브젝트, 월드, 뷰 좌표계 포함)
3) 래스터라이저
4) 프래그먼트(픽셀) 셰이더
중요!

2. 머티리얼과 셰이더

PBR 머티리얼 : 물리 기반 렌더링(PBR)을 지원하며, 현실적인 재질 표현 가능.

 

셰이더(Shader) - 08. 물리 기반 렌더링 PBR(Physically Based Rendering)

나무처럼 울퉁불퉁한 재질은 왜 울퉁불퉁하게 보일까? 갑자기 웬 이상한 소리를 하냐고 할 수 있지만 재밌...

blog.naver.com

UV에 대해!

UV는 전개도라고 보면 된다.

아래 그림을 확인해보자.

UV

정점은 면마다 4개가 존재하고, 큐브는 정육면체이기 때문에 4 X 6 = 24개의 정점(Vertex)가 있는 것이다.

그래서 계산을 24번을 한다.

구의 경우 폴리곤의 갯수가 훨씬 많기 때문에, 쿼드 폴리곤 갯수 X 4(정점의 개수)를 하면 된다.

 

이전에 노멀에 대해 공부했었는데 여기서 내용이 나오는 김에 복습해보자.

2025.03.19 - [Dev./그래픽스 Graphics] - 그래픽스 기초 개념 정리 (1)

 

그래픽스 기초 개념 정리 (1)

🗺️마인드맵📒학습 내용1. 노말, 탄젠트, 비탄젠트 벡터에 대해서 조사하고, 수학적 원리를 알아보기1) 노멀 벡터(법선 벡터) Normal Vector면 법선(Face Normal) : 다각형이 향하고 있는 방향을 나타

raindrovvv.tistory.com

  • 노멀은 각 면의 수직이다. 항상 바깥쪽을 향하고 있으며, 크기는 1이다(정규화, 노멀라이즈 했으므로)
  • 탄젠트 무엇? : 노멀 벡터와 수직인 벡터는 무수히 많을 것이다. 그 중에서 UV의 X에 해당하는 방향이 탄젠트 벡터이다.

✨CC0 텍스처라고 구글링하면 나오는 에셋들은 저작권이 없어 Free하게 사용할 수 있다.
https://cc0-textures.com
 

CC0 Public Domain Textures

 

cc0-textures.com

 

 

ambientCG - Free Textures, HDRIs and Models

Free 3D Assets Never Looked This Good! Get 2000+ PBR Materials, HDRIs and more for free under the CC0 Public Domain license.

ambientCG.com

  • 주요 파라미터: (23:00)
    • 알베도(Albedo): 표면 색상 (0,0,0 = 검은색 // 1,1,1 = 흰색)
    • 메탈릭(Metallic): 금속 여부
    • 스무스니스(Smoothness): 표면 부드러움(거칠기)
      • 현실에 존재하는 물체는 완전히 거친 물체도 없고, 완전히 부드러운 물체도 없다 ➡️ 거친 표면을 봐도 정반사가 되는 부분이 있고, 난반사가 되는 부분이 있다. 반대의 경우도 마찬가지이다.  ➡️ 0과 1사이 값 어딘가의 값을 가지고 있다. 
      • 난반사는 Diffuse, 반사는 Specular라고 불린다.
    • 노말(Normal): 표면의 입체적 질감 표현
    • AO(환경차폐): 주변 그림자 표현 (0에 가까울수록 어둡고, 1에 가까울수록 밝아진다)
      • 주변의 물체에 의해 빛이 차단되어 더 어둡게 보이는 현상(?)

    • 에미션(Emission): 자체 발광 여부
    • 알파(Alpha): 투명도 조정

빛의 반사에 대해:

비금속은 빛을 반사할 때 햇빛을 그대로 반사하여 백색광을 반사하지만, 금속은 금속 고유의 색을 반사한다.


3. Sub 그래프 (Subgraph)

복잡한 노드 집합을 묶어 간소화.

(~)

서브그래프는 유니티에서 쓰는 개념으로 UE에서는 머티리얼 펑션을 사용한다!

머티리얼 펑션(Material Function)
머티리얼에서 반복적으로 쓰이는 노드 집합을 하나의 함수 형태로 묶어 재사용할 수 있게 해주는 기능.
➡️ 특징: 여러 머티리얼에서 공유 가능 노드를 그룹화하여 간단하게 표현 가능 유지 보수 용이 및 직관적 관리


🔗참고 링크:

 

 

[면접 준비][Graphics] 렌더링 파이프라인(Rendering Pipeline)

1. 렌더링 파이프라인 - 렌더링 파이프라인(Rendering Pipeline) 또는 그래픽스 렌더링 파이프라인(Graphics rendering pipeline)이라고 부름 - 3차원으로 만들어진 모델을 2차원에 투영하는 렌더링 과정의 프

steadycodist.tistory.com

 

 

렌더링 파이프라인 순서 및 기본 설명과 기본 지식 (Rendering Pipeline)

고정 기능 파이프 라인( Fixed Pipeline ) - D3D에 미리 정해진 연산을 수행할 수 있도록 제공되는 기능이 고정기능 파이프라인이다. - 정해진 연산만 수행하므로 프로그래머가 GPU 연산에 관여할 수 없

devshovelinglife.tistory.com

 

 

[Unity] 카메라 Perspective와 Orthographic 모드 비교

안녕하세요 슐리반입니다.줌인/줌아웃 구현을 찾아보다가 카메라 Projection 모드에 따라서 구현을 달리 해줘야 한다는 것을 알게 되었는데,그래서 Projection 모드에 대해 정리해보았습니다. 유니티

dooding.tistory.com

 

 

셰이더 그래프를 활용한 실험: 적은 리소스로 더 많은 작업 수행하기

물리적 기반 렌더링(PBR) 머티리얼 정보를 단일 텍스처 맵으로 압축한 후 컴팩트 셰이더에 레이어링하면 그래픽의 품질을 손상시키지 않고도 셰이더의 런타임 효율성을 개선할 수 있습니다. 아

unity.com

 

'Dev. > 그래픽스 Graphics' 카테고리의 다른 글

셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (3)  (0) 2025.03.24
셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (2)  (0) 2025.03.21
[TIL_250319] 포스트 프로세스 효과 3 #그래픽스  (0) 2025.03.19
그래픽스 기초 개념 정리 (1)  (2) 2025.03.19
[TIL_250313_2] 포스트 프로세스 효과2 #그래픽스  (0) 2025.03.13
'Dev./그래픽스 Graphics' 카테고리의 다른 글
  • 셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (3)
  • 셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌' (2)
  • [TIL_250319] 포스트 프로세스 효과 3 #그래픽스
  • 그래픽스 기초 개념 정리 (1)
raindrovvv
raindrovvv
raindrovvv 님의 블로그 입니다.
  • raindrovvv
    raindrovvv 님의 블로그
    raindrovvv
  • 전체
    오늘
    어제
    • 분류 전체보기 (89) N
      • Dev. (82) N
        • UE 언리얼 엔진 (45) N
        • Unity 유니티 (0)
        • Wwise 와이즈 (3)
        • 게임 네트워크 (8)
        • 그래픽스 Graphics (18)
        • 프로젝트 (4)
        • 기타 개발 관련 (4)
      • Computer Science (0)
        • 하드웨어 HW (0)
        • 소프트웨어 SW (0)
        • 통신 (0)
        • 데이터 (0)
      • 블로그 (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    AI
    프로젝트
    머티리얼
    언리얼
    오디오미들웨어
    UE
    언리얼엔진
    네트워크
    unrealengine
    셰이더
    게임네트워크
    깃
    그래픽스
    Unreal
    게임
    포스트프로세스
    TA
    Git
    게임개발
    고라니
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
raindrovvv
셰이더 그래프 학습 정리 - '샤라웃 투 고라니🦌'
상단으로

티스토리툴바