【WebGL】デイリーコーディング3日目

～～～3日目～～～

前回の頂点色を塗った三角形を2つ表示させました。
2つ表示させるといっても2つのモデルを用意するのではなく
VBO(VertexBufferObject)を使いまわして1つのモデルで複数モデルを表示させました。

同じ頂点バッファを使用するので2回モデル座標移動を行い、
それぞれ座標変換行列を計算して描画すれば、2つのモデルを表示することができました。

今回はglslの コードに変更は加えていません。
その代わりに、シェーダーのコンパイルやバーテックスシェーダーとフラグメントシェーダーのリンクなどを行うjavascriptのコードに変更を加えました。

// シェーダー作成
var v_shader = create_shader('vs');
var f_shader = create_shader('fs');
 
// プログラムオブジェクトの生成とリンク
var prg = create_program(v_shader, f_shader);
 
// attributeLocationを配列に取得、格納
var attLocation = new Array(2);
attLocation[0] = gl.getAttribLocation(prg, 'position');
attLocation[1] = gl.getAttribLocation(prg, 'color');
 
// attributeで宣言された変数の要素数を格納する
// 頂点なら3つ、カラーなら4つ
var attStride = new Array(2);
attStride[0] = 3;
attStride[1] = 4;
 
// 頂点座標の定義
var position = [
    0.0, 1.0, 0.0,
    1.0, 0.0, 0.0,
    -1.0, 0.0,0.0
];
// 頂点色の定義
var color = [
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0    
];
 
// vboの生成
var pos_vbo = create_vbo(position);
var col_vbo = create_vbo(color);
 
// vboをシェーダーにバインドして登録する(ユーザー定義)
set_attribute([pos_vbo, col_vbo], attLocation, attStride);
 
// uniformLocationの取得
var uniLocation = gl.getUniformLocation(prg, 'mvpMatrix');
 
// 座標変換行列の計算は複数モデルで共通
// miniMatrix.jsのmatIVメソッドをインスタンス化
var m = new matIV();
 
// M,V,P座標初期化
var mMatrix = m.identity(m.create());
var vMatrix = m.identity(m.create());
var pMatrix = m.identity(m.create());
var tmpMatrix = m.identity(m.create());
var mvpMatrix = m.identity(m.create());
 
// 座標変換行列算出
m.lookAt([0.0, 0.0, 3.0], [0.0, 0.0, 0.0], [0.0, 1.0, 0.0], vMatrix);
m.perspective(90, c.width / c.height, 0.1, 100.0, pMatrix);
m.multiply(pMatrix, vMatrix, tmpMatrix);
 
//  -----モデル1-----
// ここからモデルごとにモデル座標を移動させてレンダリング
// モデル1の座標移動
m.translate(mMatrix, [1.5, 0.0, 0.0], mMatrix);
// 座標変換行列完成
m.multiply(tmpMatrix, mMatrix, mvpMatrix);
 
// uniformLocationへ座標変換行列を登録し描画する
gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
 
// レンダリング
gl.drawArrays(gl.TRIANGLES, 0, 3);
 
// -----モデル2-----
// モデル2用にモデル座標変数の初期化、座標移動
m.identity(mMatrix);
m.translate(mMatrix, [-1.5, 0.0, 0.0], mMatrix);
 
// 座標変換行列完成
m.multiply(tmpMatrix, mMatrix, mvpMatrix);
 
// uniformLocationへ座標変換行列を登録し描画する
gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);
 
// レンダリング
gl.drawArrays(gl.TRIANGLES, 0, 3);

モデルを2つ描画させるのに行った特別な処理は主に上のようになりました。
元のモデルを複数用意するのではなくvboを使いまわすことで同じモデルを複数描画しています。
同じモデルを違う形で大量に表示する時に効果を発揮してくれそう打と思いました。(違うかも)

三角形が2つ出てきました。うれしい！

勉強させていただいたページです。

～～～所感～～～

コーディングのほうは毎日続いているのですが、記録記事の更新がまだ慣れず...
今日は上のようにコードを一気に書いてコメント入れて残しておくみたいなやり方を試しました。
見にくい...ほかのブログを読んで何が良いかを研究してみます。

ブログにはそこまで重きを置いていないのですが、基本「続ける」をテーマにやっているので、
どうせなら自分も気持ちよく書けたらなと思います。

今日できたらもう1記事書いてみます。