やはり WebGL2 の学習を進めよう。

  • WebGL2 Pulling Vertices コードを分析する。
    • 昨日か一昨日習った vertexAttribIPointer を用いる。インデックス二種類が交互に配列されるデータを与える。 それゆえ二番目の実引数は 2 となる。 positionIndexUVIndex という整数型 48 要素の配列がそれで、 偶数番目と奇数番目の整数が配列 positions と uvs のインデックスをそれぞれ表す。
    • 市松模様のテクスチャーを即席で定義する手法は以前学んだ。
    • テクスチャーを 3 単位使用する。ただしそのうちの二つは座標データとして使用する。
    • gl.drawElements 一回の呼び出しでキューブを描画する。
    • 後回しになった。頂点シェーダーのコードの急所は以前見たものと同じであることを思い出す。 テクスチャーから texelFetch で所望のデータを得る。
    • 座標データのテクスチャーデータを作成する関数 makeDataTexture では、 おなじみの gl.texImage2D で仕様を指定する。ただし実引数はいつもとだいぶ違う。 width, height は極端だし（本文で注釈がある）、GPU フォーマットは gl.RGBA32F という見慣れぬシンボルだ。
  • Karous Hard - Score Art Online Season One run - YouTube: BGM 代わりにする。このゲームの音楽はかなりキているので人には勧められない。

0:50 終了。明日の現場でも携帯電話をいじる時間がないだろうから、先に Twitter をチェックしておこう。

YouTube でテキトーに何か観て 2:00 消灯。

7:05 起床。納豆と米を食う。出勤。

7:45 現場。第一木曜なので不燃ゴミを搬出。何度も書くが量が多い。引っ越しというか夜逃げの準備という量だろう。 さらに昨日残したクサレゴミの分別もある。これは館内の掃き出しを終わってからやる。 菊チャン（仮）はなぜか調味料の大半を残して容器ごと捨てようとする。せめてペットボトルとビンは分けておいてほしい。

10:25 終了。撤収。

イトーヨーカドー曳舟店で体温チェック。手を洗うのを忘れて退店。

10:45 曳舟の部屋。普通の石鹸で手を洗う。PC を開く。 細いインターネット回線だと厳しい作業をたて続けにする。

ビートマニアのユーザーページで色々といじる。特にプレイリスト機能というのがあるので試す。 この作品あと一週間で終わるので、それまでに一度はプレイしないと意味がない作業になる。

11:35 Shadertoy を閲覧したい。ほんとうに遅い。

11:55 閲覧を諦める。WebGL2 Fundamentals の続きをやろう。その他の章でラストか。

  • WebGL2 Setup and Installation: 今回は読むだけになるか？
    • WebGL2 Fundamentals 自体のダウンロードを推奨。 GitHub のページから圧縮ファイルをダウンロードしてローカルディスクに解凍する。 あるいは git clone でプロジェクトディレクトリーを得る。 私はどちらの方法も採らなかった。
    • どちらかの方法で本書のディレクトリーを得ると、ローカル HTTP サーバーを簡単に起動できるツールが使えるらしい。 私は Python の標準モジュールでサーバーを起動する。
    • あとはブラウザーの開発者ツールを上手に使えとか、構文チェッカーも用意したとか、そういう助言。

12:00 おやつ休憩。

  • いきなり四人リーチ!! - YouTube: 先制親リーに子が全員追っかけ。ドラ搭子嵌張をツモって裏 3 も熱い。
  • WebGL2 Boilerplate: 今回は読むだけになるか？
    • シェーダープログラムのビルドは定型処理となる。
    • 本書では GLSL 関連のそういう処理を js ファイルにまとめて用意している。 レッスンの難しさに応じて webgl-utils.js と twgl.js を各回で使い分けている。
    • webgl-lessons-ui.js は HTML 内の特定の部分にスライダーやチェックボックスを追加するライブラリー。 これは使い勝手がすごく良く、存在することに納得がいく。
    • m3.js と m4.js は変換行列ライブラリー。後者を主に利用する。

12:55 だれてきた。

14:25 眠い。昼寝。

16:35 起床。外出。地面が湿っているから一時的に雨が降っていたようだ。 そして押上駅バス停に向かって歩いていると、途中でポツポツと降ってくる。 リュックサックに雨合羽があるから大降りになっても大丈夫だろうと思って荷物をチェックすると、入っていない。 前回使って干してから部屋に置きっぱなしのままか。

