#0 WebGL이란 무엇인가? [Threejs]

WebGL이란 무엇인가

WebGL은 놀라운 속도로 캔버스에 삼각형을 렌더링하는 JavaScript API입니다. 

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

WebGL은 삼각형 이상을 그릴 수 있고 2D 경험을 만드는 데 사용할 수도 있지만 과정을 위해 삼각형을 사용하는 3D 경험에 중점을 둘 것입니다.

 

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

3D 모델을 렌더링하려고 하는데 이 모델이 1000개의 삼각형으로 구성되어 있다고 가정해 보겠습니다.

생각해 보면 그리 많지 않습니다. 각 삼각형에는 3개의 점이 포함됩니다. 

모델을 렌더링하려면 GPU가 이 3000개 지점의 위치를 ​​계산해야 합니다. 

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

 

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

다시 말하지만 GPU는 수천 개의 픽셀 계산을 한 번에 처리합니다.

 

점을 배치하고 픽셀을 그리는 지침은 우리가 셰이더라고 부르는 것에 기록됩니다. 

셰이더는 마스터하기 어렵습니다. 또한 이러한 셰이더에 데이터를 제공해야 합니다. 

예: 모델 변환 및 카메라 속성에 따라 점을 배치하는 방법. 이를 매트릭스라고 합니다. 

또한 픽셀을 색칠하는 데 도움이 되는 데이터를 제공해야 합니다. 

빛이 있고 삼각형이 그 빛을 향하고 있다면 삼각형이 없을 때보다 더 밝아야 합니다.

 

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

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

원근감, 조명, 모델을 추가하고 이 경우 모든 것을 애니메이션화하려는 경우 행운을 빕니다.

그러나 기본 WebGL은 GPU에 매우 가까운 낮은 수준에서 존재하는 이점이 있습니다. 

이를 통해 뛰어난 최적화와 더 많은 제어가 가능합니다.

 

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

라이브러리의 목표는 방금 언급한 모든 것을 처리하는 프로세스를 크게 단순화하는 것입니다.

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

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

언젠가는 셰이더를 작성하고 행렬을 생성하게 될 것입니다.

 

 

Three.js를 사용하는 이유

 

Three.js는 개발자가 웹용 3D 경험을 만들 수 있도록 하는 3D JavaScript 라이브러리입니다. 

WebGL과 함께 작동하지만 SVG 및 CSS에서도 작동하도록 만들 수 있습니다. 

 

Three.js 로 만들 수 있는 사이트 링크들 입니다.

• https://bruno-simon.com
• https://go.pioneer.com/cornrevolution
• https://richardmattka.com
• https://lusion.co
• https://www.oculus.com/medal-of-honor/
• http://letsplay.ouigo.com
• https://zen.ly
• https://prior.co.jp/discover
• https://www.midwam.com
• https://heraclosgame.com
• https://chartogne-taillet.com