WebGL - 기본: 초보자를 위한 친절한 소개

안녕하세요, 미래의 WebGL 마법사 여러분! 이 흥미로운 여정에서 여러분의 가이드로서 기쁨을 느끼고 있습니다. 컴퓨터 그래픽을 몇 년 동안 가르쳐온 사람으로서, 여러분과 WebGL의 마법을 공유하게 되어 기대가 큽니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 우리는 기본부터 단계별로 지식을 쌓아 나갈 것입니다. 그럼, 커피 한 잔 (또는 차, 당신이 좋아하는 것)을 챙겨서, 함께 들어보겠습니다!

WebGL - Basics

WebGL이란?

정밀한 내용으로 들어가기 전에, WebGL에 대해 이해해 보겠습니다. WebGL (Web Graphics Library)는 강력한 JavaScript API로, 우리가 웹 브라우저 내에서 훌륭한 3D 그래픽을 만들 수 있게 해줍니다. 마치 손에 작은 영화 스튜디오를 가진 것과 같습니다!

WebGL을 브라우저와 컴퓨터 그래픽 하드웨어 사이의 다리라고 생각해 보세요. 이를 통해 GPU (그래픽 처리 장치)의 능력을 활용하여 부드러운 성능으로 복잡한 3D 장면을 렌더링할 수 있습니다. 멋지지 않나요?

WebGL - 좌표계

이제 WebGL 좌표계에 대해 이야기해 보겠습니다. 거대한 보이지 않는 3D 큐브의 중간에 서 있는 것을 상상해 보세요. 그것이 바로 WebGL 좌표계입니다!

데카르트 좌표계

WebGL은 3D 데카르트 좌표계를 사용합니다. 수학 수업에서 배운 2D 시스템과 비슷하지만, 하나의 추가 차원이 있습니다:

X축: 수평 (왼쪽에서 오른쪽으로)
Y축: 수직 (아래에서 위로)
Z축: 깊이 (뒤에서 앞으로)

다음은 이를 시각화하는 간단한 예제입니다:

// 3D 공간의 점을 정의합니다
var vertex = [
0.5,  // X 좌표
0.7,  // Y 좌표
0.0   // Z 좌표
];

이 예제에서 우리는 중앙에서 약간 오른쪽(0.5)과 위(0.7)에 있으며, 화면 표면에 정확히 있는 점을 정의하고 있습니다.

클립 공간

WebGL의 하나의 특이점은 "클립 공간"이라는 특별한 좌표 범위를 사용하는 것입니다. 모든 좌표는 각 축에서 -1.0에서 1.0 사이에 있어야 합니다. 이 범위 밖의 모든 것은 "클리ップ"되어 (화면에 그려지지 않습니다).

// 클립 공간의右上角에 있는 점
var cornerPoint = [1.0, 1.0, 0.0];

// 클리ップ될 점 (화면에 보이지 않음)
var clippedPoint = [1.5, 0.5, 0.0];

WebGL 그래픽

이제 좌표계를 이해했으므로, WebGL이 어떻게 그림을 그리는지 대해 이야기해 보겠습니다.

기본图形

WebGL은 기본图形을 사용하여 모든 것을 그립니다. 세 가지 주요 유형이 있습니다:

점
선
삼각형

다음 표는 이 기본图形을 요약합니다:

기본图形	설명	사용 사례
점	단일 픽셀	입자 효과, 별
선	점 사이의 직선	와이어프레임, 그래프
삼각형	세 점 형태	대부분의 3D 모델, 지형

간단한 삼각형을 어떻게 정의할 수 있는지 보겠습니다:

var triangleVertices = [
0.0,  0.5,  0.0,  // 정상 점
-0.5, -0.5,  0.0,  // 왼쪽 아래 점
0.5, -0.5,  0.0   // 오른쪽 아래 점
];

이 코드는 삼각형의 세 점을 정의합니다. 각 점은 세 개의 숫자(x, y, z)로 표현됩니다.

버퍼

삼각형을 실제로 화면에 표시하려면 버퍼를 사용해야 합니다. 버퍼는 우리의顶点 데이터를 담아 GPU로 보내는 컨테이너라고 생각할 수 있습니다.

다음은 버퍼를 만들고 채우는 방법입니다:

// 버퍼를 생성합니다
var buffer = gl.createBuffer();

// 버퍼를 바인드합니다 (활성화)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 버퍼에 삼각형 데이터를 채웁니다
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

이제 이 코드가 어떻게 보일지 혼란스러울 수 있지만, 우리는 나아가면서 더 자세히 설명할 것입니다!

셰이더 프로그램

이제 진짜 흥미로운 부분으로 넘어가겠습니다: 셰이더! 셰이더는 GPU에서 실행되는 특별한 프로그램으로, 3D 장면의 각顶点和 픽셀을 처리하는 작은 공장입니다.

셰이더 유형

WebGL에는 두 가지 주요 셰이더 유형이 있습니다:

1.顶点 셰이더: 3D 장면의 각顶점을 처리합니다 2. 픽셀 셰이더: 각 픽셀의 색상을 결정합니다

간단한 예제를 보겠습니다:

// 顶点 셰이더
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

// 픽셀 셰이더
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 밝은 적색
}

顶点 셰이더는 각顶점이 화면에 어디에 있어야 하는지 결정하고, 픽셀 셰이더는 이顶점 사이의 모든 픽셀을 색칠합니다.

셰이더 컴파일 및 링크

우리의 셰이더를 사용하려면 컴파일하고 프로그램에 링크해야 합니다:

// 셰이더 프로그램을 생성합니다
var program = gl.createProgram();

// 셰이더를 첨부하고 컴파일합니다
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 프로그램을 링크합니다
gl.linkProgram(program);

이 과정은 일반 프로그램을 컴파일하고 링크하는 것과 비슷하지만, GPU에서 이루어집니다!