Real-Time 3D Graphics with WebGL 2: Build interactive 3D applications with JavaScript and WebGL 2 (OpenGL ES 3.0), 2nd Edition
が翻訳されるらしく、シェーダー芸が好きなオタクにおかれましては全裸待機されていることと思います
先走って原著眺めておいたので小学生並みの感想を書いておきます
夏休みにまともに読もうと思います
紙本リンク Kindle本リンク 翻訳版(2021/7/21(水)発売予定)リンク
全体
1~10章までサンプルコードが付属していて、しかも動くのでよかったです
ちゃんとletで宣言してます(JavaScript自体がちゃんとしてないだろという方もいるかもしれませんが)
より詳細な目次は下記にあります
O'Reilly Japan - 初めてのWebGL 2 第2版
サンプルコードのごく一部を試したので動画を貼っておきます
1章 イントロ
WebGLのレンダリングの仕組み
実際に車を表示する
ぐりぐり動きます
www.youtube.com
2章 レンダリング
JS配列で頂点とかをどうやって持っているか、クソデカJSONの読み込み
3章 光源
光源の種類、法線の計算、OpenGL ES Shading Language（ESSL）
4章 カメラ
WebGL APIにはカメラがないので、マトリックス芸で仮想カメラを作ってる、サンプルでは右下にカメラ座標をひたすら表示し続ける
5章 アニメーション
JSのsetInterval, setTimeout使って頑張ってアニメにする
6章 色
色、奥行き、透明(アルファ)の設定方法
7章 テクスチャ
オブジェクトへのテクスチャの貼り方
8章 ピッキング
WebGLのシーンからマウスでオブジェクトを選択する
9章 WebGLアプリ
今までの章を使う、GUI設計、Canvasサポートの追加
10章 テクニック
ポスト処理、フレームバッファ、シェーダ設定、レイトレーシング等
11章 WebGL2とは
新機能の解説
12章 次へ
特にテスト、物理ベースレンダリングの項目が面白かった
DOM要素と違って、canvas の要素は検査できない恐ろしい何かなので2種類の方法で頑張る
1.画像回帰テスト(参考)
Visual Regression Testing はじめました – 具体的な運用 Tips – PSYENCE:MEDIA
ものすごくシステム化された目grepみたいなものらしい(たぶん)
2.Application Introspection Testing
これ使っていい感じにやるらしい
github.com
最後に
いかがでしたか？サンプルコードのcommon/models/を見るとaudir8, bmw-i8, niissan-gtr等あるので、車好きな方は色変えたり車種変えたりいろんな角度から光らせたり回転, 移動, 拡大等して遊べると思います
特に回転は実車だと難しいと思うのでお勧めです
