投稿者 tel | 2014年5月31日

WebGLでフォントをテキストを表示する

WebGLでテキストを表示する方法を考えてみる。

  • HTMLタグで書いてCanvasの上にかぶせる。
  • 別のCanvasで書いてテクスチャにしてポリゴンに貼り付ける。
  • フォントのテクスチャを用意して1文字ずつポリゴン使って描画する。

3D空間に表示する必要がないなら1つ目が一番簡単。2つ目も比較的楽にできそう。ただリアルタイムにやるのはちょっとパフォーマンスが心配。

一番めんどくさそうな3つ目を実装してみた。

前に作ったフォント用のテクスチャを作るやつでテクスチャを作る。http://sapphire-al2o3.github.io/font_tex/

テクスチャとjsonを読み込んでテキストを描画する。

font

テクスチャはこんな感じ。

// WebGLコンテキストを設定
Font.init(gl);

// テクスチャを読み込み	
loadTexture('font.png', function(img) {
    font.setTexture(img);
});

// フォント設定を読み込み
load('font.json', function(data) {
    font.font = data;
});

// テキスト描画
function render() {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    font.textAlign = 'center';
    font.drawText('WebGL Font', 0, 0);
    font.draw();
    gl.flush();
}

webgl_font_ss


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。