フレームバッファー API を projection mapping とそれに続く shadow mapping の課題で履修できたものとして、これから学習する WebGL API をまとめておく。 まず WebGLRenderbuffer 周りを押さえる。これには WebGLTexture API と類比的な対応物があると憶えておく。

// gl.createTexture() に類比的なメソッド
WebGLRenderbuffer gl.createRenderbuffer();

// gl.bindTexture に類比的なメソッド
void gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);

// gl.framebufferTexture2D に類比的なメソッド
void gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, renderbuffer);

// gl.texImage2D に類比的なメソッド
void gl.renderbufferStorage(gl.RENDERBUFFER, internalFormat, width, height);

ゆっくりダンジョンマスターのレベル 3 前半を聴きながら麻雀の練習。

2:55 消灯。

13:25 室内が寒い。一日中眠っていたいが起床。PC を点けてアジフライ弁当を食う。

14:30 歌謡曲の MP3 ファイル二つを作成、編集。

16:05 外出。スカイツリー展望台一階トイレ。 二階の三省堂書店に移動して雑誌チェック。アエラの楳図かずお先生展覧会記事は要チェック。 伊藤潤二先生がレポートしてくれている。適切な人選だ。

押上駅バス停。錦糸町駅行きに乗ってそのまま終点まで移動。 アルカキット錦糸町の出入口で体温チェック。

17:15 オリナス錦糸町二階ベンチ。休憩。

18:00 タイトー F ステーションオリナス錦糸町店。MJ プロ卓東風戦 4 クレ。 強引な待ちでも贅沢言わずにリーチリーチで何とか浮きで終える。

【SCORE】
合計SCORE:+98.8

【最終段位】
四人打ち段位:飛龍 幻球:9

【2/14の最新8試合の履歴】
1st|*--*--*-
2nd|----**--
3rd|--*----*
4th|-*------
old         new

【順位】
1位回数:3(37.50%)
2位回数:2(25.00%)
3位回数:2(25.00%)
4位回数:1(12.50%)
平均順位:2.13

プレイ局数:42局

【打ち筋】
アガリ率:26.19%(11/42)
平均アガリ翻:3.45翻
平均アガリ巡目:11.55巡
振込み率:4.76%(2/42)

【2/14の最高役】
・跳満
・跳満

20:10 カスミオリナス錦糸町店。363 円。

  • 三種丼（豚レバーニンニク芽・菜の花干しエビ・肉団子）
  • 野菜ジュース (900)

20:40 ビッグエー墨田業平店。234 円。豆腐を買い忘れる。

  • スライスチーズ (5)
  • ソーセージパン
  • コッペパンいちごジャム

曳舟の部屋。携帯電話充電開始。入浴。

21:25 風呂から出る。服がまだ乾き切っていない。PC を起こして晩飯。 インターネットをチェックしたら WebGL コード精読とリファクタリングに戻る。

// 画素の矩形範囲にあるデータを得る。
// オブジェクト pixels は type によって決める。
// gl.UNSIGNED_INT ならば矩形範囲の大きさに見合う長さの Uint8Array オブジェクトを渡す。
void gl.readPixels(x, y, width, height, format, type, pixels);

教材のコードでは、 ツーパス描画の最初のパスでオブジェクトを塗る色を RGBA ではなく、 各オブジェクトに一意的な数値にしている。これを上記メソッドで読み込み、 JavaScript 側で持っているオブジェクトを特定するのに使う。これでピックを実現する。 あとはフレーム数に応じてハイライト色を決める。処理の概要を理解できた。

23:20 行列を読解し終わる。それぞれのパスで投影行列を変える。 FBO に描画するときにはマウス位置の点一つだけでいいので、そういう行列を計算する。 これでピックの処理効率がひじょうに良くなる。