ComputerGraphics/HLSL7 쉐이더프로그래밍 / 툰(toon) 쉐이딩 컴퓨터 그래픽스에서 실제와 가까운 렌더링은 궁극적인 목표이지만 때로는 실제와 거리가 있는 미적인 요소를 충족 시켜야 할 때도 있습니다. 이번에 공부해본 툰쉐이딩은 그런 경우의 예라고 볼 수 있습니다. 구현 결과를 먼저 보자면 다음과 같습니다. 마치 만화 효과 같이 색상이 단계적으로 표현되고 있습니다. 난반사 쉐이더에서 보았던 코사인 그래프와 툰쉐이딩 그래프를 비교해 놓은 것입니다. 마치 계단처럼 단계가 나뉩니다. 수치적으로 비교를 해보면 아래와 같습니다. 난반사광의 양 툰쉐이더의 양 0 0 0~0.2 0.2 0.2~0.4 0.4 0.4~0.6 0.6 즉 난반사 광에서 무조건 0.2단위로 올림 하면 툰쉐이더 양이 나오게 되는 겁니다. 정점쉐이더 정점 쉐이더는 지난번 람베르트 난반사의 정점 쉐이더와 비슷합니.. 2020. 6. 24. 쉐이더프로그래밍 / 디퓨즈 스페큘러 맵핑 이번에 공부한 내용은 디퓨즈 맵과 스페큘러 맵을 이용하여 물체 표면의 특성에 따라 반사량이 달라지는 스페큘러 맵핑입니다. 예를 들어 디퓨즈 스페큘러맵핑을 이용하면 얼굴을 렌더링 한다고 할때 이마나 코는 기름기 때문에 좀 더 반짝거리며 다른 부분은 덜 반짝 거리는 것을 표현할 수 있습니다. 이러한 정반사량과 난반사량을 부분에 따라서 조절하기 위해 스패큘러맵 텍스처와 디퓨즈맵 텍스처를 사용한다고 합니다. 즉 텍스처가 두개가 필요합니다. 구현에 필요한 텍스처 리소스는 아래 git레포지토리에서 구 할 수 있습니다. https://github.com/popekim/ShaderPrimerKR/tree/master/05_DiffuseSpecularMapping popekim/ShaderPrimerKR Source C.. 2020. 6. 24. 정반사 (Phong model) HLSL 구현 / 렌더몽키(RenderMonkey) 이번 포스팅은 정반사 쉐이더 구현에 대한 내용입니다. 정반사 쉐이더 모델에는 여러가지가 있는데 주로 게임에서 쓰이는 퐁 반사 모델(Phong model)에 대해서 공부해 보았습니다. 정반사 쉐이더의 핵심 원리는 바로 입사각과 반사각은 같다 라는 초등학교때 배운 내용입니다. 거기에 보는 사람의 각도에 따라서 정반사 광이 결정된다는 원리를 더 해보면 됩니다. 즉, 퐁 반사 모델을 정리해 보면 법선 벡터n에 대해 입사각l과 반사각 r은 같고 반사되는 빛의 양은 보는 사람의 각도와 반사광 r과 이루는 각도에 따라서 결정되는 모델입니다. 이때 cos 세타 값의 거듭제곱수 많큼 더 반짝거리는 정반사를 구현할 수 있습니다. (아래 그림처럼 n값이 커질수록 반사되는 영역이 타이트해집니다) 렌더몽키 설정 gWorldLi.. 2020. 6. 1. 난반사 HLSL (람베르트 반사) 쉐이더 / 렌더몽키(RenderMonkey) 0. 람베르트 난반사 오늘 공부해볼 HLSL은 조명 구현 중에서 난반사에 대한 것입니다. 난반사는 어느 각도에서 보던 고르게 반사되는 반사를 말합니다. 예를 들면 나무로된 탁자의 표면, 흰종이를 들을 수 있겠습니다. 컴퓨터 그래픽에서도 이러한 난반사를 계산하여 표현하고 있는데 일반적으로 람베르트 코사인 법칙( Lambert's cosine law)을 이용하고 있습니다. 람베르트의 난반사 법칙은 표면의 법선 벡터와 입사광이 이루는 벡터의 코사인 값이 반사되는 광량이라고 정의를 내리고 있습니다. 코사인 그래프를 보면 0에서 1 90도에서 0을 나타내고 있습니다. 즉, 빛을 수직으로 비추면 가장 밝은 빛이 난반사 된다는 것을 나타내며 0도에 가까워 질수록 반사되는 빛의 양이 감소합니다. 그럼 이러한 개념을 가.. 2020. 5. 28. 쉐이더프로그래밍 / 텍스처 맵핑 HLSL / 랜더몽키(RenderMonkey) 오늘은 포프님의 셰이더 입문 강좌를 따라 랜더몽키를 이용하여 텍스처 맵핑하는 쉐이더 프로그래밍을 공부해 보았습니다. 이번에도 마찬가지로 랜더몽키가 기본적으로 작성해 주는 코드를 다 지우고 직접 프로그래밍을 해보았습니다. 1. 텍스처 좌표 UV 3D그래픽에서 텍스처맵핑은 정점이루어진 삼각형에 이미지 파일을 입히는 것을 말합니다. 그 이미지를 텍스처라고 합니다. 텍스처는 각 정점에 맵핑되는 좌표를 가지고 있는데 이를 텍스처 좌표라 하며 U,V로 나타냅니다. 좌 상단 기준으로 0,0 그리고 우하단 기준 1,1로 0~1까지의 상대적인 값으로 나타냅니다. 아래 그림과 같이 0.5를 v1에 맵핑한다면 이미지의 절반만 매핑되게 됩니다. 또 2를 v1에 맵핑하게 된다면 이미지가 두번씩 나타나게 되어있습니다. 2. 랜더.. 2020. 5. 25. 쉐이더프로그래밍 / 빨강 쉐이더 만들기 (렌더몽키) 지난번에 받은 렌더몽키라는 툴로 간단한 쉐이더를 만들어보겠습니다. 기초설정 우선 렌더몽키를 실행합니다. 다음 왼쪽 workspace패널안에서 Effect Workspace를 우클릭하여 다음과 같이 선택해줍니다. ( Add Defaults Effect > DirectX > DirectX) 그럼 빨산색 공인지 원인지 하는게 나타납니다. 정점쉐이더 렌더몽키의 Workspace패널에서는 프리뷰 창에 표시되는 모델의 쉐이더를 볼 수 있습니다. 우선 정점쉐이더에 대해서 알아볼텐데요. 우리는 공부를 해야하므로 렌더몽키가 만들어준 Vertex Shader코드를 싹 지워줍니다?! 그리고 다음 정점 쉐이더를 한줄한줄 작성해봅니다. struct VS_INPUT { float4 mPosition : POSITION; }; s.. 2020. 5. 16. 쉐이더프로그래밍 / 렌더몽키 RenderMonkey를 설치해보자 DirectX11을 공부하는데 계속 나오는 Shader. 예제 코드를 따라 쉐이더를 작성하면 화면에 삼각형도나오고, 빨간색 삼각형, 큐브.. 조명까지.. DirectX11프로그래밍에서 Shader를 작성하지 않으면 화면에 뿌릴수가 없는 것 같습니다. 학부시절 OpenGL로 컴퓨터그래픽스를 배웠으나 쉐이더 같은건 작성하지 않아도 잘만 나왔었는데 DirectX11로 오니까 뭐만 하려면 Shader를 작성했습니다. Shader가 궁금해서 찾아보다 평소에 즐겨보던 포프TV의 포프님의 블로그에서 포프님의 강좌를 발견! DirectX는 잠시 두고 Shader를 좀 공부해볼까 합니다. 그 첫 과정으로 RenderMonkey를 설치하라고 하십니다. RenderMonkey는 AMD사에서 제공하는 쉐이더 작성도구로 쉐이더.. 2020. 5. 16. 이전 1 다음
