Three.js

Three.js에서 장면(Scene)은 렌더링할 모든 3D 객체, 광원, 효과를 담는 최상위 컨테이너이다. 모든 3D 그래픽스 프로젝트의 기초가 되며, 카메라(Camera)와 렌더러(Renderer)가 이 장면을 바라보고 화면에 그려내는 구조를 가진다. 장면 객체는 계층 구조를 지원하여 객체들을 그룹화하고 상대적인 위치, 회전, 크기 변환을 관리할 수 있게 한다.

장면은 단순히 객체를 보관하는 역할을 넘어, 배경색(Background Color) 설정, 안개(Fog) 효과 적용, 환경을 감싸는 스카이박스(Skybox)나 환경 맵(Environment Map)을 추가하는 등의 기능도 제공한다. 또한, 장면 그래프(Scene Graph)라는 트리 구조를 통해 복잡한 객체 간의 부모-자식 관계를 효율적으로 관리하여, 예를 들어 자동차의 바퀴가 차체를 따라 움직이도록 구현할 수 있다.

실제 사용에서는 먼저 THREE.Scene() 생성자로 장면 인스턴스를 만들고, 이후 생성된 메시(Mesh), 광원(Light), 카메라(Camera) 등을 scene.add() 메서드를 사용해 장면에 추가한다. 최종적으로는 WebGL 기반의 렌더러(Renderer)가 이 장면과 카메라의 시점을 결합하여 화면에 픽셀을 그리게 된다.

Three.js에서 카메라는 3차원 장면을 2차원 화면에 투영하는 역할을 한다. 사용자의 시점을 정의하며, 어떤 각도에서 어떤 범위의 장면이 렌더링될지 결정하는 핵심 객체이다. WebGL을 직접 다루는 것보다 훨씬 직관적으로 시점을 제어할 수 있게 해준다.

가장 일반적으로 사용되는 카메라는 원근 카메라이다. 이는 인간의 눈이 보는 것과 유사한 원근감을 제공하여, 가까운 물체는 크게, 먼 물체는 작게 보이게 한다. 원근 카메라를 설정할 때는 시야각, 종횡비, 근접 평면, 원거리 평면 등의 매개변수를 조정해야 한다. 반면, 직교 카메라는 모든 물체를 원근감 없이 동일한 크기로 렌더링하며, CAD 소프트웨어나 2.5D 게임 등 특정 용도에 적합하다.

카메라의 위치와 방향은 코드를 통해 자유롭게 변경할 수 있어, 애니메이션이나 사용자 인터랙션에 따라 시점을 이동시키는 것이 가능하다. 예를 들어, 게임에서 플레이어 캐릭터를 따라다니는 카메라나, 데이터 시각화에서 모델을 회전시켜 관찰하는 기능을 구현할 수 있다. 또한 그룹에 카메라를 추가하여 다른 객체에 부착하는 방식으로 복잡한 시점 제어도 할 수 있다.

렌더러는 Three.js의 핵심 구성 요소로, 장면과 카메라에 정의된 3D 데이터를 실제로 웹 브라우저 화면에 그리는 역할을 한다. 렌더러는 WebGL API를 기반으로 하여 HTML5의 <canvas> 요소 위에 3D 그래픽스를 출력하며, WebGL을 지원하지 않는 환경을 위한 대체 렌더러도 제공한다. 사용자는 WebGLRenderer를 가장 일반적으로 사용하여 하드웨어 가속을 활용한 고성능 렌더링을 수행한다.

렌더러를 생성할 때는 해상도, 앤티앨리어싱, 캔버스의 투명도, 색상 정확도 등 다양한 속성을 설정할 수 있다. 생성된 렌더러의 DOM 요소를 웹 페이지에 추가하면, renderer.render(scene, camera) 메서드를 호출하여 현재의 장면 그래프를 특정 카메라의 시점으로 한 프레임 렌더링할 수 있다. 실제 애플리케이션에서는 이 렌더링 호출을 애니메이션 루프 내에 배치하여 연속적인 움직임을 만들어낸다.

