Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
(연관된 글이 1개 있습니다.)
(시리즈 글이 3개 있습니다.)
.NET Framework: 281. Shader 강좌와 함께 배워보는 XNA Framework (1) - 기초 프로그램 구조
; https://www.sysnet.pe.kr/2/0/1196

.NET Framework: 282. Shader 강좌와 함께 배워보는 XNA Framework (2) - RenderMonkey의 Shader/Model 파일 연동
; https://www.sysnet.pe.kr/2/0/1197

.NET Framework: 285. Shader 강좌와 함께 배워보는 XNA Framework (3) - 텍스처 매핑 예제
; https://www.sysnet.pe.kr/2/0/1206




Shader 강좌와 함께 배워보는 XNA Framework (3) - 텍스처 매핑 예제


지난번 글에 이어서.

Shader 강좌와 함께 배워보는 XNA Framework (2) - RenderMonkey의 Shader/Model 파일 연동
; https://www.sysnet.pe.kr/2/0/1197

역시나 처음으로 "texture mapping"이라는 것도 해보게 되는군요. ^^

[포프의 쉐이더 입문강좌] 03. 텍스처매핑 Part 1 
; http://kblog.popekim.com/2011/12/03-part-1.html

[포프의 쉐이더 입문강좌] 03. 텍스처매핑 Part 2 
; http://kblog.popekim.com/2011/12/03-part-2.html

위에서 "Part 1"의 실습을 하면 RenderMonkey 도구의 "Vertex Shader" 코드만 포함하고 있기 때문에 정상적인 결과물을 볼 수 없습니다. 그래서 "Part 2" 강좌의 초입에 나오는 "Pixel Shader" 코드를 마저 입력해 주어야 컴파일이 성공하고 "Stream Mapping"까지 완료해야만 정상적인 지구본 모양의 이미지를 볼 수 있습니다.

ch3_texture_mapping_1.png

그렇게 렌더몽키 실습이 완료되었으면 본격적으로 XNAFramework 예제로 넘어가게 되는데요.

우선, 새롭게 실습한 RenderMonkey의 결과물을 각각 Sphere.x와 TextureMapping.fx 파일로 저장하고 TextureMapping의 원본으로 사용된 이미지 earth.jpg도 렌더몽키의 설치 디렉토리로부터(보통, C:\Program Files (x86)\AMD\RenderMonkey 1.82\Examples\Media\Textures) 복사해서 XNAMFramework 프로젝트에 복사합니다.

코드는 지난번의 예제 프로젝트를 기반으로 변경해 볼 텐데요.

WindowsGame1Content 프로젝트에 있는 기존 .x, .fx 자원을 삭제하고 새롭게 Sphere.x, TextureMapping.fx, earth.jpg 파일을 추가해 준 후 코드에 적용해 주는데, Sphere.x와 TextureMapping.fx는 기존 코드에 이미 Model/Effect 타입으로 정의되어 있기 때문에 이름만 바꿔주면 되고, earth.jpg 파일에 대해서는 Texture 타입으로 로드를 해줍니다.

Model _earthModel;
Effect _textureMappingShader;
Texture _earthTexture;

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

    _spriteFont = Content.Load<SpriteFont>("Font");
    _earthModel = Content.Load<Model>("Sphere");
    _textureMappingShader = Content.Load<Effect>("TextureMapping");
    _earthTexture = Content.Load<Texture>("Earth");
}

마지막으로 _earthTexture 자원을 _textureMappingShader에 연결하는 코드를 넣어주면 끝입니다.

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    _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;

    _textureMappingShader.Parameters["gWorldMatrix"].SetValue(_matWorld);
    _textureMappingShader.Parameters["gViewMatrix"].SetValue(_matView);
    _textureMappingShader.Parameters["gProjectionMatrix"].SetValue(_matProjection);
    _textureMappingShader.Parameters["DiffuseMap_Tex"].SetValue(_earthTexture);

    ... [생략] ...
    base.Draw(gameTime);
}

이제 빌드하고 실행하면 ^^ 정상적으로 지구본이 출력되는 것을 확인할 수 있습니다.

부가적으로, Part 2 강좌를 보면 지구본을 돌려주는 효과를 내도록 코드를 추가하고 있는데요. XNA에서도 다음과 같이 _matWorld 코드를 초기화하도록 변경해 주면 됩니다.

float _rotationY = 0.0f;

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    _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);

    _rotationY += 0.4f * PI / 180.0f;
    if (_rotationY > 2 * PI)
    {
        _rotationY -= 2 * PI;
    }

    _matWorld = Matrix.CreateRotationY(_rotationY);

    ... [생략] ...
}

다시 F5 키를 눌러서 실행하면, ^^ 와~~~ 지구본이 정말로 회전합니다.

ch3_texture_mapping_2.png

첨부된 파일은 위의 코드를 포함한 예제 프로젝트입니다.




참고로, 위의 글을 읽다 보면 UV 좌표라는 말이 나오는데요. 생소해서 찾아보니 다음과 같이 잘 설명된 글이 있습니다.

각종 3D 좌표 체계 정리
; http://bklist.egloos.com/tag/UV좌표/page/1
(위의 글을 보면, DirectX와 OpenGL의 z 좌표값이 반대로 된 것을 볼 수 있습니다. 개발자들 편하게 좀... 저런 건 맞춰주면 좋지 않았을까요? ^^;)

어쨌든 ^^ 잘 모르지만 이런 식으로 가랑비에 옷 젖듯 배워나가는 것도 좋겠지요.

마지막으로, 제 경우에 RenderMonkey 작업 시에 빌드를 했을 때 다음과 같은 오류가 발생해서 애를 먹었습니다.

