스택

색상만 다른 여러 픽셀 이미지를 위한 쉐이더 위 이미지와 같이 게임을 제작하다보면 픽셀의 형태는 동일하나 색상만 다른 경우가 존재한다. 이런 경우 각 이미지를 만들어 사용하는 방법도 있지만 스프라이트 스왑 기법을 사용하면 생산성을 높일 수 있다. 팔레트 스왑은 이미지를 색상이 아닌 컬러 인덱스를 가지도록 만들고 이후 렌더링 시 현재 선택된 팔레트에서 각 인덱스의 색상을 가져와 렌더링 하는 기법이다. 구현 유니티에서 이를 구현할 수 있는 한가지 방법은 기본 스프라이트 쉐이더를 다음과 같이 수정하면 된다. 1. 컬러들을 지정할 팔레트 2D 텍스처 프로퍼티를 추가한다. 2. spriteFrag에서 SampleSpriteTexture(IN.texcoord)를 통해 스프라이트 픽셀 값을 추출한다. 3. 2번에서 ..

물에 비친 상을 위한 쉐이더 이번에 만든 쉐이더의 목적은 물 표면에 비친 상을 표현하기위한 쉐이더이다. 좀 더 정확히 말하면 불투명 스프라이트 위에 반투명 스프라이트들이 존재할 때 반투명 스프라이트들의 픽셀중 가장 깊이가 얕은 픽셀만 혼합되고 깊은 픽셀들은 무시되게 된다. 토이 프로젝트를 개발하는데 필요하여 구현하게 되었다. 이상적인 구현방법 맨 처음 계획한 구현방법은 다음과 같다. s1 -물 표면 이미지에 사용될 쉐이더 ZWrite On 그외 기존 sprite-default와 동일 s2 - 물 위에 비친 반투명 이미지에 사용될 쉐이더 ZWrite On ZTest Less AlphaTest on s1보다 늦게 렌더링 될 것이 보장 s2의 오브젝트들은 깊이가 얕은 것에서 깊은 순으로 렌더링 그외 기존 sp..

개요 지금까지는 메쉬의 큰 변화없이 트랜스폼만을 이용하여 오브젝트들을 움직였다. 이제는 뼈대들의 계층구조를 이용하여 좀 더 다채로운 애니메이션을 만들어보자. ​ 뼈대 계층구조 우리는 부모 자식 관계로 트리 형태의 계층구조를 가지는 뼈대 계층구조를 이용하여 애니메이션을 만들 것이다. 여기에서의 핵심은 부모의 트랜스폼이 변화하면 자식의 트랜스폼도 따라서 변화한다는 점이다. 예를 들어 우리 몸의 관절을 표현한 뼈대 계층구조가 있다고하자. 그 중 오른팔의 부분을 보면 윗팔, 아랫팔, 손이라는 계층구조가 존재한다. 이때 손이 움직이면 손만 움직이지만 아랫팔이 움직이면 그의 하위 계층인 손도 따라움직이게 된다. 윗팔이 움직이면 아랫팔, 손 모두가 움직일 것이다. 이러한 계층구조로 우리는 다양한 뼈대 애니메이션을 구..

