[Three.js] 0. WebGL 와 Three.js 의 관계

WebGL( Web Graphics Library 의 약자)은 플러그인을 사용하지 않고 호환되는 모든 웹 브라우저에서

대화형 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API입니다.

 

대부분의 최신 브라우저와 호환되며, 방문자의 GPU(그래픽 처리 장치)를 사용하기 때문에 속도가 빠릅니다.

GPU는 수천 개의 병렬 계산을 수행할 수 있습니다.

3D 모델을 렌더링하고 싶은데 이 모델이 1000개의 삼각형으로 구성되어 있다면, 모델을 렌더링하려면 GPU가 

3000개의 점의 위치를 계산해야 합니다.

GPU는 병렬 계산을 할 수 있기 때문에 모든 삼각형 점을 하나의 원시 데이터로 처리합니다.

모델의 포인트가 배치되면 GPU는 해당 삼각형의 보이는 각 픽셀을 그려야 합니다. 

이때도 GPU는 수천, 수만 개의 픽셀 계산을 한 번에 처리합니다.

점을 배치하고 픽셀을 그리는 것은 셰이더 라고 부르는 것으로 작성됩니다.

 

또한 이러한 셰이더에 데이터를 제공해야 합니다.

예를 들어 모델 변환과 카메라의 속성에 따라 포인트를 배치하는 방법 등이 있습니다. 이를 매트릭스라고 합니다.

또한 픽셀의 색상을 지정하는 데 도움이 되는 데이터도 제공해야 합니다.

조명이 있고 삼각형이 그 조명을 향하고 있다면 삼각형이 그렇지 않은 경우보다 더 밝아야 합니다.

이것이 바로 네이티브 WebGL이 어려운 이유입니다. 

캔버스에 삼각형 하나를 그리려면 최소 100줄의 코드가 필요합니다. 

이 경우 원근, 조명, 모델을 추가하고 모든 것에 애니메이션을 적용하는 건 너무 비효율적이죠.

하지만 네이티브 WebGL은 GPU에 매우 가까운 낮은 수준으로 존재한다는 이점이 있습니다. 

따라서 뛰어난 최적화와 더 많은 제어가 가능합니다.

Three.js는 WebGL 바로 위에서 작동하는 JavaScript 라이브러리입니다.

이 라이브러리의 목표는 위에서 언급한 모든 것을 처리하는 프로세스를 대폭 간소화하는 것입니다.

단 몇 줄의 코드만으로 애니메이션 3D 장면을 만들 수 있으며 셰이더와 매트릭스를 제공할 필요가 없습니다.

Three.js는 WebGL 바로 위에 있기 때문에 어떤 방식으로든 상호작용할 수 있습니다.