WebGL - Context: A Friendly Guide for Beginners
안녕하세요, 미래의 WebGL 마법사 여러분! 여러분이 이 흥미로운 WebGL 세상을 탐험하는 가이드로서 저는 매우 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 사람으로서, WebGL은 웹 브라우저에서 마법의 그림笔 같은东西입니다. 여러분의 웹 페이지에 아름다운 3D 그래픽을 만들 수 있게 해줍니다! 그麼, 우리는 손을 걷어붙이고 시작해보죠?
Creating HTML-5 Canvas Element
먼저, 그림을 그릴 캔버스가 필요합니다. HTML5에서는 <canvas> 요소라는 멋진 것을 가지고 있습니다. 이 것은 우리가 WebGL 걸작을 그릴 빈 종이 같은东西입니다.
우리의 캔버스를 만들어보죠:
<canvas id="myWebGLCanvas" width="800" height="600">
Your browser does not support HTML5 canvas.
</canvas>이 코드는 800픽셀 너비와 600픽셀 높이의 캔버스를 만듭니다. 우리는 "myWebGLCanvas"라는 ID를 부여했습니다 - 이것은 우리 캔버스의 이름표라고 생각해보세요. 태그 안의 텍스트는 캔버스를 지원하지 않는 브라우저를 위한 대체 메시지입니다 (но don't worry, 대부분의 최신 브라우저는 캔버스를 지원합니다).
Get the Canvas ID
이제 우리의 캔버스가 있으므로, JavaScript 코드에서 이를 가져와야 합니다. 우리는 getElementById 메서드를 사용하여 캔버스를 호출합니다. 캔버스를 이름표로 부르는 것과 같습니다.
let canvas = document.getElementById('myWebGLCanvas');이 줄은 우리의 캔버스 요소를 찾아 canvas라는 변수에 저장합니다. 쉽죠!
Get the WebGL Drawing Context
이제 흥미로운 부분입니다 - 우리의 WebGL 콘텍스트를 가져오는 것입니다. 콘텍스트는 우리가 캔버스에서 사용할 마법의 그림 도구 집합입니다.
let gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGL not supported, falling back on experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('Your browser does not support WebGL');
}이를 조금 더 설명드리겠습니다:
- 우리는
getContext('webgl')을 사용하여 WebGL 콘텍스트를 가져려고 합니다. - 이가 안되면 (아마 브라우저가 오래된 것일까요),
experimental-webgl을 시도합니다. - 여전히 콘텍스트를 가져오지 못하면, 사용자에게 브라우저가 WebGL을 지원하지 않는다고 경고합니다.
WebGLContextAttributes
우리가 WebGL 콘텍스트를 만들 때, 그 행동을 맞추기 위해 몇 가지 속성을 지정할 수 있습니다. 이는 마법의 그림笔 설정을 선택하는 것과 같습니다. 다음은 사용할 수 있는 속성의 표입니다:
| 속성 | 설명 | 기본값 |
|---|---|---|
| alpha | 캔버스에 알파 버퍼를 포함 | true |
| depth | 그리기 버퍼에 최소 16비트의 깊이 버퍼를 포함 | true |
| stencil | 그리기 버퍼에 최소 8비트의 스텐실 버퍼를 포함 | false |
| antialias | 그리기 버퍼가 항아lias를 수행 | true |
| premultipliedAlpha | 페이지 컴포지터는 그리기 버퍼가 알파를 곱한 색상을 포함한다고 가정 | true |
| preserveDrawingBuffer | 버퍼가 지워지지 않고 그 값들을 유지 | false |
| failIfMajorPerformanceCaveat | 시스템 성능이 낮으면 콘텍스트 생성이 실패 | false |
이러한 속성을 사용하려면, 콘텍스트를 가져올 때 객체를 전달할 수 있습니다:
let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};
let gl = canvas.getContext('webgl', contextAttributes);WebGLRenderingContext
이제 우리의 WebGL 콘텍스트가 있으므로, 그 그림 방법과 속성을 사용하여 놀라운 그래픽을 만들 수 있습니다. WebGLRenderingContext은 모든 WebGL 그리기 함수를 제공합니다.
다음은 캔버스를 하늘藍색으로 지우는 간단한 예제입니다:
if (gl) {
// 하늘藍색으로 지우기 설정
gl.clearColor(0.529, 0.808, 0.922, 1.0);
// 지정된 지우기 색상으로 컬러 버퍼 지우기
gl.clear(gl.COLOR_BUFFER_BIT);
}이를 조금 더 설명드리겠습니다:
-
gl.clearColor(0.529, 0.808, 0.922, 1.0): 이는 캔버스를 지울 때 사용할 색상을 설정합니다. 이 숫자는 적, 녹, 청, 알파 값으로, 각각 0에서 1 사이의 범위를 가집니다. -
gl.clear(gl.COLOR_BUFFER_BIT): 이는 우리의 지정된 색상으로 캔버스를 지웁니다.
그리고 바로! 여러분은 첫 WebGL 걸작을 그렸습니다 - 아름다운 하늘藍색의 캔버스!
기억하세요, 이것이 시작에 불과합니다. WebGL은 복잡한 3D 그래픽을 만들 수 있는 많은 기능을 가지고 있습니다. 그림을 그리는 것처럼, 우리는 빈 캔버스와 단일 색상으로 시작하지만, 연습을 통해 곧 복잡한 3D 세계를 만들 수 있을 것입니다!
이 소개를 마무리할 때, 제가 이 개념을 처음 가르쳤던 때를 떠올립니다. 제가 한 학생은 캔버스를 다양한 색상으로 지우는 것에 너무 흥분하여, 오후 내내 "색상 변환 분위기 등불" 프로그램을 만들었습니다. 이는 가장 간단한 개념조차 놀라운 창의성을 불러일으킬 수 있다는 것을 보여줍니다!
다음 강의에서는 WebGL을 더 깊이 탐구하고 몇 가지 모양을 그리기 시작할 것입니다. 그till then, 행복하게 코딩하시고, 여러분의 캔버스 항상 아름다운 색상으로 가득 차기를 바랍니다!
Credits: Image by storyset