J & J - 정성태의 닷넷 이야기

사용자

메뉴

최근 덧글

[정성태] 아래의 글에 정리했으니 참고하세요. C# - Typed D...[정성태] 간단한 재현 프로젝트라도 있을까요? 저런 식으로 설명만 해...[정성태] 저도 해 본 것은 아니지만 어차피 in-process로 pyth...[정성태] Full Text Search With ElasticSearch...[정성태] When I define a window class with n...[정성태] What is the process by which the cu...[정성태] Why doesn't the clock in the taskba...[정성태] 오히려 그 글을 읽지 않았다고 생각하시는 것이 편합니다. (기억...[GM B] 늦었지만 답변감사드립니다. 제가 좀 바빠서 이제서야... ...[정성태] 관련해서는 ContextMenu의 XAML template을 분...

글쓰기

제목

이름

암호

전자우편

HTML

홈페이지

유형

내용

<div style='display: inline'>
<h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Shader 강좌와 함께 배워보는 XNA Framework (2) - RenderMonkey의 Shader/Model 파일 연동</h1>

 
지난번 글에 이어서. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Shader 강좌와 함께 배워보는 XNA Framework (1) - 기초 프로그램 구조
; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1196'>http://www.sysnet.pe.kr/2/0/1196</a>
</pre>
 
이번에는 다음의 글에 실려 있는 Visual C++ 소스 코드를 XNA 프로젝트로 변환해 보겠습니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
[포프의 쉐이더 입문강좌] 02. 진짜 쉬운 빨강쉐이더 Part 1
; <a target='tab' href='http://kblog.popekim.com/2011/12/02-part-1.html'>http://kblog.popekim.com/2011/12/02-part-1.html</a>

[포프의 쉐이더 입문강좌] 02. 진짜 쉬운 빨강쉐이더 Part 2
; <a target='tab' href='http://kblog.popekim.com/2011/12/02-part-2.html'>http://kblog.popekim.com/2011/12/02-part-2.html</a>
</pre>
 
실습을 위해 저도 RenderMonkey 프로그램을 다운로드했는데요. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
RenderMonkey™ Toolsuite 
; <a target='tab' href='http://developer.amd.com/archive/gpu/rendermonkey/pages/default.aspx'>http://developer.amd.com/archive/gpu/rendermonkey/pages/default.aspx</a>
</pre>
 
RenderMonkey 1.82를 실행하자마자 프로그램이 비정상 종료되는 현상이 Vista/Win7에서 나타날 수 있습니다. 그런 경우에는 "C:\Program Files (x86)\AMD\RenderMonkey 1.82" 폴더에 "Error.txt" 파일을 추가하고 일반 사용자 권한으로 읽기/쓰기가 가능하도록 설정해 주시면 그런 현상은 사라집니다. 
 
자, 이제 본격적으로 코드 변환을 해볼까요? ^^ 
 
우선, 본문에 나온 #define 상수 먼저 C#에서 다음과 같이 추가해 줍니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
public const float PI = 3.14159265f;
public const float FOV = (PI / 4.0f);
public readonly float ASPECT_RATIO;
public const int NEAR_PLANE = 1;
public const int FAR_PLANE = 10000;

public Game1()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";

this.graphics.PreferredBackBufferWidth = 800;
    this.graphics.PreferredBackBufferHeight = 600;

ASPECT_RATIO = (this.graphics.PreferredBackBufferWidth / (float)this.graphics.PreferredBackBufferHeight);
}
</pre>
 
그다음은 Sphere.x와 ColorShader.fx 파일을 로드해야 하는데요. 이 부분은 도움을 받아야겠습니다. ^^ 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Working with Shaders in XNA 
; <a target='tab' href='http://rbwhitaker.wikidot.com/shaders-in-xna'>http://rbwhitaker.wikidot.com/shaders-in-xna</a>
</pre>
 
위의 글을 읽으니 대강 감이 오는 군요. 
 
2개의 파일을 WindowsGame1Content 프로젝트에 추가시키면, Visual Studio가 파일 확장자에 따라 .fx인 경우 "Effect - XNA Framework"으로, .x인 경우 "Model - XNA Framework"으로 알아서 "Content Processor"에 대응시켜줍니다. 
 
그다음은 코드에서 이를 활용해야 할 텐데요. 복잡한 Visual C++ 소스 코드와는 달리 XNA에서는 다음과 같이 간단하게 끝납니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Model _modelSphere;
Effect _colorShader;

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);

_spriteFont = Content.Load&lt;SpriteFont&gt;("Font");
 _modelSphere = Content.Load&lt;Model&gt;("Sphere");
 _colorShader = Content.Load&lt;Effect&gt;("ColorShader");
}
</pre>
 
