한국어

WebGL 튜토리얼

WebGL 애플리케이션

WebGL 예제

WebGL - 삼각형 그리기

안녕하세요, 미래의 WebGL 마법사 여러분! 오늘 우리는 컴퓨터 그래픽스의 세계로 흥미로운 여정을 떠납니다. WebGL을 사용하여 삼각형을 그리는 방법을 배우겠습니다. 이 작업은 간단해 보일 수 있지만, 믿ьте 나쁜 경험을, 이것은 게임과 영화에서 보는 놀라운 3D 그래픽의 기초입니다. 그러니 안전벨트를 고쳐 매고, 함께潜入해 보겠습니다!

WebGL - Drawing a Triangle

WebGL이란?

삼각형을 그리기 전에, 잠시 WebGL이 무엇인지 이해해 보겠습니다. WebGL (Web Graphics Library)는 브라우저에서 플러그인을 사용하지 않고 2D와 3D 그래픽을 렌더링할 수 있게 해주는 JavaScript API입니다. 브라우저 내에서 놀라운 시각을 만들 수 있는 초능력을 가진 것과 같습니다!

삼각형을 그리기 위한 단계

WebGL에서 삼각형을 그리는 작업은처음에는 어려워 보일 수 있지만, 걱정 마세요! 우리는 이를 관리 가능한 단계로 나눕니다. 다음은 우리가 해야 할 일입니다:

  1. HTML 캔버스 설정
  2. WebGL 컨텍스트 가져오기
  3. 베릭스 셰이더 생성 및 컴파일
  4. 프래그먼트 셰이더 생성 및 컴파일
  5. 셰이더 프로그램 생성
  6. 삼각형 꼭짓점 정의
  7. 버퍼 생성 및 꼭짓점 데이터 로드
  8. 꼭짓점 속성 연결
  9. 삼각형 그리기

이제 각 단계를 자세히 살펴보겠습니다.

1. HTML 캔버스 설정

먼저, WebGL이 우리의 삼각형을 렌더링할 HTML 캔버스를 만들어야 합니다. 다음과 같이 합니다:

<canvas id="glCanvas" width="640" height="480"></canvas>

이 코드는 ID가 "glCanvas"이고 크기가 640x480 픽셀인 캔버스를 생성합니다. 필요에 따라 크기를 조정할 수 있습니다.

2. WebGL 컨텍스트 가져오기

이제 JavaScript로 전환하여 WebGL 컨텍스트를 캔버스에서 가져오겠습니다:

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL 초기화에 실패했습니다. 브라우저에서 지원되지 않을 수 있습니다.');
return;
}

이 코드는 캔버스를 찾아 WebGL 컨텍스트를 요청하고, 브라우저에서 WebGL이 지원되는지 확인합니다.

3. 베릭스 셰이더 생성 및 컴파일

베릭스 셰이더는 베릭스 데이터를 처리하는 프로그램입니다. 다음과 같이 생성합니다:

const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('셰이더 컴파일 중 오류가 발생했습니다: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);

이 코드는 베릭스 셰이더 소스를 정의하고, 셰이더를 생성하고 컴파일합니다.

4. 프래그먼트 셰이더 생성 및 컴파일

프래그먼트 셰이더는 각 픽셀의 색상을 결정합니다. 다음과 같이 생성합니다:

const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

이 프래그먼트 셰이더는 삼각형을 빨간색으로 칠합니다.

5. 셰이더 프로그램 생성

이제 셰이더를 프로그램에 연결하겠습니다:

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('셰이더 프로그램 초기화에 실패했습니다: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

6. 삼각형 꼭짓점 정의

이제 삼각형의 꼭짓점을 정의하겠습니다:

const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

이 좌표는 클립 공간에서 삼각형을 정의합니다. 각 좌표는 -1에서 1 사이의 범위를 가집니다.

7. 버퍼 생성 및 꼭짓점 데이터 로드

이제 버퍼를 생성하고 꼭짓점 데이터를 로드하겠습니다:

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

8. 꼭짓점 속성 연결

WebGL이 꼭짓점 데이터를 어떻게 해석해야 하는지 알려줘야 합니다:

const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

9. 삼각형 그리기

마지막으로, 우리의 삼각형을 그릴 수 있습니다:

gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

모든 것을 합쳐서

이제 삼각형을 그리는 완전한 코드를 보여드리겠습니다:

// WebGL 컨텍스트 가져오기
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL 초기화에 실패했습니다. 브라우저에서 지원되지 않을 수 있습니다.');
return;
}

// 베릭스 셰이더 소스
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// 프래그먼트 셰이더 소스
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// 셰이더 생성 함수
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('셰이더 컴파일 중 오류가 발생했습니다: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

// 셰이더 생성
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

// 셰이더 프로그램 생성
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('셰이더 프로그램 초기화에 실패했습니다: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

// 꼭짓점 정의
const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

// 버퍼 생성 및 꼭짓점 데이터 로드
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 꼭짓점 속성 연결
const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

// 삼각형 그리기
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

이제 여러분은 WebGL을 사용하여 첫 삼각형을 그렸습니다! 이 작은 삼각형은 복잡한 3D 그래픽을 만드는 데 필수적인 기초입니다. 각 단계는 더 복잡한 렌더링에 중요합니다.

결론

첫 WebGL 삼각형을 그리신 것을 축하드립니다! 컴퓨터 그래픽스 프로그래밍의 흥미로운 세계로 첫 걸음을 뗐습니다. 기억하시라, 모든 여정은 단 한 걸음으로 시작됩니다 - 우리의 경우, 단 한 개의 삼각형입니다. 계속 연습하고 탐구하다 보면, 사람들의 마음을 사로잡을 놀라운 3D 그래픽을 만들 수 있을 것입니다!

다음은 우리가 사용한 주요 WebGL 메서드의 표입니다:

메서드 설명
getContext('webgl') WebGL 렌더링 컨텍스트 가져오기
createShader() 셰이더 객체 생성
shaderSource() 셰이더 소스 설정
compileShader() 셰이더 컴파일
createProgram() 프로그램 객체 생성
attachShader() 셰이더 프로그램에 연결
linkProgram() 프로그램 객체 연결
createBuffer() 버퍼 객체 생성
bindBuffer() 버퍼 객체에 바인딩
bufferData() 버퍼 객체 데이터 저장
getAttribLocation() 속성 변수 위치 가져오기
vertexAttribPointer() 베릭스 속성 설정
enableVertexAttribArray() 베릭스 속성 배열 활성화
useProgram() 현재 렌더링 상태에 프로그램 설정
drawArrays() 배열 데이터로 프리미티브 렌더링

이 표를 손에 두고 WebGL 여정을 계속하시기 바랍니다. 행복한 코딩 되세요, 여러분의 삼각형이 항상 완벽하게 렌더링되길 바랍니다!

Credits: Image by storyset

이전 튜토리얼:
WebGL - 점 그리기
다음 튜토리얼:
WebGL - 그리기 모드