WebGL初心者の会で話した内容です

1. 浮動小数点テクスチャについて
浮動小数点テクスチャを扱う際に初心者がつまずくこと
(初心者が浮動小数点テクスチャを使うとは言っていない)
@kyasbal_1994 (石井 翔)

2. 浮動小数点テクスチャの利用手法1
• CPU書き込み+GPU読み込み
• シェーダーリソースとして浮動小数点テクスチャを用いるとき
• CPU側でテクスチャに書き込んでGPU側で用いる際
• 用途: スキニング用の行列配列を渡す場合など
• gl.getExtension(”OES_texture_float”)がnull以外を返せば使用可能

3. 浮動小数点テクスチャの利用手法2
• GPU書き込みを伴う場合
• フレームバッファーに浮動小数点テクスチャをアタッチするとき
• GPU側でテクスチャに書き込む。(CPU側でさらに読み込みが必要なケースも
含む)
• 用途: G-Buffer、数値的なシミュレーション等
• gl.getExtension(“OES_texture_float”)でnull以外を返せばOK….ではない。

4. WEBGL_color_buffer_float
• 実は浮動小数点テクスチャの書き込みに関しては別のGL拡張
• これで晴れてgl.getExtension(“WEBGL_color_buffer_float”)がnullじゃな
かったら使える
• この拡張をサポートしてても、これがnullを返す場合がある。
(と言うかこれがnull以外を返すケースを見たことがない)
….わけではない。

5. WEBGL_color_buffer_float
• 一度テクスチャ作って、FBOとバインドして、ステータスを見てみるし
かない。

6. WEBGL_color_buffer_float
• 一度テクスチャ作って、FBOとバインドして、ステータスを見てみるし
かない。

7. こんな仕様おかしいよ!

8. こんな仕様おかしいよ!

9. 浮動小数点テクスチャが描画対象として、
利用できない時は…?
• UBYTEのRGBAテクスチャに落とし込むしかない。
• どうパッキングするか?
• 格納する小数を以下の2パターンに分類する
• その小数のとりうる最大値、最小値がわかっている時(今日はここだけ)
• どうしても浮動小数がいい時(IEEE 754に無理やり丸める)

10. 最大値、最小値がわかっている時
• 事実上の256進数として各ベクトルの要素を用いて表現して格納する。

11. 最大値、最小値がわかっている時
• 普通に各要素から復元する。

12. 最大値、最小値がわかっている時
• 32bit分必要ない時は、ベクトルの長さを変えて16,24bit分でも格納する
のは容易
• パッキングとアンパッキングが比較的高速
• N bit用いる時の最大数値誤差は最小値から最大値まで均等に分布し、
以下のように表される。
𝜖 𝑁 =
1
2 𝑁 − 1
(𝑀𝑎𝑥 − 𝑀𝑖𝑛)

13. 最大値最小値を理論的に求める
(時間が余った時用)
• 例えば、ある法線の圧縮の計算式(|𝕟 𝑥𝑦𝑧| = 1を仮定)は以下のように表
せる
𝕖 𝑥𝑦 =
𝕟 𝑥𝑦
8𝕟 𝑧 + 8
+
1
2
,
1
2
(CryEngineが採用している法線圧縮方式)
• ただし、(0,0,-1)は除外点
(ビュー空間の時、(0,0,-1)は映らない位置にあるため)
• これの最大値、最小値は高校数学ぐらいの知識で求まる。

14. 最大値最小値を理論的に求める
(時間が余った時用)
𝕟 𝑧 = 𝑘とおく
𝑘2 + 𝕟 𝑥
2
+ 𝕟 𝑦
2
= 1
∴ 𝕟 𝑥
2 + 𝕟 𝑦
2 = 1 − 𝑘2
− 1 − 𝑘2 < 𝕟 𝑥, 𝕟 𝑦 < 1 − 𝑘2
𝕖 𝑥𝑦 =
𝕟 𝑥𝑦
8𝑘+8
+
1
2
,
1
2
𝕖 𝑥 =
𝕟 𝑥
8𝑘+8
+
1
2
∵ 𝕟 𝑥と𝕟 𝑦は独立
𝕟 𝑥 = 2𝕖 𝑥 + 1 2 𝑘 + 1
𝕖 𝑥𝑦 =
𝕟 𝑥𝑦
8𝕟 𝑧 + 8
+
1
2
,
1
2

15. 最大値最小値を理論的に求める
(時間が余った時用)
− 1 − 𝑘2 < 2𝕖 𝑥 − 1 2 1 + 𝑘 < 1 − 𝑘2
−2 2 1 + 𝑘 2 1 − 𝑘 +
1
2
< 𝕖 𝑥 < 2 2 1 + 𝑘 2 1 − 𝑘 +
1
2
𝛿
𝛿𝑘
2 1 + 𝑘 2 1 − 𝑘 =
2
− 𝑘−1 𝑘+1 2 3𝑘2
+ 2𝑘 − 1
𝕖 𝑥𝑦 =
𝕟 𝑥𝑦
8𝕟 𝑧 + 8
+
1
2
,
1
2
k=1/3の時、最大、最小となり、求めたい値の最大値、最
小値はkに1/3を入れて計算したもの。 → UBYTEテクス
チャに先ほどの式でパッキングできる。