렌더러는 윈도우 리사이즈 이벤트에 대응하여 화면 크기에 맞게 출력 크기를 동적으로 조정할 수 있으며, 고해상도 디스플레이(레티나 디스플레이)를 위한 픽셀 비율 설정도 지원한다. 또한 VR 디스플레이를 위한 WebVR 또는 WebXR API 지원, 포스트 프로세싱 효과를 적용하기 위한 다중 렌더 타겟 관리 등 고급 그래픽스 기능의 기반이 된다.

Three.js에서 3차원 공간에 시각적으로 존재하는 객체를 생성하는 핵심 요소는 메시(Mesh)이다. 메시는 객체의 형태를 정의하는 지오메트리(Geometry, 또는 BufferGeometry)와 객체의 표면 색상, 질감, 반사율 등을 정의하는 재질(Material)이 결합된 것이다. 즉, 메시는 '무엇을' 그리고 '어떻게' 그릴지를 함께 결정하는 최종적인 렌더링 단위라고 볼 수 있다.

지오메트리는 객체의 정점(버텍스) 데이터, 즉 3차원 공간에서의 위치 좌표를 담당한다. 이 데이터에는 정점을 연결하여 면(폴리곤)을 구성하는 방법(인덱스), 법선 벡터, 텍스처 매핑 좌표(UV 매핑) 등의 정보도 포함된다. Three.js는 BoxGeometry, SphereGeometry, ConeGeometry와 같은 기본 도형을 제공하며, 복잡한 형태는 외부 3D 모델링 소프트웨어에서 제작 후 불러오거나 코드를 통해 정점 데이터를 직접 생성하여 BufferGeometry로 정의할 수 있다.

재질은 지오메트리로 정의된 형태의 시각적 외관을 결정한다. 가장 기본적인 MeshBasicMaterial은 광원의 영향을 받지 않는 단색 또는 와이어프레임 표현에 사용되며, MeshLambertMaterial과 MeshPhongMaterial은 광원에 반응하는 재질로 각각 난반사와 정반사 하이라이트를 구현한다. MeshStandardMaterial과 MeshPhysicalMaterial은 물리 기반 렌더링(PBR) 원칙을 따르는 현대적인 재질로, 보다 사실적인 금속 및 비금속 표면 표현이 가능하다.

지오메트리와 재질은 독립적으로 생성된 후 메시 객체에 함께 주입된다. 하나의 지오메트리에 서로 다른 재질을 적용하여 여러 메시를 만들거나, 반대로 하나의 재질을 여러 지오메트리에 적용하는 것도 가능하다. 이렇게 분리된 구조는 메모리 효율성과 재사용성을 높이며, 애니메이션 과정에서 객체의 형태(지오메트리)와 외관(재질)을 독립적으로 변경할 수 있는 유연성을 제공한다.

재질은 Three.js에서 3D 모델의 표면이 어떻게 보일지를 정의한다. 지오메트리가 객체의 형태를 결정한다면, 재질은 그 표면의 색상, 광택, 투명도, 질감 등을 제어한다. 다양한 재질 클래스를 제공하여 단순한 색상 채우기부터 복잡한 반사와 투명 효과, 텍스처 매핑까지 구현할 수 있다.

가장 기본적인 재질은 MeshBasicMaterial이다. 이 재질은 광원의 영향을 받지 않고 균일한 색상이나 와이어프레임으로 객체를 표현한다. 조명 효과가 필요한 경우에는 MeshLambertMaterial이나 MeshPhongMaterial을 사용한다. 램버트 모델은 산란광을, 퐁 모델은 정반사 하이라이트까지 계산하여 더욱 사실적인 표면을 만들어낸다. 물리 기반 렌더링을 지향하는 MeshStandardMaterial과 MeshPhysicalMaterial은 메탈릭 및 러프니스 같은 물리적 속성을 조절할 수 있어 현실적인 재현에 적합하다.

