Sphere 구성을 위한 확인사항 Canvas 를 활용하여 원을 그리는 방법을 이전 포스트 글에서 구성해 보았습니다. sin, cos 함수를 사용하면, 그리 어렵지 않게 원을 구성할 수 있었습니다. 구는 입체이기 때문에 x,y 좌표외에 z 좌표가 필요합니다. 반지름이 1인 구를 기준으로 생각해 보면 x,y 가 0,0 일때 z 좌표는 1 인 경우 WebGL 에서는 앞으로 튀어나오는 방향이고, -1 인 경우 뒤에 있는 구 지점으로 판단할 수 있습니다. 불 투명일 경우 뒤에 있는 영역은 그려지지 않을 겁니다.
삼각함수 응용 앞서 정리한 내용을 바탕으로 물체의 회전에 적용되는 행렬을 정리해 보고자 합니다. 먼저 몇가지 사항을 확인해 보겠습니다. 원점 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 에 비해 훨씬 수월 합니다.