Yes24위대한게임의탄생사이드바

[예약판매] 위대한 게임의 탄생
Michael Thornton Wyman 저/박일 역
예스24 | 애드온2

블로거뉴스 인기 뉴스

트위터위젯


알라딘MGG와이드바


'위대한 게임의 탄생'이 네이버 메인에 떴습니다.

'위대한 게임의 탄생'이 (아주 잠깐동안) 네이버 메인에 떴습니다.
Bloter.net 에서 오원석 기자(@SIDEWAY_S)님이 '핍박의 시대, 위대한 게임 읽기' 라는 기사를 올려주셨더군요.
요즘같이 게임을 마약취급하는 시대에 이 책이 조금이라도 게임발전에 도움이 되었으면 합니다.


그리고 '위대한 게임의 탄생 2' 에 들어갔으면 하는 게임을 요청받고 있습니다.
여기 위키에 들어가셔서 보시고, 다른 게임도 추천해 주실 게 있으면 직접 위키를 수정하거나
제 트위터(@rigmania) 또는 댓글로 남겨주세요.
가능한 선에서 알아봐서 섭외해 보도록 노력해 보겠습니다. 감사합니다.
지금까지 창세기전(3), 바다이야기(1), 리니지(1), 리니지2(1), 라그나로크(1), 아이온(2), 악튜러스(1), 화이트데이(2), 몬스터넷의 이터널시티(1), 단군의 땅(1), 망국전기(1), 테라(1) 가 추천을 받았습니다.


공유하기 버튼

 

이번에 중급용 컴퓨터 한 대 장만했습니다. 사는 이야기

컴퓨터를 5년 넘게 써 왔는데 소음이 너무 심해서 이번에는 소음을 신경써서 컴퓨터를 장만해 봤습니다.
겨울이라 더 그렇겠지만 조용하니 참 좋네요. 역시 '잘만' 이 잘 만드네요. :)
가끔 고주파 소음이 들리는데 그래픽 카드에서 나는 소리같습니다.
쉐이더 코드 돌리면 고주파 소음이 나는군요.
어쩔 수 없는건지, 예전에는 CPU 소리때문에 들리지 않던게 들리던건지...
잘만이 AMD 그래픽카드도 만들던데 이걸 쓰면 좀 더 조용할지도 모르겠네요. 

몇몇 분들이 사양이 어떻게 되는지 물어봐서 아예 정리해 둡니다.
컴퓨존에서 아예 조립까지 부탁해서 받았는데 좋네요. 이제는 직접 조립 못하겠다능...

주의점 : 
보드에 IDE 가 없어서 예전 DVD롬을 달지 못해서 OS 설치하는데 고생했습니다.
보드 드라이버를 설치하지 않으면 네트워크가 안 잡히니 DVD롬 안 다실 분들은
다른 컴퓨터에서 미리 USB 로 보드 드라이버를 복사해 두시는게 좋겠습니다.
USB 부팅으로 Windows7 설치하려면 USB를 USB2.0 port 에 붙여야 하더군요. 30분 정도 삽질했습니다. 
그나저나 이제 CD롬이 10년전 플로피디스크랑 비슷한 취급 당하네요.

INTEL 쿼드코어 i5-2500K (3.30GHz/32nm/6MB)LGA1155 박스 대리점정품 270,000원
GIGABYTE GA-P67X-UD3-B3 (인텔P67/ATX) 156,000원 1개
삼성전자 DDR3 4GB(1333Mhz/PC3 10600) 24,200원 2개
삼성전자 SSD 830 Series 128GB MZ-7PC128D/KR (R:520/W:320) 국내정품/노턴고스트/가이드포함 289,000원 1개
GIGABYTE GeForce GTX560 Ti D5 1GB UDV OVER WINDFORCE 2X 311,000원 1개
AONE 에이원 태왕 600GW Dual v2.2 (ATX/600W) 59,000원 1개
잘만 CNPS10X Performa CPU쿨러/120mm/LGA1156,1155,1366,775/AM2/AM2+/소켓 940,939,754. 1개 37,500원
COMPUZONE 일반조립비 20,000원 1개
잘만 ZALMAN Z9 Plus 블랙 (미들타워/노출형/아크릴튜닝) 68,000원 1개
운송료 2,500원 2개 5,000원
합계 : 1,254,200 원





