HTML5 캔버스로 3D 구 그리기
HTML5의 <canvas> 요소와 자바스크립트를 활용하면 별도의 플러그인 없이도 브라우저에서 직접 3D 구(구체)를 렌더링할 수 있습니다. 핵심 원리는 삼각함수(Math.cos, Math.sin)를 이용해 구를 이루는 정점(vertex) 좌표를 계산하는 것입니다.
기본 구현 코드
아래 함수를 코드에 적용하면 지정한 반지름(r)을 가진 3D 구의 정점 데이터를 생성할 수 있습니다.
function display(r) {
this.point = new Array();
this.color = "blue";
this.r = (typeof(r) == "undefined") ? 20.0 : r;
this.r = (typeof(r) != "number") ? 20.0 : r;
this.vertexes = 0;
for(alpha = 0; alpha <= 6.28; alpha += 0.17) {
p = this.point[this.vertexes] = new Point3D();
p.x = Math.cos(alpha) * this.r;
p.y = 0;
p.z = Math.sin(alpha) * this.r;
this.vertexes++;
}
}코드 동작 원리
이 함수의 작동 방식을 단계별로 살펴보면 다음과 같습니다.
1. 기본값 처리: 매개변수 r이 전달되지 않았거나 숫자가 아닌 경우, 반지름의 기본값으로 20.0이 자동 적용됩니다.
2. 각도 반복 계산: alpha 값이 0부터 약 2π(6.28)까지 0.17씩 증가하며 반복됩니다. 이는 한 바퀴(360도)를 여러 개의 작은 각도로 나누어 계산하는 방식입니다.
3. 정점 좌표 생성: 각 각도마다 x = cos(alpha) × r, z = sin(alpha) × r로 좌표를 계산하고, y축은 0으로 고정합니다. 그 결과 XZ 평면상의 원을 따라 점들이 배치되어 구의 적도(equator)에 해당하는 하나의 링이 만들어집니다.
완전한 입체 구로 확장하기
위 코드만으로는 평면상의 원형 링 하나만 생성됩니다. 진정한 입체적인 구를 표현하려면 다음 방법을 추가로 활용할 수 있습니다.
- y축 회전 적용: 생성된 링을 y축을 중심으로 회전 변환하여 다양한 위도의 링을 쌓아 올립니다.
- 위도별 링 추가: y좌표 값을 단계적으로 변경하면서 여러 개의 원형 링을 겹쳐 구 형태를 완성합니다.
- Three.js 활용: WebGL 기반 라이브러리인 Three.js를 사용하면 조명, 질감, 회전 애니메이션까지 포함된 고품질 3D 구를 훨씬 간단하게 구현할 수 있습니다.
이처럼 HTML5 캔버스는 삼각함수와 기본적인 수학 지식만 있으면 3D 그래픽의 기초를 직접 구현해볼 수 있는 훌륭한 학습 도구입니다.