押上駅バス停で携帯電話を見ながらバスを待つ。ニュースにすぎやまこういち先生の訃報が。 衝撃のあまり言葉もない。

バスに乗って錦糸公園へ。オリナス錦糸町二階ベンチに移動。携帯電話で Twitter をチェック。 どうもフォロワーサンに PS4 のゼビウスのトップと三着の人がいるらしい。 お互い知り合いでないと思うので黙っておこう。 それにしても、隣のベンチの女子小学生三人組が楽しそうにしていて落ち着く。

18:00 タイトー F ステーションオリナス錦糸町店。MJ プロ卓東風戦 5 クレ。 地蔵ラスからスタートする嫌な展開だが、なんとか大崩れにはならなかった。 調子に乗ってフリー対決に挑まなくて正解だった。

【SCORE】
合計SCORE:-66.2

【最終段位】
四人打ち段位:十段 経験値:-74.7

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

【順位】
1位回数:1(11.11%)
2位回数:3(33.33%)
3位回数:3(33.33%)
4位回数:2(22.22%)
平均順位:2.67

プレイ局数:44局

【打ち筋】
アガリ率:13.64%(6/44)
平均アガリ翻:3.33翻
平均アガリ巡目:11.50巡
振込み率:11.36%(5/44)

【10/7の最高役】
・跳満

気分転換にビートマニアをワンゲーム。さっき仕込んだプレイリストを確認したい。 STANDARD モードの選曲画面に自作のリストが各フォルダーと同格の位置にあるわけか。なるほど。 謎の勢力の二曲とナイトシティーを遊ぶ。

20:20 カスミオリナス錦糸町店。361 円。クーポンゲット。

  • 豚レバーニンニクの芽菜の花エビ丼
  • ブラックチョコ (2)

20:35 ビッグエー墨田業平店。355 円。

  • 絹豆腐 (2)
  • 小粒納豆 (3)
  • ミニいなり寿司 (3)
  • カレーヌードル
  • メロンパン

20:45 曳舟の部屋。シャワーを浴びる。風呂から出たら晩飯を食いつつ PC をいじる。

21:55 テザリングを有効にする。メールチェック。返信なし。これはダメだ。

  • WebGL2 Resizing the Canvas
    • キャンバスにはサイズが二つある。一つは描画バッファーのそれ。もう一つは描画されるそれ。 前者のサイズは HTML で言えばキャンバス要素の width, height 属性と同じ。 JavaScript で言えば canvas.width, canvas.height と同じ。 そして後者のサイズは CSS で指定されるものだ。この指定がない場合、 描画されるサイズは描画バッファーのサイズと同じ値が使われる。 この事実を端的に示すのが最初の例だ。
    • 最初の例をローカルで動作させるのに m3.js が要る。 頂点シェーダーの gl_Position の代入の右辺が少し怪しい。もっと単純に書ける。
    • Use clientWidth and clientHeight: これが本書で常用しているパターンとなる。 これらはキャンバスだけでなく HTML の要素一般の属性で、CSS ピクセル単位の値をとる。 描画バッファーのサイズと表示用のサイズが異なる場合、前者に後者を代入する。 二番目の例ではそれを加味するコードを追加する。ただしまだ表示がおかしい。 その理由はここまで読んだ者ならば理解していないとダメだ。
    • Handling devicePixelRatio and Zoom: window.devicePixelRatio という変数がある。 これはモニターの CSS ピクセルに対する実際のピクセルの比率を表す値を通常は持つ。 普通は 1 なのだが、ズーム操作をするとその倍率が値となる。 この値を調整係数として採用できそうだが、実際はできない。
    • canvas.getBoundingClientRect() も細かい理由によりダメ。
    • ResizeObserver と devicePixelContentBoxSize を使える。 完成例をいくらズームイン・アウトしても、線の太さが変わらないことを確認する。
    • 残りは理解を深めるための Canvas 2D API でのデモ。 大きいウィンドウに描画させると効力がわかる。
  • WebGL2 Points, Lines, and Triangles: ここは読むだけ。著者とは反対に、三角形に対しては私は TRIANGLE_FAN と TRIANGLE_STRIP しか使わなかった。 滑らかな曲面を描くにはそうしないとデータ量が多くなり過ぎる。