공유하기 버튼

 

(번역글) 렌더몽키 초보자용 튜토리얼 - 스카이박스 추가하기(Adding a Skybox to RenderMonkey) 개발 이야기

이번에는 [http]Adding a Skybox to RenderMonkey 블로깅을 간단하게 번역해 봤습니다. 쉐이더 코드에 한글 주석을 넣으면 error X3000 가 생기는 경우가 있군요. 컴파일 에러가 나면 한글 주석을 다 빼고 해 보세요.

RenderMonkey 에 스카이박스 붙이기

전에는 [http]RenderMonkey 에 대한 기본적인 튜토리얼을 블로깅했습니다. 이번에는 어떻게 하면 RenderMonkey 에서 화면에 보여지는 단색 배경 대신 스카이박스(skybox) 를 보여줄 수 있을지를 얘기해 볼까 합니다. 저는 이미 여러분이 [http]이전 튜토리얼을 읽고 따라해 봤고, HLSL 에 대해 익숙하며 RenderMonkey 가 아닌 다른 곳에서 스카이박스를 어떻게 만드는지 알고 있다고 가정하겠습니다. 인터넷 찾아보시면 (이 블로깅처럼) 스카이박스를 어떻게 구현하는지 좋은 자료를 많이 찾아볼 수 있습니다. 그나저나 제가 구현한 방식은 Riemer Grootjans 의 책 [http]XNA 3.0 Game Programming Recipes 에 기초하고 있습니다. 이 책에서는 이 외에도 여러 다양한 주제를 다루고 있는데 도움되는 내용이 많습니다.

소개

RenderMonkey 에서 처음 쉐이더를 짜기 시작하면서 환경매핑(environment mapping) 같은 이펙트를 제대로 테스트하기 위해 씬에 스카이박스를 붙이는 법을 찾아봤습니다. RenderMonkey 의 인터페이스를 뒤져봤지만 스카이박스를 그려주는 기능을 찾을 수가 없더군요. 결국 직접 구현하기로 했습니다. 뭔가 더 쉽고 직관적인 방법이 있을 거 같기도 해서, 사실 제 방식을 공개하는게 큰 의미가 있을까 망설이기도 했습니다. 그러니 더 쉬운 방법이 있다면 제발 저에게 알려주세요.

제가 스카이박스를 그리는 비결은 이펙트에 두 번째 쉐이더 패스를 추가해서, 첫 번째 쉐이더로는 스카이박스를 그리고, 두 번째 쉐이더로 모델을 그리는 것입니다. 여기에서 보여드릴 구현에서는 항상 카메라 중점에 위치하는 (RenderMonkey 에서 생성한) 간단한 텍스처 맵핑 큐브모델을 사용할 겁니다. 이렇게 하면 카메라가 어디 있더라도 스카이박스는 충분한 거리를 항상 유지할 수 있습니다. 그래픽 카드의 렌더 스테이트를 바꾸고 감기 순서(culling order)를 뒤집어서 안이 그려지도록 하고, 스카이박스를 그릴때 Z-버퍼 쓰기를 막아서 두 번째 패스에서 모델을 그리는데 아무 문제가 없게 했습니다. 스카이박스에 텍스처를 입히기 위해서는 기본으로 제공되는 큐브맵과 texCUBE 이라는 HLSL 기본함수만 있으면 됩니다. 이제 시작해 봅시다!

이펙트 시작하기

먼저 워크스페이스에 새로운 DirectX 이펙트를 만들고(Effect Workspace -> Add Default Effect -> DirectX -> DirectX), 이펙트 위에서 우클릭한 뒤 "Add Pass" 를 선택해 두 번째 패스를 추가합시다.

a_pass1.jpg


이후 워크스페이스는 다음과 같을 겁니다.

a_pass2.jpg


지금부터 스카이박스를 설치하는 대부분의 작업은 첫 번째 패스(Pass 0)에서 하게 됩니다. 큐브 모델을 만들고, 몇가지 변수와 쉐이더에서 쓸 큐브맵 텍스처를 준비하고, 쉐이더를 작성하고 그래픽 카드의 렌더 스테이트도 제대로 잡아줘야 합니다. 단계별로 나갈테니 너무 걱정마세요.

큐브 만들기

