Tama's Workshop
まったり開発もどき
WebGLではじめるGPGPU入門
著者
- tama
- Happinessfield
- GitHub: @yasuda0102
- Twitter: @Happinessfield
概要
- 2ヶ月前まで、「WebGLなんもわからん」状態だった著者が、プライベートの時間を全て注ぎ込んで書き上げました
- WebGLはいいぞい
- 初出イベント
- 価格
- ￥1,000
- ページ数
- 102p
- 電子版/通販
- 未定…
問い合わせ先
本書の内容に関する問い合わせは、メールもしくはTwitterで受け付けています。
- Mail: tama@ttk1.net
- Twitter: @mscle11
目次
- まえがき
- 第1章 はじめに
- なぜWebGLなのか
- 物理エンジンとGPGPU
- 本書の構成
- 第2章 WebGL入門
- WebGLとは
- WebGLの特徴
- グラフィックスパイプライン
- OpenGL Shading Language（GLSL）
- プログラムの流れ
- 環境構築
- 第3章 GPGPU
- GPGPUとは何か？
- なぜ計算が高速なのか？
- WebGLでGPGPUをやるために必要な知識
- Transform Feedbackを用いた計算サンプル
- 第4章 物理エンジン: 多体問題
- 多体問題とは何か？
- WebGLプログラムの実装
- 計算のためのシェーダの実装
- 考察
- あとがき
サンプルコード
本書で紹介したコードはこちらからダウンロードできます
- 第2章
- sample01.html
- WebGLTemplate
- 環境構築の節で作った、WebGLプロジェクトのたたき台
- 第3章
- 第4章
注意
- デモを動作させるには、少なくともWebGL 2.0に対応した環境が必要です
- サンプルコードには修正を入れており、本の記述とは異なる箇所があります
補足
88ページ、3. 型付き配列をテクスチャとしてVRAMに転送する
pTex, vTex, aTex, mTex のテクスチャの大きさは、(N, 1) となるという説明が抜けていました。
1次元配列 P, V, A, M を横方向に細長い2次元配列に変換するというイメージです。
実際に横方向に細長いテクスチャを作成している箇所は、 createTexture() 関数の51-52行目の gl.texImage2D() メソッドです。
このメソッドは、テクスチャ領域の確保とVRAMへのデータの転送を行うために必要です。以下に gl.texImage2D() メソッドの引数の説明をします。
- 第1引数 テクスチャの種類を指定します。ここでは
gl.TEXTURE_2Dを指定しています。これは2次元テクスチャであることを意味します。 - 第2引数 ミップマップのレベルを指定します。今回はミップマップを使用しないため、ここでは
0を指定しています。 - 第3引数 テクスチャの色成分を指定します。ここでは呼び出し元から渡ってきた
iformatを指定しています。 - 第4引数 テクスチャの横幅を指定します。ここでは呼び出し元から渡ってきた
list, dimensionを使って横幅を計算します。 - 第5引数 テクスチャの縦幅を指定します。ここでは
1で固定します。 - 第6引数 ボーダーの幅を指定します。この引数は必ず
0を指定する必要があります。 - 第7引数 テクスチャのピクセル(テクセル)のフォーマットを指定します。ここでは呼び出し元から渡ってきた
formatを指定しています。 - 第8引数 テクセルデータのデータタイプを指定します。ここでは呼び出し元から渡ってきた
typeを指定しています。 - 第9引数 テクスチャデータを指定します。ここでは呼び出し元から渡ってきた
listを指定しています。
iformat によって、 format, type は決まります。
このことはWebGL 2.0 APIクイックリファレンスガイドの5ページに書かれています。
例えば、iformatにgl.RGBA32Fを指定すると、formatはgl.RGBA, typeはgl.FLOATにしなければなりません。
訂正
25ページ、リスト 2.6 の 13-15 行目
// float 値を 1 つだけ指定
mat2 d = mat2(1.0); // = mat2(1.0 * 2.0 + 3.0 * 3.0, 2.0 * 2.0 + 4.0 * 3.0,
// 1.0 * 4.0 + 3.0 * 5.0, 2.0 * 4.0 + 4.0 * 5.0)
となっていますが、正しくは
// float 値を 1 つだけ指定
mat2 d = mat2(1.0); // = mat2(1.0, 0.0,
// 0.0, 1.0)
でした。