🏗️ WebGL2의 메서드와 상수

BamgasiJM·2026년 6월 26일

목록 보기

6/14

gl.clear(), gl.createBuffer(), gl.bindBuffer()와 같이 gl. 뒤에 오는 이름들은 WebGL2 API가 제공하는 표준 메서드(Methods)와 상수(Constants)입니다. WebGL 프로그래밍을 처음 접하면 함수와 상수가 뒤섞여 보이기 쉽지만, 이 둘의 역할을 구분하면 WebGL의 상태 기반(State Machine) 구조를 훨씬 쉽게 이해할 수 있습니다.

1. 메서드 (Methods): GPU에게 명령을 전달하는 함수

gl.clear(), gl.drawArrays()처럼 소문자로 시작하며 괄호 ()가 붙는 것들은 WebGL 컨텍스트가 수행할 동작을 나타내는 메서드입니다.

메서드는 CPU에서 GPU로 전달되는 명령(Command)이라고 볼 수 있습니다.

특징

소문자로 시작한다.
괄호 ()를 가진다.
GPU 상태를 변경하거나 작업을 수행한다.
반환값을 가질 수도 있다.

예시

gl.clear(...);
gl.useProgram(...);
gl.bindBuffer(...);
gl.drawArrays(...);

주요 메서드

메서드	역할
`gl.clear()`	버퍼 초기화
`gl.viewport()`	렌더링 영역 설정
`gl.createBuffer()`	버퍼 객체 생성
`gl.bindBuffer()`	버퍼 바인딩
`gl.bufferData()`	버퍼 데이터 업로드
`gl.createShader()`	셰이더 객체 생성
`gl.shaderSource()`	셰이더 소스 지정
`gl.compileShader()`	셰이더 컴파일
`gl.createProgram()`	프로그램 객체 생성
`gl.linkProgram()`	프로그램 링크
`gl.useProgram()`	프로그램 활성화
`gl.enableVertexAttribArray()`	정점 속성 활성화
`gl.vertexAttribPointer()`	정점 데이터 형식 지정
`gl.drawArrays()`	정점 데이터 렌더링
`gl.drawElements()`	인덱스 기반 렌더링

2. 상수 (Constants): 미리 정의된 식별자

gl.COLOR_BUFFER_BIT, gl.ARRAY_BUFFER, gl.STATIC_DRAW처럼 모두 대문자로 작성된 값들은 WebGL이 미리 정의한 상수입니다.

상수는 숫자값이지만, 프로그래머가 이해하기 쉽도록 이름이 붙어 있습니다.

예를 들어:

console.log(gl.COLOR_BUFFER_BIT);

실제로는 다음과 같은 숫자가 출력됩니다.

그러나 코드에서 숫자를 직접 사용하는 대신 의미 있는 이름을 사용하는 것이 가독성과 유지보수성 측면에서 훨씬 유리합니다.

3. 왜 항상 `gl.`을 붙이는가?

const gl = canvas.getContext("webgl2");

gl은 WebGL2 렌더링 컨텍스트 객체입니다.

이 객체 내부에는 수백 개의 메서드와 상수가 포함되어 있습니다.

gl.clear(...)
gl.drawArrays(...)
gl.COLOR_BUFFER_BIT

이는 모두 gl 객체 내부에 속한 멤버입니다.

객체 지향 관점에서 보면 다음과 같이 이해할 수 있습니다.

gl : WebGL2 시스템
clear() : 시스템이 수행할 기능
COLOR_BUFFER_BIT : 시스템이 제공하는 설정값

즉,

"WebGL 시스템(gl) 안의 clear 기능을 호출한다."

라는 의미입니다.

자주 사용하는 WebGL2 메서드

화면 제어

gl.clearColor()

화면을 지울 때 사용할 배경색을 지정합니다.

gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clear()

버퍼를 초기화합니다.

gl.clear(gl.COLOR_BUFFER_BIT);

gl.viewport()

렌더링 영역을 지정합니다.

gl.viewport(0, 0, canvas.width, canvas.height);

버퍼 관련 메서드

gl.createBuffer()

GPU 버퍼 객체를 생성합니다.

const buffer = gl.createBuffer();

gl.bindBuffer()

현재 작업할 버퍼를 선택합니다.

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

gl.bufferData()

버퍼에 데이터를 업로드합니다.

gl.bufferData(
    gl.ARRAY_BUFFER,
    vertices,
    gl.STATIC_DRAW
);

셰이더 관련 메서드

gl.createShader()

셰이더 객체를 생성합니다.

const shader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource()

GLSL 코드를 전달합니다.

gl.shaderSource(shader, source);

gl.compileShader()

셰이더를 컴파일합니다.

gl.compileShader(shader);

프로그램 관련 메서드

gl.createProgram()

셰이더 프로그램을 생성합니다.

const program = gl.createProgram();

gl.attachShader()