스카이박스로 쓸 큐브 모델을 만들기 위해서는, 이펙스 위에서 우클릭해서 새로운 모델을 추가해야 합니다. 하지만 목록 중에서 모델을 선택하진 마세요. 대신에 목록 최상단에 있는 기본 모델(Model) 을 선택합니다. myModel1 이라는 객체가 생길텐데 기존 모델과 헷갈리는 게 싫으니 이름을 "Box" 로 바꿔줍시다.

b_model1.jpg


이제 새로 만든 모델 Box 위에서 우클릭한 뒤 "Generator" -> "Geometry Generator" 를 선택합니다. 이러면 RenderMonkey 가 우리의 선택에 따라서 적당한 데이터를 모델에 채워줍니다.

b_model2.jpg


팝업창에서 적당한 크기의 상자를 생성합니다. near 평면과 far 평면을 어떻게 설정하느냐에 따라서 박스 크기가 너무 작거나 클 경우에 문제가 생길 수 있습니다. 여기에서는 25x25x25 크기의 박스를 만들겠습니다.

b_model3.jpg


까먹기전에 Pass 0 를 열어서 model 위에서 우클릭한 뒤 새로 생성한 상자를 할당합시다(아마 model 은 처음 추가한 model 을 가리키고 있었을 겁니다).

b_model4.jpg


변수 생성

아래에서 보여드릴 스카이박스 쉐이더에서는 3 개의 전역 변수를 사용하는데, 각각 카메라의 위치, 뷰-프로젝션 행렬, 하늘(sky)에 사용할 큐브맵 텍스처입니다.
float4 ViewPosition;
float4x4 ViewProjection;
sampler Texture;

이전 튜토리얼에서 봤던 것처럼 이들 변수를 생성합시다. 적당한 데이터타입과 시멘틱을 지정하는 것을 잊지 맙시다. ViewProjection 행렬은 기본적으로 들어있지만(matViewProjection), 기본 이름이 맘에 들지 않기 때문에 이름을 ViewProjection으로 바꿨습니다. Pass 0, Pass 1 의 쉐이더 코드에서 matViewProjection 를 찾아 전부 ViewProjection 로 바꿔줍시다. ViewPosition 같은 경우 Float 의 미리 정의된 (predefined) 변수에서 찾을 수 있습니다.

c_var1.jpg


텍스처를 로딩하기 위해서 Cubemap 옵션을 사용합니다(Add Texture -> Add Cubemap -> Snow.dds).

c_var2.jpg


방금 생성한 큐브맵(Snow)과 링크되는 Texture Object 를 "Texture" 라는 이름으로 Pass 0 에 추가하는 것도 잊지 맙시다.

c_var4.jpg


원한다면 텍스처 객체가 좀더 나은 필터링 방식을 쓰게 할 수도 있습니다.

c_var5.jpg


코드 추가

이제 정점 쉐이더와 픽셀 쉐이더 코드를 추가해 봅시다. 아래에 이미 코드가 준비되어 있습니다. 각각 Pass 0 의 정점 쉐이더와 픽셀 쉐이더에 복사해 붙여넣습니다. 코드가 어떤 작업을 하는지를 주석으로 설명해 넣었습니다만, 궁금한 점이 있으면 언제든지 물어봐주세요.

정점 쉐이더 :
float4 ViewPosition;
float4x4 ViewProjection;
  
struct VS_INPUT
{
   float4 position : POSITION0;
};
  
struct VS_OUTPUT
{
   float4 position : POSITION0;
   float3 position3D : TEXCOORD0;
};
  
// 이동 행렬을 만든다.
float4x4 translation(float3 position)
{
   return float4x4(
              float4(1,0,0,0),
              float4(0,1,0,0),
              float4(0,0,1,0),
              float4(position.xyz, 1)
          );
}
  
