WebGL - 기하학: 초보자 가이드

안녕하세요, 미래의 WebGL 마에스트로 여러분! WebGL 기하학의 흥미로운 여정을 안내해드리게 되어 매우 기쁩니다. 컴퓨터 그래픽을 10년 넘게 가르쳐온 사람으로서, WebGL에서 기하학을 이해하는 것은 코드로 그림을 그리는 것과 같다고 말할 수 있습니다. 도전적이지만, 정말로 보람이 있습니다! 그럼 손을 dirt고 시작해보겠습니다!

WebGL - Geometry

필요한 기하학 정의하기

아름다운 3D 그래픽을 만들기 전에, WebGL에서 기하학이 무엇을 의미하는지 이해해야 합니다. 본질적으로, 기하학은 우리가 화면에서 볼 수 있는 모든 것의 뼈대입니다. 점, 선, 그리고 형태로 구성되어 있으며, 이는 우리의 3D 오브젝트의 구조를 형성합니다.

LEGO 블록으로 집을 짓는다고 상상해보세요. 각 블록은 3D 공간의 점을 나타내며, 이 점들을 연결하면 边와 면을 만듭니다. WebGL에서 하는 일은 이와 같지만, 플라스틱 블록 대신 코드를 사용합니다!

간단한 예제로 시작해보겠습니다 - 삼각형을 만들기:

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

여기서 우리는 3D 공간의 세 점을 정의했습니다. 각 점은 세 개의 숫자(x, y, z)로 표현됩니다. 이 숫자 배열은 WebGL에 우리의 삼각형을 그려야 할 위치를 알리는 데 사용됩니다.

버퍼 오브젝트

이제 기하학을 정의했으므로, 이 데이터를 GPU로 보내는 방법이 필요합니다. 이는 버퍼 오브젝트가 등장하는 부분입니다. 버퍼 오브젝트는 우리의 기하학 데이터를 저장하고 GPU에 쉽게 접근할 수 있게 만드는 특별한 컨테이너로 생각할 수 있습니다.

버퍼 생성

버퍼를 생성하는 것은 GPU에 기하학을 준비하는 첫 번째 단계입니다. 다음과 같이 합니다:

const buffer = gl.createBuffer();

이 줄은 빈 버퍼 오브젝트를 생성합니다. 이는 LEGO 상자를 준비하고, 거기에 블록을 넣을 준비를 하는 것과 같습니다.

버퍼 바인드

버퍼를 생성한 후, 이 버퍼를 사용하겠다고 WebGL에 알려야 합니다. 이를 바인드하는 방법은 다음과 같습니다:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

이는 LEGO 상자를 들고, "WebGL, 이 상자에 블록을 넣을 거야!"라고 말하는 것과 같습니다.

버퍼에 데이터 전달

이제 흥미로운 부분이 시작됩니다 - 버퍼에 우리의 기하학 데이터를 채우는 것입니다:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

이를 간단히 설명하자면:

gl.bufferData()는 버퍼를 채우는 메서드입니다.
gl.ARRAY_BUFFER는 현재 바인드된 버퍼를 가리킵니다.
new Float32Array(triangleVertices)는 JavaScript 배열을 타입화된 배열로 변환합니다 (이에 대해 조금 더 설명하겠습니다).
gl.STATIC_DRAW는 이 데이터를 어떻게 사용할 계획인지에 대한 WebGL에 대한 힌트입니다.

타입화된 배열

이전 단계에서 Float32Array를 사용했을 때 왜 그랬을까요? WebGL은 데이터 유형에 매우 까다로운 편입니다. 효율성을 위해 타입화된 배열을 선호합니다. 타입화된 배열은 각 데이터가 일관된 크기와 유형을 가지도록 보장합니다.

다음은 WebGL에서 흔히 사용되는 타입화된 배열의 표입니다:

타입화된 배열	설명	사용 사례
Float32Array	32비트 부동소수점 숫자	베릭스 위치, 텍스처 좌표
Int8Array	8비트 부호 있는 정수	작은 정수
Uint8Array	8비트 부호 없는 정수	색상 구성 요소
Int16Array	16비트 부호 있는 정수	더 큰 정수
Uint16Array	16비트 부호 없는 정수	베릭스 인덱스
Int32Array	32비트 부호 있는 정수	매우 큰 정수
Uint32Array	32비트 부호 없는 정수	매우 큰 양의 정수

우리의 경우, 우리의 베릭스 위치는 부동소수점 숫자이므로 Float32Array를 사용했습니다.

버퍼 언바인드

버퍼를 사용한 후, 언바인드하는 것이 좋습니다:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

이는 LEGO 상자를的书架上에 두는 것과 같습니다. 이렇게 하면 우리의 버퍼에 우연히 변경이 되지 않도록 하고, WebGL 상태를 깨끗하게 유지할 수 있습니다.

그렇게 해서, 우리는 기하학을 정의하고, 버퍼를 생성하고, 데이터를 채우고, 타입화된 배열에 대해 배웠습니다. 이는 WebGL에서 모든 3D 오브젝트를 만드는 기초입니다.

기억해 두세요, WebGL을 배우는 것은 여정입니다. 일부 개념이 처음에는 어려울 수 있지만, 연습을 통해 빠르게 놀라운 3D 그래픽을 만들 수 있게 될 것입니다! 제가 가르친 연간 수많은 학생들이 혼란스러운 초보자에서 WebGL 마법사로 변신한 것을 목격했습니다. 당신도 그들과 함께 합류할 길을 잘 걸고 계십니다!

다음 강의에서는 이 버퍼를 사용하여 기하학을 화면에 그리는 방법을 탐구할 것입니다. 첫 WebGL 삼각형을 생명에 불어넣어보세요! 그리로, 즐겁게 코딩하고, 손가락을 쉬고 스트레칭하는 것을 잊지 마세요!

Credits: Image by storyset