1 of 89

Image Based Shader Programming

그래픽과 쉐이더의 기본 이론

(번역 금별)

© UTJ/UCL

Unity Shader 스터디

2018-11-08

2 of 89

발표자 소개

Es (@Es_Program)

​

주식회사 Donuts 엔지니어

​

Shader 쓰는 것이 좋습니다.

왠지 최근은 최적화같은것만 하고 있어요.

​

InkPainter와WaveformProvider 등을 만들고 있습니다.

관심있으시면 들려주세요.

3 of 89

과제

4 of 89

과제

상기 블로그의 포스트 내용 복습입니다.

렌더링 및 Shading의 기초

5 of 89

목표

Image Based Shader Programming

6 of 89

목표

Image Based Shader Programming

Shader를 상상한 대로 넣을 수 있다면👍

7 of 89

목표

Image Based Shader Programming

※ IBL IBR에 대한 강연은 아닙니다

입출력과 처리의 의미를 확실히 이미지화 할 수 있도록 하는 것이

본 자료의 목표입니다.

Shader를 상상한 대로 넣을 수 있다면👍

8 of 89

주의사항

9 of 89

자료안의 코드에 관해

몇년전의 코드를 갖고와서 사용하기에 코드가 오래되었습니다.

※ 크게 신경 안쓰셔도 됩니다.

10 of 89

내적(두 벡터를 표준기저벡터로 나타내었을 때 각 성분끼리의 곱의 합) 표기에 관해서

<a, b>

자료에서는 벡터 a, b의 내적을 아래와 같이 표기합니다.

또한, 특별 기재가 없는 한 a, b는 정규화(Normalization)된 것으로 봅니다.

11 of 89

내적의 복습

12 of 89

정규화(Normalization)된 벡터의 내적

수평면과 이루는 각이 0에 가까울수록 1에 가까움

수평면과 이루는 각이 π / 2에 가까울수록 0에 가까움

0.5 정도

0.9 정도

0.1 정도

13 of 89

내적이 작다

눈부시지 않다

시선 방향 v

광원방향 l

내적의 사용법

14 of 89

내적이 크다!�이건 눈부시다!

시선 방향 v

광원방향 l

내적의 사용법

15 of 89

정반사(경면반사) 방향도 내적으로 나타낼 수 있다

광원

법선

16 of 89

3DCG 초간단 기초

17 of 89

3DCG

Mesh

Material

GPU

렌더링 결과

18 of 89

3DCG

GPU데이터 업로드

Mesh

Material

GPU

렌더링 결과

​

19 of 89

3DCG

GPU데이터 업로드

Shader로 처리하여 이미지로 변환

20 of 89

3DCG

GPU는 입력된 데이터를 바탕으로 3D를 2D로 변환한다.

GPUにデータをアップロード

Shaderで処理して画像に変換

21 of 89

3D를 이미지(2D)로 "변환한다"란?

座標変換

​

레스터라이저(텍스트와 이미지를 프린트 가능한 형태로 변형)

ピクセルの色を決定

World変換

Local座標系の頂点位置をWorld原点から見た位置に移動させる操作

View変換

World座標系の頂点位置を視点から見た位置に移動させる操作

Projection変換

ビューボリュームを正規化デバイス座標に変形させる操作

정점 쉐이더(Vertex Shader)

프레그먼트 쉐이더(Flagment Shader)

22 of 89

3D를 이미지(2D)로 "변환한다"란?

좌표변환

​

레스터라이저(텍스트와 이미지를 프린트 가능한 형태로 변형)

픽셀의 색상을 결정

Model변환

Model좌표계의 정점(vertex)위치를 World 원점에서 본 위치로 이동시키는 작업

View변환

World좌표계의 정점(vertex)위치를 World 원점에서 본 위치로 이동시키는 작업

Projection변환

뷰 볼륨(View Volume)을 정규화(Normalization)디바이스 좌표로 변형시키는 작업

23 of 89

좌표변환

・・・정점

・・・원점

각 정점(Vertex)은 좌표계의 원점을 중심으로 한 좌표로 표시된다

24 of 89

정점(Vertax)은 모델 좌표상의 점

・・・정점

・・・원점

모델 스페이스

Model Space

25 of 89

Model변환

・・・정점

・・・원점

월드 스페이스

World Space

26 of 89

View변환

・・・정점

・・・원점

뷰 스페이스

View Space

27 of 89

Projection변환

프로젝션 스페이스

Projection Space

28 of 89

MVP변환

Model변환, View변환, Projection변환은 행렬로 나타난다.

행렬 M

행렬 V

행렬 P

UNITY_MATRIX_MVP

29 of 89

MVP변환

Model변환, View변환, Projection변환은 행렬로 나타난다.

행렬 M

행렬 V

행렬 P

UNITY_MATRIX_MVP

mul(UNITY_MATRIX_MVP, vertex)

30 of 89

MVP변환

Model변환, View변환, Projection변환은 행렬로 나타난다.

행렬 M

행렬 V

행렬 P

UNITY_MATRIX_MVP

구형방법

mul(UNITY_MATRIX_MVP, vertex)

31 of 89

MVP변환

Model변환, View변환, Projection변환은 행렬로 나타난다.

행렬 M

행렬 V

행렬 P

UnityObjectToClipPos

UniyObjectToClipPos(vertex)

32 of 89

MVP변환후

33 of 89

레스터라이저

영상은 여기로부터 인용

저해상도 디스플레이

고해상도 디스플레이

스크린 좌표값

레스터라이저

34 of 89

픽셀의 색상을 결정

35 of 89

Shading

36 of 89

렌더링 방정식

Wikipedia에서 인용

37 of 89