VS_OUTPUT vs_main(VS_INPUT input)
{
   VS_OUTPUT output;
  
   // 스카이박스를 카메라 위치로 옮기는 월드 행렬을 만든다.
   float4x4 world = translation(ViewPosition.xyz);
  
   // 월드행렬을 기존 뷰-프로젝션 행렬과 곱한다.
   float4x4 WorldViewProjection = mul(world, ViewProjection);
  
   // 이렇게 만든 공간으로 정점을 이동시킨다.
   output.position = mul(input.position, WorldViewProjection);
 
   // 모델 공간에서의 원래 정점 위치를 저장한다.
   // 큐브 모델은 중심점이 원점에 있기 때문에
   // 원래 정점 위치값을 큐브맵의 방향값으로 바로 활용할 수 있다.
   output.position3D = input.position;
  
   return output;
}
(한글 주석 때문에 error X3000: syntax error: unexpected end of file 에러가 뜨는 경우가 있네요. 한글 주석을 제거하면 에러가 사라집니다. 한글주석이나 경로에 한글이 들어가면 이런 현상이 있다고 하는데 RenderMonkey 의 버그인지 뭔지 정확한 원인을 모르겠네요.)

픽셀 쉐이더 :
sampler Texture;
  
struct VS_OUTPUT
{
   float4 position : POSITION0;
   float3 position3D : TEXCOORD0;
};
  
float4 ps_main(VS_OUTPUT input) : COLOR0
{
   // 원래 정점 위치를 큐브맵 텍스처를 샘플링하는데 사용한다.
   return texCUBE(Texture, input.position3D);
}

렌더 스테이트 설정

아직 화면에는 아무 것도 안 나오겠지만, 쉐이더는 아무 문제없이 컴파일 될 겁니다. 아무 것도 보이지 않는 이유는 우리가 큐브 모델 내부에서 그려지지 않는 안쪽 평면을 보고 있기 때문입니다. 그래픽 카드의 감기 방식(culling mode)를 바꿔줍시다. 또한 우리는 하늘(sky)가 씬의 마지막까지 남게 하고 싶기 때문에 z-버퍼 쓰기를 금지시켜야 합니다.

이를 위해서 Pass 0 에 우클릭한 뒤 "Add Render State Block" 을 추가, 편집해 줘야 합니다. 이런 변경사항은 모델 그릴 때에는 원래대로 되돌려놔야 하기 때문에 Pass 1 에서 같은 작업을 반복해야 합니다.

Pass 0 의 Render State Options :
D3DRS_CULLMODE 를 D3DCULL_CW 로 변경
D3DRS_ZWRITEENABLE 을 FALSE 로 변경
e_state1.jpg


Pass 1 의 Render State Options:
D3DRS_CULLMODE 를 D3DCULL_CCW 로 변경
D3DRS_ZWRITEENABLE 을 TRUE 로 변경
e_state2.jpg


결론

이제 끝났습니다! 이제 Pass 1 를 바꿔서 원하는 쉐이더를 써 넣어도, 스카이박스는 계속 보일 것이고 카메라에 맞춰서 반응할 것입니다. 결과는 다음과 같습니다 :

g_end.jpg


적당한 스카이박스가 준비되어 있다면 아래와 같은 반사(reflection) 나 굴절(refraction) 등의 여러 이펙트도 시험해 볼 수 있습니다.

example.jpg


마지막 팁 : 기본적으로 Pass 1 은 Pass 0 과 똑같은 Stream Mapping 구조체를 참조하고 있습니다. 각 pass 별로 다른 구조체가 필요하다면, 이펙트별로 새로운 Stream Mapping 객체를 만들어 우클릭한 뒤 Pass 1 의 참조를 새로운 인스턴스로 바꿔주기만 하면 됩니다.

오늘은 여기까지입니다. 도움이 되었으면 좋겠네요.

공유하기 버튼

 

(번역글) 렌더몽키 초보자용 튜토리얼 RenderMonkey Beginner’s Tutorial 개발 이야기

원본은 [http]David Gouveia 의 Musings on Game Development with XNA 입니다. RenderMonkey 매뉴얼을 이것저것 살펴봤지만 처음 해 보기에는 이 글이 가장 쉬웠기 때문에 블로그 주인장에게 허락맡고 간단하게 번역해 올립니다. 잘못된 점은 언제든지 알려주세요. 렌더몽키로 쉐이더를 배우려면 포프님의 블로그(블라인드 렌더러)에서 진행중인 [http]셰이더 강좌 를 참고하시는게 가장 좋겠네요.

RenderMonkey 초보자 튜토리얼

