[three.js journey] 2강 복습: WebGL과 Three.js

WebGL이란?

WebGL(Web Graphics Library)은 JavaScript API이자 웹 API로, 브라우저의 canvas 엘리먼트를 사용하여 2D 및 3D 그래픽을 렌더링한다.

WebGL의 주요 특징

• GPU 사용: WebGL은 GPU(그래픽 처리 장치)를 활용한다. GPU는 CPU(중앙 처리 장치)보다 개별 연산 속도는 느리지만, 대량의 연산을 병렬로 수행할 수 있다. 이는 많은 삼각형을 렌더링할 때 특히 유용하다.
• 다양한 렌더링 옵션: WebGL은 주로 canvas에 그려지지만, 필수적인 것은 아니다. 다른 렌더링 타겟도 가능하다.
• 2D 및 3D 지원: 주로 3D 그래픽에 사용되지만, 2D 그래픽에도 활용될 수 있다. 그러나 2D 작업에는 보통 Pixi.js와 같은 라이브러리가 사용된다.

삼각형 렌더링의 기본 아이디어

3D 모델의 기본 구성 요소는 삼각형이다. WebGL을 사용하여 삼각형을 그리는 과정은 다음과 같다:

• 위치 결정: 삼각형의 점(vertex)을 정의한다.
• GPU 처리: GPU는 각 삼각형의 픽셀을 병렬로 빠르게 그린다.
• 컬러링: 삼각형에 색을 입힌다.

WebGL로 단 하나의 삼각형을 그리기 위해서는 약 100줄의 코드가 필요할 수 있다. 이는 매우 복잡하고 번거로운 작업이 될 수 있다. 이를 간단히 해주는 것이 three.js이다.

Three.js

Three.js는 WebGL의 복잡한 프로세스를 단순화하는 JavaScript 라이브러리이다. 가장 유명한 WebGL 라이브러리 중 하나로, 다양한 기능과 안정성을 자랑한다. 다른 WebGL 라이브러리도 존재하지만 그 중에서도 특히 널리 사용되고 있다.

주요 특징

• 사용 편의성: Three.js는 WebGL 위에 구축되어 있으며, 복잡한 WebGL 코드를 간소화한다. 이를 통해 더 적은 코드로 더 많은 작업을 수행할 수 있다.
• 확장성: Three.js는 커스텀 셰이더를 만들고 이를 WebGL과 상호작용하게 할 수 있다.
• 안정성: 현재 Three.js는 안정적인 상태로, 큰 변화보다는 작은 버그 수정, 최적화, 새로운 기능 추가가 주로 이루어진다. 깃헙 Release를 참고하자.
• 풍부한 기능: 다양한 기능을 제공하며, 공식 문서가 잘 정리되어 있다. 또한 커뮤니티가 활발하다.

기타

• WebGL 외에도 SVG와 CSS를 사용하여 그래픽을 렌더링할 수 있는 기능을 제공한다.
  
  • SVGRenderer, CSS3DRenderer

추가 리소스

• Three.js 공식 문서: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
• Three.js GitHub: https://github.com/mrdoob/three.js
• Three.js Releases : https://github.com/mrdoob/three.js/releases