개요 지금까지는 회전을 회전 행렬로 표현했다. 하지만 사원수라는 새로운 대수를 사용하면 실수 네개만으로 회전을 표현할 수 있다. ​ 복소수 복소수는 실수부와 허수부로 구성되며 (a,b) 또는 a+ib로 표현된다. 여기서 i는 -1의 루트로 i2은 -1이 된다. 복소수에는 상등 비교와 사칙연산이 가능한데 a+ib의 상등비교와 사칙연산을 생각하면 된다. (a,b) = (c,d) => a = c && b = d (a,b) ± (c,d) = (a±c,b±d) (a,b)(c,d) = (ac-bd,ad+bc) (a,b)/(c,d) = ( (ac+bd)/(c2+d2) , (bc-ad)(c2+d2) ) ​ 실수 x는 (x,0)의 복소수로 생각할 수 있으며 i는 (0,1)로 생각할 수 있다. 또한 복소수 z = (a,b..

개요 현재까지의 렌더링에서는 주변광을 고정된 상수로 사용했었다. 이러한 방식은 그림자에 가려진 부분들에 취약할 수 있다. 특정 광원에 대해 그림자가 든 부분은 해당 광원에 대한 분산광, 반영광 없이 주변광만으로 나타나게 되는데 이때 상수 주변광을 사용하면 입체감이 잘 느껴지지 않을 수 있다. 따라서 화면의 한점이 주변의 다른 기하구조에 얼마나 둘려싸여있는지에 따른 차폐도를 계산하고 이를 이용하여 주변광의 세기를 조절할 필요가 있다. 이러한 기법을 주변광 차폐라고 한다. ​ 도달도 도달도는 1 - 차폐도에 해당하는 수치로 해당 점이 주변 기하구조에 얼마나 둘려싸여있지 않은지, 즉 주변광을 얼마나 많이 받는지를 나타내는 수치이다. 이러한 도달도는 기하구조 생성시점이나 프로그램 초기화 시점에 계산하여 기하구조..

개요 그림자 매핑은 광원에서 한 방향으로 본 장면을 깊이만 렌더링하여 만든 그림자 맵을 이용해 그림자를 표현하는 기법이다. 정확히는 광원의 광선에 처음 맞는 부분과 아닌 부분을 구분하여 빛의 세기를 조절해 그림자를 표현한다. 이러한 기법은 기존의 스텐실 그림자와 달리 평면 뿐 아닌 모든 기하구조에 정상적으로 그림자가 나타나게 된다. ​ 직교 투영 우선 직교 투영이라는 개념부터 배워보자. 지금까지 어떠한 시점에서 바라본 장면을 만들때 원근 투영을 이용하여 장면의 정점들을 투영창에 투영했다. 절두체와 시점 - 정점을 잇는 시선을 사용했던 것이 원근 투영이라면 직교 투영은 절두체가 아닌 직사각형으로 z축과 평행한 시선으로 정점들을 투영한다. 직교 투영의 투영선은 그냥 z축과 평행 하기에 시야 공간에서 한 정점..

개요 기존에는 삼각형의 한 점의 법선을 정점 법선들의 보간으로 구했다. 이제는 법선 맵에서 텍스처 좌표로 법선을 추출하여 특정 픽셀의 법선을 구하는 법선 매핑을 사용해 볼 것이다. ​ ​ 법선 맵 법선 맵은 각 텍셀이 단위 벡터에 해당하는 텍스처이다. 보통 0~255의 8비트 RGB를 사용하며 이는 단위벡터의 각 원소의 상한인 -1 ~ 1을 0~255로 변환한 값에 해당한다. 보통 포토샵이나 기타 툴로 법선 맵을 작성하면 RGB에 각각 0~255값으로 변환된채 텍스처가 저장되는데 이러한 텍스처를 루트 매개변수에 넣고 표본 추출을 통해 특정 텍셀을 추출하면 자동으로 0~1의 값으로 변환된다. 여기에 2를 곱하고 1을 빼서 -1 ~ 1구간으로 변환하면 원래의 단위 벡터를 구할 수 있다. ​ 텍스처 공간 (접..

개요 DirectX는 6개짜리 텍스트 배열을 입방체 맵(cube map)이라는 특별한 형태로 해석하여 사용 할 수 있다. 각 텍스트는 좌표축에 정렬된 큐브의 각 면을 나타내며 0~5번째 텍스처는 각각 +-X 면 +- Y면 +-Z면에 해당한다. 이는 6개 짜리 텍스트 배열로 자원을 생성하고 차원 멤버를 cube map로 설정한 desc로 srv를 만들면 큐브 맵에 대한 뷰가 생성된다. 이후 그 srv를 루트 매개변수에 달고 hlsl에서 TextrueCube라는 타입으로 받으면 큐브 맵이 쉐이더에 전달된다. 큐브 맵 에서는 3차원 좌표로 표본 추출을 할 수 있는데 원점에서 해당 좌표에 해당하는 벡터로 쏜 반직선이 맞는 입방체의 한 점이 추출되는 점이 된다. 3차원 좌표가 표현하는 벡터는 조회 벡터로 불리며 ..

개요 화면의 한 점을 클릭하여 해당 위치의 물체를 선택하는 로직을 구현할 수 있다. 이는 해당 방향으로 시야 원점에서 반직선을 쏘고 충돌하는 물체를 찾음으로써 구현 할 수 있다. ​ 선택 반직선 위에서 설명한 반빅선을 선택 반직선이라고 한다. 선택 반직선은 다음 과정을 통해 특정 오브젝트의 국소 공간 기준 반직선으로 계산될 수 있다. 1. 클릭된 뷰표트 좌표를 얻는다. 2. 뷰포트 좌표에 뷰포트 너비,높이 및 투영행렬의 00, 11번째 요소로 z값이 1인 투영창에서의 클릭 투영점을 얻는다. 3. 해당 투영점으로 시야공간에서의 반직선을 구할 수 있다. 4. 역 시야행렬을 곱해 월드 공간에서의 반직선을 구할 수 있다. 5. 각 오브젝트별로 역 월드행렬을 곱해 국소 공간의 반직선을 구할 수 있다. ​ 위에서 ..

개요 절두체 선별은 cpu에서 렌더링 파이프라인 전 각 오브젝트(인스턴스)들에 대해 그들의 경계입체가 시야 절두체와 충돌하는지 검사하고 충돌하지 않는 오브젝트는 제외하고 충돌하는 오브젝트들만 렌더링 파이프라인에 제출하는 기법을 이야기한다. 래스터화 단계의 절단에서 절두체에 속하지 않는 삼각형들을 제외하긴 하지만 그전에 api호출 비용이나, 정점 셰이더, 테셀레이션, 기하 셰이더에서는 그대로 계산이 되기에 cpu에서 절두체에 충돌하지않는 오브젝트는 미리 선별하여 렌더링 파이프라인에 제출자체를 하지않는다면 성능을 높일 수 있다. 만일 선별을 하지않는다면 gpu에서 오브젝트별로 수많은 정점들에 대해 연산을 해야하지만 선별을 한다면 오브젝트 별로 cpu에서 간단한 aabb, 구등의 경계입체와 절두체 사이의 충돌..