초보자 용으로 RenderMonkey 를 쓰는 법을 설명하겠습니다. RenderMonkey 는 AMD 에서 쉐이더 코드를 만들고 테스트해 볼 수 있는 개발 프로그램입니다. 비록 AMD 는 렌더몽키 개발을 그만두었지만 여전히 [http]여기에서 공짜로 받아서 쓸 수 있습니다.

예제에서는 HLSL 를 쓰겠습니다만, HLSL 을 어떻게 쓰느냐보다는 RenderMonkey 를 어떻게 셋팅하고 실행하느냐에 집중할 겁니다. 만약 HLSL 에 대해서 잘 모른다면 [http]Catalin Zima 님이 작성한 [http]멋진 튜토리얼을 참고합시다. 문법에 대해 배운 후에는 XNA 교육란을 통해서 간단한 쉐이더를 어떻게 구현하는지도 같이 배워봅시다.

쉐이더 코드

이번 쉐이더에서는 diffuse texture map 에 ambient 와 diffuse 라이팅을 쓸 겁니다. 먼저 shader 코드를 봅시다.
   1: float4x4 WorldViewProjection;
   2: float4x4 WorldInverseTranspose;
   3: float3 LightDirection;
   4: float4 Ambient;
   5: sampler Texture;
   6:  
   7: struct VS_INPUT
   8: {
   9:    float4 position : POSITION0;
  10:    float3 normal : NORMAL0;
  11:    float2 texturecoord : TEXCOORD0;
  12: };
  13:  
  14: struct VS_OUTPUT
  15: {
  16:    float4 position : POSITION0;
  17:    float3 normal : TEXCOORD0;
  18:    float2 texturecoord : TEXCOORD1;
  19: };
  20:  
  21: VS_OUTPUT vs_main(VS_INPUT input)
  22: {
  23:    VS_OUTPUT output;
  24:    output.position = mul(input.position, WorldViewProjection);
  25:    output.normal = mul(input.normal, WorldInverseTranspose);
  26:    output.texturecoord = input.texturecoord;
  27:    return output;
  28: }
  29:  
  30: float4 ps_main(VS_OUTPUT input) : COLOR0
  31: {
  32:    float3 normal = normalize(input.normal);
  33:    float3 light = normalize(LightDirection);
  34:    float4 diffuse = tex2D(Texture, input.texturecoord);
  35:    float diffuseContribution = clamp(dot(normal, -light), 0, 1);
  36:    return Ambient + diffuse * diffuseContribution;
  37: }

다 완성되면 아래와 같은 주전자를 볼 수 있을 겁니다. 그럼 시작해 봅시다.
0.jpg


이펙트 만들기

처음 RenderMonkey 를 실행하면 아래와 같이 Empty Workspace 상태일 겁니다.
01.jpg


많은 작업을 왼편에 있는 Workspace Window 에서 하게 됩니다. 이 창은 기본으로 열려 있습니다. 먼저 새로운 이펙트 를 추가해봅시다. Effect Workspace 에서 우클릭한 후 원하는 타입의 Default Effect 를 추가합니다. HLSL 를 쓸 거라서 DirectX 쉐이더를 생성합니다. shader 를 작성할 때 써 먹을 수 있는 여러 템플릿이 있지만 이번 튜토리얼에서는 최대한 간단한 쉐이더를 만드는 "DirectX" 를 선택합니다.(정점쉐이더에서는 단순히 WorldViewProjection 변환만 하고, 픽셀쉐이더에서는 한 가지 색만 출력합니다).
02.jpg


이펙트를 생성하고 나면 아래와 같을 겁니다.
03.jpg


이제 시작할 준비가 되었습니다.

Model 변경

RenderMonkey 의 기본 모델은 구입니다만 쉐이더를 테스트하기에는 그다지 좋은 모델이 아니므로 바꿔봅시다. Workspace Window 의 Model 위에서 우클릭한 후 새로운 모델을 선택합니다.
04.jpg


주전자가 좋겠네요.
05.jpg


변수 설정

다음 단계에서는 RenderMonkey 와 shader 에서 쓸 전역 변수를 연결합니다. 우리가 구현할 쉐이더에서 쓸 전역 변수는 아래와 같습니다.
   1: float4x4 WorldViewProjection;
   2: float4x4 WorldInverseTranspose;
   3: float3 LightDirection;
   4: float4 Ambient;
   5: sampler Texture;

