WebGL 에서 Camera 란 ? 우리가 사진기( 아마도 핸드폰이겠지요 ^^ )로 물체를 찍는 다고 가정해 보겠습니다. 핸드폰을 들고, 물체를 보면, 핸드폰 화면에는 찍을 대상이 출력되고 있을 겁니다. 이때 카메라 위치가 눈에 해당하고, 찍을 물체가 대상이되고, 핸드폰을 위로 혹은 약간 기울여서 보게 되는게 사진에 찍힐 모습이 될 것 같습니다. 이를 단순화 하면, eye (사진기위치), at( 사진찍을 물체), up ( 핸드폰을 어떻게 기울였는지 - 대부분 위로 ) 에 따라 사진속의 내용이 어떻게 표현될지가 결정 될 것 같습니다.
Canvas Game Event 구성 도형 구성과 배치를 위한 UI 가 구성되었으면, 이제 사용자가 선택후 Drag & Drop 으로 위치를 맞추고, 그 결과를 담아 내기 위한 Event 처리가 필요합니다. 요즘은 PC 가 아닌, 핸드폰에서도 Web 접근이 가능하기 때문에 Phone Device 를 위한 Event 처리를 위해서는 touchstart 등의 이벤트도 정리하여야 하지만, 이 글에서는 다루지 않겠습니다. 다음주소 에서 확인해 보실 수 있습니다. Initialize 시점에 Event 구성 초기화 과정에 Canvas 에 Mouse Event 를 할당 하는 과정 입니다.
Canvas 만들고자 하는 Game 은? HTML5 가 도입되면서, 정확히는 canvas 가 기술 표준으로 정해지면서, Web 에서 구성할 수 있는 Application 같은 프로그램을 만들 가능성이 많이 높아진것 같습니다. 하지만, 표(Table 같은 Grid) 와 이미지 정렬, Text 정보 등을 기반으로 하는 업무 시스템에서는 Canvas 와 같은 기술은 그렇게 많이 활용되지는 못하고 있는것 같습니다. 그나마, Chart 등에서 SVG 에서 Canvas 로 점차 기술적인 전환이 이뤄지고 있지만, 아직도 많은 시스템에서는 활용하고 있지 않은것도 사실입니다.
Canvas 아날로그 시계 Canvas 를 활용하여 구성할 수 있는 다양한 모듈이 있습니다. Canvas 는 Web 에서 Graphics 자원을 어느정도 사용할 수 있다는 장점이 있습니다. 일반적이진 않지만, Web 화면을 Application 처럼 구성할 수 있다는 장점 때문에 개인적으로 선호하는 Web 모듈 이기도 합니다. 시계는 Canvas 를 어떻게 활용할 수 있는지 확인해 볼 수 있는 좋은 소품이란 생각이 들어 간단히 구성해 보았습니다. 초침의 삼각형, 원에서 표현할 위치 등을 위해서는, 간단한 삼각함수를 활용하여야 하기 때문에 정리하기도 좋을것 같아서 선택해 보았습니다.
삼각함수 응용 앞서 정리한 내용을 바탕으로 물체의 회전에 적용되는 행렬을 정리해 보고자 합니다. 먼저 몇가지 사항을 확인해 보겠습니다. 원점 0,0 에서 반지름 R(구체적으로 1이라 하겠습니다.)로 시작하는 각을(theta) 0 ~ 360 도로 증가하면서 좌표 ( cos(theta), sin(theta) ) 를 연결하면 원을 그릴 수 있습니다. ( 그림 - 소스는 하단에 설명 ) 두점 사이의 거리 그림에서 O 와 P 의 거리를 (선분 OP) 는 반지름이 1 이라면, 알파(alpha) 가 45도 라고 가정할 때 1 * Math.
Html5 Canvas Web 에서 일반적인 언어의 Graphics 를 사용하는 것과 유사한 작업을 가능하게 해주는 모듈이 추가된지도 꽤 오랜 시간이 흘렀습니다. 돌이켜 보면 SVG 라는 도형을 그리는 표준이 d3.js 라는 뛰어난 라이브러리로, Chart 등에서 맹위를 떨치던 시간이 그리 오래 전이 아닌데 벌써, 트랜드의 한축이 넘어가는 느낌이 듭니다. 현재 많은 차트 라이브러리에서 SVG 에서 점차 CANVAS 로 옮겨가는 추세 입니다. svg는 web 에서 느린 자원이 아닙니다. 게다가 각 도형별, shape 별 event 처리가 canvas 에 비해 훨씬 수월 합니다.
프로그램 Rendeing 과정 앞서 WebGL 사용 방법에 대해 간단히 정리해 보았습니다. 다시 한번 정리하면 canvas 객체를 구성합니다. GL 객체를 가져옵니다. ( Canvas 를 통해 webgl2 를 가져옵니다. ) GLSL Shader 소스(문자열) 을 Vertex Shader, Fragment Shader 를 구성합니다. Shader Program 을 각각 만들어 두개의 쌍을 사용할 GL Program 을 만들고 Compile 합니다. 일반적으로 프로그램 소스를 구성해서 Compile 하는 것과 유사한 흐름 입니다. 당연히 프로그램을 구성할 때 사용한 소스에서 정의한 input 과 output 규칙은 따라야 합니다.
처음 시작할 때 주의할 내용 WebGL을 처음 구성하려 할 때 가장 먼저 부딛히는 부분이 저 같은 경우, 익숙하지 않은 용어와 수식이 난무 하는 설명 이었습니다. 이미 수학적인 기초가 튼튼하게 다져진 분들은 상관이 없겠지만, 저처럼 익숙하지 않은 용어에, 덧붙인 수식 기호 등은 프로그램밍에 대한 접근을 막는 부분 이었습니다. 프로그램을 구현할 때 필요한 부분은 해당 수식에 대한 증명이 아니라, 원리에 대한 기본적인 이해와, 그 이해를 바탕으로 공식화된 수식을 활용할 수 있다면, 프로그램을 구성하는데 문제는 없어 보입니다.
프로그램을 위한 준비 제한사항 현재 WebGL2 는 IE를 제외한 대부분의 Browser 에서 사용가능합니다. Web 에서 3D를 구현하는 방법도 OpenGL 기반의 WebGL 에서, 더 다양한 지원이 가능한 WebGPU 등의 표준화가 진행중입니다. 현재 사용중인 Web 에서 3D를 구성하는 방법에도 변화가 있을 수 있는 상황입니다. 언제나 그렇듯 변화가 많을 경우, API 하나 하나 공부하는 것은 그리 효율적인지 않은 방법 같습니다. 동작의 기본 원리를 이해해 두면, 향후 어떤 변화가 나타나도 적응하는데 유리할 것 같습니다. WebGL 관련 코드는 WebGL 2.
WebGL 에서 행렬이란 ? $$ \begin{bmatrix}1&2&3\\4&5&6\\7&8&9 \end{bmatrix} \begin{bmatrix}1\\4\\7\\ \end{bmatrix} \begin{bmatrix}1&2&3 \end{bmatrix} $$ 위 표에서 전체 행렬이 1 ~ 9 까지의 내용을 담은 3 x 3 행렬 이라면, 1,4,7 은 열( Column ) 이고 1,2,3 은 행(Row) 라고 불립니다. 위 표의 행렬은 행 3개와 열 3개로 이뤄진 3 x 3 행렬인 셈입니다. WebGL(3D 프로그램) 에서 행렬이 왜 사용되는 걸까요? 어떤 물체가 100개의 꼭지점을 갇고, 그 꼭지점을 연결한 위치 정보를 지니고 있다고 가정하겠습니다.