재질은 텍스처와 결합하여 더욱 풍부한 시각적 표현을 가능하게 한다. map 속성에 이미지를 할당하면 객체 표면에 색상 텍스처를 입힐 수 있다. bumpMap이나 normalMap을 사용하면 표면에 요철감을 추가할 수 있으며, emissiveMap은 자체 발광 효과를, alphaMap은 투명도 채널을 제어한다. 이러한 텍스처들은 UV 매핑을 통해 지오메트리에 맞게 정확하게 배치된다.

성능과 효과의 균형을 고려하여 재질을 선택하는 것이 중요하다. MeshBasicMaterial은 가장 가볍지만 조명 효과가 없고, MeshPhysicalMaterial은 가장 사실적이지만 계산 비용이 높다. 또한, 동일한 재질을 여러 객체에 공유하여 메모리 사용량을 줄이는 최적화 기법도 일반적으로 사용된다.

Three.js에서 광원은 장면 내 3D 객체에 조명을 비추어 색상, 명암, 그림자를 만들어내는 역할을 한다. WebGL 자체는 조명 시스템을 제공하지 않기 때문에, Three.js의 다양한 광원 클래스는 현실적인 빛의 효과를 구현하는 데 필수적이다. 각 광원은 색상, 강도, 감쇠 거리 등의 속성을 가지며, 장면 객체에 추가되어야 비로소 작동한다.

주요 광원 유형으로는 주변광을 시뮬레이션하는 AmbientLight, 모든 방향으로 균일하게 빛을 방출하는 PointLight, 특정 방향으로 평행하게 빛을 비추는 DirectionalLight, 그리고 원뿔 형태의 빛을 만들어내는 SpotLight가 있다. DirectionalLight는 태양광과 같은 효과를, PointLight는 전구와 같은 점광원을, SpotLight는 손전등이나 무대 조명과 같은 효과를 구현할 때 주로 사용된다. 이러한 광원들은 단독으로 또는 조합하여 사용된다.

광원의 설정은 최종 렌더링 결과에 지대한 영향을 미친다. 예를 들어, 재질의 종류에 따라 광원의 반응이 달라지며, 그림자를 생성하려면 광원의 castShadow 속성을 활성화하고 렌더러의 그림자 맵 설정을 함께 구성해야 한다. HemisphereLight와 같은 특수 광원은 하늘색과 지면색의 두 가지 색상으로 환경광을 모델링하여 보다 자연스러운 야외 조명을 구현하는 데 도움을 준다.

효율적인 조명 설계는 성능 최적화와도 직결된다. 필요 이상의 광원을 사용하거나 그림자 맵의 해상도를 지나치게 높이면 프레임률이 떨어질 수 있다. 따라서 장면의 요구사항에 맞춰 적절한 유형과 수의 광원을 선택하고, 그림자 사용을 최소화하는 등의 최적화가 중요하다.

Three.js를 사용하기 위한 첫 단계는 프로젝트 환경을 설정하는 것이다. 가장 일반적인 방법은 HTML 파일 내에서 Three.js 라이브러리를 불러오고, 3D 컨텐츠를 표시할 캔버스 요소를 준비하는 것이다. 라이브러리는 CDN을 통해 직접 링크하거나, npm과 같은 패키지 매니저를 사용하여 로컬 프로젝트에 설치할 수 있다.

기본적인 HTML 구조는 렌더러가 사용할 <canvas> 요소를 포함하며, 자바스크립트 코드에서는 이 요소를 참조하여 Three.js의 핵심 객체들을 생성한다. 이는 WebGL API를 직접 다루는 복잡한 코드 대신, Three.js의 간결한 메서드를 사용하여 3D 그래픽스 환경을 구축할 수 있게 해준다. 또한, ES6 모듈 문법을 지원하므로 현대적인 자바스크립트 번들러와 함께 사용하기에 적합하다.

