이것저것/WebGL

3D 변환

3D Transform 앞선 글에서는 2차원, 그러니 좌표평면에서 물체에 대해 tranlation, scaling, rotation을 하는 방법을 알아봤어요. 이번에는 이 내용들을 3차원에서 사용할 수 있도록 확장할 거예요. 전반적인 내용은 달라지지 않지만 조금 더 복잡해지는 내용들이 있을 거예요! 2차원에서 시작하기 2차원에서 한 점의 좌표는 2개의 수로 표현되며, 이것을 행렬을 이용해서 표현할 때 1행 3열 행렬을 사용했어요. 그럼 공간에서는 3개의 수가 하나의 점을 지정하므로 1행 4열 행렬을 이용하면 되겠지요. $\begin{pmatrix}x&y&z&1\end{pmatrix}$ 4번째 열의 값은 변환 행렬을 곱할 때 효과가 제대로 적용되기 위한 수로 고정하고 나머지 $x$, $y$, $z$에 점의..

2D 변환 - WebGL

2D Transform 앞선 글에서 WebGL을 사용하여 도형을 그리는 방법을 알아봤어요. 이제 이 도형을 필요에 따라 변형하는 방법을 알아볼 거예요. 변형(Transform)은 다음과 같이 3가지가 있어요. Translation (평행이동) Scaling (크기 조정) Rotation (회전) 이번에는 코드를 먼저 전부 올릴게요. 더보기 WebGL 주요 수정사항은 다음과 같아요. 도형을 삼각형에서 F로 바꾸었어요. 삼각형은 간단한 도형이기 때문에 첫 번째 예제로는 적합하지만 회전했을 때 구분하기 힘들기 때문에 어느 방향에서 봐도 모양이 다른 F를 사용할 거예요. position 배열을 바꿈으로써 수정했지요. 도형의 색을 검은색으로 바꾸었어요. 가시성을 위해서이지요. 평면을 입력시에 0,0 ~ 800,6..

WebGL의 기본

WebGL WebGL 하면 보통 멋있는 3D 엔진, 뭔가 멋진 결과물을 만들 수 있는 마법의 프로그램이라 생각하는 경우가 있어요. 그럴 법도 하죠. 웹브라우저에서 3D로 뭔가를 하면 WebGL로 구현되어 있는 경우가 대부분이니까요. 우선 WebGL로 만들어진 몇 가지 프로그램을 소개할게요. 멋있죠. 하지만 사실 WebGL은 웹에서 3D 작업을 마법처럼 처리해주는 도구는 아니에요. 대신 래스터라이제이션(Rasterization) 도구에 가깝지요. WebGL에 도형(Geometry)을 입력으로 넣어주면 그것을 평면에 그린 이미지를 그리는 게 WebGL의 역할이에요. 그래서 앞으로 WebGL을 하면서 다룰 내용은 아마 여러분이 생각하는 화려한 무언가와는 좀 거리가 있을 수도 있어요. Vertex shader,..