셰이더가 뭐에요?

18
텍텍텍 텍텍텍텍 텍텍텍 ? 텍텍텍 텍텍 텍텍 텍텍 텍텍 텍텍텍 텍텍 !

Upload: jungsoo-park

Post on 13-Apr-2017

178 views

Category:

Design


0 download

TRANSCRIPT

Page 1: 셰이더가 뭐에요?

텍스트

셰이더가 뭐에요 ?외계어 ㄷㄷ 수학 ㄷㄷ 근데 해보고 싶어 !

Page 2: 셰이더가 뭐에요?

셰이더가 뭔데 그래요컴퓨터 그래픽스 분야에서 셰이더(shader) 는 소프트웨어 명령의 집합으로 주로 그래픽 하드웨어의 렌더링 효과를 계산하는 데 쓰인다 . 셰이더는 그래픽 처리 장치 (GPU)의 프로그래밍이 가능한 렌더링 파이프라인을 프로그래밍하는 데 쓰인다 .

요약하면 데이터 쪼가리를 모니터 밖으로 꺼내주는 코드

Page 3: 셰이더가 뭐에요?

데이터에서 모니터까지공간상의 좌표 화면 좌표

좌표계 변환픽셀 배열

Rasterize

Page 4: 셰이더가 뭐에요?

데이터에서 모니터까지공간상의 좌표 화면 좌표

좌표계 변환픽셀 배열

Rasterize

각각의 정점에 대한 계산 :이 정점은 화면 어디에 위치해야 할까 ?빛을 어느 방향에서 얼만큼 받을까 ?

각각의 픽셀에대한 계산 :이 픽셀은무슨 색일까 ?

Page 5: 셰이더가 뭐에요?

데이터에서 모니터까지공간상의 좌표 화면 좌표

좌표계 변환픽셀 배열

Rasterize

각각의 정점에 대한 계산 :이 정점은 화면 어디에 위치해야 할까 ?빛을 어느 방향에서 얼만큼 받을까 ?

각각의 픽셀에대한 계산 :이 픽셀은무슨 색일까 ?

정점 셰이더 픽셀 셰이더

Page 6: 셰이더가 뭐에요?

정점 셰이더에서 픽셀 셰이더로정점별 계산 결과물을 위치관계에 따라 선형보간해서 픽셀 셰이더로 전달색상 데이터를 전달한다면 :정점 1 은 흰색 , 정점 3 은 검은색-> 가운데 픽셀 셰이더에게는 회색이 전달된다 !

3

여기는 회색 !

Page 7: 셰이더가 뭐에요?

실제 코드를 봅시다유니티의 ShaderLab 코드 안에 nVidia 의 Cg 코드가 삽입된 형태그래서 외계어처럼 보였었구나 ....

이만큼 Cg 코드요 바깥은 ShaderLab 코드

Page 8: 셰이더가 뭐에요?

실제 코드를 봅시다정점 셰이더 : 정점의 좌표를

화면좌표계로 옮겨라

픽셀 셰이더 : 빨갛게 칠해라

Page 9: 셰이더가 뭐에요?

결과물

Page 10: 셰이더가 뭐에요?

광원효과가 없으니 밋밋하죠

Page 11: 셰이더가 뭐에요?

정반사 / Specular reflection

입사한 빛이 한 방향으로 반사된다고 가정보는 방향에 따라 밝게 보이는 위치가 다르다 !

시선의 방향과 반사광의 방향을 내적하여 구할 수 있다

Page 12: 셰이더가 뭐에요?

난반사 / Diffuse reflection

입사한 빛이 모든 방향으로균일하게 반사된다고 가정밝은 부분은 어느 방향에서 봐도 밝다 !

표면의 방향과 빛의 방향을내적하여 구할 수 있다

Page 13: 셰이더가 뭐에요?

정점마다 빛의 반사 계산하기

카메라의 방향벡터(World 좌표계 )