Shader를 로드했으니, 이제 Shader 내부의 전역 변수에 값을 설정해야 하는데 이 부분은 Visual C++과 어느 정도 대응되는 면이 있습니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
=== Visual C++ ===
D3DXMATRIXA16 matView;
D3DXVECTOR3 vEyePt( 0.0f, 0.0f, -200.0f );
D3DXVECTOR3 vLookatPt( 0.0f, 0.0f, 0.0f);
D3DXVECTOR3 vUpVec( 0.0f, 1.0f, 0.0f);
D3DXMatrixLookAtLH(&amp;matView, &amp;vEyePt, &amp;vLookatPt, &amp;vUpVec);

D3DXMATRIXA16 matProjection;
D3DXMatrixPerspectiveFovLH(&amp;matProjection, FOV, ASPECT_RATIO, NEAR_PLANE, FAR_PLANE);

D3DXMATRIXA16 matWorld;
D3DXMatrixIdentity(&amp;matWorld);

gpColorShader-&gt;SetMatrix("gWorldMatrix", &amp;matWorld);
gpColorShader-&gt;SetMatrix("gViewMatrix", &amp;matView);
gpColorShader-&gt;SetMatrix("gProjectionMatrix", &amp;matProjection);

=== Visual C# ===
_matView = Matrix.CreateLookAt(new Vector3(0, 0, -200), new Vector3(0, 0, 0), new Vector3(0, 1, 0));
_matProjection = Matrix.CreatePerspectiveFieldOfView(FOV, ASPECT_RATIO, NEAR_PLANE, FAR_PLANE);
_matWorld = Matrix.Identity;
 
_colorShader.Parameters["gWorldMatrix"].SetValue(_matWorld);
_colorShader.Parameters["gViewMatrix"].SetValue(_matView);
_colorShader.Parameters["gProjectionMatrix"].SetValue(_matProjection);
</pre>
 
마지막으로 Shader를 그려 봐야 하는데요. 사실 이 부분의 작업에 애를 먹긴 했습니다. 처음엔, Effect 타입에서 Begin/End 메서드를 정의해 주는 식으로 Visual C++ 소스 코드와 거의 동일할 거라고 생각해서 나름대로 유사한 함수와 속성을 찾아 보았는데요. 결국 포기하고 ^^ 다음의 글을 검색해서 도움을 받았습니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
Game Creation with XNA/3D Development/Shaders and Effects
; <a target='tab' href='http://en.wikibooks.org/wiki/Game_Creation_with_XNA/3D_Development/Shaders_and_Effects'>http://en.wikibooks.org/wiki/Game_Creation_with_XNA/3D_Development/Shaders_and_Effects</a>
</pre>
 
아래는 최종 반영된 코드! 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
foreach (ModelMesh mesh in _modelSphere.Meshes)
{
 foreach (ModelMeshPart part in mesh.MeshParts)
 {
 part.Effect = _colorShader;
 }
 
 mesh.Draw();
}
</pre>
 
실행하니, 정말 Visual C++ 소스 코드처럼 동일하게 결과물이 나왔습니다. (신기하네요. ^^) 
 
<img onclick='toggle_img(this)' class='imgView' alt='how_to_draw_shader_1.png' src='/SysWebRes/bbs/how_to_draw_shader_1.png' /> 
 
참고로, Shader가 XNA 내부적으로도 몇 가지 제공되는 것 같습니다. 
 
가령, "<a target='tab' href='http://rbwhitaker.wikidot.com/shaders-in-xna'>Working with Shaders in XNA</a>" 글에 보면 다음과 같이 BasicEffect를 사용하는 것을 볼 수 있습니다. 
 
<pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' >
foreach (ModelMesh mesh in _modelSphere.Meshes)
{
 foreach (BasicEffect effect in mesh.Effects)
 {
 effect.EnableDefaultLighting();
 effect.PreferPerPixelLighting = true;
 effect.World = _matWorld * mesh.ParentBone.Transform;
 effect.View = _matView;
 effect.Projection = _matProjection;
 }
}
</pre>
 
위와 같이 하면, Sphere.x 모델에다 BasicEffect를 적용하는 것이므로 다음과 같이 렌더링이 됩니다. 
 
<img onclick='toggle_img(this)' class='imgView' alt='how_to_draw_shader_2.png' src='/SysWebRes/bbs/how_to_draw_shader_2.png' /> 
 
그나저나... 단순히 '구' 하나 그리는 것도 저렇게 힘든데... Lineage2 / WOW 같은 3D MMORPG를 만드는 게임 프로그래머들은... 3차원 공간에 대해 머릿속에서 수학적으로 바라볼 수 있는 회로가 만들어진 천재들이 아닌가... 하는 생각이 듭니다. ^^; 
 
첨부 파일: 
 
<a target='tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=660&amp;boardid=331301885'>01_DxFramework.zip: 원 강좌에서 공개된 소스 코드의 Unicode 버전</a> 
<a target='tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=661&amp;boardid=331301885'>WindowsGame1.zip: XNA로 변환된 C# 프로젝트</a>

<hr />[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]
</div>

첨부파일

스팸 방지용 인증 번호

3458 (왼쪽의 숫자를 입력해야 합니다.)