Javardry の第 8 話まで見たい。細い回線なので画面の文字がたまににじんで物語がわからない。

2:00 就寝。

10:15 起床。今すぐにでも降りそうな曇り空。納豆と豆腐を食う。PC へ向かう。

  • WebGL2 3D - Directional Lighting: コードを書く。
    • 3D Cameras のディレクトリーをコピーしたものから始める。
    • シェーダーでは法線ベクトルには vec3 として定義する。
    • 本文で説明されているように断片シェーダーで色を計算し直す。 光の方向は既に反転された値が指定されるものとする。 パイプラインから来た法線ベクトルを明示的に単位化する必要がある。
    • カメラ行列の逆行列を計算するのはいつものことか。 そういえば drawScene 内の計算の一部は関数の外に出せる。
    • 3D Cameras のときにはこのファイルに書いていた行列計算は m4.js へ追い出し済み。
    • 今さらだが zFar は 2000 も要らない。
    • 修正版でシェーダーの行列を二つに置き換える。 u_worldViewProjection を頂点の変換に、 u_world を法線の変換にそれぞれ適用する。
    • 各行列の更新タイミングについてまとめる。
      • cameraMatrix, viewMatrix は一度しか計算しないで済む。
      • worldMatrix は角度指定のときで十分。
      • それ以外の（長い名前の）行列は再描画時に毎回計算する。
    • 最終調整版で法線の向きを確定する。理論がわからないが、デモのシェーディングは確かにまともだ。
    • worldMatrix から worldInverseTransposeMatrix を計算する。 両者とも角度更新のときに更新すれば十分だが、描画時に別の行列計算が前者を参照する。

12:25 少し休んでから次に行く。

  • ゆっくり実況攻略　ドラゴンクエスト４　リバスト伝説　第三話 - YouTube: このゲームをやったことがないから断言はしないが、序盤の城か街にちからのたねがあるだろう。そうでないとキツイ。

  • WebGL2 3D - Point Lighting
    • 当然だが光源の位置を定義する。座標系は？
    • 初版ですでに出来がいい。OpenGL の昔のものでは、こんな少ない頂点数のモデルでこういうシェーディングにはならない。
    • 鏡面反射。ハーフベクトルという概念を導入する。視点から光源への方向、視点からカメラへの方向の中間方向。 これが曲面法線と近ければ近いほど明るいとする。ベクトルの近さとは、スカラー積の値が 1 に近いこととする。 したがってカメラ位置もシェーダー入力とする。JavaScript 部分はシェーダーへの入力以外は変更点はない。
    • 出力色に鏡面反射を単純に加算するので、ひじょうに眩しい絵ができる。 そこで、光沢を導入する。ハーフベクトルに関するスカラー積を何乗（正の実数で）かすることで、 スカラー積の値がよほど 1 に近くならない限りは明るくなり過ぎないようにする。 光沢はスカラー積を調整する値だということが理解できれば OK だろう。
    • 最後に色を二種類、指定可能にする。鏡面反射用と光沢用。 RGB を normalize していることに注意する。本当の色ではないのだ。
  • Every Version of Castlevania “Bloody Tears” ever - YouTube: Sota Fujimori バージョンが異端。

14:10 再生終了とコード終了がうまく同期したのでおやつ休憩にする。

15:35 ゆっくり実況攻略　ドラゴンクエスト４　リバスト伝説　第十話 - YouTube まで視聴。女神像のイベントまで。

即外出。イトーヨーカドー曳舟店で体温チェック。ついでにバイト先の現場管理人室の様子を見に寄り道する。 昨日撤収するときに鍵をかけずに退出したから気になる。いちおう誰かやってくれたらしく、管理人室に施錠がしてある。 鍵も所定の場所に収まっている。安心して休める。

そのまま明治通りまで出る。亀戸駅前行きのバス停があるのでそちらへ向かう。乗って終点へ。 次に西大島駅前までさらなるバスで移動。新宿線に乗る。 これだけバスと電車を乗り継いでもタダだからありがたい。

17:00 セガ船堀店。MJ プロ卓東風戦 5 クレ。 こんなはずではなかったという負けはほとんどない。 先行リーチ者がいるのに暗槓を強いられる局面が二局あったが、仕方がない。

また借金生活に逆戻りだ。

19:00 過ぎ退店。新宿線で船堀駅から住吉駅まで移動。地上に出てバスで錦糸町駅バスターミナルへ。 オリナス錦糸町へ歩く。

20:00 カスミオリナス錦糸町店。610 円。クーポン使用。

  • オクラ茄子丼
  • とり天にんにく胡椒
  • ライス
  • ブラックチョコ (2)

20:25 ビッグエー墨田業平店。298 円。

  • 絹豆腐
  • 小粒納豆 (6)
  • ソーセージパン
  • コッペパンジャム＆マーガリン

20:35 曳舟の部屋に戻る。蒸し暑い。シャワーを浴びる。白ブリーフ一丁になる。 PC を開いて晩飯にする。

  • WebGL2 3D - Spot Lighting
    • 前回の点光源のマイナーチェンジのようでいて、変更点が難しい。
    • さっきから断片シェーダーのほうを変更することに注意。
    • 珍しく GLSL の関数を紹介している。step と smoothstep か。仕様書で見た記憶がある。 著者のこだわりにより、シェーダーコードから条件文を排除するために導入された。
    • 初版のコードではスポットライトがキツい。ある種の閾値を設ける。HTML で UI も追加。 innerLimit < outerLimit が保証される仕組みが欲しい。
    • clamp と smoothstep の違いが絵では微妙。

23:00 照光処理までが WebGL2 Fundamentals の入門編に相当すると思われる。 ここまでのぶんの内容でも習得することでかなりのことができるようになる。素晴らしい教材だ。 バグ報告はいつやろう。GitHub のアカウントからするのがいいか、各ページのコメント欄のほうがいいのか。