렌더링 방정식

Wikipedia에서 인용

38 of 89

간단한 표현방법부터

광원

시점

39 of 89

R(p, v) 는 시점에 뛰어드는 빛

물체 표면의 위치 p에서부터 시점방향 v쪽으로 비추는 빛을 R(p,v)로 나타내고 있다.

광원

시점

40 of 89

R(p, v) 의 구성요소

스스로 빛을 내는 양

받은 빛을 반사하는 양

41 of 89

R(p, v) 의 구성요소

스스로 빛을 내는 양

받은 빛을 반사하는 양

빛을 내지 않는다면 「0」

42 of 89

R(p, v) 의 구성요소

엄밀한 계산이 어려움

스스로 빛을 내는 양

받은 빛을 반사하는 양

빛을 내지 않는다면 「0」

43 of 89

R(p, v) の構成要素

自ら発光する量

発光しなければ 「0」

여러가지 방법으로 빛의 반사 근사치를 측정

엄밀한 계산이 어려움

받은 빛을 반사하는 양

44 of 89

간단하게 스스로 빛을 내지 않는다고 전제한다면..

45 of 89

간단하게 스스로 빛을 내지 않는다고 전제한다면..

Rreflection(p, v) 은 어떻게 구할것인가?

46 of 89

고전적 라이팅모델

쉐이딩 단순방법의 하나.�물체에 빛을 비추면 [물체 고유의 색]이 보이는 부분과 [빛의 색]이 보이는 하이라이트 부분을 관찰할 수 있다.

​

물체 고유의 색이 보이는 부분의 반사를 [Diffuse반사(확산반사)], 하이라이트 부분을 [Specular반사(거울면 반사)라고 부른다.

47 of 89

Diffuse반사

48 of 89

Lambert반사

이상적인 확산반사표면에 의한 Diffuse 반사를 특히 [Lambert반사]라고 부른다.

광원

법선

49 of 89

Lambert반사

광원

법선

50 of 89

Lambert반사

법선과 라이트방향의 내적

적당한 계수

라이트로부터 받는 빛

광원

법선

51 of 89

실제 예

실제 사용할 때에는 내적이 마이너스가 되지 않도록

52 of 89

Lambert code

Shader

53 of 89

Lambert code

Shader

54 of 89

Lambert code

Shader

정점 쉐이더에 의한 좌표변환

55 of 89

Lambert code

Shader

56 of 89

Lambert code

Shader

시점으로부터 본 이하의 값을 계산

  • 정점위치
  • 광원위치
  • 법선방향
  • 정점으로부터 광원에의 방향

57 of 89

Lambert code

Shader

58 of 89

Lambert code

Shader

59 of 89

Lambert

60 of 89

Specular반사

61 of 89

Phong의 Specular반사모델

Phong은 Specular반사가 r, v 내적의 S승에 비례하여 줄어들 것으로 생각하였다.

S는 [거울면 반사지수] 양으로, 소재가 소재답도록 보이게 설정하는 계수

※Phong의 반사모델은 물리적 근거를 갖지 않으면, 물리적으로는 틀립니다.

광원

법선

시점

62 of 89

Phong의 Specular반사모델

광원

법선

시점

63 of 89

Phong의 Specular반사모델

라이트로부터 받는 빛

적당한 계수

정반사 방향과 시점방향 내적의 S승

광원

법선

시점

64 of 89

Blinn-Phong의 반사모델(Blinn의 근사치)

라이트로부터 받는 빛

적당한 계수

법선방향과 하프벡터 내적의 S승

h

광원

법선

시점

65 of 89

Blinn-Phong code

Shader

66 of 89

Blinn-Phong code

Shader

67 of 89

Blinn-Phong code

Shader

68 of 89

Blinn-Phong

69 of 89

섬세한 요철을 고려한 금속반사모델

70 of 89

섬세한 요철

섬세한 요철을 고려한 반사모델

광원

간섭

간섭

71 of 89

Torrance-Sparrow의 금속반사모델

h

광원

법선

시점

72 of 89

Blinn-Phong의 반사모델과 비교

Blinn-Phong의 반사모델에 비해

반사정도를 나타내는 값에 물리적인 의미를 갖게 하였다

73 of 89

섬세한 요철표현 분포함수

섬세한 요철이 면의 법선에 비해 어느정도의 엇갈림으로 분포하고 있는지를 나타내는 함수

상기의 함수는 베크만 분포로서 알려져 있다.

74 of 89

Fresnel반사계수

프레넬 반사법칙으로 이끌어낸 계수

금속표면의 빛이 정반사방향에 어느정도의 배합으로 반사되는지를 정리한 법칙

75 of 89

기하학적 감소계수

섬세한 요철이 다른 섬세한 요철 반사를 방해하는 결과를 나타낸 계수

,

76 of 89

Torrance-Sparrow code

Shader

77 of 89

Torrance-Sparrow code

Shader

78 of 89

Torrance-Sparrow code

Shader

79 of 89

Torrance-Sparrow code

Shader

80 of 89

Torrance-Sparrow

81 of 89

섬세한 요철을 고려한 확산반사

자세한 것은 여기를 참고

82 of 89

Oren–Nayar의 반사모델

여기서 인용

83 of 89

Oren–Nayar의 반사모델의 변형

84 of 89

Oren–Nayar code

Shader

85 of 89

Oren–Nayar code

Shader

86 of 89

Oren–Nayar

87 of 89

정리

88 of 89

정리

  • Shading의 도입은 매우 간단합니다.
  • 순서를 따라서 실타래를 풀어간다면 어렵지 않습니다.
  • 확실히 이미지화 하는 것이 중요합니다.

89 of 89

감사합니다