개발 과정을 효율적으로 하기 위해 로컬 서버를 실행하는 것이 권장된다. 이는 파일 시스템으로 직접 HTML 파일을 열 때 발생할 수 있는 CORS 정책 관련 문제를 피하고, 모델이나 텍스처 같은 외부 자원을 안정적으로 불러오기 위함이다. Node.js 기반의 간단한 도구나 VS Code의 라이브 서버 확장 프로그램 등을 활용할 수 있다.

설정이 완료되면, 장면, 카메라, 렌더러라는 세 가지 기본 구성 요소를 생성하고 연결하는 코드를 작성하게 된다. 이 초기 설정 코드는 모든 Three.js 애플리케이션의 토대가 되며, 이후 메시, 광원, 재질 등의 객체를 추가하여 본격적인 3D 세계를 구축해 나갈 수 있다.

Three.js에서 3D 객체를 생성하고 장면에 추가하는 과정은 라이브러리의 핵심적인 작업 흐름을 이룬다. 일반적으로 지오메트리, 재질, 그리고 이 둘을 결합한 메시의 형태로 객체가 만들어진다. 예를 들어, 정육면체를 만들기 위해서는 BoxGeometry와 같은 지오메트리 클래스를 사용하여 형태를 정의하고, MeshBasicMaterial이나 MeshStandardMaterial과 같은 재질 클래스로 색상이나 광택과 같은 표면 속성을 지정한다. 이후 Mesh 생성자에 이 지오메트리와 재질을 전달하여 하나의 3D 객체를 완성한 뒤, scene.add() 메서드를 호출하여 장면 그래프에 추가한다.

생성된 객체는 위치, 회전, 크기 속성을 조정하여 배치할 수 있다. position.set(x, y, z), rotation.set(x, y, z), scale.set(x, y, z)와 같은 메서드를 사용하여 3차원 공간에서의 변환을 적용한다. 또한, 그룹 객체를 생성하여 여러 개의 메시를 하나의 단위로 묶고, 이 그룹 전체를 이동하거나 회전시키는 계층적 구조를 구성할 수 있다. 이는 복잡한 모델을 구성하거나 애니메이션을 적용할 때 유용하다.

객체를 추가한 후에는 렌더러를 통해 카메라의 시점에서 장면을 그려야 화면에 표시된다. 이 과정은 주로 애니메이션 루프 내에서 반복적으로 수행되어 움직임을 만들어낸다. Three.js는 구, 원뿔, 평면과 같은 기본 프리미티브부터 복잡한 텍스트 지오메트리, 외부 파일로부터 불러온 3D 모델에 이르기까지 다양한 객체 생성 방식을 지원한다.

애니메이션 루프는 Three.js 애플리케이션에 생명을 불어넣는 핵심 메커니즘이다. 정적인 3D 장면을 시간에 따라 변화하는 동적인 경험으로 전환하는 역할을 한다. 이는 일반적으로 requestAnimationFrame API를 활용하여 구현되며, 브라우저의 리페인트 주기에 맞춰 콜백 함수를 반복적으로 호출함으로써 매끄러운 애니메이션을 보장한다.

루프 내부에서는 매 프레임마다 애니메이션 로직이 실행된다. 여기에는 메시 객체의 회전, 위치 변경, 크기 조절과 같은 변환 작업이 포함되며, 카메라의 시점을 이동시키거나 광원의 속성을 변경하는 작업도 수행할 수 있다. 또한 외부 입력(예: 사용자 조작, 데이터 스트림)에 반응하여 객체의 상태를 업데이트하는 로직이 여기에 위치한다.

