분류 전체보기 16

물 쉐이더를 좀 더 업그레이드 해보자. 지난 강의 때 만들었던 물쉐이더를 업그레이드 해봅시다. 지난 포스트에서 완성한 물은 몇가지 아쉬운 점이 있었습니다. 스페큘러라던가 굴절도 전혀 없었죠. 좀 더 사실적인 물 표현을 위하여 스페큘러와 굴절을 추가해봅시다. Specular 추가하기 드넓은 수평선을 보고 있으면 해가 있는 곳에서부터 내가 있는 곳까지 물이 반짝반짝 일렁이던 것을 본적 있으신가요? 림라이트를 이용해 수면을 반짝이게 했더니 외곽선만 따라 물이 반짝이는 것이 아쉬웠습니다. 따라서 스페큘러를 직접 만들어 넣어줍시다! Specular lightDir와 viewDir를 더해 둘의 절반을 가르는 Half Vector를 구해준 뒤 normalize를 통해 길이를 1로 만들어주고, Normal Vector..

Reflection shader를 이용한 물 만들기 이번에는 지난 강의에서 배웠던 Reflection을 이용하여 물을 만들어 봅시다. 물은 비물리적인 물리기반 쉐이더입니다. 물리적으로 옳지만 PBR로 구현하기 굉장히 힘든 친구.... 그야말로 눈속임의 결정체!라고 할 수 있죠. Reflection와 Fresnel 가장 먼저 하늘을 투영해봅시다. 우선 Custom Shader를 만들어 준비 작업을 해줍니다. 넓은 호수를 바라보고 있으면 저 멀리 풍경들과 하늘이 수면에 비치는 것을 확인할 수 있습니다. 수면의 반사를 표현하기 위해 플렌에 Reflection넣어줍시다. 위의 우유니 소금사막도 완전히 거울처럼 하늘을 비치고 있는 것 같지만 사실 자세히 보면 바라보는 각도에 따라 점점 하늘 보다는 수면 아래의 소..

Warpped Diffuse 우리의 대인배 벨브님께서 발표한 공식으로 팀포트리스2에서 처음 도입된 쉐이딩 방식입니다. 셀쉐딩에서 극단적인 명암을 주기 위해 if문과 ceil함수를 사용했었는데요, if문은 무겁다는 단점이, ceil은 명암단계의 간격을 조절할 수 없다는 단점이 있었습니다. 하지만 Warpped Diffuse 공식은 이 두가지 단점을 한 방에 해결해버렸습니다. Warpped Diffuse를 구현해보기 위해 가장먼저 기본적인 NdotL커스텀 라이트를 만들어줍니다. 그리고 Ramp 텍스쳐를 하나 받아오는데, 이때 해당 텍스쳐의 uv는 받아오지 않습니다. void surf에도 안불러옵니다! 바로 커스텀 라이트에 tex2D함수로 새로 만든 텍스쳐를 불러와줍시다. RampTex의 uv를 받아오지 않은..

랜더링 파이프라인 (Rendering Pipeline)이란? 랜더링 파이프라인(Rendering Pipeline)은 3차원 이미지를 2차원 레스터 이미지로 표현하기 위한 단계적인 방법으로, 간단하게 설명하면 우리가 열심히 입력한 데이터들을 모니터에 출력하기 까지의 과정입니다. 가장 먼저 버텍스 정보(Position, Normal, Color 등등..)를 불러온 뒤 [=정점 데이터], 해당 정보를 바탕으로 버텍스를 이어 삼각형의 폴리 곤으로 만들어 줍니다. [=삼각형 분할] (모델링할 때 엣지가 삼각형이 되도록 해야하는...이유,,?) 그 다음으로 화면에 메쉬가 어떻게 보여질지 결정되는 것이 정점 쉐이더(Vertex Shader) 부분에서 이루어집니다. 로컬 좌표가 월드 좌표에 적용이 되고.... 그게 또..

NPR이란? Non-Photorealistic Rendering의 약자로 비사실적 렌더링을 의미합니다. NR(Photorealistic Rendering, 사실적 렌더링)이 사진과 똑같이 만들어내는 것을 목표로 했다면, NPR은 회화나 드로잉, 도해, 만화 처럼 인공적인 양식에 초점을 맞춘 그래픽 스타일 입니다. NPR 기법 중에는 Cel shading/Toon shading등이 대표적입니다. Cartoon Shader NPR에도 다양한 기술들이 존재하지만 가장 먼저 떠오르는 것은 만화적인 느낌을 살린 Toon/Cel shading 기법일 것입니다. 이 기법과 NR 스타일을 비교하였을 때 가장 눈에 띄는 특징은 '외각선'과 '깔끔하게 나눠지는 음영 단계'등이 있죠. 물론 이 뿐만 아니라 다양한 기술을 통..