셰이더를 프로그램에 연결합니다.

gl.attachShader(program, vertexShader);

gl.linkProgram()

셰이더들을 하나의 프로그램으로 링크합니다.

gl.linkProgram(program);

gl.useProgram()

현재 사용할 프로그램을 지정합니다.

gl.useProgram(program);

정점 속성 관련 메서드

gl.getAttribLocation()

정점 속성의 위치를 가져옵니다.

const positionLoc =
    gl.getAttribLocation(program, "aPosition");

gl.enableVertexAttribArray()

정점 속성을 활성화합니다.

gl.enableVertexAttribArray(positionLoc);

gl.vertexAttribPointer()

버퍼 데이터의 구조를 정의합니다.

gl.vertexAttribPointer(
    positionLoc,
    3,
    gl.FLOAT,
    false,
    0,
    0
);

렌더링 메서드

gl.drawArrays()

순차적으로 정점을 그립니다.

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

gl.drawElements()

인덱스 버퍼를 사용하여 그립니다.

gl.drawElements(
    gl.TRIANGLES,
    indexCount,
    gl.UNSIGNED_SHORT,
    0
);

자주 사용하는 상수

버퍼 종류

상수	의미
`gl.ARRAY_BUFFER`	정점 버퍼
`gl.ELEMENT_ARRAY_BUFFER`	인덱스 버퍼
`gl.UNIFORM_BUFFER`	Uniform 버퍼
`gl.TRANSFORM_FEEDBACK_BUFFER`	Transform Feedback 버퍼

버퍼 사용 패턴

상수	의미
`gl.STATIC_DRAW`	한 번 업로드 후 여러 번 사용
`gl.DYNAMIC_DRAW`	자주 변경
`gl.STREAM_DRAW`	매 프레임 변경

셰이더 종류

상수	의미
`gl.VERTEX_SHADER`	버텍스 셰이더
`gl.FRAGMENT_SHADER`	프래그먼트 셰이더

데이터 타입

상수	의미
`gl.FLOAT`	32비트 실수
`gl.INT`	정수
`gl.UNSIGNED_SHORT`	16비트 부호 없는 정수
`gl.UNSIGNED_INT`	32비트 부호 없는 정수

프리미티브 타입

상수	의미
`gl.POINTS`	점
`gl.LINES`	선
`gl.LINE_STRIP`	연결된 선
`gl.TRIANGLES`	삼각형
`gl.TRIANGLE_STRIP`	삼각형 스트립
`gl.TRIANGLE_FAN`	삼각형 팬

버퍼 초기화

상수	의미
`gl.COLOR_BUFFER_BIT`	색상 버퍼
`gl.DEPTH_BUFFER_BIT`	깊이 버퍼
`gl.STENCIL_BUFFER_BIT`	스텐실 버퍼

여러 개를 동시에 사용할 수도 있습니다.

gl.clear(
    gl.COLOR_BUFFER_BIT |
    gl.DEPTH_BUFFER_BIT
);

WebGL2에서 추가된 대표적인 상수

상수	의미
`gl.TEXTURE_3D`	3차원 텍스처
`gl.TEXTURE_2D_ARRAY`	텍스처 배열
`gl.RGBA32F`	32비트 부동소수점 텍스처
`gl.SAMPLER_2D`	텍스처 샘플러
`gl.UNIFORM_BUFFER`	Uniform Buffer Object
`gl.TRANSFORM_FEEDBACK`	Transform Feedback
`gl.DRAW_FRAMEBUFFER`	드로우 프레임버퍼
`gl.READ_FRAMEBUFFER`	읽기 프레임버퍼

요약

형태	분류	역할
`gl.clear()`	Method	GPU에 명령을 전달
`gl.createBuffer()`	Method	객체 생성
`gl.drawArrays()`	Method	렌더링 수행
`gl.ARRAY_BUFFER`	Constant	버퍼 종류 지정
`gl.TRIANGLES`	Constant	렌더링 방식 지정
`gl.FLOAT`	Constant	데이터 타입 지정
`gl.COLOR_BUFFER_BIT`	Constant	버퍼 선택

WebGL은 상태 기반(State Machine) API입니다. 메서드는 GPU의 상태를 변경하거나 명령을 수행하며, 상수는 그 동작의 대상과 방식, 데이터 형식을 지정합니다. 따라서 대부분의 WebGL 코드는 다음과 같은 구조를 반복하게 됩니다.

gl.메서드(상수, 상수, 값, 값);

즉, 메서드는 "무엇을 할 것인가"를 결정하고, 상수는 "어떻게 할 것인가"를 정의합니다. 이 구조를 이해하면 복잡해 보이는 WebGL API도 일관된 패턴으로 해석할 수 있습니다.

BamgasiJM

Coding Art with Blender / oF / Processing / p5.js / nannou

이전 포스트

🏗️ GLSL을 외부 파일로 작성하기

다음 포스트