모든 상태 업데이트가 완료되면, 변경된 장면을 다시 그리기 위해 렌더러의 render 메서드를 호출한다. 이 과정에서 WebGL은 GPU를 통해 새로운 프레임을 계산하고 화면에 출력한다. 애니메이션 루프를 효율적으로 구성하는 것은 성능 최적화의 중요한 부분으로, 불필요한 계산을 줄이고 프레임 드롭을 방지하는 것이 필요하다.

이러한 애니메이션 루프 패턴은 게임 루프와 유사하며, Three.js를 사용한 데이터 시각화나 가상 현실 경험에서 시간의 흐름에 따른 데이터 변화나 상호작용을 표현하는 데 필수적이다. 개발자는 이 루프를 제어하여 복잡한 3D 컴퓨터 그래픽스 시뮬레이션을 구축할 수 있다.

Three.js에서 쉐이더는 WebGL의 저수준 그래픽스 파이프라인을 직접 제어할 수 있는 강력한 도구이다. 쉐이더는 GPU에서 실행되는 작은 프로그램으로, 주로 정점의 위치를 변환하는 버텍스 쉐이더와 각 픽셀의 색상을 계산하는 프래그먼트 쉐이더로 구성된다. Three.js의 표준 재질은 내부적으로 이러한 쉐이더를 사용하지만, 개발자는 사용자 정의 쉐이더를 작성하여 표준 재질로는 구현하기 어려운 독특한 시각적 효과를 만들어낼 수 있다.

사용자 정의 쉐이더를 만들기 위해 Three.js는 THREE.ShaderMaterial 클래스를 제공한다. 이 재질을 생성할 때는 vertexShader와 fragmentShader 속성에 GLSL 코드를 문자열 형태로 직접 작성하여 전달해야 한다. 또한 uniforms 객체를 통해 자바스크립트에서 쉐이더 프로그램으로 변수(예: 시간, 텍스처, 색상)를 전달할 수 있어, 동적인 애니메이션 효과를 구현하는 데 필수적이다.

쉐이더 프로그래밍은 컴퓨터 그래픽스에 대한 깊은 이해를 요구하지만, 그만큼 무한한 창의적 가능성을 제공한다. Three.js의 에코시스템에는 다양한 예제 쉐이더와 시각적 효과 라이브러리가 존재하여 학습과 프로토타이핑을 돕는다. 이를 통해 데이터 시각화나 예술적 표현을 위한 맞춤형 그래픽스 파이프라인을 구축할 수 있다.

포스트 프로세싱은 기본 렌더링이 완료된 후, 전체 장면에 추가적인 시각 효과를 적용하는 과정이다. 이는 Three.js에서 EffectComposer와 다양한 패스(Pass) 객체를 활용하여 구현된다. 주로 블룸(Bloom), 안티앨리어싱(Anti-aliasing), 필름 그레인(Film Grain), 색수차(Chromatic Aberration) 같은 특수 효과를 추가하는 데 사용된다.

작동 방식은 먼저 WebGL 렌더러가 장면(Scene)을 렌더 타겟(Render Target)이라는 특수한 텍스처에 그리는 것으로 시작한다. 이후 EffectComposer는 이 렌더 타겟을 입력으로 받아, 연결된 일련의 패스들을 순차적으로 실행한다. 각 패스는 쉐이더(Shader) 프로그램을 사용하여 이미지에 필터링이나 변형을 가하며, 최종 결과는 캔버스(Canvas)에 출력된다.

포스트 프로세싱을 사용하면 실시간 성능에 영향을 미칠 수 있으므로, 필요한 효과만 선택적으로 적용하고 성능을 모니터링하는 것이 중요하다. 특히 모바일 기기에서는 복잡한 효과 체인이 프레임 레이트 하락을 초래할 수 있다.

Three.js 자체에는 물리 시뮬레이션 엔진이 내장되어 있지 않다. 따라서 현실적인 충돌, 중력, 관성과 같은 물리적 상호작용을 구현하기 위해서는 전용 물리 엔진 라이브러리를 연동해야 한다. 이러한 연동은 주로 자바스크립트로 작성된 외부 라이브러리를 Three.js의 애니메이션 루프에 통합하는 방식으로 이루어진다.

