WebGL

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,..