Compiling vertex shader API(D3D) /../TextureMapping/Pass 0/Vertex Shader/
COMPILE ERROR: API(D3D) /../TextureMapping/Pass 0/Vertex Shader/ c:\program files (x86)\amd\rendermonkey 1.82\memory(17,11): error X3000: invalid target or usage string RENDERING ERROR(s):
Vertex shader 'Vertex Shader' failed to compile in pass 'Pass 0'. See Output window for details


처음엔 에러가 발생했다는 것만으로 당황해서 어찌할 줄 몰랐는데 "COMPILE ERROR"에 보면 (17,11)이라고 라인 수가 17에서 "invalid target or usage string"에 해당하는 오류가 났다는 것을 알게 되었습니다.

01: float4x4 gWorldMatrix;
02: float4x4 gViewMatrix;
03: float4x4 gProjectionMatrix;
04: 
05: struct VS_INPUT
06: {
07:    float4 mPosition : POSITION;
08:    float2 mTexCoord : TEXCOORD0;
09: };
10: 
11: struct VS_OUPUT
12: {
13:    float4 mPosition : POSITION;
14:    float2 mTexCoord : TEXCOORD0;
15: };
16: 
17: VS_OUTPUT vs_main(VS_INPUT Input)
18: {

VS_OUTPUT으로 되어 있는데, 11행에 보면 VS_OUPUT으로 실수했기 때문에 그런 에러가 발생한 것입니다. 나름, 오류가 발생한 위치를 알려주기 때문에 다음부터는 RenderMonkey의 컴파일 오류에 당황하지 않게 될 것 같습니다. ^^




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

[연관 글]






[최초 등록일: ]
[최종 수정일: 7/5/2021]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




... 91  92  [93]  94  95  96  97  98  99  100  101  102  103  104  105  ...
NoWriterDateCnt.TitleFile(s)
11610정성태7/15/201817388Graphics: 5. Unity로 실습하는 Shader (3) - 고로 셰이딩(gouraud shading) + 퐁 모델(Phong model) + Texture
11609정성태7/15/201820398Graphics: 4. Unity로 실습하는 Shader (2) - 고로 셰이딩(gouraud shading) + 퐁 모델(Phong model)
11608정성태7/15/201824958Graphics: 3. Unity로 실습하는 Shader (1) - 컬러 반전 및 상하/좌우 뒤집기
11607정성태7/14/201825294Graphics: 2. Unity로 실습하는 Shader [1]
11606정성태7/13/201825935사물인터넷: 19. PC에 연결해 동작하는 자신만의 USB 장치 만들어 보기파일 다운로드1
11605정성태7/13/201821734사물인터넷: 18. New NodeMCU v3 아두이노 호환 보드의 내장 LED 및 입력 핀 사용법 [1]파일 다운로드1
11604정성태7/12/201820851Math: 47. GeoGebra 기하 (24) - 정다각형파일 다운로드1
11603정성태7/12/201816915Math: 46. GeoGebra 기하 (23) - sqrt(n) 제곱근파일 다운로드1
11602정성태7/11/201817085Math: 45. GeoGebra 기하 (22) - 반전기하학의 원에 관한 반사변환파일 다운로드1
11601정성태7/11/201819853Math: 44. GeoGebra 기하 (21) - 반전기하학의 직선 및 원에 관한 반사변환파일 다운로드1
11600정성태7/10/201818311Math: 43. GeoGebra 기하 (20) - 세 점을 지나는 원파일 다운로드1
11599정성태7/10/201817617Math: 42. GeoGebra 기하 (19) - 두 원의 안과 밖으로 접하는 직선파일 다운로드1
11598정성태7/10/201819497Windows: 147. 시스템 복구 디스크를 USB 디스크에 만드는 방법
11597정성태7/10/201821598사물인터넷: 17. Thinary Electronic - ATmega328PB 아두이노 호환 보드의 개발 환경 구성
11596정성태7/10/201819547기타: 72. 과거의 용어 설명 - OWIN
11595정성태7/10/201825302사물인터넷: 16. New NodeMCU v3 아두이노 호환 보드의 기본 개발 환경 구성
11594정성태7/8/201819687Math: 41. GeoGebra 기하 (18) - 원의 중심 및 접선파일 다운로드1
11593정성태7/8/201818700Math: 40. GeoGebra 기하 (17) - 각의 복사파일 다운로드1
11591정성태7/7/201818042Math: 39. GeoGebra 기하 (16) - 삼각형의 방심과 방접원파일 다운로드1
11590정성태7/7/201817599Math: 38. GeoGebra 기하 (15) - 삼각형의 수심파일 다운로드1
11589정성태7/7/201817866.NET Framework: 787. object로 형변환된 인스턴스를 원래의 타입 인자로 제네릭 메서드를 호출하는 방법 [2]파일 다운로드1
11588정성태7/7/201819333디버깅 기술: 116. windbg 분석 사례 - ASP.NET 웹 응용 프로그램의 CPU 100% 현상 (3)
11587정성태7/5/201818939.NET Framework: 786. ASP.NET - HttpCookieCollection을 다중 스레드에서 사용할 경우 무한 루프 현상
11586정성태7/5/201818125Math: 37. GeoGebra 기하 (14) - 삼각형의 무게 중심파일 다운로드1
11585정성태7/5/201818295Math: 36. GeoGebra 기하 (13) - 삼각형의 외심과 외접하는 원파일 다운로드1
11584정성태7/5/201818277Math: 35. GeoGebra 기하 (12) - 삼각형의 내심과 내접하는 원파일 다운로드1
... 91  92  [93]  94  95  96  97  98  99  100  101  102  103  104  105  ...