2011年1月7日金曜日

WebGLでの文字列描画方法

最近"WebGL 文字列"で検索される方が多いのでデモを紹介いたします.
単純な例ですとHTMLCanvasElementの下にHTMLElementをつくってしまえばOKです.
Khronos.orgのDemo Repositoryに例(SpinningBox)があります.
このソースの以下の部分ですね.
<style type="text/css"> 
    canvas {
        //border: 2px solid black;
    }
    .text {
        position:absolute;
        top:100px;
        left:20px;
        font-size:2em;
        color: blue;
    }
</style> 
</head> 
 
<body onload="start()"> 
<canvas id="example"> 
    If you're seeing this your web browser doesn't support the &lt;canvas&gt; element. Ouch!
</canvas> 
<div class="text">This is some text over the canvas</div> 
<div id="framerate"></div> 
</body> 
スタイルシートを使って位置を調整してCanvasに上書きしています.
おそらくこれがもっとも高速で単純だと思われます.

しかし残念ながらOpenGLそのものには文字列描画の機能は存在しません.
ですがWebGLは他のHTMLElementと組み合わせて使うことができます.
静止画のデコーダ,動画のデコーダを何のプラグインを使用することもなく使用できます.
これはすばらしいことです!

現時点でのWebGLの仕様ではImageData, HTMLImageElement, HTMLVideoElement, HTMLCanvasElementをテクスチャとして使用できます.

このHTMLCanvasElementをテクスチャとして使用すればWebGLでも日本語文字列を扱うことができます.
Canvas 2Dを使用するのですが使用方法についてはHTML5.JPに詳しく解説されています.
使用するのは文字列描画に使用するメソッドであるfillTextとstrokeTextです.
これも使用方法がHTML5.JPのこのページで詳しく解説されていますのでとくにここで解説する必要はないかと思います.

で,本当に可能かどうかというのは拙作のデモで御覧ください,日本語も使えます.

詳しく書ける時間があればよいのですが今回はここまで.

3 件のコメント:

  1. 拙作のデモを見たいのですが....

    返信削除
  2. あー!ごめんなさい!
    リンク先のレポジトリは削除済みです(手元にも残ってないです)。

    WebGLじゃなくてCanvasレンダラ使ってますがだいたいこんな感じです。
    http://www18.ocn.ne.jp/~nyamadan/20111026

    返信削除
    返信
    1. ひょー!凄い!ありがとうございます!

      削除