셰이더 프로그래밍 Part 5-2 : 쉐도우 매핑 (Shadow Mapping) - 2 Part 5-2 두번째 파트에서 구현할 것마지막 스텝은 shadow map generation pass에서 생성된 array texture를 fragment shader의 input으로 넘겨주는 것입니다. 이는 최종 렌더 패스에서 씬을 렌더링하는데 사용될 것입니다.(이 바인딩 과정은 Mesh::internalDraw에서 구현하며, 우리가 이전 Part의 노말맵, 환경맵을 셰이더로 넘겨주는 것과 같은 동작입니다.)GLSL fragment shader에서 Array Texture를 샘플링하는 것은 문법이 조금 다릅니다. Scene::visualizeShadowMap 과 src/shader/shadow_viz.frag 를 ..

셰이더 프로그래밍 - Part 5-2 : 쉐도우 매핑 (Shadow Mapping) 이번 Part 5-2 에서는 spotlights가 물체에 그림자를 드리우도록 할 것 입니다. 쉐도우 매핑 알고리즘은 rasterization 기반의 렌더링 파이프라인에서 그림자를 근사하는 방법입니다. 쉐도우 매핑은 두 가지 스텝이 필요합니다. 각 광원마다 그 위치에 카메라가 있다고 가정하고, Scene 지오메트리를 렌더링합니다. 이 지점에서 렌더링 결과는 depth buffer 에 저장되며, 이 값은 광원에서 가장 가까운 지점을 의미합니다. depth buffer는 단일 채널의 텍스쳐 맵으로 만들어져서 fragment shader로 넘겨집니다. 이 텍스쳐 맵을 쉐도우맵 텍스쳐라고 합니다. 실제 렌더링 과정에서 illumi..

Part 5에서는 spotlight 이라는 고급 광원을 사용하고, 그림자 매핑(shadow mapping)을 사용하여 점 광원의 그림자를 부드럽게 만들어볼 것입니다. 이 고급 광원은 우리의 렌더링을 아주 실사같이 만들어줄 것입니다. 이번 과제를 마친다면, media/spheres/spheres_shadow.json 씬을 렌더링했을 때 다음 이미지같이 보일 것입니다.이 씬은 세 개의 spotlights로 이루어져있습니다.왼쪽 앞 방향으로부터 빨간 spotlight 빛이 들어오고, 앞 방향에서 하얀색 빛이, 그리고 우측 앞 방향으로부터 청록색 빛이 들어옵니다.아래 이미지는 위에서 씬을 내려다봤을 때 모습입니다. 수정해야 할 부분이 과제에서 처음으로 해야할 부분은 spotlights 렌더링을 위해 fragme..

Part 4 : 환경광 추가하기 지금까지 만든 셰이더는 간단한 point and directional light source에 대해서만 적용했습니다. (shader.frag 에서는 light source들에 대해서 loop를 돌며 값은 누적하는 방식으로 계산되어 있다는 것에 주목하세요) 이번 part에서는 좀 더 복잡한 광원을 구현해봅시다. 이번 광원은 "image based environment light (이미지 기반 환경광)" 라고 불리는데, 씬에서 무한히 먼 광원으로부터 오는 것을 표현하며 모든 방향에서 빛이 들어옵니다. 씬이 무한한 크기의 구로 둘러싸여있다고 생각하면 될 것 같습니다. 기반 이미지 텍스쳐의 (x, y) 값은 앞서 말씀드린 무한한 구의 좌표값으로 변환됩니다. 결과 이미지 이번 pa..

Part 3: Normal mappingPart2에서 만든 이미지입니다.바닥평면과 구 물체에는 표면에 텍스쳐 맵을 추가해 디테일을 넣었음에도 굉장히 flat 해보입니다. Part3에서는 normal mapping을 구현하여 표면이 디테일을 가진 것 처럼 보이도록 할 것입니다.normal mapping의 아이디어는 'normal map'이라는 텍스쳐맵에 벡터 값을 저장해놓고 해당 벡터값을 표면의 normal vector로 사용하는 것입니다. Normal Vector를 표면의 점마다 정의한다면, 빛의 반사를 풍부하게 표면해 표면 질감이 더 도드라집니다.우측 그림이 normal map의 예시입니다.normal map의 RGB 값은 각각 (x,y,z) 벡터를 나타내고 이 벡터는 물체의 표면에서의 normal v..

Part 2: 퐁 반사모델 구현하기 (Implementing Phong Reflectance) 이 과제의 후반부에서는 Material을 정의하는데에 있어서 두 가지 중요한 것을 구현할텐데요, 첫 번째로는 빛나는 표면을 렌더링하는 phone 반사 모델을 간단한 BRDF로 구현해볼 것입니다. 수정해야하는 파일은 src/shader/shader.frag 입니다. 현재 Scene은 바닥 평면과 두 개의 Sphere가 텍스쳐가 입혀진 상태인데, 렌더링 과정에서 lighting 구현이 없습니다. lighting 구현을 위해서는 src/shader/shader.frag 파일의 Phong_BRDF()을 구현하면 됩니다. ambient term은 광원 source들과 무관하다는 것에 주의하시고, 표면 반사 결과와 합쳐져..