Front-end_dev

Linear subdivision 본문

ES6/Computer Graphics

Linear subdivision

Eat2go 2018. 2. 3. 02:45

Subdivision에는 종류가 여러가지가 존재합니다


Linear subdivision , loop subdivision , butterfly subdivision, doo-sabin subdivision, catmull-rom subdivision.


크게 이렇게 5가지가 있고, 이 글의 주제는 Linear subdivision입니다.

다른 서브디비젼들의 공식은 검색해서 쉽게 찾아 볼 수 있습니다



정점을 쪼갠후에 버텍스배열,인덱스배열,노멀벡터배열,텍스쳐좌표배열을 어떻게 다시 재구성해줄것인가가 이슈입니다.


구현해보기위한 사전 아이디어1. (너무 어렵게생각)



1. 어떤 정점에서 출발해서, 거리가 가까운 순으로 모든 정점들을 배열로 구성.

2. 3개의 정점이 삼각형(면)을 만드는지 검사

3. 삼각형이 만들어질때마다 가장 면적이 작은것이 새로 추출될 삼각형(인덱스들)이며, 중복되며안된다.


2번 까지는 쉬운데 3번은 코드레벨에서의 구현이 살짝 까다로운것은 둘 쨰치고 동작할지 안할지 100%확신이 안섰습니다.  그래서 다른 솔루션을 고민해봤습니다.



구현해보기위한 사전 아이디어2. (이거다!)



어차피 Linear subdivision(삼각형에서 세 정점에서 세 선분에서의 중점들)이기때문에 버텍스를 쪼개기위한 경우의 수를 분류(classfication) 해봤습니다.

역시 케이스수가 적어서 규칙(rule)을 찾아내서 구현했습니다.


코드가 길지않으므로 그냥 붙여넣어보겠습니다. 그리고 opengl이나 webgl에서 프리미티브를 LINES로 해서 실제 선들을 보고싶으면 LINES 프리미티브 동작방식에 맞게 인덱스를 더 잘개쪼개주는 작업이 필요하겠습니다(이작업은 밑의 코드에서 포함시키지 않았습니다).





실행결과



마지막사진에서의 기하정보







Linear subdivision은 끝낫고 다른것도 한번 살펴보겠습니다.





전부다 서브디바이드를 할때마다 기존의 모형이 바뀌고잇는 공통점이 있습니다. 이것을 이용해서 여러가지 서브디비젼방식을 혼합해서 사용합니다.

예를들면 linear1번 -> doo-sabin1번 -> loop1번 이런식으로.


캣멀롬 서브디비젼은 여기를 참고해보시면 될 것 같습니다. https://github.com/Erkaman/gl-catmull-clark


테셀레이션이란것도있는데  테셀레이션과 서브디비젼은 같은말인것같습니다. 결국엔 둘다 버텍스를 쪼개는거니까요.

테셀레이션을 더욱 완벽하게 렌더링하려면 디스플레이먼트맵(displacement map)과의 결합을 생각해볼수 있습니다.

디스플레이스먼트맵을 얘기하니까 또 생각나는게, bump mapping이 있습니다. 범프매핑과 노멀맵핑은 서로 같습니다.


범프맵핑은 테셀레이션(서브디비젼)과는 아주 정반대인데요. 

테셀레이션은 실제 기하정보들을 쪼개서 정교한 렌더를 하는것이고, 반면에 범프맵핑은 실제기하정보는 바꾸지 않은채 정교한 렌더를 하는것입니다.

일단 설명하기전 결론부터 말하면 범프맵핑과같은 다른정보가담긴 텍스쳐맵핑을 통한 기법은 실제기하정보가 바뀐게아니기떄문에 모든각도에서 돌려볼떄 그 단점이 선명하게 드러납니다. 하지만 실제기하정보를 추가하지않기때문에 성능상에서는 이점을 볼 수 있습니다.

실제 노멀맵핑(범프맵핑)은 텍스쳐에 인코딩된 정보들을 읽어와서 기존의 프레그먼트와(보통은 디퓨즈맵을씁니다)결합해서 사용합니다.

아 한가지 빼먹엇네요 범프맵핑에서의 가장 핵심은 노멀벡터의 조작입니다. 기존의 렌더링되는 오브젝트의 노멀벡터를 쓰지않고 텍스쳐에 인코딩된 노멀벡터정보를 사용합니다. 그래서 노멀벡터가 다양하게 구성이된다면 조명받을떄 오브젝트가 기하정보가많은것처럼 (움푹파인부분이보이거나 반대로 볼록하게보이는것처럼) 보이게됩니다.


사실 노멀맵핑하나만가지고서는 사실적인 렌더가 조금 그렇습니다. 오차가 존재하기때문입니다. 이 오차를 줄이는데 여러가지 기법이 또 있습니다.

steep mapping. parallax mapping, parallax occlusion mapping, parallax relief mapping 이 있는데, 제가봣을떈 오차를 줄이기위해 선형보간을 취하는 relief mapping이 가장 나은 솔루션인것 같습니다. 




간단하게 큐브에다가 랜더해봣을때 결과화면 (diffuse map, normal map, height map 3개를 썻습니다. height map은 relief mapping에서만 추가적용)


아무것도 적용하지않았을때


normal mapping


parallax relief mapping





그리고 실제로 더 사실적인 이미지를 렌더하기위해서는 normal map뿐만아니라 height map(depth map)도 요구가됩니다(parallax mapping에서).


맵핑에대한 자세한 설명은 여기가 최고입니다. 자세한내용은 여기를 참고하시는게 좋습니다

http://sunandblackcat.com/tipFullView.php?topicid=28









'ES6 > Computer Graphics' 카테고리의 다른 글

베지어커브에 대한 다른 해석(접근법).  (0) 2018.02.05
Blender objfile parser  (0) 2018.01.29
첫 증강현실 예제  (0) 2018.01.07
노멀벡터 계산할때  (0) 2017.12.08
webgl에서 bezier 곡선그리기  (0) 2017.10.31