Three.js

Three.js

WebGL을 기반으로 한 3D 그래픽 라이브러리

• 복잡한 WebGL 코드들이 간단한 API로 추상화 되어있어, 3D 렌더링 작업들을 간편하게 구현할 수 있다.

• 3D 모델 생성, 텍스처 매핑, 조명 효과, 카메라 컨트롤, 애니메이션 등 다양한 3D 기능을 제공

WebGL(Web Graphics Library)

웹 브라우저상에서 2D, 3D 그래픽을 렌더링하기 위한 저수준의 JavaScript API

• OpenGL ES 2.0 을 기반으로 하며, canvas 요소에 렌더링한다.

• GPU를 활용하여(하드웨어 가속) 브라우저 상에서 높은 품질의 3D 그래픽을 렌더링하고 성능을 향상시킨다.

• 표준 웹 기술로서, 별도의 플러그인 없이 브라우저에서 사용할 수 있다.

OpenGL for Embedded Systems

임베디드 및 모바일 시스템에서 2D 및 3D 그래픽을 렌더링하기 위한 크로스 플랫폼 API

• OpenGL ES는 데스크탑 컴퓨터용 OpenGL API의 간소화된 버전

• 리소스 제약이 있는 모바일 기기와 임베디드 시스템에 맞게 최적화되어 있다.

• 새로운 버전이 출시될 때마다 그래픽 능력과 효율성을 향상시키기 위해 다양한 변화와 추가된 기능들이 포함된다.

Open Graphics Library -> 여러 분야에서 사용될 수 있도록 하는 범용성을 보장하기 위해 발표된 2D, 3D 그래픽 API의 규격

3D 그래픽 4가지 기본 구성요소

3D 그래픽을 화면에 표시하기 위해서는 기본적으로 4가지 기본 구성요소가 필요하다.

Renderer, Scene, Camera, 3D Object

Renderer

3D 모델 및 장면을 실제 화면에 그려주는 역할

• 3D 그래픽을 2D 화면에 표현하기 위해 필요한 작업을 처리한다.

• GPU를 사용하여 렌더링 작업을 가속화하며, WebGL을 통해 접근한다.

Scene

장면을 채우기 위해선 배우, 주변 사물, 조명등이 포함되는데 이런것들이 Three.js에서는 Mash, Object, Light 와 같은 3차원 오브젝트로 표현된다.

const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });

renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

Mesh

3D 모델을 나타내는 기본 단위이며, 점(Vertex), 선(Edge), 면(Face) 등의 기하학적 형태(Geometry)와 형태에 적용되는 재질(Material)을 포함한다.

3개의 정점으로 만들어진 삼각면(폴리곤)으로 구성된 3차원 물체를 Mesh라 한다.

Material vs Texture

위 둘은 비슷한 개념이지만, 정확히는 다르다. Material → 3D 객체 표면의 특성을 정의하는 속성의 집합, 물체의 색상, 광택, 반사율, 불투명도를 결정한다. 3D 객체의 외관을 결정하는 중요한 요소 Texture → 3D 객체의 표면에 적용되는 이미지 또는 패턴, 텍스쳐는 재질을 구성하는 요소 중 하나

• 정점(Vertex)과 삼각면(Polygon)으로 구성되며, 정점의 좌표와 삼각면을 구성하는 정점 인덱스를 설정하여 3D 모델의 형태를 정의

  • 삼각면(Polygon) → 3개의 정점으로 면을 만들 수 있는데 이렇게 만들어진 삼각면을 폴리곤이라 한다. 3D 물체를 구성하는 가장 기본적인 단위

  • 폴리곤이 많이 구성될 수록 더욱 현실적인 3D 객체를 표현할 수 있게 된다.

• 정점 인덱스(Vertex Index)는 모델의 정점들이 어떤 순서로 나열되어 있는지를 나타내는 인덱스 배열로 정점들을 공유하여 효율적으로(메모리 절약, 계산량 줄임 등) 관리할 수 있게 만든다.

점(Point) vs 정점? 꼭짓점(Vertex)

Point → 크기나 모양이 없는 단순히 좌표 공간의 위치를 뜻한다.