가장 널리 사용되는 물리 엔진으로는 Cannon.js와 Ammo.js가 있다. Cannon.js는 순수 자바스크립트로 작성되어 가볍고 설정이 비교적 간단하다. Ammo.js는 인기 있는 C++ 물리 엔진인 Bullet Physics를 WebAssembly로 포팅한 것으로, 보다 복잡하고 고성능의 시뮬레이션이 가능하다. 이 외에도 Rapier나 Oimo.js 같은 대안도 존재한다.

연동의 기본 원리는 물리 엔진이 별도의 세계(World)를 생성하고, 그 안에 강체(Rigid Body)를 정의하는 것이다. 개발자는 Three.js의 메시(Mesh) 객체와 물리 엔진의 강체 객체를 생성한 후, 두 객체의 위치(position)와 회전(rotation)을 애니메이션 프레임마다 동기화시킨다. 즉, 물리 엔진이 계산한 결과를 Three.js의 가시적 객체에 적용하여 화면에 나타내는 구조이다.

이러한 연동을 더 쉽게 해주는 Three.js 물리(three-physics)나 Cannon-es 같은 래퍼(Wrapper) 라이브러리들도 생겨났다. 이들은 Three.js의 객체 생성 방식과 유사한 API를 제공하여, 개발자가 물리 엔진의 복잡한 내부 구현보다는 장면(Scene) 구성에 집중할 수 있도록 돕는다. 물리 엔진의 선택은 프로젝트의 복잡도, 성능 요구사항, 그리고 개발 편의성에 따라 결정된다.

Three.js는 외부에서 제작된 3D 모델을 불러와 장면에 통합하는 강력한 기능을 제공한다. 이는 복잡한 모델을 코드로 직접 생성하지 않고도 전문 3D 모델링 소프트웨어에서 만든 자산을 활용할 수 있게 해준다. 주로 GLTF 및 GLB 포맷이 권장되며, 이는 웹을 위한 효율적인 전송 포맷으로 설계되었다. 또한 OBJ, FBX, Collada 등 다양한 3D 파일 포맷을 지원하기 위해 별도의 로더(Loader)를 사용할 수 있다.

모델을 불러오기 위해서는 해당 파일 포맷을 처리할 수 있는 로더 클래스의 인스턴스를 생성하고, 파일 경로와 콜백 함수를 지정해야 한다. 로딩은 일반적으로 비동기적으로 이루어지며, 모델 파일과 종종 함께 제공되는 텍스처 이미지 등의 외부 리소스를 네트워크를 통해 가져온다. 성공적으로 로드되면, 로더는 모델의 지오메트리와 재질 정보를 포함하는 객체 또는 장면 그래프를 반환하며, 이를 Three.js의 주 장면 객체에 추가할 수 있다.

로딩 과정에서 발생할 수 있는 문제를 관리하기 위해 진행 상황을 표시하거나 에러를 처리하는 로직이 필요하다. 또한, 불러온 모델의 크기, 위치, 회전을 조정하거나, 모델에 포함된 재질의 속성을 수정하여 장면의 다른 요소와 조화를 이루도록 하는 작업이 일반적으로 뒤따른다. 대용량 모델이나 복잡한 장면의 경우, 성능을 위해 지오메트리를 단순화하거나 레벨 오브 디테일(LOD) 기법을 적용하는 최적화가 필요할 수 있다.

Three.js 생태계에는 다양한 로더가 공식 및 서드파티로 개발되어 있으며, Blender, Maya, 3ds Max 등 주요 3D 제작 도구에서 웹에 최적화된 포맷으로 내보내는 기능을 지원한다. 이를 통해 디자이너와 개발자의 워크플로우를 효율적으로 연결하고, 웹에서 고품질의 3D 콘텐츠를 구현하는 데 기여한다.