이전 포스트에서 만들었던 Lambert 쉐이더에는 Specular가 포함되어있지 않습니다. 이번에는 Lambert 쉐이더에 Speculer를 추가해 봅시다. Pong Shading Phong Shading이란? 1975년 Bui Tuong Phong씨가 개발한 쉐이딩 기술로, 면단위가 아닌 버텍스간의 보간작업을 진행하는 랜더링 방식입니다. 각진 면을 부드럽게 블랜딩 하는 것에 효과적이지만 실제 스페큘러와 흡사하지 않으며, 평평한 면에서는 스페큘러가 제대로 작동되지 않는 단점이 있습니다. (하이라이트가 언제나 동그랗게 맺힌다..) 퐁 공식에서는 어떻게 Speculer를 구하는 것일까요? Reflection Vector Speculer는 '정반사'를 의미합니다. 빛이 물체에 반사 되어 눈에 들어올 때, 입사..

이전 커스텀라이트 포스트에 이어 오늘은 림라이트를 만들어보겠습니다! 그 전, 이전 포스트에서 공부했던 커스텀 라이트를 만들어보며 복습합시다! 사실 저번 포스트에서 만들었던 램버트 커스텀 라이트는 이렇게 써주면 한 방에 완성이 됩니다. RimLight 림라이트란? 피사체 뒤에서 강한 조명을 주어 피사체의 위나 측면 모서리 등, 외곽의 실루엣을 따라 빛의 테(Rim)을 보여지는 것을 RimLight라고 합니다. 주로 피사체를 배경으로부터 돌출되게 하거나 인물 주위에 후광과 같은 테두리를 만들어 냄으로써 화면의 부조효과를 더욱 돋보이게 하기 위하여 사용합니다. 게임에서는 림라이트만을 보이게 하여 홀로그램이나, 이펙트등으로 사용되기도 합니다. 림라이트는 물체의 뒤에서 강한 빛을 쏴 '외곽선이 빛나게' 만드는 것..

Vector란? 백터란 무엇일까요? 고등 수학에서 백터와 기하학이란 것을 배웠던 것 같은데.... 저는 기억에 없습니다... 컴퓨터 그래픽에서 Vector는 [힘]과 [방향]을 표현해주는 도구 입니다. 간단하게 설명하자면 화살표의 방향과 그 길이는 힘이라고 보시면 되는데요, 이러한 백터는 위치에 영향을 받지 않습니다. 즉, 방향과 힘이 같다면 모두 같은 벡터인 것이죠. Vector는 Shader에서 float을 이용하여 표기하며 2차원은 float2, 3차원은 float3로 표현 할 수 있습니다. 벡터는 방향과 힘을 표현하는 친구로 위치의 영향을 받지 않기 때문에 표기할 때 역시 시작점>도착점이 아닌, 시작점을 0으로 고정하여 이동한 방향과 힘만 표시합니다. (0.1)>(0.2) 이렇게 표기 하지 않고 ..

본론부터 말하자면 이번 포스트에서는 이걸 직접 만들어 봅시다! 경우에 따라 위에 있는 기능을 전부 사용하지 않을 수도, 없는 기능이 필요로 할 수 도 있을 겁니다. 필요한 기능만 쏙쏙 뽑아서 넣고싶은데..... 그렇다면 먼저 내가 '어떤 기능이 필요한지'를 알아야겠죠. 기본기를 확실하게 익히고, 자연스럽게 떠올릴 수 있을 정도로 공부해야하는 이유라고 생각합니다. 현존하는 쉐이더 코드를 몽땅 알고 있다고 해도 내가 뭘 표현하고 싶은지, 이 기능이 어떤 표현과 연결이 되는지를 알아야 커스텀 쉐이더를 짜던 할거에요. 그래서 대박적 지루하고 머릿속에 더럽게 안들어오지만 반복해서 공부해야하는 것이 바로, 빛(조명)의 이론입니다. Lighting theory (라이팅 이론) 우리가 눈으로 보는 모든 사물의 색상은 ..

버텍스에는 다양한 정보가 들어있습니다. 대표적으로 1. Index 2. Position 3. UV 4. Normal 5. Color 등이 있죠. 이 5개만 알고 있어도 어디가서 욕먹지는 않을 겁니다. 오늘 저희가 오늘 주목할 건 이 5개의 정보들 중 'Color'입니다. 버텍스에는 float4의 '색'을 자체적으로 가지고 있습니다. RGBA 알파까지! 공짜로요! 텍스쳐를 따로 넣지 않아도 컬러를 넣을 수 있다는 말입니다. 버텍스 컬러를 따로 건들이지 않았을 땐 기본적으로 float4( 1, 1, 1, 1 )로 되어있습니다. 흰색의 불투명. 즉 우리가 버텍스 컬러를 사용하지 않아도 버텍스 컬러의 정보는 어찌됐건 포함이 되어있는 겁니다. 사용을 안할 이유가 없겠죠. 자 그래서 버텍스 컬러를 어떻게 넣냐, 3..

