그래픽 라이브러리 및 엔진은 현대의 웹 개발에서 중요한 요소 중 하나입니다. 이러한 라이브러리와 엔진을 사용하면 웹 페이지에 그래픽 요소를 쉽게 구현할 수 있습니다. 그 중에서도 자바스크립트를 활용한 라이브러리와 엔진은 많이 사용되고 있으며, 다양한 기능과 효과를 제공합니다.

Three.js

Three.js는 가장 인기 있는 자바스크립트 3D 그래픽 라이브러리입니다. WebGL을 기반으로 작동하며, 3차원 그래픽 객체를 쉽게 생성하고 조작할 수 있습니다. Three.js는 다양한 재질과 조명, 애니메이션 효과를 지원하며, 실시간 렌더링을 제공합니다.

아래는 Three.js를 활용한 예제 코드입니다.

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();

위의 코드는 Three.js를 사용하여 회전하는 녹색 큐브를 생성하는 예제입니다. THREE.Scene을 사용하여 씬을 생성하고, THREE.Mesh를 사용하여 큐브를 생성한 뒤, 씬에 추가합니다. 그리고 THREE.WebGLRenderer를 사용하여 큐브를 렌더링합니다. 애니메이션을 위해 requestAnimationFrame을 사용하여 렌더링을 반복합니다.

PixiJS

PixiJS는 2D 웹 그래픽을 구현하기 위한 빠르고 가볍고 사용하기 쉬운 자바스크립트 라이브러리입니다. Canvas 또는 WebGL 기반 애니메이션과 인터랙션을 지원합니다. PixiJS는 풍부한 디스플레이 객체를 제공하며, 애니메이션, 스프라이트 시트, 필터링 등 다양한 기능을 제공합니다.

아래는 PixiJS를 활용한 예제 코드입니다.

const app = new PIXI.Application(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.from("image.png");
sprite.anchor.set(0.5);
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.stage.addChild(sprite);

app.ticker.add(() => {
  sprite.rotation += 0.01;
});

위의 코드는 PixiJS를 사용하여 중앙에 회전하는 이미지를 생성하는 예제입니다. PIXI.Application을 사용하여 앱을 생성하고, PIXI.Sprite를 사용하여 이미지를 생성한 뒤, 스테이지에 추가합니다. 애니메이션을 위해 app.ticker를 사용하여 렌더링을 반복합니다.

결론

자바스크립트를 활용한 그래픽 라이브러리 및 엔진은 웹 개발에서 매우 유용한 도구입니다. Three.js와 PixiJS는 그래픽 요소를 구현하고 조작하기 위한 강력한 기능을 제공합니다. 마지막으로, 다양한 자바스크립트 그래픽 라이브러리와 엔진을 살펴보고, 프로젝트에 맞는 라이브러리를 선택하는 것이 중요합니다.