원문은 WebGL Lesson 1 – A triangle and a square 인데, 이 포스트는 원문을 번역한 것이 아니라 스터디를 하며 공부한 내용으로 작성한 것이다. 오류가 있을 수 있다. 부디 WebGL이나 OpenGL을 잘아는 분이 오류가 있다면 딴지를 걸어주시면 감사. 길어서 쪼개서 올릴 예정.
모든 소스는 GitHub repository에 있고 작동 데모는 WebGL를 지원하는 브라우저 에서만 볼 수 있다.
Learning WebGL를 운영하는 Giles Thomas는 지속적으로 강좌들을 다듬고 수정하는 듯 하다. 하지만 소스만 수정하고 강좌 내용은 수정하지 않는 부분들이 있어서 부분적으론 레슨의 설명과 소스가 일치 하지 않는 부분이 있다. 여기선 소스 기준으로 설명한다.
영문인 원문이 부담되는 분들은 firejune님이 번역중인 것을 참고하면 된다. (최고심!)
이번 레슨은 2차원 도형이므로 데모가 큰 의미는 없고, Javascript가 WebGL과 어떻게 관계를 맺는지 간만 보자.
WebGL과 3D관련 용어들은 이전 포스트에 지속적으로 추가, 갱신할 예정이지만 각 레슨에 관련된 주요 용어는 다시 설명해보겠다.
이번 레슨의 소스는 index.html과 glMatrix-0.9.5.min.js로 구성되어있다.
레슨의 모든 소스는 index.html 에 있으며, glMatrix는 WebGL에서 도형(Object or Shader)을 다룰때 반드시 필요한 수학개념인 행열(Matrix)과 벡터(Vector)를 핸들링 하기위한 오픈소스 라이브러리다. 나를 포함한 대부분의 개발자가 10년이상 전에 배운거라 기억할지 모르겠지만 좌표계에서 도형은 행열의 곱(Matrix multiplication)을 통해서 이동, 회전등의 변환(translate)을 할 수 있다.
이게 왜 라이브러리 형태로 필요한가 하면 행열이라는걸 Javascript는 지원하지 않고, WebGL에선 사용해야 하기때문이다.
index.html을 보자.
소스는 위에서 부터 보지 않고 작동 순서를 따라가면서 보겠다.
1. HTML part.
<canvas>가 있는 간단한 HTML 가 있다. 중요한건 이것 한줄이다. canvas는 3D공간을 들여다보는 창 역활을 할것이다. 적절한 명령어를 통해 WebGL과 연결된다.
일단. 윈도우, 카메라등 이해하기 편한대로 상상하자. 그리고 width, height는 꼭 필요하다.
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
2. webGLStart()
onload 이벤트로 실행되는 첫 함수다.
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0); //RGB + alpha
gl.enable(gl.DEPTH_TEST);
drawScene();
}
요약하면 생성자함수 세개(GL, Shaders, Buffers)를 실행, gl이란 객체의 메소드를 두개 실행, 그리고 그리기(drawScene) 이다.
생성자함수들는 따로보도록 하고, gl이란 객체가 처음나온다. 이름으로 유추할 수 있듯이 initGL()로 생성된 WebGL객체이다. (정확히는 WebGLRenderingContext interface의 WebGL Context이다.) 복잡한 설명 다 빼고, 앞으로 나오는 대부분(!)의 gl.xxx 는 javascript가 아닌 WebGL의 메소드이거나 프로퍼티이고, 뭐하는 놈인지가 궁금하면 다음 WebGL Specification document에서 확인할 수 있다.
gl.clearColor()는 바탕색을 정의한다. 4개의 아규먼트는 R,G,B,alpah 값이다. 1.0, 0.0, 0.0, 1.0 으로 바꾸면 레슨의 배경은 빨강색이 된다. 여기선 불투명도 100%에 검정색을 깔았다.
gl.enable()은 on/off계념으로 무언가를 활성화시키는 메소드이다. 여기선 z축방향의 '깊이'를 표현하는 gl.DEPTH_TEST 를 활성화하였다. (DEPTH_TEST는 enum타입의 WebGL 상수값이다.) 이번 레슨은 단순한 2차원 도형이기때문에 사실 이 메소드는 아무 변화를 부르지 않는다. 하지만 레슨3 이후 부터는 gl.DEPTH_TEST를 enable하지 않으면 의도한대로 3D가 표현되지 않는다.
다시 정리하면 webGLStart()는 WebGL, Shader, Buffer를 생성하고, 바탕생을 검정색으로 깐다음, 3D옵션(?)을 켜고, 화면을 그리는 함수다. 결론적으론 별내용은 없다. ㅋ
3. initGL()
var gl;
//객체생성자
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e){
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
canvas 기본적으로 이제 그림을 그릴 빈 공간이다.
이 공간에 어떤 그림을 그릴지(context)를 결정해야 하는데 .getContext()로 context를 호출할 수 있고 현재 공식적으로 "2d" 밖에 아규먼트 값이 없다.
여기선 "experimental-webgl"로 WebGL Context를 호출하고 있다. experimental이란 prefix에서 알 수 있듯이 브라우저에서 정식기능으로 들어갔지만 WebGL자체는 아직도 '실험적' 이다.
어쨌든 다시 돌아와서 initGL()은 WebGL Context를 javascript 변수 gl에 담는게 목표이다. 이후에 사용하기 위해 canvas의 width, height를 gl 객체의 프로퍼티로 저장한다.
이 세줄에서도 Javascript는 빛을 발하는데, variable type의 javascript 변수는 듣보잡(?)인 WebGL도 담아내고, 거기다 webgl에는 있지도 않은 viewportWith, viewportHeight를 지맘대로 만들어서 값을 저장한다.
4. initShaders()
아.. 이건 어렵다. 다음에. ㅎ
Comments List