<![CDATA[
<p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">수업 내용 정리해보기</span></p><p><span style="font-size: 12pt;">셰이더란 무엇인가?</span></p><p><br></p><p>==</p><p><span style="font-size: 13.3333px;">유니티에서 셰이더.<br></span></p><p><span style="font-size: 13.3333px;">맥스, 언리얼에서는 머티리얼이라고 부릅니다!</span></p><p><span style="font-size: 13.3333px;">(그래서 언리얼에서는 머티리얼을 짤 때 셰이더도 같이 짜야한다...)</span></p><p><span style="font-size: 13.3333px;">셰이더는 특정한 엔진에만 국한되어있지 않습니다.</span><br></p><p><span style="font-size: 13.3333px;">따라서</span></p><p><span style="font-size: 13.3333px;">" 셰이더를 다이렉트X 기반으로 배우더라도 유니티라는 툴에서도 셰이더를 사용할 수 있다! "</span></p><p><span style="font-size: 13.3333px;">즉, 핵심적인 개념을 공부하는 것이 중요합니다.</span></p><p><span style="font-size: 13.3333px;">핵심을 제대로 공부해두면 심지어 미래에 게임 업계 판도가 바뀌어서 유니티나 언리얼 등의 엔진이 사장되고 </span></p><p><span style="font-size: 13.3333px;">신규 엔진이 대세로 뜨게 되더라도</span></p><p><span style="font-size: 13.3333px;">그런 새로운 엔진에서도 무리 없이 셰이더를 사용할 수 있는 것입니다!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">그래서 </span><span style="font-size: 13.3333px;">▶</span><span style="font-size: 12pt;">셰이더는 무엇인가?</span></p><p><span style="font-size: 10pt;">셰이더가 무엇인지 이해하려면 먼저 GPU가 무엇이고 무슨 일을 하는지를 알아야합니다!</span></p><p><br></p><p style="text-align: left;"><span style="font-size: 13.3333px;">▶</span><span style="font-size: 13.3333px;">그럼 GPU는 뭔데!!?</span></p><img src="https://t1.daumcdn.net/cfile/cafe/231E104858BF704802" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="4.jpg" style="font-size: 9pt; text-align: center; clear: both; float: right; margin-left: 8px;" id="A_231E104858BF70480283B2"/><p><span style="font-size: 13.3333px;">GPU는 Graphics Process Unit의 줄임말입니다.</span></p><p><span style="font-size: 13.3333px;">'그래픽스' '프로세스' '유닛'</span></p><p><span style="font-size: 13.3333px;">영어가 나왔다... 따라서 어렵다는 결론이 나와버립니다(?).</span></p><p><span style="font-size: 13.3333px;">하지만 괜찮습니다!</span></p><p><span style="font-size: 13.3333px;">앞에서부터 하나씩 알아보면 됩니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">먼저 " 그래픽스 "</span></p><p><span style="font-size: 13.3333px;">그래픽스는 화면 상에 그래픽을 나타내기 위한 프로그램입니다!!</span><br></p><p><span style="font-size: 13.3333px;">(※ 컴퓨터 그래픽과 컴퓨터 그래픽스는 달라요!)</span></p><p><span style="font-size: 13.3333px;">(사진을 예로 들면 사진에 찍히는 피사체가 그래픽이고 사진을 찍기 위한 도구인 카메라가 그래픽스입니다.)</span></p><p><span style="font-size: 10pt;">그다음은 </span><span style="font-size: 10pt;">" 프로세스 "</span></p><p><span style="font-size: 10pt;">무언가를 진행하는 과정이라는 뜻입니다!</span></p><p><span style="font-size: 10pt;">마지막으로 " 유닛 "</span></p><p><span style="font-size: 10pt;">무언가를 하는 녀석이라는 단위입니다!</span></p><p><br></p><p><span style="font-size: 10pt;">따라서 GPU는...</span></p><p><span style="font-size: 10pt;">'화면상에 그래픽을 나타내는 진행 과정 연산을 처리해주는 녀석'이죠!!</span></p><p><br></p><p></p><p><br></p><img src="https://t1.daumcdn.net/cfile/cafe/2602F44858BF6A822C" class="txc-image" actualwidth="254" hspace="1" vspace="1" border="0" width="254" exif="{}" data-filename="3.PNG" style="text-align: center; clear: both; float: left; margin-right: 8px;" id="A_2602F44858BF6A822CA669"/><p><span style="font-size: 10pt;">(정말 대단하군!)</span></p><p><br></p><p><span style="font-size: 10pt;">그럼 이제 GPU가 누구인지 알아보고 살짝 친숙해진 김에</span></p><p><span style="font-size: 10pt;">GPU가 어디 사는 친구인지 장점은 무엇인지도 한번 알아보도록 합시다!</span></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 13.3333px;">GPU는 주로 그래픽 카드(하드웨어)의 핵심부에 붙어있습니다.</span></p><p><span style="font-size: 13.3333px;">컴퓨터의 마더보드에 CPU가 붙어있는 거랑 비슷합니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 10pt;">이 친구의 강점</span><span style="font-size: 10pt;">은 바로...두ㅜ구두구두구두구두구두구ㅜ</span></p><p><span style="font-size: 10pt;">소숫점 이하의 연산 처리를 빠르게 진행해준다는 것이죠!</span></p><p><span style="font-size: 10pt;">그래서 주로 </span><span style="font-size: 13.3333px;">CPU가 GPU에게 </span><span style="font-size: 13.3333px;">그림이나 글자 같은 </span><span style="font-size: 10pt;">그래픽 리소스를</span></p><p><span style="font-size: 10pt;">화면 상에 픽셀 별로 출력해주는 역할을 맡아줍니다!</span></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 10pt;">(원래는 GPU가 그저 CPU의 연산을 보조하는 기능만 하다가 하드웨어가 좋아지면서 3D 그래픽을 표현하기 위해 점점 더 발전하고 폴리곤의 형태를 변형시키거나, 라이팅 효과를 표현할 수 있게 되고 트랜지스터 개수가 점점 늘어나 고성능화 되었다는 역사가 있지만 이건 다음에...)</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/252B185058BF72D002" class="txc-image" actualwidth="202" hspace="1" vspace="1" border="0" width="202" exif="{}" data-filename="6.png" style="clear: none; float: none;" id="A_252B185058BF72D002594D"/></p><p style="text-align: center;"><span style="font-size: 13.3333px; text-align: start;">(그 . . 래 서 요 . . . ? 셰이더는 . . . 대체 무엇인</span><span style="font-size: 13.3333px; text-align: start;">가요?</span><span style="font-size: 13.3333px; text-align: start;">) </span><br></p><p style="text-align: center;"><br></p><p><br></p><p><img src="https://t1.daumcdn.net/cfile/cafe/227BDF4F58BF976901" class="txc-image" actualwidth="700" hspace="1" vspace="1" border="0" width="700" exif="{}" data-filename="8.PNG" style="text-align: center; clear: none; float: none;" id="A_227BDF4F58BF9769013204"/><br></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 10pt;">셰이더 정의를 어떻게 해야 가장 간결하게 설명할지 찾던 중에 </span><span style="font-size: 10pt;">교수님의 과거 댓글을 찾아내고야 말았습니다...!!</span><br></p><p><span style="font-size: 10pt;">(절대로.. 제가 설명하기 귀찮은 것이 아닙니다... 교수님의 댓글이 너무나 완벽하기 때문입니다...(회피))</span></p><p><br></p><p style="text-align: left;"><img src="https://t1.daumcdn.net/cfile/cafe/245E915058BFA4602F" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="10.jpg" style="clear: both; float: left; margin-right: 8px;" id="A_245E915058BFA4602F01E7"/></p><p>셰이더는 바로...</p><p><span style="font-size: 13.3333px;">▶'GPU에 명령을 내려서 그래픽 카드를 통해 출력되는 모든 픽셀의 함수'를 '제어'하는 것입니다!</span><br></p><p><span style="font-size: 13.3333px;">자신이 원하는대로 버텍스를 조작하여 픽셀을 화면 상에 출력시킬 수 있는 것이죠.....!! (정말 재밌습니다!)</span></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 10pt;">테셀레이션이나, 강렬한 빛을 2D 프레임에 투영하면 </span><span style="font-size: 10pt;">실제 빛의 범위</span><span style="font-size: 10pt;">보다 훨씬 퍼져보이는 </span><span style="font-size: 10pt;">블룸,</span></p><p><span style="font-size:10pt;">버텍스／프래그먼트 셰이더 등을 사용</span><span style="font-size: 10pt;">해 표현할 수 있</span><span style="font-size: 10pt;">는 블러 등의</span><span style="font-size: 10pt;"> 포스트 이펙트</span><span style="font-size: 10pt;">도</span></p><p><span style="font-size:10pt;">결국 전부 다 셰이더의 </span><span style="font-size: 10pt;">영역 안에 있는 것입니다</span><span style="font-size: 10pt;">!!!</span></p><p><span style="font-size: 10pt;">오오ㅡ찬양합시다 대마왕 교수님을ㅡ</span><br></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/272E343858C12D6E1A" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="1.png" style="clear: both; float: right; margin-left: 8px;" id="A_272E343858C12D6E1A3FA9"/></p><p style="text-align: left;"><span style="font-size: 13.3333px;">▶그래픽 아티스트도 셰이더를 간단하게 만질 수 있게 해달라!!</span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">라는 수많은 아티스트분들의 요청에 따라...</span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">아티스트에게 친근하고 줄줄이 코드보다 훨씬 간단해보이는... 그림! 도형! 줄 잇기!</span></p><p><span style="font-size: 13.3333px;">보다 직관적인 형태로 셰이더를 다룰 수 있게 해주는 툴이</span></p><p><span style="font-size: 13.3333px;">여러 가지 툴이 나왔어요!</span></p><p style="text-align: left;"><br></p><p style="text-align: left;"><br></p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2775DD3958C12D9303" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="2.jpg" style="clear: both; float: right; margin-left: 8px;" id="A_2775DD3958C12D9303A5E4"/></p><p style="text-align: right;"><span style="font-size: 13.3333px;">(위: 유니티 Shader Forge</span><span style="font-size: 13.3333px;">▶</span><span style="font-size: 13.3333px;">)</span></p><p style="text-align: right;"><span style="font-size: 13.3333px;">(아래: </span><span style="font-size: 13.3333px;">언리얼 머티리얼 노드</span><span style="font-size: 13.3333px;">▶)</span></p><p style="text-align: right;"><span style="font-size: 13.3333px;">등)</span></p><p><span style="font-size: 13.3333px;">셰이더는 어렵다.</span></p><p><span style="font-size: 13.3333px;">▶셰이더는 왜 어렵지?</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px; text-align: center;">셰이더는 수학덩어리입니다. 수학은 범위도 넓고 정말 어렵죠.</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px; text-align: center;"><br></span></p><p><span style="font-size: 13.3333px; text-align: center;">과연... 그럴까요?</span></p><p><span style="font-size: 13.3333px;">사실 셰이더가 어려운 진짜 이유는..</span></p><p><span style="font-size: 13.3333px;">가르치는 사람이 어렵게 가르쳐서 배우는 사람이 어렵게 배우기 때문입니다!!!</span></p><p><span style="font-size: 13.3333px;">수학도 코딩도 쉽게 가르치고 쉽게 배우면 정말 쉽습니다...!!</span></p><p><span style="font-size: 13.3333px;">(이렇게 소리쳤지만 아무도 믿지 않았다..)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">▶그럼 무엇부터 어떻게 배워야 하는가? </span></p><p><span style="font-size: 13.3333px;">완전 기초부터! 쉽고! 간단하게!</span></p><p><span style="font-size: 13.3333px;">▶디지털 텍스쳐 포맷 이론</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">== </span></p><p><span style="font-size: 13.3333px;">디지털 텍스쳐 포맷 이론</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">그래픽 작업 중이나 관련 공부 중에 '(R5 G6 B5) 컬러'나 'True Color'등의 단어를 보신 적이 있으신가요?</span></p><p><span style="font-size: 13.3333px;">얘네들은 전부 컬러 등의 데이터가 담길 수 있는 메모리 공간의 크기. 바로 '비트'와 관련이 있는 것입니다...!</span></p><p><br></p><p><span style="font-size: 13.3333px;">좋아요.. 아주 좋군요! 우선 비트가 무엇인지부터 알아봅시다!</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/217C054758BF96F307" class="txc-image" actualwidth="639" hspace="1" vspace="1" border="0" width="639" exif="{}" data-filename="9.png" style="clear:none;float:none;" id="A_217C054758BF96F3073969"/></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">비트는 바로... '데이터'를 나타내는 최소 단위입니다!</span></p><p><span style="font-size: 13.3333px;">데이터란 무언가에 대한 정보를 담을 수 있는 상자 같은 것이죠...!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">컴퓨터는 0과 1 밖에 몰라서 모든 연산을 0과 1로만 처리합니다.</span><br></p><p><span style="font-size: 13.3333px;">따라서 </span><span style="font-size: 10pt;">1개의 비트는 2가지의 상태(0, 1)을 나타낼 수 있으며</span><span style="font-size: 10pt;">,</span></p><p><span style="font-size: 10pt;">비트가 늘어날수록 표현할 수 있는 상태의 개수가 기하급수적으로 늘어납니다...!!</span></p><p><br></p><p><span style="font-size: 13.3333px;">0과 1. 두 개의 데이터 공간으로 색을 표현하려면 어떤 식으로 해야할까요!</span></p><p><span style="font-size: 13.3333px;">(2^1승 1bit Color (ex. 0 : 검정／1 : 하양))</span></p><p><br></p><p><span style="font-size: 13.3333px;">두 개의 색으로만 화면의 픽셀에 컬러를 부여하여 표현할 수 있습니다.</span></p><p><span style="font-size: 13.3333px;">(단, 그저 숫자에 불과한 0과 1에는 컬러 정보가 들어있지는 않습니다.</span><span style="font-size: 13.3333px;">)</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">1bit 컬러에서는 주로 검은색과 하얀색을 사용하는 걸 많이 볼 수 있는데,</span></p><p><span style="font-size: 13.3333px;">1비트의 데이터로 표현할 수 있는 최대 컬러 개수는 두 가지로 한정되어 있으니</span></p><p><span style="font-size: 13.3333px;">보다 가장 큰 대비를 갖고 있는 색 두 가지를 주로 사용하는 것이겠죠!!</span></p><p><span style="font-size: 13.3333px;">검은색 / 초록색으로도 자주 쓰였더라구요~~!!</span></p><p>(여기서 초록색이면 눈에 좋다는 속설이 적용되..고...?)</p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2653DA4C58C1BA981E" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="1bit rogue.jpg" style="clear:none;float:none;" id="A_2653DA4C58C1BA981E2DB9"/></p><p style="text-align: center;"><span style="font-size: 13.3333px;">(▲ 1비트 컬러가</span><span style="font-size: 13.3333px;"> 게임에 사용된</span><span style="font-size: 13.3333px;"> 예)</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/22405E4658C243FC1D" class="txc-image" actualwidth="700" hspace="1" vspace="1" border="0" width="700" exif="{}" data-filename="7.PNG" style="clear:none;float:none;" id="A_22405E4658C243FC1D2CC5"/></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">이후 하드웨어가 좀 더 발전하여 4비트 컬러도 표현할 수 있게 되었습니다!</span></p><p><span style="font-size: 13.3333px;">메모리 공간은...</span></p><p><span style="font-size: 13.3333px;">0000</span></p><p><span style="font-size: 13.3333px;">0001 </span></p><p><span style="font-size: 13.3333px;">0010</span></p><p><span style="font-size: 13.3333px;">0100</span></p><p><span style="font-size: 13.3333px;">1000..... 허ㅓ억..허억...ㄷ</span></p><p><span style="font-size: 13.3333px;">.</span></p><p><span style="font-size: 13.3333px;">.</span></p><p><span style="font-size: 13.3333px;">.</span></p><p><span style="font-size: 13.3333px;">1111까지 </span><span style="font-size: 13.3333px;">16개의 메모리 공간 사용 가능!!!</span></p><p><span style="font-size: 13.3333px;">따라서 16개의 컬러를 담을 수 있는 것입니다!!!!1</span></p><p><br></p><p style="text-align: center;"></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/256F9F3C58C1C6BD29" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="dc.PNG" style="clear:none;float:none;" id="A_256F9F3C58C1C6BD295891"/></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">다음은 8비트!!</span></p><p><span style="font-size: 13.3333px;">00000000 00000001. . . ~ 11111111까지</span></p><p><span style="font-size: 13.3333px;">256개의 메모리 공간!!</span></p><p><span style="font-size: 13.3333px;">256개의 컬러!!!</span></p><p><span style="font-size: 13.3333px;">256색 표현가능!!! 2^8승!!</span></p><p><span style="font-size: 13.3333px;">하지만 0과 1에는 색의 번호만 있고 컬러 정보는 없어요.</span></p><p><span style="font-size: 13.3333px;">컬러 정보는 다른 곳에 있는데요....!!! 그건 바로.. ... ....두ㅜ구두구두구두구</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">"팔레트(Palette)"</span></p><p><span style="font-size: 13.3333px;">바로 이곳에... 인덱스(컬러마다 번호가 붙어있음) 컬러 정보가 담겨있는 것입니다...!!</span></p><p><span style="font-size: 13.3333px;">(아티스트가 팔레트 컬러를 지정해둔 경우 타 파트 사람들이 마음대로 잘못건드리면 인생이 힘들어진다...)</span></p><p><span style="font-size: 13.3333px;">(특정한 번호가 매겨진 그 컬러가 사용된 모든 버텍스의 색이 바뀌어버리기 때문.)</span></p><p><span style="font-size: 13.3333px;">디더링이 진행되면서 팔레트를 추출할 수 있습니다!</span><br></p><p><br></p><p style="text-align: center;">근데 디더링이. . . 뭐지 ?</p><p><br></p><p><span style="font-size: 13.3333px;">디더링이란 바로 색 병치 혼합!!</span></p><p><span style="font-size: 13.3333px;">비슷한 컬러 정보를 가진 버텍스끼리 서로 근처에 찍어서 자연스럽게 보이게 하는 그래픽적 기법입니다.</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2677F43558C12E9303" class="txc-image" actualwidth="580" hspace="1" vspace="1" border="0" width="580" exif="{}" data-filename="demo.gif" style="clear:none;float:none;" id="A_2677F43558C12E93034D8E"/></p><p style="text-align: center;"><span style="text-align: center;">▲ 종류가 정말 많네요 ^~^</span><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/212C1A3558C2448F20" class="txc-image" actualwidth="600" hspace="1" vspace="1" border="0" width="600" exif="{}" data-filename="8.PNG" style="clear:none;float:none;" id="A_212C1A3558C2448F20C840"/></p><p><br></p><p><span style="font-size: 13.3333px;">아래는 팔레트 사용 실습!</span></p><p><span style="font-size: 13.3333px;">포토샵 Image-Mode-Indexed Color 메뉴로 들어가서</span><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2736584758C127E226" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="사심이 가득 담긴 크롭.png" style="clear:none;float:none;" id="A_2736584758C127E226085A"/></p><p style="text-align: center;">▲ RGB 색상(R) 대신 인덱스 색상(I)로 적용시킨다!<br></p><p style="text-align: center;">(우리딸 샤니가 이쁘니까 다들 보세요)</p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2168D54758C127E30C" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="크큭...PNG" style="clear:none;float:none;" id="A_2168D54758C127E30CB79E"/></p><p style="text-align: center;">▲ 원하는 팔레트 컬러 개수와 디더링 옵션을 설정한다<br></p><p style="text-align: center;">(사심이 가득 담긴 크롭)<br></p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2426A14758C127E433" class="txc-image" actualwidth="358" hspace="1" vspace="1" border="0" width="358" exif="{}" data-filename="알트를 누르면 리셋됨.png" style="clear:none;float:none;" id="A_2426A14758C127E433F1A7"/></p><p style="text-align: center;">▲ 옵션 잘못 선택했을 때 나노팁</p><p style="text-align: center;">(알트를 누르면 리셋 버튼이 나온다)</p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/245B0B4758C127E522" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="뽑아버렸다... 너의 ˝팔레트˝.PNG" style="clear:none;float:none;" id="A_245B0B4758C127E5223E28"/></p><p style="text-align: center;"><span style="font-size: 9pt;">▲ </span>뽑아버렸다... 너의 ˝팔레트˝<br></p><p style="text-align: center;">( 8비트 컬러이므로 2^8개 )</p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2322C24758C127E613" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="바뀌어버렸어...너의.. '버텍스 컬러'.PNG" style="clear:none;float:none;" id="A_2322C24758C127E613EE6A"/></p><p style="text-align: center;"><span style="font-size: 9pt;">▲ </span>바뀌어버렸어... 너의.. '팔레트 컬러'</p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">팔레트 애니메이션</span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2118AD3758C12C2126" class="txc-image" actualwidth="500" hspace="1" vspace="1" border="0" width="500" exif="{}" data-filename="tumblr_my8e8jEOIx1sinai9o1_500.gif" style="clear:none;float:none;" id="A_2118AD3758C12C21262CF9"/></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2736163558C12BEC21" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="tumblr_mxruadtT0W1sinai9o1_500.gif" style="font-size: 9pt; clear: none; float: none;" id="A_2736163558C12BEC210F95"/><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">(</span><span style="text-align: center; font-size: 9pt;">▲ </span><span style="font-size: 13.3333px;">정말... 대단하고 멋지다..)</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">이런 식으로 팔레트의 컬러를 임의로 바꿔서 물체가 움직이는 것처럼 보이게 하는 기법도 있습니다!</span></p><p><span style="font-size: 13.3333px;">(게임에서의 사용 예로는, 블리자드의 갓ㅡ게임 '스타크래프트'의 애니메이션 대부분에 사용되었다.)</span></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">단 2개의 컬러만 사용할 수 있던 1비트(2^1bit)에서 8비트(2^8bit)로 용량이 8배 증가한 반면에!!</span></p><p><span style="font-size: 13.3333px;">사용 가능한 컬러 개수는 128배나 증가했습니다!!</span></p><p><span style="font-size: 13.3333px;">2^n승으로 기하급수적으로 증가하기 때문에 하드웨어가 발전할수록 점점 남는 장사가 됩니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">16비트로 갑니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">2의 16승.... 65536이죠!!</span></p><p><span style="font-size: 13.3333px;">플머들은 숫자를 0부터 세므로 0 ~ 65535까지 색을 표현할 수 있습니다!!!</span></p><p><span style="font-size: 13.3333px;">하드웨어가 더 발전하였기 때문에....</span></p><p><span style="font-size: 13.3333px;">드뎌... 빛의 삼원색인 RGB를 사용해서 컬러를 표현할 수 있게 되었습니다!</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2240DC4158C1BEE423" class="txc-image" actualwidth="258" hspace="1" vspace="1" border="0" width="258" exif="{}" data-filename="RGB_16bits_palette_color_test_chart.png" style="clear:none;float:none;" id="A_2240DC4158C1BEE4237240"/></p><p><br></p><p><span style="font-size: 13.3333px;">사실은 예전부터 RGB라는 게 컴퓨터에 존재하긴 했지만..</span></p><p><span style="font-size: 13.3333px;">하드웨어가 구려서 사용할 수 없었던 것입니다.(팩.폭. 작렬)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">여기서 잠깐 퀴즈~~!!</span></p><p><span style="font-size: 13.3333px;">-</span></p><p><span style="font-size: 13.3333px;">빨강초록파랑빛 합치면 흰색!!</span></p><p><span style="font-size: 13.3333px;">3개의 픽셀이 뭉쳐서...하나로 보인다!</span></p><p><span style="font-size: 13.3333px;">RGB 다 끄면 검은색!! R만 있으면 빨간색!!</span></p><p><span style="font-size: 13.3333px;">R, G만 켜지면 무슨 색?? 노란색!!!</span></p><p><span style="font-size: 13.3333px;">RGB 절반만 켜지면? 회색!!!!!!</span></p><p><span style="font-size: 13.3333px;">-</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">색의 강도를 조절하면.... 컬러를 "컨.트.롤."할 수 있습니다!!!!! 정말 멋진 일이죠.</span></p><p><span style="font-size: 13.3333px;">R／G／B 각각에 데이터를 골고루 나누어주기 위해,</span></p><p><span style="font-size: 13.3333px;">하나당 숫자 16개 분량의 비트 (ex. 0000000000000000)를 3개로 나눕니다!</span></p><p><span style="font-size: 13.3333px;">근데.. </span><span style="font-size: 13.3333px;">5／5／5로...나누면.. 15개군요...?</span></p><p><span style="font-size: 13.3333px;">사람의 망막에 있는 시세포 중 원추세포가 인식할 수 있는 </span><span style="font-size: 13.3333px;">가시광선의 파장 중 </span><span style="font-size: 13.3333px;">옐로 ~ 그린 계열의 파장이 </span><span style="font-size: 13.3333px;">비교적 긴 편이며, 사람의 눈은 </span><span style="font-size: 13.3333px;">초록색을 더 민감하게 반응하여 인식하기 </span><span style="font-size: 13.3333px;">때문에 </span><span style="font-size: 13.3333px;">그린에 1개를 더 줍시다!</span></p><p><span style="font-size: 13.3333px;">▶ ( 5bit 6bit 5bit ) Color가 되었습니다!!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">5bit는 2^5이므로 32!!</span></p><p><span style="font-size: 13.3333px;">따라서 Red는 32개의 단계로 깜빡일 수 있죠!!</span></p><p><span style="font-size: 13.3333px;">그린은 6bit이므로... 64!! 5bit보다 두 배가 증가한다! 제곱은 정말 좋군요...!!</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">이전보다 훨씬 더 다채로운 컬러 표현이 가능해졌습니다.</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">32*64*32곱하면 65536개의 경우의 수!</span></p><p><span style="font-size: 13.3333px;">(R5 G6 B5) ▶ 5+6+5는 16이므로 2를 16승 해주면 65536!!</span></p><p><span style="font-size: 13.3333px;">16비트 칼라!!!</span></p><p><span style="font-size: 13.3333px;">[4:4:4:4로 사용할 수도 있지만, 한 가지 색이 16단계로 밖에 못 깜박이므로 색의 다양함이 줄어듭니다.]</span></p><div><span style="font-size: 13.3333px;"><br></span></div><p><span style="font-size: 13.3333px;">▶65536개라는 어마어마한 수의 컬러를 표현할 수 있는 것이죠!!</span></p><p><span style="font-size: 13.3333px;">RGB를 사용하므로 팔레트는 버립니다!(과감하군!)</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/233DFA3858C1C77E05" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="816.PNG" style="clear:none;float:none;" id="A_233DFA3858C1C77E053D78"/></p><p></p><p style="text-align: center;"></p><p style="text-align: center;"><span style="font-size: 13.3333px;">((하지만.. 아직은 그라데이션을 그리면 사람 눈에는 줄무늬가 보입니다. 그래도 훨씬 나아졌군요!))</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: left;"><span style="font-size: 13.3333px; text-align: start;">게임에서 주로 쓰는 텍스쳐도 16비트 칼라입니다</span><span style="font-size: 13.3333px; text-align: start;">!</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">다음은... 32비트가 아니라 24비트!!!</span></p><p><span style="font-size: 13.3333px;">한 픽셀에 000000000000000000000000 !! 숫자가 24개나 들어갑니다!!!!</span></p><p><span style="font-size: 13.3333px;">2의... 24승!!! 1600만 칼라! 16,777,216 칼라! 트루 칼라라고 부르죠!</span></p><p><span style="font-size: 13.3333px;">3개로 나누면.. 한 채널당 8 8 8 칼라로 나눌 수 있구요! (R8 G8 B8)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">▶ 레드 그린 블루가 각각 256단계로 반짝이므로!!</span></p><p><span style="font-size: 13.3333px;">256는 2^8..따라서 (255 255 255)가 하얀색입니다...!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">이것은 바로</span><span style="font-size: 13.3333px;">... </span><span style="font-size: 13.3333px;">TGA (알파 없는 것) 포맷입니다!!! </span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/220ABF3F58C1BFB928" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="r5g6b5.jpg" style="text-align: center; clear: none; float: none;" id="A_220ABF3F58C1BFB9281ABD"/><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">여기다가 32비트를 주면...!! </span></p><p><span style="font-size: 13.3333px;">각각 256단계로 반짝이는 RGB와.. 알파채널!</span></p><p><span style="font-size: 13.3333px;">32비트는 (2^8 * 2^8 * 2^8 * 2^8 ) == (256*256*256*256)</span></p><p><span style="font-size: 13.3333px;">▶ 4,294,967,296</span></p><p><span style="font-size: 13.3333px;">경우의 수가.. 42억개! 정말 어마어마합니다.</span></p><p><span style="font-size: 13.3333px;">채널당 8비트씩 분배할 수 있죠! (R8 G8 B8 A8)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">포토샵에서 알파채널처럼 R／G／B채널만 각각 켜면 흰색과 검은색으로 보입니다!</span></p><p><span style="font-size: 13.3333px;">흰색이 가장 높은 강도, 검은색이 가장 낮은 강도로 표현!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">채널당 16비트이면...</span></p><p><span style="font-size: 13.3333px;">한 채널이 16비트이면 (16R 16G 16B 16A) </span></p><p><span style="font-size: 13.3333px;">한 채널이 32비트이면 (32R 32G 32B 32A) </span></p><p><span style="font-size: 13.3333px;">▶이것은.. EXR이나 TIFF 파일 포맷!!!</span></p><p></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"> (채널당 16비트／32비트 지원 가능한 초고화질 기법)</span><br></p><p></p><p></p><p><br></p><p><span style="font-size: 13.3333px;">(HDR 파일도 이런 식으로 정밀하게 구성되어 있습니다!!!)</span></p><p><span style="font-size: 13.3333px;">(ex. 16비트／32비트는 HDR, 라이트맵, 터레인 높낮이를 표현해둔 하이트맵 등에 사용합니다!)</span></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">FLOAT(부동소숫점)</span></p><p><br></p><p style="text-align: left;"><img src="https://t1.daumcdn.net/cfile/cafe/2303923458C1249930" class="txc-image" actualwidth="600" hspace="1" vspace="1" border="0" width="600" exif="{}" data-filename="제길.png" style="clear:none;float:none;" id="A_2303923458C12499306BC1"/></p><p><br></p><p><span style="font-size: 13.3333px;">크기가... 32비트! 즉 4바이트! (8비트에 1바이트)</span></p><p><span style="font-size: 13.3333px;">소숫점이 있는 수! 실수라고도 합니다!</span></p><p><br></p><p><span style="font-size: 13.3333px;">(5R 6G 5B) 컬러에서는 (2^5 2^6 2^5)==(32 64 32)이므로</span></p><p><span style="font-size: 13.3333px;">32 64 32가 하얀색!!</span></p><p><span style="font-size: 13.3333px;">(8R 8G 8B) 컬러에서는 (2^8 2^8 2^8)==(255 255 255)이므로</span></p><p><span style="font-size: 13.3333px;">255 255 255가 하얀색!!!</span></p><p><span style="font-size: 13.3333px;">(aR bG cB) 컬러에서는 (2^a 2^b 2^c)==(x y z)이므로</span></p><p><span style="font-size: 13.3333px;">제일 끝에 있는 게 하얀색!!!!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">하얀색의 기준이 모두... 달라져버립니다.</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">이렇게되면 골치 아파지는 플머들은 그래픽 파트쪽에서</span></p><p><span style="font-size: 13.3333px;">텍스쳐를 565컬러 포맷으로 줄지 888컬러 포맷으로 줄지 다른 어떤 걸로 줄지 모르므로</span></p><p><span style="font-size: 13.3333px;">어떤 포맷으로 받든 적용시키기 위해 퍼센테이지로 표현하면 편하죠!!</span></p><p><span style="font-size: 13.3333px;">(100% 100% 100%) (1.0이 100%, 0.0이 0%이다)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">이것을 float로 표현해야하므로 Float3(1.0, 1.0, 1.0)</span></p><p><span style="font-size: 13.3333px;">Float3(0.5, 0.5, 0.5)는 회색....!!!</span></p><p><span style="font-size: 13.3333px;">포토샵에선 각 채널을 255로 나누면 변환할 수 있습니다!! (ex. 255/255 = 1)</span></p><p><span style="font-size: 13.3333px;">"숫자를 색깔로 나타낸다!!!"라는 개념. 정말 중요합니다.</span></p><p><br></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">여담</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">float는 너무 크니까 절반정도 크기인 하프나 픽스드를 자주 쓴다!</span></p><p><span style="font-size: 13.3333px;">half는.. float의 절반 정도 크기...! 16비트!</span></p><p><span style="font-size: 13.3333px;">fixed는 훨씬 더 작다! 11비트!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">RGB는 xyz축과 같다!!</span><br></p><p><span style="font-size: 13.3333px;">따라서 컬러는 좌표로 나타낼 수 있다!!!!</span></p><p><span style="font-size: 13.3333px;">노말맵이 거의다 파랗게 보이는 이유는 RGB에서 z값이 높기 때문이다!!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><img src="https://t1.daumcdn.net/cfile/cafe/21528F4E58C303E71D" class="txc-image" actualwidth="350" hspace="1" vspace="1" border="0" width="350" exif="{}" data-filename="hdrmonit.png" style="text-align: center; clear: both; float: right; margin-left: 8px;" id="A_21528F4E58C303E71D836B"/></p><div></div><div><p><span style="font-size: 13.3333px;">HDR ( High Dynamic Range )</span></p></div><div><div style="text-align: center;"><br></div><p><span style="font-size: 13.3333px;">HDR이 뭘까요~~!!???</span></p><p><span style="font-size: 13.3333px;">일단 영어니까.. 단어를 하나씩 살펴봅시다...!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p></p><p><span style="font-size: 13.3333px;">일단 첫번째로... ! 하이("High")..!! 정말 반가워요~!(하이~!?) 아니.. "높다"는 뜻이죠!</span></p><p><span style="font-size: 13.3333px;">그다음은... 다이나믹("Dynamic")...! 이건 헷갈릴 수 있는데..</span></p><p><span style="font-size: 13.3333px;">바로 동적인! 역동적인! 이라는 뜻입니다~~!!</span></p><p><span style="font-size: 13.3333px;">레인지("Range")! 이건...</span></p><p><span style="font-size: 13.3333px;">최대／최소치가 정해진 특정한 범위를 나타내는 말이죠!</span></p><p><span style="font-size: 13.3333px;">HDR은 HDRR 또는 HDRL이라고도 하는데 너무 길어서</span></p><p><span style="font-size: 13.3333px;">보통은 뒤의 렌더링이나 라이팅을 빼고 말합니다.</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">따라서... HDR(R／L)은 바로!</span></p><p><span style="font-size: 13.3333px;">"어둡거나 밝은 부분이 </span><span style="font-size: 13.3333px;">(다른 모니터보다 상대적으로) 넓은 범위로 렌더링되는 녀석"이라는 뜻!!</span></p><p><span style="font-size: 13.3333px;">'동적명암비'라고도 하구요~</span><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;">"빛을 어디부터 어디까지! </span><span style="font-size: 13.3333px;">어두운 부분부터 밝은 부분까지 다채롭게 표현할 수 있는가!"가 바로 동적 명암비이죠...!!</span></p><p><br></p><p><span style="font-size: 13.3333px;">보통은 채널당 10비트 이상이면 HDR 모니터로 인정받습니다...!</span></p><p><span style="font-size: 13.3333px;">2^10승이니까... 한 채널당 1024단계나 되는군요..!!</span></p><p><span style="font-size: 13.3333px;">최근에는 오른쪽 이미지처럼 채널당 12비트나 되는 매우 높은 동적 명암비를 가진 TV도 나오는 추세입니다!</span></p><p><span style="font-size: 13.3333px;">예전에는 비교적 낮은 명암비를 가진 모니터만 나와서 생생한 빛을 표현하기 힘들었는데 HDR 모니터가 나온 이후로 표현할 수 있게 된 것입니다!</span></p><p><span style="font-size: 13.3333px;">'블룸'이라는 건 사실 채널당 8비트의 제한된 명암비 안에서 실생활의 눈부신 빛 같은 걸 표현하려는 기법이었는데</span></p><p><span style="font-size: 13.3333px;">HDR 모니터가 나오면서 블룸의 기준이 달라져버리는 것입니다.....!!!!</span></p><p><span style="font-size: 13.3333px;">넓은 명암비를 통해 곧바로 표현할 수 있게 된 것이죠!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">오른쪽 사진을 보시면 High Dynamic Range부분에 More than 1000 nits...?라고 나와있습니다!</span></p><p><span style="font-size: 13.3333px;">닛츠! 가로세로 1m²크기 공간에 촛불 하나가 켜져있는 밝기를 뜻하는 단위가 바로 1닛츠인데요...!!</span></p><p><span style="font-size: 13.3333px;">한 평 정도 되는 공간에 촛불이 약 3.3개 정도 켜져있는 것입니다!</span></p><p><span style="font-size: 13.3333px;">1000 nits면 어마어마하게 밝겠군요!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/220D764058C3059726" class="txc-image" actualwidth="300" hspace="1" vspace="1" border="0" width="300" exif="{}" data-filename="bcrt.png" style="clear: both; float: left; margin-right: 8px;" id="A_220D764058C305972687E4"/></p><p><span style="font-size: 13.3333px;">하이가 있다면 로우도 있겠죠?</span></p><p><span style="font-size: 13.3333px;">바로.. TGA 파일 포맷 형식 같은 888 컬러를</span></p><p><span style="font-size: 13.3333px;">LDR(Low Dynamic Range)／혹은 SDR(Small Dynamic Range)라고 합니다..!!</span></p><p><span style="font-size: 13.3333px;">채널당 8비트 컬러가 우리가 생각하기에는 뭔가 높아보이긴 하는데,</span></p><p><span style="font-size: 13.3333px;">256개의 단계로는 실제 실생활에서 경험할 수 있는 컬러를 전부 표현하긴 어렵습니다!</span></p><p><span style="font-size: 13.3333px;">예를 들면.. "한여름의 내리쬐는 밝은 태양빛" 같은 걸 888컬러로 표현하려고 하면 컬러를 표현할 수 있는 단계가 적어서 </span></p><p><span style="font-size: 13.3333px;">우리 생각보다 상당히 밍밍하게 나오는 것이죠...!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">보통 예전에 쓰던 CRT 모니터! '브라운관 모니터'라고도 합니다.</span><br></p><p><span style="font-size: 13.3333px;">얘가 보통 채널당 8비트 컬러로 화면을 표현하는데요!</span></p><p><span style="font-size: 13.3333px;">얘는 작동 원리를 따라서 ("Cathode Ray Tube" - 음극선 관...!!) </span><span style="font-size: 13.3333px;">(캐↗쏘→드ㅁ...레이 튜.. 브. ?. ?) 이름 붙여졌습니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">독일의 물리학자 브라운 아저씨가 실험해서 음극선관을 만들어서! 바로 그 이름이 붙여진 것이죠...!!</span></p><p><span style="font-size: 13.3333px;">(과학자들은 원래 자기 이름 붙이는 걸 정말 좋아합니다!)</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">왼쪽 그림을 보시면... RGB가 보이는군요!!</span></p><p><br></p><p><span style="font-size: 13.3333px;">과학 시간이 아니니까 대강 설명하자면...</span></p><p><span style="font-size: 13.3333px;">전자총으로 캐소드-레이(음극선)!</span></p><p><span style="font-size: 13.3333px;">"음극에서부터 나오는 RGB 컬러의 전자 3개를 </span><span style="font-size: 13.3333px;">관을 향해 쏴서!</span></p><p><span style="font-size: 13.3333px;">전자를 굴절시켜 화면 상에 표현하는 방식"이라는</span><span style="font-size: 13.3333px;"> 뜻이죠..!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">아무튼 각설하고 LCD 모니터는 발색이 약간 푸르딩딩하고... 날카로운 느낌이 들어서.. CRT 모니터의 음극선이 표현해주는 누리끼리하고 따뜻하고 은은한 아날로그적인 발색 때문에</span></p><p><span style="font-size: 13.3333px;">완전히 LCD모니터가 정착되기 전까지는 CRT 모니터를 메인으로, LCD모니터는 서브로 같이 쓰기도 했습니다!</span></p><p><br></p><p><span style="font-size: 10pt;">하지만... 게임 유저들이 모두 LCD 모니터로 갈아타면서 CRT 모니터는 완전히 갈아치워졌습니다...!!</span></p><p><span style="font-size: 10pt;">(눙ㅇ..ㅁ루... 안녕... 잘ㄹ가.. CRT~모니터T.T휴.ㅜ..ㅠㅠㅠ)</span></p><p><br></p><p><span style="font-size: 13.3333px;">모든 모니터가 HDR 모니터로 바뀌게 되면 현재의 LCD모니터도 사라지겠죠..? ㅎ,ㅎ! 정말 기대되는군요!</span></p><p><br></p><p><br></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">게임 전용 텍스쳐 포맷</span></p><div><span style="font-size: 13.3333px;"><br></span></div><p><span style="font-size: 10pt;">3D 오브젝트를 매핑하기 위해서는 2D </span><span style="font-size: 10pt;">텍스처가 필요합니다...!</span></p><p><span style="font-size: 10pt;">게임에 주로 사용되는 텍스쳐 포맷은 무엇일까요?</span></p><p><br></p><p><span style="font-size: 10pt;">TGA.. ? DDS...? 아니면.. PNG</span><span style="font-size: 10pt;">. . . ?</span></p><p><br></p><p><span style="font-size: 13.3333px;">아직까지는 잘 감이 잡히질 않으시죠...!!</span></p><p><span style="font-size: 13.3333px;">이것을 이해하려면 먼저 그래픽 API부터 알아보아야 하는데요!</span></p><p><span style="font-size: 13.3333px;">다같이 한번 알아보도록 하죠!</span></p><div><br></div><div><br></div><p><span style="font-size: 13.3333px;">최근에 주로 사용되는 그래픽 API의 양대산맥은 바로..</span></p><img src="https://t1.daumcdn.net/cfile/cafe/215EEB4458C3278A0E" class="txc-image" actualwidth="240" hspace="1" vspace="1" border="0" width="240" exif="{}" data-filename="drxogl.png" style="clear: both; float: right; margin-left: 8px;" id="A_215EEB4458C3278A0E95B4"/><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">" DirectX ", " OpenGL "</span></p><p><br></p><p><span style="font-size: 13.3333px;">" OpenGL " 같은 경우는 광활한 호환성을 중시하기 때문에</span></p><p><span style="font-size: 13.3333px;">거의 모든 기기에서 다 돌아가서 무척 많이 쓰는 API입니다!</span><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 13.3333px;">심지어 오픈소스죠! 조금씩 수정해서 쓰거나 판매할 수도 있습니다!</span></p><p><br></p><p><span style="font-size: 13.3333px;">우선, 그래픽 API의 역사부터 잠깐 알아봅시다...!!</span><br></p><p><span style="font-size: 13.3333px;">과거! MS-DOS 운영체제 기반 게임이 한창 인기를 끌고 있던 시절.</span></p><p><span style="font-size: 13.3333px;">MS가 만들어서 윈도우 운영체제에 지원하던 </span><span style="font-size: 13.3333px;">" GDI "</span><span style="font-size: 13.3333px;">라는 API가 사용되고 있었는데요...!!</span></p><p><span style="font-size: 13.3333px;">이 친구는 주로 2D 벡터 그래픽과 이미지, 글자를 출력하는 데에 썼습니다.</span></p><p><span style="font-size: 13.3333px;">하지만.. 그래픽 처리 성능이 쫌 많이 구렸습니다...</span></p><p><span style="font-size: 13.3333px;">너무나도 구렸던 것입니다....</span></p><p><span style="font-size: 13.3333px;">'윈도우에서는 할 게임이 없다'라는 말이 나올 정도로 구렸던 것이죠...</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">그래서 MS는 </span><span style="font-size: 13.3333px;">'지뢰찾기'나 '카드놀이'처럼 </span></p><p><span style="font-size: 13.3333px;">실시간 그래픽</span><span style="font-size: 13.3333px;"> 동기화 처리가 느려도 크게</span><span style="font-size: 13.3333px;"> 지장은 </span><span style="font-size: 13.3333px;">없는</span><span style="font-size: 13.3333px;"> 게임만</span></p><p><span style="font-size: 13.3333px;">기본 구성으로 넣어둔 것입니다....!! (근데...하다 보면 재미따...! 기획자 짱!)</span></p><p><span style="font-size: 13.3333px;">( 다 이유가 있는 것이었습니다! )</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">게임을 개발할 때에도..</span></p><p><span style="font-size: 13.3333px;">그래픽 카드의 그래픽 결과물을 출력하는 API가 통일되어있지 않아서</span></p><p><span style="font-size: 13.3333px;">그래픽 카드마다 각각 따로 개발을 해줘야만 했습니다...</span></p><p><span style="font-size: 13.3333px;">(허ㅓ억...ㄱ무척 개고생이다..)</span></p><p><span style="font-size: 13.3333px;">이때까지만 해도 </span><span style="font-size: 13.3333px;">규격이 통일되어있지 않아서 다들 OpenGL과 iMac PC를 선호하곤 했죠!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">그러던 중에 MS가 이런 광경(뭐라고.. 맥을 쓴다고?)을 미처 보고만 있을 수 없어 다이렉트 X를 만들어냈습니다!</span></p><p><span style="font-size: 13.3333px;">(전신으로 WinG라는 녀석이 있는데 얘는.. 성능도 쫌 구리고 도스게임이 이미 많이 나와있어서...)</span></p><p><span style="font-size: 13.3333px;">(많은 관심을 받진 못 했죠..)</span></p><p><br></p><p><span style="font-size: 13.3333px;">MS : "야ㅏ API 전부 통일해ㅡ(완젼 깡패)"</span><br></p><p><span style="font-size: 13.3333px;">MS : "글구 너네 그래픽카드에서 다이렉트엑스 지원해~~!!~(빼ㅐ액ㄱ~~!!!)"</span></p><p><br></p><p><span style="font-size: 10pt;">그렇게 MS의 독촉에 따라 AMD나 nVIDIA같은 유명한 하드웨어 회사들을 포함해서</span></p><p><span style="font-size: 10pt;">대부분의 회사들이 </span><span style="font-size: 10pt;">다이렉트 X를</span><span style="font-size: 10pt;"> 지원하는 그래픽 카드를 </span><span style="font-size: 10pt;">만들게 되었습니다</span><span style="font-size: 10pt;">!</span></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 10pt;">결과적으로 통일된 업계 표준 규격이 생겨서 좋은 일이긴 해요~~!</span></p><p><span style="font-size: 10pt;"><br></span></p><p><span style="font-size: 10pt;">간단 역사 이야기 끝!!</span></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">다시 한 번 질문해봅시다!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">게임에 주로 사용되는 텍스쳐 포맷은 무엇일까요?</span><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: left;"><span style="font-size: 10pt;">일단... 널리 사용되는 그래픽 파일 포맷에 대해 한번 살펴봅시다!</span><br></p><p style="text-align: left;"><br></p><p style="text-align: left;"><span style="font-size: 10pt;">==</span></p><p style="text-align: left;"><span style="font-size: 10pt;"><br></span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">DDS( DirectDraw Surface ) 포맷</span><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: left;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">DDS는 우리에게 조금 생소할 수도 있는데요!</span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">MS에서 만들었고, Direct X 7.0과 함께 등장한 파일 포맷입니다!</span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">과거의 업계 표준 포맷이었으니 지금의 TGA랑 비슷한 포지션이라고 생각하면 되겠군요!</span></p><p style="text-align: left;"><span style="font-size: 13.3333px;">( 지금도 DDS를 사용하지 않는 건 아니지만요! )</span></p><p style="text-align: left;"><br></p><p><span style="font-size: 13.3333px;">DDS 포맷의 특징은 무엇일까요!</span></p><p><span style="font-size: 13.3333px;">분명 굉장히 좋은 장점이 있으니까 썼을 것입니다!</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">여러 가지가 있는데요~! 하나씩 알아봅시다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">1. 그래픽 카드가 다이렉트X를 지원한다면, 1:1로 대응되어 압축을 풀지도 않고</span></p><p><span style="font-size: 13.3333px;">DDS 변환도 없이(이미 DDS인데 뭣하러 또 DDS로 변환하리오~~!)</span></p><p><span style="font-size: 13.3333px;">" 매우 빠르게 출력됩니다 ! "</span></p><p><span style="font-size: 13.3333px;">2. 손실 압축방식이라서 용량이 적은 편이라서 메모리를 최적화하기 편하기도 하구요~!</span></p><p><span style="font-size: 13.3333px;">(단, 2*2, 4*4처럼 짝수(2의 배수)로 압축되는 방식이 </span><span style="font-size: 13.3333px;">사이즈가 2의 승수만 가능합니다.)</span></p><p><span style="font-size: 13.3333px;">3. Direct X를 지원하는 그래픽 카드에서 하드웨어 가속 기능을 지원하기 때문에</span></p><p><span style="font-size: 13.3333px;">그래픽 리소스가 더욱 빠르게 출력됩니다!</span></p><p><span style="font-size: 13.3333px;">4. 밉맵을 만들 때 각 레벨별 서피스를 파일 하나에 저장할 수 있습니다!</span></p><p><br></p><p><span style="font-size: 13.3333px;">하지만 단점도 있는데요!!</span></p><p><span style="font-size: 13.3333px;">1. 미리보기가 안 돼서 웬만하면 바로바로 못 본다...</span></p><p><span style="font-size: 13.3333px;">2. 포토샵에서 바로 쓸 수 없고 플러그인을 설치해야다!</span></p><p><span style="font-size: 13.3333px;">(근데 이건 걍 플러그인을 깔면 해결되는 문제이긴 합니다!)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">장점이 훨씬 많군요?</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">이 정도면 충분히 사용할 수 있겠죠!?</span></p><div><br></div><div><span style="font-size: 10pt;">위쪽에서 그래픽 API 역사를 설명한 것처럼 대부분의 그래픽 카드가 다이렉트 X를 지원하게 되어서요~~</span><br></div><p><span style="font-size: 13.3333px;">PNG나 JPG 등의 다른 포맷 파일을 게임에 넣어도 다이렉트 X 때문에 자동으로 DDS로 변하게 만들어져있어요!</span></p><p><span style="font-size: 13.3333px;">이렇게 자체 압축되면서 그래픽 리소스가</span></p><p><span style="font-size: 13.3333px;">"한 번은 꼭 깨지기 때문에"</span></p><p><span style="font-size: 13.3333px;">최대한 우리 게임에 맞는 적절하고 좋은 파일 포맷을 써야합니다!</span></p><div><span style="font-size: 13.3333px;">그렇다면 과연.. .좋은 파일 포맷의 기준이 무엇일까요!!</span></div><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">일단 최적화를 위해 용량도... 적당해야하고!@~ 압축 포맷인지 무압축 포맷인지!</span></p><p><span style="font-size: 13.3333px;">손실 포맷인지 비손실 포맷인지도 고려해야 합니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">여러 가지를 따져보면...!!</span></p><p><span style="font-size: 13.3333px;">현재는 TGA가 가장 적당한 파일 포맷으로 알려져 있습니다! </span><span style="font-size: 13.3333px;">- 무압축 용량적당</span></p><p><span style="font-size: 13.3333px;">실제로 현업 표준 파일 포맷으로 사용되고 있구요~~!</span></p><p><span style="font-size: 13.3333px;">(그렇다고 해서 모든 곳에서 TGA만 사용하는 것은 아닙니다...!)</span></p><p><span style="font-size: 13.3333px;">UI 파트에서는 미묘한 그라데이션을 살리기 위해 용량이 크지만 비손실 압축포맷인 PNG 등을 그대로 씁니다!</span></p><p><span style="font-size: 13.3333px;">(단, 최적화를 위해 파일 개수를 줄여요~)</span></p><p><br></p><p><br></p><p>==</p><p><span style="font-size: 13.3333px;">●데스크탑 텍스쳐 포맷!</span></p><p><span style="font-size: 13.3333px;">( 실제로 졸작에 쓸 수 있는 포맷!! 참고합시다~~!! )</span></p><p><span style="font-size: 13.3333px;">( ※ 주의 : 알파가 있으면 용량이 2배!~~ )</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">게임을 만들 때는 TGA를 그냥 쓰지는 않고 TGA랑 똑같은 압축 형식을 가진 파일 포맷을 사용합니다!</span></p><p><span style="font-size: 13.3333px;">포토샵에서 dds 포맷 파일을 만드는 법은 !</span></p><p><span style="font-size: 13.3333px;">바로 아래 링크에서 포토샵 플러그인을 다운받으신 다음에</span></p><p><span style="font-size: 13.3333px;">"다른 이름으로 저장(A)"을 누르시면 아래와 같은 창이 뜹니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><a href="https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" target="_blank" class="tx-link">https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop</a></span><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2254134E58C31C2A2F" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="nvidia dds format.png" style="clear: none; float: none;" id="A_2254134E58C31C2A2F67A3"/></p><p><span style="font-size: 13.3333px;">DDS 플러그인을 통해서 밉맵도 만드실 수 있구요~~!</span></p><p><span style="font-size: 13.3333px;">▶ 보통은 TGA( 32bit )랑 같은 결과물인 DXTn 포맷들을 주로 사용하구요!</span></p><p><span style="font-size: 13.3333px;">▶ </span><span style="font-size: 13.3333px;">알파만 있는 8비트 형식도 가끔씩 사용합니다!</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">● iOS 텍스쳐 포맷은 PVRTC라는 이름으로 사용되고, 데스크탑 포맷과 이름은 다르지만 비트수는 비슷합니다!</span><br></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">● 하지만 </span><span style="font-size: 13.3333px;">안드로이드가 문제죠....!!</span></p><p><span style="font-size: 13.3333px;">안드로이드 기반으로 하드웨어를 만드는 회사가 다 달라서 기기별로 칩셋이 다 다르고 속도도 다르고</span></p><p><span style="font-size: 13.3333px;">버그도 다르고 셰이더가 안 돌아가기도 하고 생기는 버그도 다릅니다(제일 중요)~~</span></p><p><span style="font-size: 13.3333px;">그나마 공통적으로 사용할 수 있는 파일 포맷은 바로</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">RGB Compressed ETC 4 bits ! ! !</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">하지만 얘는... 알파가없ㅇ어요!!!!!@@!!@</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">그래서... .그냥.. 용량이 어마어마한....RGBA 16bit 포맷을 씁니다..</span></p><p><span style="font-size: 13.3333px;">근데..파일 포맷 자체에 논리적인 오류가 있어서...드럽게 깨집니다...</span></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">안드로이드 텍스쳐 파일 포맷을 유니티에서 확인해보자!</span></p><p><br></p><p><span style="font-size: 10pt;">주로 사용되는 포맷은.. ETC 포맷입니다!</span></p><p><span style="font-size: 13.3333px;">예전에 ETC1만 사용했을 때에는.. 비트수가 적어서 컬러가 많이 깨졌습니다.</span></p><p><span style="font-size: 13.3333px;">하지만 최근에 ETC2가 나와서 드디어 알파가 들어가고 성능도 좋아졌습니다!!!</span></p><p><span style="font-size: 13.3333px;">( 단, 사용 조건으로는 오픈지엘 3.0이상이어야 하고 )</span></p><p><span style="font-size: 13.3333px;">( 하드웨어적 성능은 갤럭시 노트3 이상이어야 해요!!@)</span></p><p><br></p><p></p><p><br></p><p><img src="https://t1.daumcdn.net/cfile/cafe/245FB94A58C325940F" class="txc-image" actualwidth="340" hspace="1" vspace="1" border="0" width="340" exif="{}" data-filename="format.png" style="text-align: center; clear: both; float: right; margin-left: 8px;" id="A_245FB94A58C325940F8665"/></p><p><span style="font-size: 13.3333px;">알파가 있으면 RGB마크! 밉맵이 있으면 밉맵 레인지 마크!</span></p></div><div><p><span style="font-size: 13.3333px;">※ 주의 : 언랩한 파일을 알파에 집어넣고 쓰면 안 된다는 것!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">RGBA Compressed ETC2 8 bits군요!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 10pt;">여기서 알파를 빼버리면 용량이 어느 정도로 줄어들까요?</span></p><p><span style="font-size: 13.3333px;">알파가 사라지면 RGBA가 한 채널당 8bit씩 4개로 같기 때문에 용량을 4로 나눠서 다시 3을 곱해주면</span></p><p><span style="font-size: 13.3333px;">최종적으로 줄어드는 용량을 예측할 수 있습니다!</span></p><p><span style="font-size: 13.3333px;">이런 식으로 용량을 계산해서 최적화하는 것이죠...!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">알파가 없을 때 압축시키면 ETC1 RGB로 압축됐었습니다!!</span><br></p><p><span style="font-size: 13.3333px;">하지만 깨집니다... 그것도 2*2 단위로 색을 깨버립니다!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: right;"><span style="font-size: 13.3333px; text-align: right;">( ▲ 클릭하시면 커져요 )</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">(그래서 사이즈가 2의 배수여야 해요 ((중요)) )</span></p><p><span style="font-size: 13.3333px;">현재는 ETC2가 나와서 괜찮지만요!</span></p><p style="text-align: left;"></p><p style="text-align: left;"><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">셰이더의 시초</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">셰이더의 시초는 애니메이션 스튜디오의 "Pixar"의 "RenderMan"이라는 게 정설입니다!</span></p><p><span style="font-size: 10pt;">CG 기술의 원천인 업계 표준 3D 렌더링 및 셰이더 기술을 만들어낸 것이죠!</span><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;">셰이더는 렌더링 파이프라인의 특정한 부분을 아티스트가 조작하기 위해 만들어진 것!!</span></p><p><span style="font-size: 13.3333px;">주로 단순한 반복연산을 병렬처리하는 명령을 GPU에 내려서 빠르게 처리할 수 있습</span><span style="font-size: 13.3333px;">니다</span><span style="font-size: 13.3333px;">!</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">그래서 이렇게나 빠른 셰이더! 정말 여러 곳에 응용할 수 있는 것이죠!</span></p><p><br></p><p><span style="font-size: 13.3333px;">예전에는 늘상 플머만 렌더링 파이프라인을 만지다보니까.. </span></p><p><span style="font-size: 13.3333px;">나오는 결과물이 아티스트가 보기에 " 매.우. 구.려.서.((중요)) "</span></p><p><span style="font-size: 13.3333px;">아티스트도 렌더링 파이프라인을 만질 수 있게 해달라고 요청하였고...!!</span></p><p><span style="font-size: 13.3333px;">결과적으로 파이프라인 중 일부분을 '셰이더를 통해 아티스트가 제어'하기 정말 쉽게(?) 만들어주었습니다!!</span></p><p><span style="font-size: 13.3333px;">( 단, 플머 기준으로 봤을 때 쉬운 거라서 문제인 것입니다.. )</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">셰이더 언어 - 표준이 달라버렷~~!!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">셰이더를 짤 때 주로 사용되는 언어가 세 종류가 있는데요!</span></p><p><span style="font-size: 13.3333px;">그건 바로...</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">다이렉트 X - HLSL／OpenGL - GLSL</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">Nvidia - Cg (C for Graphics)</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">( 근데 셋 다 문법이 매우 비슷해요! 공부하는 입장에선 매우 편하군요. )</span></p><p><br></p><p><span style="font-size: 13.3333px;">렌더 몽키(Render Monkey) - 다이렉트 X 기반으로 HLSL을 사용하는 셰이더 개발 프로그램!</span></p><p><span style="font-size: 13.3333px;">혹자는... "아티스트? 셰이더? 렌더몽키 한번 써봐~ 완젼 쉬워!!@"라고 할 것입니다...</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">하지만..</span></p><p><span style="font-size: 13.3333px;">" 다이렉트 X가 쉽다는 사람은 천성이 코딩 변태니까</span><span style="font-size: 13.3333px;"> 그 말을 "절대로" 믿어선 안 됩니다</span><span style="font-size: 13.3333px;">...!! "</span></p><p><span style="font-size: 13.3333px;">( 대마왕 교수님: ?아냐ㅡ 정통.. 코딩이야.... 어려워... )</span><br></p><p><span style="font-size: 13.3333px;">근데... 재미는 있어요.. ㅎ.ㅎ..1!!(자폭!!1@~~</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">유니티는 멀티 플랫폼을 지향하는 엔진이라서 호환성을 위해 </span><span style="font-size: 13.3333px;">약간의 자체 문법을 써서</span></p><p><span style="font-size: 13.3333px;">셰이더가 돌아갈 때 </span><span style="font-size: 13.3333px;">각 기기마다 지원하는 다른 셰이더 언어로 변환시켜줍니다!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">"ShaderLab" - 코딩까진 아니고 스크립트. 유니티의 셰이더 자체 문법</span></p><p><span style="font-size: 13.3333px;"> </span><span style="font-size: 13.3333px;">▶</span><span style="font-size: 13.3333px;"> 호환성이 정말 좋습니다! 돌아가지 않는 기기가 거의 없어요!</span><br></p><p><span style="font-size: 13.3333px;"> ▶ </span><span style="font-size: 13.3333px;">(하지만 기능이 매우 구려서 이걸로만 짜면 할 수 있는 게 없다ㅡ는 짠내나는 사실이..)(눙ㅜ물ㄹ..</span></p><p><span style="font-size: 13.3333px;">Surface Shader - ShaderLab 기반인데 중간만 Cg로 짜는 셰이더!</span></p><p><span style="font-size: 13.3333px;">Fragment Shader - 렌더몽키 쓰듯이 하드코어하게 다 짜는 셰이더!</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">▶ "서피스 셰이더 ( Surface Shade</span><span style="font-size: 13.3333px;">r </span><span style="font-size: 13.3333px;">)</span><span style="font-size: 13.3333px;">" 의 특징 !</span><br></p><p><span style="font-size: 13.3333px;">1. 행렬 연산 없음!( 이건 축..복이다.....,,, )</span></p><p><span style="font-size: 13.3333px;">2. 비주얼 셰이더 에디터( 언리얼 노드 등 )와 개념적으로 매우 비슷해요!</span></p><p><span style="font-size: 13.3333px;">3. 그림자를 자동으로 연산해줍니다! ((짱이다... 갓ㅡ플머님들 감사합니다))</span></p><p><span style="font-size: 13.3333px;">4. C문법 쬐끔 필요합니다!</span><span style="font-size: 13.3333px;"> (기초문법, 변수, 함수, 조건문 정도만 알면 된다는 것!!)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">※ 주의사항</span></p><p><span style="font-size: 13.3333px;">1-1. 셰이더 파일 이름과 셰이더 내부의 이름이 다릅니다!</span></p><p><span style="font-size: 13.3333px;">따라서 이름을 수정할 땐 신경써서 같이 바꿔주어야 해요!!</span><br></p><p><span style="font-size: 13.3333px;">1-2. 한 쪽을 수정한다고 해서 다른 쪽이 자동으로 수정되지도 않습니다...</span></p><p><span style="font-size: 13.3333px;">2-1. 프로퍼티 이름은 다 다르게 해야하고 잘 지어야합니다.</span></p><p><span style="font-size: 13.3333px;">2-2. 대소문자 구분이 정말...정말 중요합니다!</span></p><p><span style="font-size: 13.3333px;">글자하나만 달라져도 아예 다른 녀석으로 취급되기 때문입니다...!!</span></p><p><span style="font-size: 13.3333px;">3. '.'은 앞에 오는 거 안에 있는 뒤에 것입니다!</span></p><p><span style="font-size: 13.3333px;">▶ ( ' A.rgb ' 는 'A' 안에 있는 'rgb' 요소라는 뜻입니다.)</span></p><p><span style="font-size: 13.3333px;">4. 등호 '=' 에는 반드시 타입이 같은 걸 넣는다!!!</span></p><p><span style="font-size: 13.3333px;">5-1. Surface Shader에서는 </span><span style="font-size: 13.3333px;">스크립트부분이 </span><span style="font-size: 13.3333px;">CGPROGRAM으로 시작해서 </span><span style="font-size: 13.3333px;">ENDCG로 끝나요!</span></p><p><span style="font-size: 13.3333px;">5-2. </span><span style="font-size: 13.3333px;">CGPROGRAM 안쪽 코드는 </span><span style="font-size: 13.3333px;">ShaderLab으로 처리되는 부분이 아니라서 코딩 표준을 지켜야합니다!</span></p><p><span style="font-size: 13.3333px;">▶</span><span style="font-size: 13.3333px;">( 세미콜론 ' ; ' 붙이기 연산자 ' = ' 제대로 사용하기 등등.. ) </span></p><p><span style="font-size: 13.3333px;">5-3. </span><span style="font-size: 13.3333px;">CGPROGRAM으로 시작했으면 </span><span style="font-size: 13.3333px;">반드시 ENDCG라는 문을 닫아줘야만 합니다...!!</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">==</span></p><p><span style="font-size: 13.3333px;">셰이더 프로퍼티 인터페이스 설정 실습!!!</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/244DE24858C4056121" class="txc-image" actualwidth="693" hspace="1" vspace="1" border="0" width="693" exif="{}" data-filename="s1-2-17.png" style="clear:none;float:none;" id="A_244DE24858C40561217C2B"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">3-1. 셰이더 스크립트 파일을 보관할 폴더를 하나 만들고</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">쓰</span><span style="font-size: 13.3333px;">↗</span><span style="font-size: 13.3333px;">탠다드 써</span><span style="font-size: 13.3333px;">↗</span><span style="font-size: 13.3333px;">피스 쎼ㅔ↗</span><span style="font-size: 13.3333px;">이더를 하나 만들거예요!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">위에서 설명한 주의사항대로 먼저 원하는 셰이더 파일 이름을 잘 생각해서 지어줍니다!</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/230F004B58C3D01808" class="txc-image" actualwidth="500" hspace="1" vspace="1" border="0" width="500" exif="{}" data-filename="s-1-2-4.png" style="clear:none;float:none;" id="A_230F004B58C3D018080CBF"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">4. 구를 클릭하고 머티리얼에서 셰이더를 찾아서</span><span style="font-size: 13.3333px;"> 적용시켜주세요!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">셰이더를 새로 만들었으니 Custom 안으로 들어가면 있답니다!</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/213E994158C3D11334" class="txc-image" actualwidth="487" hspace="1" vspace="1" border="0" width="487" exif="{}" data-filename="s-1-2-5.png" style="clear:none;float:none;" id="A_213E994158C3D11334CC27"/></p><p><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">5. 가볍고 빠른 유니티 내장 스크립팅 에디터인 모노디벨롭을 선택하고</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">셰이더 스크립트로 들어가봅니다~~!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">( 비주얼 스튜디오는 첫 실행 시 로딩이 너무 길어요~~~ )</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/214DFB3D58C3D3AE0F" class="txc-image" actualwidth="500" hspace="1" vspace="1" border="0" width="500" exif="{}" data-filename="s-1-2-6.png" style="clear:none;float:none;" id="A_214DFB3D58C3D3AE0FBA91"/></p><p style="text-align: center;"><br></p><p></p><p style="text-align: center;"><span style="font-size: 10pt;">( 비주얼 스튜디오 2017부터 중괄호끼리</span><span style="font-size: 10pt;"> </span><span style="font-size: 10pt;">연결시켜 보여주는 </span></p><p style="text-align: center;"><span style="font-size: 10pt;">유용한 기능이 생기긴 했지</span><span style="font-size: 10pt;">만</span><span style="font-size: 10pt;">!</span><span style="font-size: 10pt;"> </span><span style="font-size: 10pt;">너무 느리니까 다음에</span><span style="font-size: 10pt;">~ )</span><br></p><p style="text-align: center;"><span style="font-size: 10pt;">( 세팅에 따라 간혹가다 변수에 </span><span style="font-size: 10pt;">불 안들어오는 경우도 있으니 주의</span><span style="font-size: 10pt;">! )</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2273533558C3F40D08" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="s1-2-7.png" style="clear:none;float:none;" id="A_2273533558C3F40D089D83"/></p><p style="text-align: center;"><span style="font-size: 10pt;">6. 스크립트는 보통 중괄호를 기준으로 각 블럭별로 기능과 구역이 나누어져 있습니다!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">스탠다드 셰이더 각 부분의 설명을 읽어주시고 계속 진행할거예요~~!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p style="text-align: center;"><span style="font-size: 10pt;">7-1. 이제 프로퍼티를 수정해볼 거예요~~</span></p><p style="text-align: center;"><span style="font-size: 10pt;">프로퍼티는 바로 머티리얼에 보이는 인터페이스인데요!</span></p><p style="text-align: center;"><span style="font-size: 10pt;">자신이 넣고 싶은 텍스쳐 자리를 만들거나, 셰이더에서 조절하고 싶은 값을 추가하는 등</span></p><p style="text-align: center;"><span style="font-size: 10pt;">자신이 원하는</span><span style="font-size: 10pt;"> 모습으로 인터페이스를</span><span style="font-size: 10pt;"> 만드는 것입니다!</span></p><p><br></p><p style="text-align: center;"><span style="font-size: 13.3333px;">7-2. 원래 있던 코드는 엔터로 밀어놓고 먼저 새로운 거 하나를 추가합시다!!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">이름은 시험삼아... ZZerrerJuNeunByunSu... 바로 쩔어주는 변수죠!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">만들 타입은 바로.. Range 타입!</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">Range 타입의 UI를 추가하면 </span><span style="font-size: 13.3333px;">슬라이더가 생겨서</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">슬라이더 바를 조절해가며 원하는 수치를 찾을 수 있습니다!!!</span></p><p><br></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2710044958C404871B" class="txc-image" actualwidth="700" hspace="1" vspace="1" border="0" width="700" exif="{}" data-filename="s1-2-16.png" style="clear:none;float:none;" id="A_2710044958C404871B1741"/></p><p><br></p><p style="text-align: center;"></p><p style="text-align: center;"><span style="font-size: 13.3333px;">본격적으로 값을 추가하고 인터페이스에 실제로 값을 연결하는 건 다음주에~~</span><br></p><p><br></p><p><br></p><p><br></p><p><span style="font-size: 10pt;">여담</span></p><p><span style="font-size: 13.3333px;">알! 베도(Albedo)는 빛의 영향을 받는다. (일단은..?)</span></p><p><span style="font-size: 13.3333px;">에^! 미쎤~(Emission)은 빛의 영향을 안받는다!!!</span></p><p><span style="font-size: 13.3333px;">셀프 일루미네이션은 사실 밝아지는 게 아니라 어두워지지 않는것(그림자. 음영이 안생긴다)</span></p><p><span style="font-size: 13.3333px;">int는 DX11부터 제대로 지원되는 타입이라서 잘 쓰지않는다.</span></p><div><span style="font-size: 13.3333px;">포토샵에서도 셰이더처럼 가산／감산 혼합을 할 수 있다.( 더하기, 곱하기 레이어가 벡터처럼 연산이 되기 때문 )</span><br></div><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">===============================================</span></p><p><span style="font-size: 13.3333px;">여기부터는 넘기셔도 됩니다... 왜냐하면..</span></p><p><span style="font-size: 13.3333px;">교수님께서 렌더링 파이프라인 질문하셨는데 멍청한 제가 까먹어서(절레절레)</span></p><p><span style="font-size: 13.3333px;">수업이 끝난 이후에 복습을 한 내용이기 때문이죠!</span></p><p><span style="font-size: 13.3333px;">역시 공부는 계속 해야 하고 복습은 정말 중요합니다.</span><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">(사실... 위에서 GPU 설명한 다음에 픽셀이 화면 상에 출력되는 과정을 쓰려고 위쪽에다 추가하려고 했는데)</span></p><p><span style="font-size: 13.3333px;">(아직 수업 진도가.. 비트수 밖에 안 나갔으니 렌더링 파이프라인이 벌써 나오면)</span></p><p><span style="font-size: 13.3333px;">(수업 스포일러일 것 같아서...)</span></p><p><br></p><p><span style="font-size: 13.3333px;">[알파소팅 Z read Z write 관련으로도 얘기하셨는데</span></p><p><span style="font-size: 13.3333px;">아마 어느 알파블렌딩(반투명) 오브젝트가 앞에 있는지 판별할 때 쓰는 알파테스팅에 관한 걸 말씀하신 것 같군요.]</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">자료는 제가 만들 능력이 없어 모두 어딘가에서 퍼오고 긁어오고 잘라왔으니...</span></p><p><span style="font-size: 13.3333px;">양해 부탁드리며.... 외부로 유출되면 저는..(덜더럴ㄹㄷ.ㄹ덜ㄹ...,,)</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">●알아둘 사실!</span></p><p><span style="font-size: 13.3333px;">우리가 늘상 보는 모니터는 사실 2D이고, 화면 속에서 보는 생생한 3D 그래픽 리소스도 결국 2D입니다. 어떻게 된 일일까요? 컴퓨터 모니터에 3D 홀로그램이 달려있지 않은 이상, 3D 모델을 모니터 화면에 표현되는 2D 요소로 만들어서 화면 상에 보여주어야 합니다.</span></p><p><span style="font-size: 13.3333px;">라이팅 등의 기하학적 표현을 이용해 깊이감을 만들어서 </span><span style="font-size: 13.3333px;">실제 3D 공간 상에서 보이는 오브젝트처럼 보이게 하는 것이죠!</span></p><p><span style="font-size: 13.3333px;">2D 화면 상에 3D 그래픽을 표현하기 위한 일련의 과정이 바로 '렌더링 파이프라인'입니다.</span></p><p><span style="font-size: 13.3333px;">(그래픽스 파이프라인이라고도 합니다)</span></p><p><br></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/24426A4358C240D13C" class="txc-image" actualwidth="653" hspace="1" vspace="1" border="0" width="653" exif="{}" data-filename="4.PNG" style="clear:none;float:none;" id="A_24426A4358C240D13CFE56"/></p><p><span style="font-size: 13.3333px;">CPU는 먼저, 그래픽 오브젝트(주로 3D 모델)를 각각의 오브젝트가 갖고 있는 로컬 공간</span><span style="font-size: 13.3333px;">(Local Space</span><span style="font-size: 13.3333px;">)</span><span style="font-size: 13.3333px;"> 상의 고유한 상대적 좌표</span><span style="font-size: 13.3333px;">에 위치시킵니다.</span></p><p><span style="font-size: 13.3333px;">그다음, 위치 변환 행렬을 통해 절대적인 공간(World Space) 상의 좌표로 변환하여 위치를 옮겨줍니다.</span></p><p><span style="font-size: 13.3333px;">이러한 물체의 좌표 변환(이후에는 라이팅, 투영) 부분에서 버텍스 셰이더가 힘써줍니다!</span></p><p><br></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/251D623558C1A1EB14" class="txc-image" actualwidth="320" hspace="1" vspace="1" border="0" width="320" exif="{}" data-filename="자쿠와는 다르다구!!.jpg" style="clear:none;float:none;" id="A_251D623558C1A1EB14E92B"/></p><p><span style="font-size: 13.3333px;">다음 단계로, 버텍스 셰이더와는 다르게(버텍스 셰이더와는 다르다 버텍스 셰이더와는!!) 버텍스의 수를 늘리거나 줄일 수 있는</span><span style="font-size: 13.3333px;"> 지오메트리 셰이더</span><span style="font-size: 13.3333px;">( </span><span style="font-size: 13.3333px;">DX10 ~ )</span><span style="font-size: 13.3333px;">를 이용하여 원본 메쉬의 폴리곤을 쪼개는 등 변형시켜 삼각형의 개수를 증가시키는 테셀레이션( DX11, 헐 셰이더, 테셀레이터, 도메인 셰이더 )</span><span style="font-size: 13.3333px;"> 등의 과정이 진행됩니다.</span></p><p><span style="font-size: 13.3333px;">(지오메트리 셰이더로는 모션 블러 등의 포스트 이펙트도 처리할 수 있습니다. 원리는 각 버텍스를 움직이는 아웃라인만큼 도형을 펼치는 방향으로 움직이게 만든 후, 속도 버퍼를 만들어 모델 위에 씌워서 잔상이 일으켜보이게 만듭니다.)</span></p><p><br></p><p><br></p><p><span style="font-size: 13.3333px;">그다음엔 모니터 화면 상에 띄울 오브젝트가 위치한 가상의 공간의 범위를 지정하기 위해, 가상의 카메라를 월드 공간 속에 정의합니다. 임의의 좌표에 위치한 카메라를 통해서는 이후에 진행될 투영 등의 과정이 어려워지므로</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/22796B4258C242791C" class="txc-image" actualwidth="700" hspace="1" vspace="1" border="0" width="700" exif="{}" data-filename="frustum.PNG" style="clear:none;float:none;" id="A_22796B4258C242791CA02F"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/26344C4558C2431910" class="txc-image" actualwidth="615" hspace="1" vspace="1" border="0" width="615" exif="{}" data-filename="5.PNG" style="clear:none;float:none;" id="A_26344C4558C243191089D4"/></p><p style="text-align: center;"><span style="font-size: 13.3333px;">오브젝트에 라이팅이 적용되며,</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">(Diffuse - Lambert, Half Lembert, Oren-Nayer Model, etc. )</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">(Specular - Phong, Blinn Phong, </span><span style="font-size: 13.3333px;">Gaussian, </span><span style="font-size: 13.3333px;">Beckmann, Heidrich-Seidel anisotropic,</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">Ward anisotropic Distribution, Cook-Torrance Model, etc.)</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"></p><p style="text-align: center;"></p><p style="text-align: center;"></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/232A154458C243671E" class="txc-image" actualwidth="668" hspace="1" vspace="1" border="0" width="668" exif="{}" data-filename="6.PNG" style="clear:none;float:none;" id="A_232A154458C243671ED388"/></p><p style="text-align: center;"><br></p><p style="text-align: center;"></p><p></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/242D8E4A58C1A4FF12" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="viewport transformation with cam, com.gif" style="clear:none;float:none;" id="A_242D8E4A58C1A4FF12F619"/></p><p style="text-align: center;"><span style="font-size: 13.3333px;">GPU에서 화면 상의 좌표</span><span style="font-size: 13.3333px;">(Viewport Space</span><span style="font-size: 13.3333px;">)</span><span style="font-size: 13.3333px;">로 버텍스를 옮겨주는 뷰포트 변환이 이루어지며,</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/223C0E3758C1A6C215" class="txc-image" actualwidth="418" hspace="1" vspace="1" border="0" width="418" exif="{}" data-filename="viewport transformation matrix.PNG" style="clear:none;float:none;" id="A_223C0E3758C1A6C215FA25"/></p><p style="text-align: center;"><span style="font-size: 13.3333px;">▲ (요로코롬 괴상하게 생긴 수학덩어리 상자에 </span><span style="font-size: 13.3333px;">3D 모델을 넣어주면)</span></p><p style="text-align: center;"><span style="font-size: 13.3333px;">(뷰포트 변환이 진행된다!)</span></p><p style="text-align: center;"><br></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/22764F3C58C1C61D28" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="pro.PNG" style="clear:none;float:none;" id="A_22764F3C58C1C61D2813BC"/></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"></p><p style="text-align: center;"></p><p><span style="font-size: 10pt;">가까운 평면( near</span><span style="font-size: 10pt;"> plane(앞쪽 클립</span><span style="font-size:10pt;">) ), 먼 평면</span><span style="font-size: 10pt;">( far plane(뒤쪽 클립) ), 두 클립 사이의 거리, </span><span style="font-size: 10pt;">FOV(시야각).</span></p><p><span style="font-size: 10pt;">총 4가지 요소를 통해</span><span style="font-size: 10pt;"> </span><span style="font-size: 10pt;">카메라 공간을 절두체로 정의하여 n차원의 물체를 n-1차원으로 보내는</span></p><p><span style="font-size: 10pt;">'투영(Projection)'이 이루어집니다.</span></p><p><span style="font-size: 10pt;">간단히 말하면 3차원 공간에 존재하는 </span><span style="font-size: 10pt;">3D 모델링을</span><span style="font-size: 10pt;"> 2차원의 화면이 비춰질 공간으로 보내는 것입니다...!</span></p><p><br></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2214134E58C1AEB913" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="3.jpg" style="clear:none;float:none;" id="A_2214134E58C1AEB9139540"/></p><p style="text-align: center;">( 뭔가... 훅훅 지나간 것 같은데? )</p><p style="text-align: center;">투영의 종류도 정말 다양합니다!!</p><p style="text-align: center;"><br></p><p style="text-align: center;">1. 3D 게임 원근법이 적용되는 원근투영( 카메라로부터 먼 물체 멀게, 가까운 물체는 가깝게 보이게 투영 )</p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/266B563C58C1AF3D18" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="witcher3.jpg" style="text-align: center; clear: none; float: none;" id="A_266B563C58C1AF3D18375A"/><br></p><p style="text-align: center;"><span style="text-align: center;">▲ WItcher 3</span><br></p><p><span style="text-align: center;"><br></span></p><p style="text-align: center;">2. 절두체대신 육면체를 이용하여 앞, 뒤, 옆, 위, 아래의 모습을 주사위 전개도처럼 찍어내어 각각 똑같은 거리로 보이게 하여</p><p style="text-align: center;">2D게임 등에서 주로 사용되는 직교투영(Orthographic Projection)</p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2514833358C1B0151A" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="cave story.gif" style="font-size: 9pt; text-align: center; clear: none; float: none;" id="A_2514833358C1B0151A78A8"/><br></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;">▲</span><span style="font-size: 9pt; text-align: center;"> Cave Story</span><br></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;"><br></span></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;">...등 그 이외에도 경사투영, 축측투영 많은 종류의 투영이 있는데</span></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;">이건 다음에..언젠가는...</span></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;"><br></span></p><p style="text-align: center;"><span style="font-size: 9pt; text-align: center;">그다음 렌더링 파이프라인 과정으로는 바로...!! </span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/215A104058C1C55729" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="rast.PNG" style="clear:none;float:none;" id="A_215A104058C1C557297A79"/></p><p><br></p><p><br></p><p style="text-align: center;"></p><p></p><p style="text-align: center;"></p><p></p><p style="text-align: center;"></p><p><span style="font-size: 13.3333px;">그래픽 리소스를 표현하는데 필요한 폴리곤을 그리기 위해 </span><span style="font-size: 13.3333px;">컬러 정보를</span><span style="font-size: 13.3333px;"> 담고 있는 </span><span style="font-size: 13.3333px;">버텍스를 모아서</span><span style="font-size: 13.3333px;"> 삼각형으로 만들어주는 </span><span style="font-size: 13.3333px;">래스터화(Rasterization)가 진행됩니다. 지금까지의 과정을 거쳐온 3D 모델을 래스터라이저를 통해 2D 픽셀로 화면 상에 찍어주는 것입니다.</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;">래스터화된 그래픽 리소스는 보간(Interpolation) 이후 '픽셀 셰이더(／프래그먼트 셰이더)'를 거쳐</span><span style="font-size: 13.3333px;"> 결과적으로 버텍스가가 갖고 있는 컬</span><span style="font-size: 13.3333px;">러 정보를 통해 실제로 버텍스 컬러가 표현됩니다.</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/224C313B58C1C5B72B" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="map.PNG" style="clear:none;float:none;" id="A_224C313B58C1C5B72B6A7E"/></p><p style="text-align: center;"></p><p></p><p style="text-align: center;"></p><p></p><p style="text-align: center;"></p><p><span style="font-size: 13.3333px;">이후에는 UV맵 상의 UV좌표계를 이용하여 텍스쳐의 텍셀(텍스쳐가 적용될 범위)을 확인한 후 텍스쳐가 3D 모델에 매핑되며,</span></p><p><br></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2357493458C1B25023" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="alpha blend test.jpg" style="clear:none;float:none;" id="A_2357493458C1B250232E63"/></p><p><span style="font-size: 13.3333px;">출력될 결과물이 반투명 오브젝트(알파 블렌딩)인지 아닌지 그래픽 리소스의 알파값을 확인하고, </span><span style="font-size: 13.3333px;">출력할 여러 개의 그래픽 리소스의 Z값을 판단하여 투명한지 아닌지를 특정 기준을 두고 칼같이 판단하여 각각의 오브젝트의 앞뒤를 확인하기 유용한 '알파 테스팅' 등의</span><span style="font-size: 13.3333px;"> '렌더 백엔드' 과정이 진행됩니다!! </span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/2118E44E58C1B86918" class="txc-image" actualwidth="400" hspace="1" vspace="1" border="0" width="400" exif="{}" data-filename="theend.jpg" style="text-align: center; clear: none; float: none;" id="A_2118E44E58C1B86918ACCE"/><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">짜쟌! 드디어 끝~! 위와 같은 일련의 과정을 거쳐 멋진 3D 결과물이 출력됩니다!</span></p><p>(잘 몰라서 휙휙 지나간 부분은 분명 교수님께서 수업 중에 설명해주실 거라 믿습니다...)</p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;">=====</span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><span style="font-size: 13.3333px;"><br></span></p><p><br></p></div><p><br></p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
다음검색
첫댓글 끝났으면 (수정중) 을 없애야 내가 보지요
방금 실습부분까지 추가했습니다~~
@201513126 정근수 예입
▲ 바뀌어버렸어... 너의.. '버텍스 컬러'
가 아니겠지
팔레트 컬러겠지
앗...!! 오타가 났군요~!!! 수정 끝냈습니다!
ㅎㅎ 파이프라인 설명이 멋지네요
양도 어마어마하네
정말 감사합니다...! 질문하셨을 때 갑자기 기억이 안 나서 많이 당황했어요
호곡...너무길어서...읽다가...힘들어서..내일 읽을래오,...