Learning WebGL Lesson1

WebGL

結局AndroidやWindowsPhoneなどを勉強して後回しになっていたWebGLを再開。すべてを忘れていたのでhttp://learningwebgl.com/blog/?p=28を見て勉強。メインの部分をちょっと訳す。

    • -

A quick warning: These lessons are・・・

注意事項：以下の説明はプログラミング未経験者を対象としてない。プログラミング経験はあるが3Dグラフィック未経験を対象としている。ソースコードはGithub(リンクあり)か「ソースコードを表示」を行って取得すること。

WebGLStart()の中の、まずinitBuffers()から説明する。

triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
(頂点の定義は略)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;

頂点の位置のバッファを作って、以下の処理をtriangleVertexPositionBufferにバインドする。頂点の位置はJavaScriptのリストを使って定義する。bufferData()で今定義した頂点に基づいたFloat32Arrayを作る。Float32Arrayの説明はまたあとで。最後の2行のプロパティを定義した。numItemsは頂点数、itemSizeはリスト数(以下、四角形の訳は省略)。これで頂点の定義は終了。次はdrawScene()に移ろう。

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

viewport()でcanvasのサイズを設定。mat4.perspective()に関してはこちらを参照。

(休憩)