(공통이론)아티스트를 위한 URP 셰이더 Shader #4 - 색과 숫자

우후후 안녕하살법! 

맥락없지만 귀여워서 

이전 시간을 통해 셰이더 그래프와 코드에서 인터페이스 - 프로퍼티스- 를 만드는 방법을 알아보았어얌. 

오늘부터 본격적 시작을 할건데, 이론을 먼저 하나 깔고 갈 필요가 있어서 간단히 이론 소개부터 할께염. 
이론도 원래는 비트 얘기부터 하고 막 그래야 하지만 .. 길면 지루할테니까 어떻게 하면 쉽고 재미있고 간단하게 얘기할거냐만 고민하고 있는지라 깊은 얘기는 마구 건너뛸 거예염

그래서 어디부터 하냐면... 여기부터 할 거예요. 

TV 있죠 TV ? 모니터도 좋고. 하여간 뭐든 좋으니 커다란 모니터나 TV를 놓고... 핸드폰 카메라로 좌아악 땡겨서 사진을 찍어보세요 

대충 일케요

 

오호라...? 픽셀이 보이는군요? 근데 픽셀이 좀 이상하죠? 픽셀은 포토샵에서 보는 흰색 사각형이고 그런거 아니었어?

http://www.bodnara.co.kr/bbs/bbs.html?D=20&num=84841

자 이게 픽셀의 정체입니다. 한 픽셀은 R,G,B 로 된 3개의 색 기둥으로 이루어져 있어요. 요걸 서브픽셀 (SubPixel)  이라 부르고, 이 3개의 RGB 기둥의 밝기를 조절해서 모든 색을 만들어 내고 있었다는 거예요. 약간.. 색깔입힌 형광등 세 개 세워 놨다고 생각해 보세요 

HDR 모니터니 뭐니... 색의 비트 표현이니 뭐니.. 하는건 먼 훗날에 얘기하기로 해요.. 안녕히... 

그리고 이렇게 R,G,B 세 가지 색으로 된 빛 기둥을 아주 작게 만들어서 보면 3개의 기둥이 섞인 것 처럼 보이니까, 빛의 삼원색 때문에 흰 색으로 보이는 거겠지요? 

자 그럼 이 이미지를 가지고 멀리서 보세요. 눈을 가늘게 떠서 흐리게 봐도 좋아요. 대충 흰색으로 보이나요? 
보여야 되는데 안보이면 큰일인데 

자 그럼 이 한 픽셀을 보면, R, G, B 세 조명이 100% 각각 켜져 있는거지요?

그래서 우리는 이걸 float3(1.0, 1.0, 1.0) 이라고 표현합니다.

즉 흰색은 float3(1,1,1) 예요 한 픽셀을 나타내는 숫자죠. 1,1,1

어차피 실수(float)으로 연산하는게 셰이더의 특성이라 대충 1 이라고 써도 1.0으로 알아서 읽는다는거 말씀드렸죠? 물론 C# 같은데서 이러면 큰일나지만 셰이더는 대충 그래요 대충 그렇다니까 대충 알아 들읍시다 

그럼 다른 색은 어떻게 나타낼 수 있을까요? 

빨강색은?

빨강은 float3 (1,0,0) 이겠죠?

 

 

요거야 뭐 멀리서 안봐도 빨강인거 알겠죠 

 

그럼 이번엔 노랑은? 

노랑은 float3 (1,1,0) 입니다

자 멀리서 보세요 어여 멀리서 봐요 멀리서 보라고 쫌 

그러면.. 이번엔.. 
이건 무슨 색일까요?? 

float3 (1,0,1)

자 상상해 보세요 

뭘까요

 

 

 

 

상상하기 전까지 안보여줄것임. 

아 책에서는 이게 불가능했는데 여기다 쓰니까 모니터로 보여줄수 있어서 조쿤요??

자 됐나요?

 

이겁니다. 그... 셰이더 깨졌을때 나오는 색. 
캬캬캬 이 색이 float3(1,0,1) 이예요. 
이런 색을 셰이더로 짜서 친구들을 놀라게 해 주면 

정말 친구들과 사이가 좋아지겠지요? 

 

 

좋습니다. 그럼 이제 우리는 float3가 어떻게 색을 표현하는지 알게 되었습니다. 

float3(0,0,0) 은 검은색이고, 
float3(0,1,0) 은 녹색이고, 
float3(0,0,1) 은 파랑색이고
float3(0,1,1) 은 하늘색이라는 것도 알게 되었습니다. 

그럼 마지막으로 회색은 어떻게 될까요?

네 그렇습니다. float3(0.5, 0.5 ,0.5) 이죠

절반만 밝아진 RGB 

자 이것도 보세요. 

즉 요걸 확대해 보면 위 이미지가 된다는 거죠. 

이제 그럼 float3 로 색을 표현하는걸 알게 되었으니, 색은 숫자로 나타낼 수 있고 , 숫자는 곧 색이란 것도 알게 되었습니다. 오늘 가장 중요하게 알아야 할 것은 이것이라는 거지요. 

알파 채널이 있으면 어떻게 될까요? RGBA 니까 float4 (R,G,B,A) 식으로 숫자를 쓰면 됩니다. 모니터에 알파 채널이 출력되지는 않지만, 알파 채널로 여러 연산을 한다던가 할 수 있으니 유용하지요. 그래서 셰이더에서 사용되는 색의 기본은 float4 단위로 처리되는 경우가 많습니다.

그럼 간략한 이론은 여기까지 하고, 다음시간에는 다시 셰이더 그래프로 가서 이 색을 연산해 보도록 할게요!! 

색을 숫자로 생각해 보고, 숫자로 다시 색으로 생각해 봅시다. 
아주 그냥 자동으로 숫자를 부르면 색이 생각나고, 색을 부르면 숫자가 생각나도록 훈련해 보세요! 

블로그 주인장에게 커피값을 후원할 수 있습니다!