Web에서 3D 그래픽 구현

 

Canvas API

 

웹에서 3D 그래픽을 구현하는 주요 기술 중 하나

HTML의 <canvas> 요소를 이용, JavaScript로 픽셀 단위의 그래픽을 직접 그림(픽셀 조작)

벡터 그래픽이 아닌 비트맵 기반으로 동작, 한 번 그린 후에는 별도로 다시 그려야 함 (자동 UI 갱신 X)

→ 3D 좌표계에서 오브젝트 배치, 조명 설정, 렌더링 최적화, 충돌 감지 같은 요소를 고려한 복잡한 3D 그래픽을 구현

WebGL과 함께 사용하면 GPU 가속을 활용한 3D 그래픽 가능

 

 

html

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d"); // 2D 그래픽 컨텍스트 생성

  // 원 그리기
  ctx.beginPath();
  ctx.arc(200, 200, 50, 0, Math.PI * 2);
  ctx.fillStyle = "blue";
  ctx.fill();
</script>

 

 

 

→ 쉽게 3D그래픽을 다룰 수 있도록 도와주는 라이브러리들 (자동으로 WebGL 컨텍스트를 생성하고 렌더링을 관리)

• three.js
  JavaScript 기반의 3D 그래픽 라이브러리
  WebGL을 쉽게 사용할 수 있도록 도와줌
• @react-three/fiber
  React 환경에서 three.js를 더 간편하게 사용할 수 있도록 돕는 라이브러리

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

WebGLRenderer는 내부적으로 <canvas> 요소를 생성하고, WebGL을 활용해 3D 장면을 렌더링

<canvas>를 직접 다룰 필요 없이 three.js가 알아서 처리

 

→복잡한 수학적 계산을 직접 하지 않아도, 직관적인 코드로 3D 그래픽을 만들 수 있음