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로 렌더링한 모습입니다.

증강현실이나 가상현실이나 둘다 그래픽을 띄워주는게 핵심이라서 그래픽스 처리가 기본이 되겠습니다. 저는 이번 첫 증강현실 예제에서 Argon.js를 기반으로 만들어봤는데요, Argon.js는 웹브라우저(Argon.js에서만든)를 기반으로 동작하는데 개발자는 웹페이지만 만들면 핸드폰에서 Argon브라우저로 제가만든 웹페이지로 접속하여 바로 띄어볼수있습니다. 단 이떄 서버를 열어서 웹페이지에 접속할수있게 해야됩니다그럼 이정도면 대충 기본 흐름은 파악했고... 유저에게 그래픽만 띄워주면 되는데 웹에서는 여러가지 방법이 있습니다. 첫번째는 CSS로도 할 수 있습니다. 단, 이때는 THREE.js같은 3D 라이브러리가 필요합니다두번째는 HTML5 Canvas로도 그래픽을 띄울수있는데 단, 2D이기때문에 현실감은 없..

노멀벡터 계산할때(일반화해서 반복문으로 뽑아낼때 단, 직접계산하는건 이 주제와 상관없습니다), 중요하게봐야할 부분이 2가지 있습니다.첫번째는 벡터의 외적은 교환법칙이 성립하지 않습니다.ex) AXB != BXA [오른손좌표계 기준(OpenGL, WebGL)]두번째는 밑의 그림과같이 Counter Colock Wise(반시계방향)방향을 기준으로 노멀벡터(외적된것)의 계산결과값입니다. 따라서, 노멀벡터를 뽑아낼떄 두벡터간의 연산순서를 잘 봐야하며 버퍼에 그리는 인덱스 순서는 CCW방향이 되야 합니다.

위 공식은 n차원 베지어곡선을 일반화시킨거고 cubic bezier곡선(조절점2개, 총점의개수는4개)의 공식은 다음과 같습니다 B(t) = P0 * ( 1 - t )3 + P1 * 3 * t * ( 1 - t )2 + P2 * 3 * t2 * ( 1 - t ) + P3 * t3 (참고) Factorial = (n,i) = nCr = nPr/r!

2D 메쉬를 어떻게 찾아서찾아서 배우긴했는데 물리쪽이안되다보니까 제 마음대로 제어하는건 불가능하고 단순히 제자리에서 망토효과는 내봤습니다.멋잇는걸 하려면 물리가 필수인데 하 수알못이라 참 힘듭니다..ㅜㅜ

let ctx = document.querySelector('canvas').getContext('2d'); let grd = ctx.createRadialGradient(500,500,10,500,500,30); grd.addColorStop(0,'#ffffcc');grd.addColorStop(0.1,'#ffffb3');grd.addColorStop(0.2,'#ffff99');grd.addColorStop(0.3,'#ffff66'); grd.addColorStop(1,'black'); ctx.fillStyle = grd;ctx.fillRect(100,100,1000,700); /*이 예제는 동그라미를 마치 형광등으로 비추고있는듯한 효과를 보여줍니다.이러한 효과를 내려면 대표적으로 createRadia..

말그대로 HTML5 캔버스 성능최적화 이슈에대해 쓴 글 입니다. 캔버스에서 그리기를 확정짓는 함수(stroke())를 특정 임의의 시간마다 호출하다가 Canvas자체 내부적인 최적화 시스템에 부딪히게되어 뜻대로 코드가 동작하지 않았습니다. [아에 통째로 예제를 하나 만들어서 설명] Main Issue : HTML5 Canvas 자체 내부에서 최적화시스템을 갖고있기 때문에 stroke()함수를 특정시간마다 n번 호출하면 바로바로 그려주지않고 맨마지막에 한꺼번에 그리는 문제. part 1. setTimeout 함수는 시간지연함수라고 보기엔 참 애매한포지션part 1-1. 직접 시간지연함수를 만들어보자part 2. 이 예제의 대한 기본적인 수학개념 part 3. HTML5 캔버스자체 내부적인 최적화시스템에 부..