쉐이더 코드에 필요한 전역변수별로 Workspace Window 의 Effect 내에 새로운 변수를 만들어줘야 RenderMonkey 에서 쉐이더 데이터값을 설정할 수 있습니다. Workspace Window 에서 만든 변수와 쉐이더의 변수를 이름과 타입 모두 같게 만들어주세요. 새로운 변수를 생성하려면 Effect 에서 우클릭 -> Add Variable -> 목록에서 적당한 데이터 타입을 선택하면 됩니다.
06.jpg


Float3 타입인 LightDirection 와 Color 타입인 Ambient 를 추가합시다.

WorldViewProjection 나 WorldInverseTranspose 같은 행렬은 특수한 의미가 있으므로 RenderMonkey 에서 이런 행렬과 scene 을 시맨틱(semantic)으로 연결시켜 줘야 합니다(예 : View 행렬을 카메라와 연결한다던지). 이를 위해서는 적당한 시맨틱이 할당되어 있는 Predefined 행렬 중에 하나를 쓰면 됩니다. 변수이름에 mat~ 이라는 prefix 가 붙어있을텐데 쉐이더코드 변수 이름과 같게 만들기 위해서 Workspace 의 변수이름에서 F2 를 눌러서 이름을 변경해 줍시다.
07.jpg


마지막으로 shader 에서 샘플링할 texture 변수를 만들려면 다음 두 단계가 필요합니다.
먼저, Effect 에서 우클릭한 후, Add Texture -> 원하는 2D Texture 를 선택합니다. (Examples/Media/Textures/Hex.dds 를 선택합시다.)
08.jpg


다음에는 Pass 0 위에서 우클릭 -> Add Texture Object -> 방금 만든 텍스터(hex)를 선택해 link 시킵니다. 이렇게 만든 Texture Object 의 이름은 쉐이더에서 쓸 샘플러 이름과 같아야 합니다(Texture0 라는 이름이 붙을텐데 우리는 Texture 라는 이름을 쓸 거니 바꿔줍니다).
09.jpg


이펙트에 기본으로 들어있던 행렬(matViewProjection)은 필요없으므로 지웁니다. 컴파일하면 RENDERING ERROR(s): Missing shader constant parameter named 'matViewProjection' in vertex shader 'Vertex Shader' in pass 'Pass 0' 이런 에러가 뜰텐데 일단 무시합니다.

여기까지 했다면 Effect 가 다음과 같이 보여야 합니다.
10.jpg


쉐이더 입력 바인딩

그 다음 해야 하는 작업은 (종종 까먹기 쉬운데) RenderMonkey 를 정점쉐이더 입력값에 바인딩시켜서 원하는 데이터가 스트리밍되도록 하는 것입니다. 이전에 보여준 코드에는 정점쉐이더 입력 구조체가 아래와 같습니다.

   1: struct VS_INPUT
   2: {
   3:    float4 position : POSITION0;
   4:    float3 normal : NORMAL0;
   5:    float2 texturecoord : TEXCOORD0;
   6: };

이 구조체를 RenderMonkey 로 표현해 줘야 합니다. Effect 트리의 Stream Mapping 에서 우클릭한 후 Edit 를 선택하면 아래와 같은 창이 뜹니다.
11.jpg


채널 두 개를 추가한 뒤 정점쉐이더 입력값의 데이터 타입과 semantic 와 동일하도록 만들어 줍니다.
12.jpg


코드 작성

이제 가장 중요한 부분인 코드 작성을 할 시간입니다. Pass 0 의 Vertex Shader 우클릭 -> Edit 를 선택하면 기본 구현 코드가 들어있는 Code Editor 창이 뜰 겁니다.
13.jpg

14.jpg


여기에서 가장 눈여겨 봐야할 점은 RenderMonkey 에서는 정점쉐이더와 픽셀쉐이더를 별도의 탭에서 작성한다는 점, 그리고 각각의 탭에서 정의한 변수는 지역변수라 다른 탭에서 접근할 수 없다는 점입니다.

즉, 쉐이더 코드를 정점쉐이더, 픽셀쉐이더로 반반 쪼개어야 하는데 그다지 큰 문제는 아닙니다. 나눈 후 코드는 아래와 같습니다(위에서 봤던 전체 구현 코드와 비교해 봅시다).