광선의 방향벡터(World 좌표계 )

정점의 수직벡터(World 좌표계 ) 정반사 (0~1)

난반사 (0~1)

(Per-Vertex Diffuse+Specular shading)

밝기 텍스쳐

픽셀 색상

정점 셰이더 픽셀 셰이더

Page 14: 셰이더가 뭐에요?

픽셀의 수직벡터

픽셀마다 빛의 반사 계산하기

카메라의 방향벡터(World 좌표계 )

광선의 방향벡터(World 좌표계 )

정점의 수직벡터(World 좌표계 )

정반사 (0~1)

난반사 (0~1)

(Per-Pixel Diffuse+Specular shading)

밝기 텍스쳐

픽셀 색상

정점 셰이더 픽셀 셰이더

노멀 맵범프 맵스페큘러 맵

X

Page 15: 셰이더가 뭐에요?

정점 계산법과 픽셀 계산법어느 단계에서 계산할 것인가 ?

정점에 대해서만 계산하면 계산량이 대폭 줄어들지만 정확도 역시 부족하다픽셀별 계산을 하면 픽셀별로 보간된 수직방향을 사용하며 , 노멀맵이나 스페큘러 맵 등을 사용할 수 있다

Page 16: 셰이더가 뭐에요?

예시 : 간단한 정점 난반사 셰이딩Per-VertexDiffuse Shading

#include "UnityCG.cginc" uniform float4 _LightColor0; // color of light source (from "Lighting.cginc") uniform float4 _Color; // define shader property for shaders struct vertexInput { float4 vertex : POSITION; float3 normal : NORMAL; }; struct vertexOutput { float4 pos : SV_POSITION; float4 col : COLOR; }; vertexOutput vert(vertexInput input) { vertexOutput output; float4x4 modelMatrix = _Object2World; float4x4 modelMatrixInverse = _World2Object; // multiplication with unity_Scale.w is unnecessary // because we normalize transformed vectors float3 normalDirection = normalize( mul(float4(input.normal, 0.0), modelMatrixInverse).xyz); float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz); float3 diffuseReflection = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection)); output.col = float4(diffuseReflection, 1.0); output.pos = mul(UNITY_MATRIX_MVP, input.vertex); return output; } float4 frag(vertexOutput input) : COLOR { return input.col; }

정점 셰이더에서입력받을 데이터 선언정점 셰이더에서 픽셀 셰이더로 보낼 데이터 선언

정점 라이팅 셰이더이므로픽셀 셰이더는 그냥 입력받은 색상값을 그대로 리턴

Page 17: 셰이더가 뭐에요?

예시 : 간단한 정점 난반사 셰이딩Per-VertexDiffuse Shading

vertexOutput vert(vertexInput input) { vertexOutput output; float4x4 modelMatrix = _Object2World; float4x4 modelMatrixInverse = _World2Object; // multiplication with unity_Scale.w is unnecessary // because we normalize transformed vectors float3 normalDirection = normalize( mul(float4(input.normal, 0.0), modelMatrixInverse).xyz); float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz); float3 diffuseReflection = _LightColor0.rgb * _Color.rgb * max(0.0, dot(normalDirection, lightDirection)); output.col = float4(diffuseReflection, 1.0); output.pos = mul(UNITY_MATRIX_MVP, input.vertex); return output; }

정점의 수직 방향과 빛의 방향을월드 좌표계에서 정규화하여 나타냄

정점의 수직 방향과 빛의 방향을내적하여 난반사량을 구함반사량과 정점 위치를 리턴

Page 18: 셰이더가 뭐에요?

정리정점 셰이더는 정점별 계산을 하고 ,픽셀 셰이더는 픽셀별 계산을 한다정반사는 보는 각도에 따라 밝은 부위가 변하고 ,난반사는 보는 각도에 상관없이 밝은 부위가 일정하다정점 셰이더 라이팅은 가볍고 ,픽셀 셰이더 라이팅은 정확하다