3. 색을 숫자로 생각하는 과정

이번 과제에서는 색상을 숫자로, 즉 데이터로써 생각하는 방법에 대해 생각해봅니다.

상상력, 영어로 imagination은 라틴어 imago에서 imaginari로, 옛 프랑스를 통해 넘어온 단어입니다. 그 어원이 되는 image를 생각해본다면, 시각적 정보는 상상력 및 인지에 높은 연관을 갖는다고 봅니다.

저희는 이 시각적 정보를 이제 수학적으로 간단하게 다뤄볼 차례입니다.

픽셀과 색상

시각으로 들어온 정보란 무엇일까요?

언제나 한 찰나의 순간에서는 저희는 언제나 한장의 사진을 보고 있다고 할 수 있습니다.

그러면 그 한장의 사진을 아주 조그만한 단위로 쪼갠다면 어떨까요?

컴퓨터 화면은 래스터 그래픽스로 구성되어 있는데,

즉 하나하나가 네모난 점을 이루고 있다고 볼 수 있습니다.

저희는 언제나 픽셀을 보고 있습니다.

이 픽셀은 정확히는 하나의 점을 의미하는데,

picture element. pic+el 의 합성어입니다.

비슷한 개념으로 나중에 언젠가 언급하겠지만(..?)

텍스처의 점, texel이라는 개념도 존재합니다.

아무튼 다시 돌아와, 이 픽셀은 총 3가지의 색상으로 구성되어 있는데

빨강,초록,파랑입니다.

이렇게 표현하는 방식을 RGB 색상모델이라 하는데 사실 RGB는 감각적으로 사용하기 어려운 정보죠.

RGB 색상모델

HSV 색상모델 (저는 HSV를 더 좋아합니다.)

아무튼 핵심은 그것입니다.

저희가 보고있는 화면조차도 사실은 정해진 색상의 강도의 합산이였다!!

자 분해해볼까요?

‘정해진색상’ ‘강도’ ‘합산’

여기서 정해진 색상이란, 각각 R,G,B를 말하는 것이니 저희가 수정할 수 없으니 저쪽으로 던지고

강도의 합산. 즉 각각의 수치 정보를 기록할 수 있다는 뜻입니다.

저희는 그것을 이미 익숙하게 많이 봐왔을 것입니다.

그렇습니다! 저 #C45037이라는 값이 색상값이라는 것입니다.

색상값의 구성을 살펴본다면,6글자의 영어와 숫자의 혼합입니다.

분명 자릿수는 6인데, 나타낼 색은 3개니 2자리마다 하나의 데이터를 갖는다고 봐야겠죠?

숫자인데 영어가 들어가니 당연히 16진수겠죠? (논리적 비약이지만 대부분 옳습니다)

그럼 #RRGGBB 로 값이 들어간다고 보면 됩니다.

색상의 연산

아 이거 참 ㅎㅎㅎㅎ ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

색상은 그러면 어떻게 연산하는 것일까요?

일단 어떤 연산들이 적용되는 걸까요?

사칙연산? 덧셈 뺄셈 곱셈 나눗셈?

답은 NO입니다

사칙연산에 뺄셈과 나눗셈이 필요없는.eu

후후후 저희 교주님의 말씀을 곰곰히 잘 생각해본다면 RGB 또한 아래 조건을 만족하므로

체(FIELD)입니다.

자 그러면 이런 RGB를 만약 (r,g,b)로 표현한다면 덧셈과 곱셈은 어떻게 되는걸까요?

이렇게 됩니다 (..그리고 벡터또한 동일한 성질을 가지고 있죠..)

즉 같은 색상의 값은 같은 색상의 값끼리,

숫자 곱에 대해서는 모든 색상의 값이 동일하게 변화함을 알 수 있습니다

하지만 수 체계에서 조심해야할 것은, 색상과 수는 사용할 때 조금 다릅니다.

그것은 바로 표현하는데 최대와 최소가 있다는 것이죠.

이제 이부분이 재미있습니다.

시각적으로 보이는 범위는 제한되어있는데, 수학적 구조로는 그렇지 않습니다.

왜 [ ]냐고요? 그것은 inclusive… 아무것도 아닙니다

그렇다보니 다양한걸 시도해 볼 수 있습니다

좌 : 보이는 영역을 고정, 우: 색상값을 고정

단순하게

보이던 영역의 값들을 전체적으로 0.5배 한 후,

보이던 영역의 0.5배 만큼 더해줬습니다.

수학은 이토록 직관적인 것이었습니다!!!

이에 대한 개념은, 기저벡터 조작을 통해 세상을 변화하는 것과도 같은데

2차원 평면에서의 변환과도 동일하게 1차원에서 곱셈과 덧셈을 행한다고 보면 될 것 같습니다.

저희가 ‘곱셈과 덧셈을 통해 조작한’ 공간을 다시 0~1라는 틀에서 본 것이죠.

조금 더 생각해 볼려면 곱셈이란 무엇인가 에 대해 생각해보면 좋을 것 같습니다.

생각보다 이거 재미있습니다. 곱셈이란 무엇일까요?

아무튼 이제 보이는 것도 숫자니까 식으로 변형할 수 있다는 것을 깨우쳤으니

가지고 놀아봐야겠죠?

자주사용하는 식

Add

Multiply

step ( in ≥ edge ? 1 : 0)