Vertex Shader 탭 :
   1: float4x4 WorldViewProjection;
   2: float4x4 WorldInverseTranspose;
   3:  
   4: struct VS_INPUT
   5: {
   6:    float4 position : POSITION0;
   7:    float3 normal : NORMAL0;
   8:    float2 texturecoord : TEXCOORD0;
   9: };
  10:  
  11: struct VS_OUTPUT
  12: {
  13:    float4 position : POSITION0;
  14:    float3 normal : TEXCOORD0;
  15:    float2 texturecoord : TEXCOORD1;
  16: };
  17:  
  18: VS_OUTPUT vs_main(VS_INPUT input)
  19: {
  20:    VS_OUTPUT output;
  21:    output.position = mul(input.position, WorldViewProjection);
  22:    output.normal = mul(input.normal, WorldInverseTranspose);
  23:    output.texturecoord = input.texturecoord;
  24:    return output;
  25: }

Pixel Shader 탭 :
   1: float3 LightDirection;
   2: float4 Ambient;
   3: sampler Texture;
   4:  
   5: struct VS_OUTPUT
   6: {
   7:    float4 position : POSITION0;
   8:    float3 normal : TEXCOORD0;
   9:    float2 texturecoord : TEXCOORD1;
  10: };
  11:  
  12: float4 ps_main(VS_OUTPUT input) : COLOR0
  13: {
  14:    float3 normal = normalize(input.normal);
  15:    float3 light = normalize(LightDirection);
  16:    float4 diffuse = tex2D(Texture, input.texturecoord);
  17:    float diffuseContribution = clamp(dot(normal, -light), 0, 1);
  18:    return Ambient + diffuse * diffuseContribution;
  19: }

VS_OUTPUT 구조체는 양쪽에 다 필요하기 때문에 반복해서 써 넣었다는 점, 그리고 전역변수는 필요한 탭에만 선언되어 있다는 점을 주의해서 봅시다.

정점쉐이더와 픽셀쉐이더 함수 이름은 탭 상단의 Entry Point 에 정의된 것과 같아야 합니다. 기본값은 각각 "vs_main" 과 "ps_main" 입니다.

여기까지 했다면 코드가 동작하는 것을 볼 수 있습니다. 툴바에 있는 Compile 을 눌러봅시다.
15.jpg


16.jpg


주전자가 온통 흰 색이네요. 하지만 걱정마세요. 이것은 LightDirection 과 Ambient 변수에 기본값이 들어있기 때문이니까요. RenderMonkey 에서는 변수값을 바꾸고 그 결과를 실시간으로 확인할 수 있습니다.

변수값 바꾸기

LightDirection 와 Ambient 변수값을 변경해 봅시다. LightDirection 변수 위에서 우클릭한 후에 이를 Artist Variable 로 바꿉니다(바꾼 뒤에는 변수 아이콘 위에 노란색 삼각형 표시가 추가됩니다). Colors 타입은 기본으로 Artist Variables 로 설정되기 때문에 Ambient 변수에는 이런 작업을 반복하지 않아도 됩니다.
17.jpg


이제 Artist Editor 창을 열어 봅시다.
18.jpg


이런 창이 뜨는 걸 볼 수 있습니다.
19.jpg


이제 링크되어 있는 변수값을 바꿔볼 수 있습니다. Artist Editor 창을 확장해 보면 더 다양한 제어방법을 써 볼 수 있습니다. 저는 LightDirection 벡터를 정규화시키도록 지정했고(xyz:0.714, -0.663, 0.221), Ambient 색은 짙은 검은 색(RGB:59,40,57)으로 설정했습니다.
20.jpg


Texture Sampler 옵션

마지막 팁입니다.주전자에 입혀진 텍스터가 약간 지저분해 보이네요. 아마도 포인트 필터링(point filtering)을 쓴 거 같은데요, 다른 걸로 바꿔봅시다.

Texture Object 위에서 우클릭한 후 Edit 를 선택합니다. 이 창에서는 sampler 에 대한 모든 것을 설정할 수 있습니다. magnification/minification/mipmapping(D3DSAMP_MAGFILTER/D3DSAMP_MINFILTER/D3DSAMP_MIPFILTER) 필터링을 linear(D3DTEXF_LINEAR) 로 바꿨더니 텍스터가 훨씬 부드럽게 보이는 걸 확인할 수 있습니다.
21.jpg


