石橋を叩いて渡るGL

　WebGL関連の覚え書きというかスニペット集みたいな感じですが、一部位置情報の取得みたいな話題も出てきます。

• JavaScriptはある程度のレベルで分かっていること
• ベクトル・行列・座標変換（アフィン変換）などの数学の知識があること
• 固定パイプラインについては説明しないので他で勉強してください
• フォント関連の用語も前触れなしに出てきます
• テクスチャ周りはGhostscript・ImageMagickで画像を作ってます

はじめの一歩 01 Jul 2024

• 最低限のコードで動かす
• 見通しをよくする
• uniformの指定
• バッファと頂点属性

座標と行列 02 Jul 2024

• 座標系の確認
• 行列
• CSSとの関係

テクスチャ 06 Jul 2024

• とりあえず貼ってみる
• テクスチャ座標系
• MIPMAP
• 複数のテクスチャを使う
• ひとつの画像に複数のテクスチャを押し込む

フォント描画 07 Jul 2024

• 等幅フォント
• ブレンド・アルファ合成で色を付ける
• プロポーショナルフォント
• ギリシャ文字も出してみる
• 複数のフォントを同時に表示

自力で行列演算 09 Jul 2024

• 平行移動
• 拡大縮小
• 回転
  • Z軸まわり
  • X軸まわり
  • Y軸まわり

行列の積と投影 12 Jul 2024

• 行列の積・平行投影
• 透視投影
• 球面座標
  • 平射図法
  • 心射図法

太さのある線 17 Jul 2024

• 3D空間で幅を持たせる
• 3D空間で棒状にする
• 2D空間で一定の幅にする
• 途中で太さを変えたい

端末位置情報 19 Jul 2024

• デバイスの向きを取得する
• WebGLで表示してみる
  • 心射図法による実装
  • 平射図法による実装

北はどっち？ 26 Jul 2024

• 端末の方向
• iOSのwebkitCompassHeading
• 太さのある線、再び 31 Jul 2024

行列をもう少し極める 15 Aug 2024

フラグメントシェーダー芸 20 Aug 2024

• 円を描く
  • discardの効果
• 枠を描く
• 角を落とす
• 太さのある線、みたび
• 裏表のある話

北はこっち！ 31 Aug 2024

• Zファイトの解決
• 赤道を描く（ラウンドキャップ直線の問題点）
• 裏面を描く（カリング）
• ベクトルクラス
• 回転軸の計算
• 回転の実行
• 端末を下に向けた場合を調べる

本当の北はこっち！！ 09 Sep 2024

• 本当の北
• カクカク動く北
• ステンシルによるクリッピング
• 重なっている半透明オブジェクト

端末から見た世界 27 Sep 2024

---

Copyright (C) 2024 akamoz.jp