WebGL - 소개
안녕하세요, 미래의 WebGL 마법사 여러분! 웹에서의 3D 그래픽 세계로의 흥미로운 여정에 여러분을 초대합니다. 저는 10년 이상 컴퓨터 그래픽을 가르쳐온 지도자로서, 앞으로의 길이 어려워 보일 수 있지만, 매우 보람 있을 것이라 확신합니다. 그럼, 안전벨트를 고정하고 시작해보겠습니다!
OpenGL은 무엇인가요?
WebGL에 뛰어들기 전에, 그 이전 버전인 OpenGL을 이해하는 것이 좋습니다. 마치 대가인 예술가가 걸작을 그리려고 할 때, OpenGL은 마법의 도구 세트와 같습니다. 예술 작품을 컴퓨터 화면에 그리는 데 사용할 수 있는 도구입니다.
OpenGL은 2D와 3D 벡터 그래픽을 렌더링하는.cross-platform API(어플리케이션 프로그래밍 인터페이스)입니다. 1992년부터 존재하며, 수많은 게임, 시뮬레이션, 시각적 애플리케이션의 기반을 담당해왔습니다.
간단한 비유로 말하면, 컴퓨터 화면이 캔버스라면, OpenGL은 프로그래머가 그 캔버스에 놀라운 세부와 속도로 그림을 그리는 도구 세트입니다.
WebGL은 무엇인가요?
이제 우리의 별이 되는 WebGL로 시선을 돌리겠습니다. OpenGL이 데스크톱 애플리케이션의 도구라면, WebGL은 웹의 도구입니다. WebGL은 JavaScript API로, 플러그인 없이 웹 브라우저에서 놀라운 3D 그래픽을 만들 수 있게 합니다.
WebGL은 OpenGL ES 2.0(임베디드 시스템을 위한 OpenGL 버전)의 능력을 웹으로 가져오며, 개발자가 JavaScript를 통해 GPU(그래픽 처리 장치)를 직접 활용할 수 있게 합니다.
다음은 WebGL의 간단한 "Hello, World!" 예제입니다:
<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (gl === null) {
alert("WebGL을 초기화할 수 없습니다. 브라우저나 기계가 지원하지 않을 수 있습니다.");
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
window.onload = main;
</script>이 코드는 웹 페이지에 검은색 캔버스를 생성합니다. 별로 보이지 않을 수 있지만, 이는 WebGL 세계로의 첫 걸음입니다!
WebGL을 누가 개발했나요?
WebGL은 OpenGL과 같은 Khronos Group에 의해 개발되었습니다. 2011년 처음 소개되었으며, 웹에서 그래픽을 어떻게 생각하는지 혁명을 일으켰습니다.
재미있는 사실: WebGL의 개발은 Mozilla의 Vladimir Vukićević가 수행한 실험에서 영감을 받았습니다. 그는 JavaScript에 OpenGL ES를 노출하는 캔버스 요소를 만들어, WebGL이 되는 기초를 마련했습니다.
렌더링
렌더링은 2D 또는 3D 모델에서 이미지를 생성하는 과정입니다. WebGL에서는 이 과정이 실시간으로 일어나며, 사용자가 상호작용할 때마다 이미지가 생성됩니다.
다음은 빨간색 삼각형을 렌더링하는 간단한 예제입니다:
// Vertex shader 프로그램
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fragment shader 프로그램
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// ... (초기화 코드)
// 시나리오 그리기
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 검은색으로 지우기, 완전히 투명하지 않음
gl.clearDepth(1.0); // 모든 것 지우기
gl.enable(gl.DEPTH_TEST); // 깊이 테스트 활성화
gl.depthFunc(gl.LEQUAL); // 가까운 것들이 먼 것들을 가리게 함
// 그리기 전에 캔버스를 지웁니다.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// ... (시나리오 설정)
{
const numComponents = 2; // 각 반복에서 2개의 값을 끌어냅니다.
const type = gl.FLOAT; // 버퍼의 데이터는 32비트 부동소수점입니다.
const normalize = false; // 정규화하지 않습니다.
const stride = 0; // 각 쌍의 값을 얻기 위한 바이트 수
const offset = 0; // 버퍼 내에서 시작하는 바이트 수
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
// WebGL이 그리기 위해 우리의 프로그램을 사용하도록 지정합니다.
gl.useProgram(programInfo.program);
{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}이 코드는 필요한 셰이더와 버퍼를 설정하여 화면에 간단한 빨간색 삼각형을 렌더링합니다.
GPU
GPU는 그래픽 렌더링에 필요한 복잡한 수학 계산을 처리할 수 있는 특수한 프로세서입니다. CPU는 일반적인 컴퓨팅에 훌륭하지만, GPU는 많은 간단한 계산을 병렬적으로 수행하여 그래픽 작업에 최적화되어 있습니다.
이렇게 생각해보세요: 복잡한 3D 시나리오를 그리는 것은 거대한 벽화를 그리는 것과 같다면, CPU는 한 명의 매우 재능 있는 화가이고, GPU는 수천 명의 평범한 화가들이 함께 일하는 것입니다.
GPU 가속 컴퓨팅
GPU 가속 컴퓨팅은 CPU와 GPU를 함께 사용하여 과학, 분석, 공학, 소비자, 기업 애플리케이션을 가속화하는 것을 의미합니다. WebGL의 맥락에서는, 그래픽 계산이 GPU로 이관되어 CPU가 다른 작업을 수행할 수 있으며, 더 부드럽고 빠른 그래픽을 제공합니다.
브라우저 지원
WebGL의 아름다움은 현대 브라우저에서 넓게 지원된다는 점입니다. 2023년 기준으로, WebGL은 다음 브라우저에서 지원됩니다:
| 브라우저 | 버전 |
|---|---|
| Chrome | 9+ |
| Firefox | 4+ |
| Safari | 5.1+ |
| Opera | 12+ |
| Internet Explorer | 11+ |
| Microsoft Edge | 12+ |
WebGL의 장점
WebGL은 다양한 장점을 제공합니다:
- 크로스 플랫폼 호환성: 한 번 작성하고 어디서나 실행할 수 있습니다 (브라우저가 있는 곳이라면).
- 플러그인 필요 없음: 브라우저에 내장되어 있습니다.
- 하드웨어 가속: GPU를 활용하여 더 나은 성능을 제공합니다.
- 웹 기술과의 통합: 다른 웹 API와 결합하여 풍부한 상호작용 경험을 제공합니다.
- 공개 표준: 누구나 기여할 수 있습니다.
환경 설정
WebGL 환경을 설정하는 것은 생각보다 간단합니다. 다음이 필요합니다:
- 현대적인 웹 브라우저
- 텍스트 편집기 (Visual Studio Code를 추천합니다)
- 로컬 웹 서버 (Python 내장 서버나 Node.js의 http-server를 사용할 수 있습니다)
다음은 간단한 설정 절차입니다:
- 프로젝트를 위한 새로운 디렉토리를 생성합니다
- HTML 파일 (
index.html)과 JavaScript 파일 (script.js)을 생성합니다 - HTML 파일에 JavaScript 파일을 포함하고 캔버스를 설정합니다:
<!DOCTYPE html>
<html>
<head>
<title>제 첫 WebGL 프로젝트</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>- JavaScript 파일에서 WebGL을 초기화합니다:
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (gl === null) {
alert("WebGL을 초기화할 수 없습니다. 브라우저나 기계가 지원하지 않을 수 있습니다.");
return;
}
// WebGL 코드를 여기에 작성합니다
}
window.onload = main;이제 WebGL 여정을 시작할 준비가 되었습니다. 기억하시길, WebGL을 배우는 것은 자전거 타는 것과 같습니다 -처음에는 흔들릴 수 있지만, 연습을 통해 곧 빠르게 타게 될 것입니다. 즐겁게 코딩하세요!
Credits: Image by storyset