22.jpg


결론

이제 끝입니다. 미리보기 창을 크게 만들어 결과물을 확인해 봅시다. 툴바에 있는 카메라 컨트롤을 이용하면 씬을 돌아다닐 수 있습니다.
23.jpg


이게 최종 결과물입니다.
24.jpg


이 튜토리얼이 도움이 되었으면 좋겠네요. 질문이 있으면 아무거나 물어봐 주세요.(질문은 저말고 [http]원작자 블로그에 질문 써 주세요.)

공유하기 버튼

 

2011년 내 이글루 결산 블로그

2011 내 이글루 결산

1년동안 작성한 박PD님의 결산내역입니다. 이글루에 포스팅하여 공유해보세요.
본문이 500px 이하인 스킨은 지원하지 않아 포스트가 잘려보일 수 있습니다.
결산기간 : 2011년 12월 26일~ 2012년 1월 9일

포스트[67]

  1 6 3 2 12 28 13 2  
  1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월  

덧글[470]

  26 12 32 52 2 3 9 18 63 127 59 67  
  1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월  

트랙백[19]

  1 0 0 0 0 0 0 0 3 10 4 1  
  1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월  

핑백[74]

  1 1 2 2 0 0 0 2 6 48 5 7  
  1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월  

내가 보낸 글 통계[2340]

  120 1773 0 32 95 320  
  테마 태그 가든 보낸트랙백 보낸핑백 블로거뉴스  

포스트 수 비교

 (2010년 포스트 : 146개)
2010 2010  2011 2011
  11 1 20 13 6 9 3 21 7 15 11 2 13 12 6 28 10 13 10 2  
  1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월  

명예의 전당

1년동안 작성한 글

200자 원고지 기준으로 6,775장 분량이며, 원고 두께는 약 47cm 입니다.
1년 동안의 글을 문고판 시리즈로 낸다면 34권까지 낼 수 있겠네요. 박PD님은 올 한해 이글루스에서 9,636번째로 게시물을 가장 많이 작성하셨네요.

자주 등록한 태그&대표글 TOP5

  1. 1위: TDD(53회) | 제가 지금까지 번역한 책들로 Yes24 애드...
  2. 2위: 게임(47회) | 기획실패사례 : 남들이 안하는건 못 해서가 ...
  3. 3위: 스터디(47회) | Domain Driven Design - 도...

자주 발행한 밸리&대표글 TOP5

  1. 1위: IT(53회) | 훌륭한 개발자는 당장이라도 회사를 그만둘 수...
  2. 2위: 게임(37회) | 조금 늦었지만 아이온 3.0 실제영상 vs ...
  3. 3위: 도서(10회) | '위대한 게임의 탄생' Facebook 페이...
  4. 4위: 일상(9회) | Ignite Seoul 4회를 다녀왔습니다....
  5. 5위: 음악(3회) | 마이크 하울링(howling 또는 feedb...

내 이글루 인기글

  1. 가장 많이 읽힌 글은 기획실패사례 : 남들이 안하는건 못 해서가 아니라 다 이유가 있어... 입니다.
  2. 가장 대화가 활발했던 글은 킨들3(Kindle3) 완전체 만들기 (킨들... 입니다.
  3. (덧글47개, 트랙백1개, 핑백5개)

내 이글루 활동 TOP5

  1. 1위: 김윤정 (9회)
  2. 2위: 마이즈 (8회)
  3. 3위: storm (6회)
  4. 4위: 오즈라엘 (5회)
  5. 5위: 초록불 (4회)
내 이글루결산

2011년은 서버에서 클라이언트로 넘어가면서 쓰기 보다는 읽어야 하는 한 해였네요.
막상 공부는 그다지 않하고 야구랑 게임만 한 거 같지만 :)
덕분에 작년보다는 포스팅이 훨씬 줄었습니다.
올해부터는 다시 정기적으로 포스팅해 볼 생각입니다.
여러 번 댓글 달아주신 김윤정님, 마이즈님, storm 님, 오즈라엘님, 초록불님 감사합니다.

공유하기 버튼

 

1 2 3 4 5 6 7 8 9 10 다음



Google Analytics