이번 포스트에서는 UV에 대해 조금 더 심도 있게 다뤄보겠습니다. UV 매핑란 2차원 그림을 3차원 모델로 만들기 위한 프로세스로, 간단하게 말하면 3D 모델링의 '전개도'를 만드는 것입니다. 이전 포스트에서 우리가 모델링을 하고, UV를 펴고 저장을 하게되면 그 모양 그대로 보존되는 것이 아니라 각각의 버텍스에 위치, UV, Normal, Vertex Color등의 데이터가 저장되고, 엔진에 불러왔을 때 이 데이터를 바탕으로 엔진에서 '재구성'이 이루어진다고 이야기 했었죠? 버텍스에 저장되어있는 데이터를 기반으로 엔진에서 다시 만들기 때문에 버텍스를 겹쳐두거나 쓰레기 버텍스가 있을 경우 엔진에 불러왔을 때 오류가 생기기도 합니다. UV는 이러한 버텍스에 들어있는 정보 값 중 하나로 struct Inpu..

이전 게시글에서 '변수 선언'에 대하여 설명을 했었는데요. 이를 응용하여 RBG 색상을 각각 따로따로 조절할 수 있도록 'RGB 슬라이더'를 만들어 가볍게 워밍업을 해봅시다. 우선 유저가 컨트롤 할 수 있는 '슬라이더'가 필요하겠죠? 가장 먼저 프로퍼티스(Properties)에서 인터페이스를 만들어줍니다. 슬라이더가 필요하니 'Range'를 사용하는 것이 적절하겠네요. SubShader를 3가지 구역으로 나눴을 때 남는 공간이 있었습니다. 위에 이미지에 보시면 half _Glossiness; 등등으로 적혀있는 것이 보이시나요? 이는 프로퍼티스에 작성해두었던 스크립트를 CGPROGAM와 연결해주는 것과 같습니다. 원하는 기능을 만들기 위해선 void surf 에서 코드를 작성해주어야하지만 Subshader..

24bit 컬러에서 흰색을 만들려면 R 255 G255 B255의 값을 주어야 합니다.최솟값인 0, 0, 0은 당연히 검정이겠죠? 색상 슬라이더나 색상 피커를 이용해보신다면 좀 더 빠르게 이해하실 수 있을 겁니다. 하지만 각 채널이 5,6,5bit가 되는 16bit 컬러에서는 R32 G64 B32가 흰색입니다. 즉 압축 포맷에 따라 범위가 모두 다르다는 뜻인데요. 이 다양한 압축 포멧에 따라 프로그래머가 일일이 색상 값을 입력한다? 머리가 터져버릴 것입니다. 여기서 사용하는 개념이 바로 '백분률'입니다. 백분율을 사용하게 되면 최댓값이 다르더라도 0~100%의 비율을 이용하여 색상을 가져오기 때문에 파일 포맷이 달라도 비슷한 결과가 나오게 되죠. 백분율이라 하면 0에서 100에 숫자를 떠올리기 쉽지만 0..

세상에는 정말 다양한 파일 포멧들이 존재합니다. 보통 그림을 그리시는 분들이 많이 익숙하실 포멧으로는 PNG나 TGA, JPG가 있으실 겁니다. 이중 PNG와 TGA는 '비손실 압축 포멧'으로 게임 파일 포멧으로도 많이 쓰이고 있죠. 우리가 아무리 비손실 압축 프로그램으로 깨끗하게 저장해도 이걸 엔진에 넣으면 엔진에서 호로록 압축해 버립니다. 만약 이미 압축된 파일을 넣는다? (OMG...) PC와 모바일은 각각 압축 포멧이 다른데요, 우선 PC 먼저 알아봅시다. DDS (Direct Draw Suface) (살짝 올드하긴한데) DDS는 nVidia사에서 개발한 포맷 방식으로 Dirext X의 텍스쳐 포맷과 일대일로 대응하는 손실 압축 방식입니다. Dirext X와 완벽하게 호환 되어 빠르게 사용이 가능..

컴퓨터의 모든 데이터는 0과 1로 이루어져 있습니다. 컴퓨터가 받아들이는 모든 정보는 0과 1로 변환되어 메모리에 저장되죠. 예를 들어 알파벳 'A'는 아스키코드에 따라 '1000001'로 변환되어 저장됩니다. 메모리에서는 '1000001'을 'A'로 바꾸어 우리들에게 보여주는 형식. 여기서 아스키코드는 8bit의 데이터를 사용하는데, 7자리는 문자를, 나머지 한자리는 패리티 비트(parity bit)로 데이터의 에러를 탐지하기 위해 사용됩니다. 이처럼 컴퓨터는 모든 정보를 비트 bit라는 단위로 처리하는데요, 이것은 색상도 마찬가지입니다. 사실 이렇게 글이 출력되고 있는 것도 따지고 보면 각각의 픽셀에 특정 색상을 출력하고 있는 것으로 볼 수 있죠. 사실 눈으로 직접 보이는 게 아니기 때문에 막 와 닿..