자른다고 생각하면 됩니다.

0과 1이라는 깔끔한 숫자로 나타내줄 수 있습니다.

smoothstep

솔직히 이친구는 정확히 뭔지 몰랐는데, 보간된 역Lerp라고 생각하니 마음이 편안해졌습니다.

min보다 클때 0이상의 값을, max보다 작을때 1미만의 값을 도출해

Cubic Hermite spline을 통해 부드럽게 도출해 줍니다.

즉 5~10의 값이 있다면 이 사이값을 0~1의 범위에 대응되는 지점의 값을 평가하여 도출해줍니다.

아마 대략 이런 커브일 것입니다. 컨트롤 포인트를 모르니..

1이상의 값의 사이인데도 불구하고 0~1 범위로 모두 나타납니다(오른쪽 위) *중요 : 처음 만드는 smoothStep의 프리뷰는 갱신해주지 않으면 처음엔 동작하지 않을 수 있습니다. 유니티버그예요

차이가 보이시나요?

abs

absolute. 절댓값입니다

oneMinus

말그대로 1 - x의 값입니다

구현

그럼 이것들로 이제 구현을 해보아야겠죠?

간단한 디졸브 쉐이더를 짜봅니다. 수업 쉐이더를 안보고 짠거라 좀 다를 수 있습니다.

일단 스텝절 입니다.

아래쪽은 부드러운 알파를 위해

smoothstep을 사용합니다

위쪽은 실제 텍스처가 들어갈 영역과

지워지는 부분의 색상을 마스킹할 값입니다.

더 좁게 잡아야겠죠?

다만 스텝의 경우 in과 edge가 반대인데,

솔직히 별 상관 없습니다.

one minus랑 기본마스킹 값이랑

둘 다 써야하니까요.

스텝영역도 간단합니다.

검은색으로 칠해진 영역(실제 텍스처가 들어갈 영역)엔 one minus를 통해 텍스처를 곱하고,

흰색영역에 사라질 색을 곱해줍니다.

하나의 텍스처에서 여러 단계를 나눠 알파와 색상을 따로 줬다고 보면 됩니다.

이렇게 말이죠.

결국 저 사이의 ‘상승하는’ 부분을 어떻게 구현할 것이냐에 따라

smoothstep을, 아니면 뭐 더하고 곱하고 하던가, 다양한 방법으로 구현을 할 수 있는 겁니다.

뭐 아무튼 저는 smoothstep을 사용하여 구현하였습니다.

끝!

UV

아무튼 저희는 텍스쳐의 색상을 가져와야합니다.

그리고 텍스쳐의 좌표계는 UV좌표계를 사용합니다.

왜 UV냐고요? ultra violet? NoNoNo

정확히는 UV 좌표계라고 읽어야 하는데,

이미 w,x,y,z는 사용하고 있습니다.

그 전 영어단어는 무엇일까요? hoxy..? 맞습니다

그래서 uv좌표계입니다.

아무튼 이 [0,1]로 이루어진 uv좌표계 역시 수학적으로 본다면 더 넓은 공간이 존재합니다.

그리고… 수학적이라는 말은 여러가지 식을 집어넣어도, 다시 수가 나온다는 재미있는 점으로

‘이것저것 할 수 있습니다.’

대상

만약 텍스처 끝보다 밖을 칠해야한다면 어떡해야할까요?

그에 대한 사람들의 해답으론 끝색을 계속,전체 반복, 대칭 이 있습니다.

보통 텍스처 설정에 있는데, 이를 쉐이더에서는 덮어쓰기 할 수 있는게 있습니다.

바로, sampler state입니다.

세가지 방식에 대해 살짝 맛보기로 보겠습니다.

아무튼 이렇게 이제 [0,1]의 공간에서 벗어날 수 있으니

이제 더 재미있는걸 해야겠죠?

사용할 수 있는 UV 함수들이 이렇게 많습니다.

그중 몇가지만 대충 추려서 보았습니다.

뭐 아무튼 이렇게 뽑아낸 것도 vector2이므로, 이것저것 넣어서 이상한걸 만들어 볼 수 있습니다.

여담

교주님에게 절여진 저는 색상 말씀하실때 조금 재미있는 생각을 하였습니다.

컬러도 벡터라면 RGB는 공간인가? → 공간이라면 행렬곱을 통한 변환 되겠네?

코드는 정말 간단합니다.

특정 텍스처 색상에 대해, 색을 저희가 설정한 기저로 변환할 것 입니다.

그렇게 괴상할 짓을 할 것이라고 유니티가 추측했는지

유니티는 죽음을 택했습니다.

깨워서 다시 시도합니다.

잘 동작합니다.

red와 blue가 뒤바뀐 공간

red<> green <> blue가 전부 뒤바뀐 공간

두 색상의 차원이 소실된 공간 (1차원 - 선)

모든 색상 차원이 소실된 공간 (0차원 - 점)

근데 이거 8주차에 기저벡터가 있네요…?

그냥 대충 읽고 넘겨주세요.

아무튼 이번엔 색과 수와 관련된 무언가들을 고찰해보았습니다.

첫 과제다 보니 어떻게 써야할지 잘 몰라서

그냥 틀 없이 기억나는 걸 복습하듯 가볍게 작성하였습니다.

이거 언제 카페로 옮기지?