Vertex→ 두 개 이상의 선 또는 면이 만나는 지점, 즉 꼭짓점을 의미한다. 3D 물체를 구성하는 접점은 3차원 위치 좌표(x,y,z), 텍스쳐 데이터를 매핑하는 2차원 UV좌표, 색상 정보(r,g,b), 법선 방향의 3차원 벡터가 포함된다.

Geometry vs Mesh

Geometry → 3D 공간 내에서 객체의 형태, 크기, 위치 등을 정의하는 수학적인 특성

Mesh → 적어도 하나의 꼭짓점을 공유하는 다각형의 집합, 메쉬는 구성된 다른 다각형의 정점으로 부터 점들을 통과하여 모든 다각형으로 도달할 수 있다.

즉, Mesh는 Geometry 정보를 기반으로 객체의 외형을 표현하는 구조

const geometry = new THREE.BoxGeometry(2, 2, 2);
// 참고로 MeshBasicMaterial은 조명의 영향을 받지 않는다. 
const material = new THREE.MeshStandardMaterial({ color: '#ffbbee ' });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

Object

큐브(Cube), 구(Sphere), 원통(Cylinder), 평면(Plane) 등 기본으로 제공되는 3D 객체 타입

Light

객체의 조명 및 그림자를 조절하는 데 사용되는 요소

• 주변광(Ambient Light), 방향광(Directional Light), 점광(Point Light), 스포트라이트(Spotlight) 등의 다양한 조명이 있으며, 각 조명 타입은 장면의 조명 조건에 따라 다르게 사용된다.

  • 주변광(Ambient Light) → 모든 방향에서 동일하게 퍼지는 조명으로, 그림자를 만들수 없고 물체 표면에 일정한 밝기를 부여한다.

  • 방향광(Directional Light) → 특정한 방향으로 직사광선을 내려주는 조명으로, 그림자를 만들어 내는 데 효과적이며 빛의 방향으로 물체의 입체감을 준다.

  • 점광(Point Light) → 특정 위치의 한 점에서 모든 방향으로 퍼져나가는 조명으로 해당 빛은 주변으로 갈수록 감쇠되며, 물체 주변의 빛이 모이는 효과를 나타내기에 적합하다.

  • 스포트라이트(Spotlight) → 특정 위치와 특정 방향에서 빛을 발산하는 조명으로, 원뿔 형태의 빛을 생성하며, 특정 지점을 강조하거나 강조하지 않게 하여 강조 효과를 만들어낸다.

• 조명의 위치, 색상, 강도 등을 설정하여 3D 객체의 시각적 효과를 조정한다.

Camera

3D 공간에서의 시야를 나타내는 역할 카메라의 위치, 시선(direction), 종횡비(aspect ratio), 시야각(fov) 등의 속성을 설정하여 어떤 장면을 보여줄지 결정한다. (카메라에 잡히지 않는 요소는 렌더링되지 않아 불필요한 렌더링을 줄인다.)

• Fov(Field Over View, 시야각) → 이 각도가 넓어지면 카메라에 더 많은 범위를 담게 된다.

• Near → 카메라와 물체까지의 최소 거리로, near 이전의 물체는 시야에 포함되지 않아 렌더링되지 않는다.

• Far Plane → 카메라가 얼마나 멀리까지 볼 수 있는지를 나타낸다.

const camera = new THREE.PerspectiveCamera(
 75,// fov
 window.innerWidth / window.innerHeight, //종횡비
 1,// near
 300// far
);

camera.position.set(3, 4, 5); // 카메라 위치 조정(x,y,z)
camera.lookAt(3D 오브젝트 포지션); // 카메라가 위치에 상관없이 3D 오브젝트를 항상 바라보도록 설정

3D Object

기본 도형부터 사용자가 정의한 복잡한 모델까지 포함되며, 화면에 표시되는 실제 모델을 나타낸다.

• 3D 객체는 정점(Vertex)들로 구성되고, 이 정점들은 메시(Mesh)를 형성하여 모델의 형태를 결정

• 객체의 위치, 회전, 크기 등의 변환을 조작하여 원하는 모양으로 배치할 수 있다.