[공부] OpenGL vs WebGL vs Three.js

3D 그래픽 기술은 현대 웹과 애플리케이션 개발에서 필수적인 요소가 되었다. 특히 나는 블렌더, After Effects와 같이 그래픽 관련으로도 꿈을 가졌고, 배운적이 있어서 3D 그래픽 기술에 더욱 관심이 있다. 그 중에서도 OpenGL, WebGL, Three.js는 각각 다른 추상화 수준과 사용 환경을 가진 대표적인 그래픽 기술이다. 이 글에서는 이 세 기술의 관계와 차이점을 상세히 알아보자.

계층 구조로 이해하기

그래픽 렌더링 기술은 마치 피라미드와 같은 계층 구조를 가지고 있다.

OpenGL > WebGL > Three.js
(저수준)          (고수준)

각 단계가 올라갈수록 개발자 친화적이고 추상화된 API를 제공한다.

OpenGL (Open Graphics Library)

OpenGL 로고

정의: 1992년 실리콘 그래픽스사에서 제작한 2D/3D 그래픽 처리 라이브러리
기반 언어: C언어
특징:
- GPU를 이용한 하드웨어 가속화를 통해 렌더링 수행
- 저수준 그래픽 API로 직접적인 하드웨어 제어 가능
- 데스크톱 애플리케이션, 게임 개발, 가상현실 등에 주로 사용

WebGL (Web Graphics Library)

WebGL 로고

정의: OpenGL ES 2.0에서 파생된 웹 환경의 그래픽 라이브러리
기반 언어: JavaScript
특징:
- HTML Canvas 요소에 2D/3D 그래픽을 렌더링
- 웹 브라우저에서 GPU 가속을 활용한 그래픽 처리 가능
- OpenGL의 웹 버전이라고 생각할 수 있음
- 모든 OpenGL 기능을 지원하지는 않음 (geometry shaders, tessellation shaders 등 제한)

Three.js

Three.js 로고

정의: WebGL을 더 쉽게 사용할 수 있도록 만든 JavaScript 라이브러리
- 특징:
  - WebGL의 복잡한 API를 추상화하여 사용하기 쉽게 만듦
  - 영화 제작과 유사한 개념(씬, 카메라, 오브젝트)으로 3D 그래픽을 구성
  - 적은 코드로 복잡한 3D 시각화 구현 가능
  - 활성화된 커뮤니티와 풍부한 레퍼런스

코드 비교

각 기술로 간단한 3D 큐브를 렌더링하는 경우:

OpenGL(C++): 수백 줄의 코드 필요

// 수백 줄의 복잡한 C++ 코드 필요

WebGL(순수 JavaScript): 100줄 이상의 코드 필요

// 100줄 이상의 JavaScript 코드와 GLSL 셰이더 코드 필요

Three.js: 약 20줄의 코드로 구현 가능

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

결론

결론적으로, 각 기술은 다른 목적과 사용 사례에 최적화되어 있다. OpenGL은 최대 성능과 제어를 원할 때, WebGL은 웹에서 직접적인 그래픽 제어가 필요할 때, Three.js는 웹에서 빠르고 효율적으로 3D 그래픽을 구현하고 싶을 때 사용하는 것이 적합하다.