WebGL

기본 정보

• 명칭: WebGL
• 영문명: Web Graphics Library
• 분류: 웹 그래픽 API
• 개발 기관: Khronos Group
• 최초 공개: 2011년
• 기반 기술: OpenGL ES 2.0 / OpenGL ES 3.0(WebGL 2)
• 주요 용도: 브라우저에서 GPU를 이용한 2D·3D 그래픽 렌더링
• 관련 기술: JavaScript, HTML, Canvas, OpenGL, Three.js

개요

WebGL(Web Graphics Library)은 웹 브라우저에서 플러그인 없이 GPU(Graphics Processing Unit)를 활용하여 2D 및 3D 그래픽을 렌더링할 수 있는 JavaScript API이다.

HTML의 <canvas> 요소 위에서 동작하며, 복잡한 3D 모델, 게임, 데이터 시각화, CAD, VR 콘텐츠 등을 웹에서 실행할 수 있게 해준다.

WebGL은 OpenGL ES를 기반으로 하며, 대부분의 최신 브라우저에서 기본 지원된다.

WebGL 구조

사용자

↓

JavaScript

↓

WebGL API

↓

GPU Driver

↓

GPU

↓

화면 출력

동작 과정

Canvas 생성

↓

WebGL Context 획득

↓

Shader 생성

↓

Vertex Buffer 생성

↓

GPU 렌더링

↓

화면 출력

핵심 구성 요소

Canvas

WebGL은 HTML Canvas 위에서 동작한다.

<canvas id="canvas"></canvas>

WebGL Context

Canvas에서 WebGL을 사용할 수 있도록 Context를 생성한다.

const canvas = document.getElementById("canvas");

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

WebGL 2 사용

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

Shader

Shader는 GPU에서 실행되는 프로그램이다.

종류

• Vertex Shader
• Fragment Shader

Vertex

↓

Rasterizer

↓

Fragment

↓

Pixel

Vertex

3D 모델을 구성하는 점(Vertex)이다.

Triangle

A ●

 / \

●---●

B   C

Buffer

GPU 메모리에 데이터를 저장한다.

대표 종류

• Vertex Buffer
• Index Buffer
• Uniform Buffer(WebGL2)

Texture

이미지를 GPU에서 사용하는 방식이다.

이미지

↓

Texture

↓

3D 모델

렌더링 과정

Vertex Data

↓

Vertex Shader

↓

Primitive Assembly

↓

Rasterization

↓

Fragment Shader

↓

Framebuffer

↓

Monitor

삼각형 출력 예제

const canvas = document.getElementById("canvas");

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

gl.clearColor(0, 0, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

위 코드는 화면을 검은색으로 초기화한다.

HTML 예제

<canvas id="canvas" width="800" height="600"></canvas>

WebGL 1과 WebGL 2 비교

WebGL과 Canvas 2D 비교

WebGL과 Three.js

Three.js는 내부적으로 WebGL을 사용한다.

WebGL과 Unity WebGL

Unity 프로젝트

↓

WebGL Build

↓

HTML

JavaScript

↓

Browser 실행

Unity는 WebGL 플랫폼으로 빌드하여 브라우저에서 실행할 수 있다.

대표 활용 분야

• 웹 게임
• 3D 지도
• CAD
• 제품 미리보기
• 데이터 시각화
• VR
• AR
• 의료 영상
• 건축 시뮬레이션
• 디지털 트윈

대표 라이브러리

• Three.js
• Babylon.js
• PlayCanvas
• PixiJS(2D)
• regl

장점

• 플러그인 없이 실행 가능
• GPU 가속 지원
• 높은 렌더링 성능
• 대부분의 브라우저 지원
• JavaScript와 연동 가능
• 모바일 브라우저 지원

단점

• 학습 난이도가 높음
• Shader 이해 필요
• 디버깅이 어려움
• 브라우저별 성능 차이
• 저수준 API라 코드가 복잡함

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

• 복잡한 프로젝트는 Three.js 활용
• Shader 최소화 및 최적화
• Draw Call 수 감소
• Texture 크기 최적화
• GPU 메모리 관리
• WebGL Context 손실 처리
• 모바일 성능 테스트
• WebGL2 지원 여부 확인
• FPS 모니터링
• Unity WebGL 빌드 시 압축 및 로딩 최적화

WebGL과 함께 사용하는 기술

• JavaScript
• HTML
• Canvas
• OpenGL
• Three.js
• Unity
• WebAssembly
• GPU
• Shader
• WebGPU

대표 활용 사례

• Unity WebGL 게임
• Google Maps 3D
• 온라인 CAD
• 제품 360도 뷰어
• 3D 데이터 시각화
• 브라우저 게임
• 디지털 트윈 플랫폼
• 의료 영상 뷰어

관련 문서

• JavaScript
• Canvas
• Three.js
• OpenGL
• Unity
• GPU
• Shader
• WebAssembly
• WebGPU
• HTML

출처

• Khronos Group WebGL 공식 문서
• MDN Web Docs - WebGL API
• WebGL Specification