WebGL Lesson 1 – A triangle and a square 에 대한 자습서 이고, 너무 길어서 나누어 올린다.
Lesson 2부터는 상당히 짧아질 것 같다. NeHe의 Article을 참고 하고 있다. Lesson 1의 소스는 GitHub에 있고, 라이브 데모는 여기. 나도 개 고생중이지만, 일반 웹개발자에게 webgl은 쉽지 않다. webgl이 어려운게 아니라 3D가 어렵다.(생소하다.)
Buffer
WebGL에서 Buffer는 구현상 필수는 아닌듯 하지만 이런 튜토리얼 이 아닌 실제 프로그램을 할려면, 성능 문제로 반드시 써야 하는 것으로 보인다. buffer 는 말그대로 webgl에서 다룰 데이터를 미리 담아두는 공간이다. 담기는 데이터의 크기와 형태에 따라 버퍼사이즈는 자동으로 결정된다. (spec 상으론 명시적 지정도 가능하다.) 도형을 그리기 위한 vertex buffer를 다루는 프로세스는 다음과 같다.
createBuffer -> ARRAY_BUFFER에 Binding -> set Data
재미있는건 binding이란 과정이다.
buffer만이 아닌 webgl에서의 많은 객체들은 안에 무언가 대입을 하려면 먼저 어딘가 정해진 곳에 binding을 해야 한다.
buffer의 경우는 ARRAY_BUFFER에 바인딩을 하며, 다룰 buffer가 여러개면 ARRAY_BUFFER에 하나씩 binding을 하며 작업한다.
initBuffer() 소스를 보자.
initBuffer()
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3; //좌표정보의 축 수.
triangleVertexPositionBuffer.numItems = 3; //Vertex 수. 꼭지점 수.
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
triangleVertexPositionBuffer 라는 요즘 유행하는 풀 스펠링 타입의 javascript변수에 createBuffer()로 빈 buffer를 생성한다.
그리고 ARRAY_BUFFER에 바인딩을 한다.
그리고 나서 이 이 레슨에서 처음으로 매트릭스(행열)가 나온다. webgl에서 행열은 행열처럼 보이도록 하고 있지만 javascript로는 그냥 1차원 배열이다.
마치 3x3행열로 보이는 vertices는 length 9의 배열이다. 이를 행열처럼 사용하기 위해선 두가지 정의가 필요한데 바로 행과 열의 정의이다. 그것을 레슨에선 itemSize, numItems라 표현한다. 이 두 변수는 buffer객체의 프로퍼티가 아니다. Javascript의 특성을 이용하여 임의로 만든 프로퍼티이다.
vertices는 3차원상의 좌표이므로 한 Item(vertex)의 size는 3이며(x,y,z), 삼각형을 그리려면 numItems는 3이 된다. 사각형은 같은 이유로 itemSize는 동일하게 3, numItems는 4이다.
이렇게 선언된 행열(실은 그냥 배열)vertices는 bufferDate()의 인자로 Float32로 형변환이 되어 대입된다. gl.STATIC_DRAW는 buffer data의 형태를 알려주는 파라미터로 정적인 데이터임을 알려주고 있다. STREAM_DRAW, DYNAMIC_DRAW도 있지만 레슨에선 다루지 않고 있다. 이렇게 해서 삼각형과 사각형 버퍼객체를 만들었다. 레슨에선 심플한 구성을 위해 전역변수 2개로 처리했다.
이제 이렇게 만든 buffer를 program에 넘기고(?), 'buffer에 있는걸 그려!' 라고 하면 된다.
다음은 대망의 drawscene() 인데.. 그전에 WebGL이 아닌 3D를 그리는 법에 대해 한번 정리하겠다. 안그러면 drawscene() 설명이 산으로 갈듯.
졸면서 썼더니 배열과 행열을 맘대로 적어서 수정. ㅡㅡ;
Comments List