목록분류 전체보기 (63)
Front-end_dev
제가 읽은 기술포스팅에서 탑3안에 드는 최고의 정보글입니다.알고리즘을 완벽하게 이해하진 못한건 함정;;베지어커브를 이런식으로 접근해서 subdivide하고, 베지어 곡선을 0도에서 360도 회전해서 shape를 드로잉하는건데 기반이되는 패스는 svg이고, 본예제에서는 svg에대해 완벽한 파싱은 아니지만 완벽한 파싱만된다면(어떻게 구현해야할지모르겠다는건 함정 하나더추가;;) 원하는 모든 shape에 대해서 subdivide 할 수 있고, distance 조절로 기하정보추가뿐만아니라 원래 shape의 원래 형상도 변경가능. 결론은 기존의 알려진 subdivision방식과는 전혀 색다른 방법입니다. https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-..
Subdivision에는 종류가 여러가지가 존재합니다 Linear subdivision , loop subdivision , butterfly subdivision, doo-sabin subdivision, catmull-rom subdivision. 크게 이렇게 5가지가 있고, 이 글의 주제는 Linear subdivision입니다. 다른 서브디비젼들의 공식은 검색해서 쉽게 찾아 볼 수 있습니다 정점을 쪼갠후에 버텍스배열,인덱스배열,노멀벡터배열,텍스쳐좌표배열을 어떻게 다시 재구성해줄것인가가 이슈입니다. 구현해보기위한 사전 아이디어1. (너무 어렵게생각) 1. 어떤 정점에서 출발해서, 거리가 가까운 순으로 모든 정점들을 배열로 구성. 2. 3개의 정점이 삼각형(면)을 만드는지 검사 3. 삼각형이 만들어질..
https://github.com/hyunsooda/obj2json wavefront-obj-parser라는 파서를 확장했는데 기존의 이 파서는 json파일을 부품(part)별로 나눠주지않고 그냥 한파일에 다 파싱되고, 조명정보도 기록되지않아서 부품별로 json파일을 따로 파싱해주고 그안에다가 mtl 파일을 따로 또 파싱해서 조명정보까지 넣어봤습니다.node가 os에 깔려있다면 다음명령어로 파싱해볼수있습니다.obj2json.js your_obj_file your_mtl_file obj파일을 mtl파일과 함께 파싱하고 webgl로 렌더링한 모습입니다.
1. 첫 발견 : 웹 가상현실 웹서핑을하다가 우연히 웹 가상현실 데모를 봤는데 매우 흥미로웠습니다.그런데 신기한건, 지금 VR 웹애플리케이션이 쏟아지고 있다는 점입니다. 힘들고 복잡하게 알아낼필요도없이 그냥 간단히 webvr demo 라고 검색만해도 굉장히 많이 나옵니다. 그리고 모질라나 구글에서 vr gallery(데모전시하는곳)를 운영하고있어서 퀄리티높은 데모를 보실 수 있습니다. 그럼이제 데모를 찾았으니 기기를 껴서 체험해볼 수 있는데, 가장 저렴한 구글 카드보드로 체험해볼 수 있습니다. 제가 사서 껴봣는데 되게 별로입니다 솔직히;; 초점도 잘안맞고 잘안보이는것도잇고;; 여튼 그냥 360도 회전하는거랑 간단하게 VR이 뭔지만 알 수 있을 정도 입니다. 2. 오픈소스 : 한번 훑어보려했더니JS파일만 ..
일단 룰이 빡쎄다!!... 레드블랙트리는 BST에서 균형이 깨지는 경우에 균형을 다시잡아주는 트리인데 룰이 빡쎄다... '문제점을 파악하고 어떠한 룰을 만들고 그 룰에대해 위반되는사항들에대해 조치방법을 만들어 놓은 것' 을 '레드블랙트리'라고 생각한다. 우선 먼저 개념을 익히고, 샘플코드를 살펴보고, 직접 코드작성에 들어갔을떄 NIL노드를 무시하고 그냥 NULL을 쓰다가 호되게 털렸다.처음에는 위의 그림이 크게 와닿지 않았다. 하지만 실제 코드작성에들어가서 NIL노드 대신 NULL을 쓰다가 한번 털리고 다시 이그림을 보니 아!!....... 우선 NIL노드가 존재하는 이유 중 가장 큰 이유는 '형제노드'를 찾기 위함이다. 먼저 노드삭제과정에서 삭제된 노드가 블랙노드일경우 fixup(균형을맞춰주는 함수)을..
증강현실이나 가상현실이나 둘다 그래픽을 띄워주는게 핵심이라서 그래픽스 처리가 기본이 되겠습니다. 저는 이번 첫 증강현실 예제에서 Argon.js를 기반으로 만들어봤는데요, Argon.js는 웹브라우저(Argon.js에서만든)를 기반으로 동작하는데 개발자는 웹페이지만 만들면 핸드폰에서 Argon브라우저로 제가만든 웹페이지로 접속하여 바로 띄어볼수있습니다. 단 이떄 서버를 열어서 웹페이지에 접속할수있게 해야됩니다그럼 이정도면 대충 기본 흐름은 파악했고... 유저에게 그래픽만 띄워주면 되는데 웹에서는 여러가지 방법이 있습니다. 첫번째는 CSS로도 할 수 있습니다. 단, 이때는 THREE.js같은 3D 라이브러리가 필요합니다두번째는 HTML5 Canvas로도 그래픽을 띄울수있는데 단, 2D이기때문에 현실감은 없..
어떤 임의의 정점에서 출발하여 특정정점까지(정확히 말하자면 1 : N) 의 최단경로를 구하는 다익스트라 알고리즘에 대해서 포스팅 해보겠습니다. 다익스트라 알고리즘을 구현해 본 후에 제가 느낀 이슈 3가지에 대해서 살펴보겠습니다. 1. 그리디 알고리즘2. 우선순위 큐를 써야하는 이유(꼭 써야하는건 아닙니다)3. 메모이제이션 1. 그리디 알고리즘다익스트라 알고리즘의 의사코드를 보면 '그리디하다' 라는것을 느낄 수 있습니다. 그리고 실제 구현할때 그리디하게(매순간 가장짧은경로를 취하는)하지 않으면 최단경로를 구하기가 매우 어렵습니다. 2. 우선순위 큐를 써야하는 이유많은 정보글에서 우선순위큐를 쓰면 좋다고 이야기들 합니다. 구현 중간에 '도대채 왜 써야하지?' 라는 의문이 들어서 우선순위 큐가 아닌 스택으로 ..
프림 알고리즘의 핵심은 '어떻게 하면 비용이작은 간선들을 우선해서 찾아갈 것인가?' 가 입니다.물론 방법은 여러가지가 될 수 있습니다만, '우선순위 큐'를 쓰면 그 고민들을 한방에 날릴 수 있습니다.프림 알고리즘에 정말x5 아주 딱 어울리는 알고리즘 인 것 같습니다.하지만 우선순위 큐로 작은 가중치들의 간선을 먼저 탐색 할 수 있다고해서 알고리즘이 여기서 끝나지는 않습니다. 한가지 더 고려해야 할 점 이 있습니다.싸이클을 감지 할 수 있어야 합니다.(크루스칼 알고리즘은 union+find 알고리즘이 대표적입니다(이전 포스트 참고))싸이클 감지에 대한 이슈를 찾아보려고 검색을 좀 했는데 잘 안나와서 직접 구현 했습니다. 원리는 다음과 같습니다.0. 임의의 정점에서 시작하며, BFS와 비슷한 방식으로 정점을..
위의 3개의 X노드는 서로 다른 노드이다. (메모리가 각각 할당 되어있음) 또한, 2번쨰그림에서 왼편의 X는 노드가 아니라 인접리스트 or 인접행렬의 인덱스이다.예를들면, 인접리스트 or 인접행렬의 A인덱스에서 X를 탐색했을때의 경우는 A인덱스에서 X노드를 탐색하는 것이다. 즉, X인덱스로 가는게 아니다.따라서 A인덱스에서의 탐색은 여기서 종료되는것이다. 한가지더 살펴보면 (BFS기반으로설명) X인덱스에서 A탐색후 G탐색후 H탐색의 경우에, H노드까지만 탐색이 이루어지고, H인덱스로 가는것이 아니다. 이것이 'C'언어가 아닌 다른 언어로 구현 할 때 실수 할 수 있는 부분이다.정리하자면 인접리스트 or 인접행렬의 각 인덱스의 연결리스트의 스코프(범위)는 한 칸 씩으로 제한된다.왜 이런식으로 메모리를 쓸데..
크루스칼 알고리즘 기반의 MST 구현에 있어서 2가지 방법이 존재한다. 1. 선택 2. 삭제 우선 가장 먼저 해야할 것은 가중치를 정렬하는건데, '선택'을 하냐 '삭제'를 하냐에 따라서 정렬 방법이 틀리며, 구현방법 또한 틀리다. [선택을 했을 경우 방법]1. 가중치는 오름차순 정렬한다.2. find + union 알고리즘을 사용한다. (cycle을 감지하기 위해) find + union 알고리즘을 처음 접했을 때, 도대체 이게뭔가? 단순히 배열안에 정수값을 넣는건데, 도대채 어떻게 이걸 트리라고 볼수있는가? 처음에 이론을 접했을 떄는 50%정도만 이해됬다. 그리고 디버깅을 해보고 완전히 이해했다. 만약 이론으로 이해가 안되면 디버깅을 해보자. 그럼 100% 이해 할 수 있다. 가장 먼저 알고 들어가야할..