WebGL に glVertex3f もどきを実装しよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

WebGL は OpenGL ES 2.0 をベースとしているため, glVertex3f や glColor といった機能をサポートしていません. さらにちまたにある WebGL の入門は, いきなり行列や頂点バッファを使う前提だったりシェーダをガリガリ書く入門サイトが目立ちます.

そのせいで WebGL にたいする敷居がかなり高くなっているように感じたので, このブログサイトでは 2D から始めて徐々に WebGL に慣れていけるよう サンプルをつくっていこうと思っています.お付き合い下さい.

Windows 版の OpenGL では大抵 glVertex3f を使って2D描画をするところから始まります. そこで今回は glVertex3f もどきを作成してポンポン 2D 描画できるようにしたいと思います.

とはいってもまぁサポートされていたとしても内部的に効率が良くないのでがっつり 3D ゲームを作ったりする際には使用しないのですが, あくまで勉強用ということで…

以前作ったサンプルに関数を追加するだけで確認できます.

SAMPLE And DATA

サンプルはこちらで見ることができます.

左右に三角形, 中央に四角形を描画しています.

データはここからダウンロードできます

CODE

以前作ったサンプルに追加したコードです.

glVertex3f もどき vertex3 関数を実装

beginDraw() は OpenGL でいう glBegin() にあたります. この関数で頂点バッファを内部で確保します. そして, vertex3 で先ほど確保したバッファに頂点情報を記録します. 最後に, endDraw() で 頂点バッファを WebGL 用に変換してシェーダに流し込みます.

(function(np){
    
    var temp_buffer = null;
    var temp_color = null;
    var temp_matrix = null;
    
    /**
     * 描画開始
     */
    np.beginDraw = function()
    {
        temp_buffer = [];
    };
    
    /**
     * 頂点情報を記録
     */
    np.vertex3 = function(x, y, z)
    {
        temp_buffer.push(x);
        temp_buffer.push(y);
        temp_buffer.push(z);
    };
    
    /**
     * 描画終了
     */
    np.endDraw = function()
    {
        var vertex_buf = createBuffer();
        initBuffer(vertex_buf, temp_buffer);
        
        drawArrays(vertex_buf);
        
        temp_buffer = null;
    };
    
    /**
     * 四角形描画
     */
    np.drawRectangle = function(x, y, width, height)
    {
        var left    = x;
        var right   = x+width;
        var top     = y;
        var bottom  = y+height;
        
        beginDraw();
            vertex3(left, top, 0.0);
            vertex3(left, bottom, 0.0);
            vertex3(right, bottom, 0.0);
            
            vertex3(right,  bottom, 0.0);
            vertex3(right, top, 0.0);
            vertex3(left, top, 0.0);
        endDraw();
    }
    
})(this);

描画部分

実際の使用例です.

/**
 * 描画
 */
function drawScene(gl)
{
    // 画面クリア
    clearDisplay(gl);
    // 描画
    beginDraw();
        // 左側の三角形
        vertex3(-0.5,  0.25, 0.0);
        vertex3(-0.75, -0.25, 0.0);
        vertex3(-0.25, -0.25, 0.0);
        // 右側の三角形
        vertex3(0.5,  0.25, 0.0);
        vertex3(0.25, -0.25, 0.0);
        vertex3(0.75, -0.25, 0.0);
    endDraw();
    // 四角形
    drawRectangle(-0.25, -0.25, 0.5, 0.5);
}

とりあえずこの調子で, glColor や glTranslate といった関数を実装して 2D ゲームだったら簡単に作れるような環境を作っていこうと思います. 時間があれば学生時代に OpenGL で作った ゲームの移植でもしたい.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT