Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebGLで浮動小数点テクスチャを扱う話

1,682 views

Published on

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

Published in: Technology
  • Be the first to comment

WebGLで浮動小数点テクスチャを扱う話

  1. 1. 浮動小数点テクスチャについて 浮動小数点テクスチャを扱う際に初心者がつまずくこと (初心者が浮動小数点テクスチャを使うとは言っていない) @kyasbal_1994 (石井 翔)
  2. 2. 浮動小数点テクスチャの利用手法1 • CPU書き込み+GPU読み込み • シェーダーリソースとして浮動小数点テクスチャを用いるとき • CPU側でテクスチャに書き込んでGPU側で用いる際 • 用途: スキニング用の行列配列を渡す場合など • gl.getExtension(”OES_texture_float”)がnull以外を返せば使用可能
  3. 3. 浮動小数点テクスチャの利用手法2 • GPU書き込みを伴う場合 • フレームバッファーに浮動小数点テクスチャをアタッチするとき • GPU側でテクスチャに書き込む。(CPU側でさらに読み込みが必要なケースも 含む) • 用途: G-Buffer、数値的なシミュレーション等 • gl.getExtension(“OES_texture_float”)でnull以外を返せばOK….ではない。
  4. 4. WEBGL_color_buffer_float • 実は浮動小数点テクスチャの書き込みに関しては別のGL拡張 • これで晴れてgl.getExtension(“WEBGL_color_buffer_float”)がnullじゃな かったら使える • この拡張をサポートしてても、これがnullを返す場合がある。 (と言うかこれがnull以外を返すケースを見たことがない) ….わけではない。
  5. 5. WEBGL_color_buffer_float • 一度テクスチャ作って、FBOとバインドして、ステータスを見てみるし かない。
  6. 6. WEBGL_color_buffer_float • 一度テクスチャ作って、FBOとバインドして、ステータスを見てみるし かない。
  7. 7. こんな仕様おかしいよ!
  8. 8. こんな仕様おかしいよ!
  9. 9. 浮動小数点テクスチャが描画対象として、 利用できない時は…? • UBYTEのRGBAテクスチャに落とし込むしかない。 • どうパッキングするか? • 格納する小数を以下の2パターンに分類する • その小数のとりうる最大値、最小値がわかっている時(今日はここだけ) • どうしても浮動小数がいい時(IEEE 754に無理やり丸める)
  10. 10. 最大値、最小値がわかっている時 • 事実上の256進数として各ベクトルの要素を用いて表現して格納する。
  11. 11. 最大値、最小値がわかっている時 • 普通に各要素から復元する。
  12. 12. 最大値、最小値がわかっている時 • 32bit分必要ない時は、ベクトルの長さを変えて16,24bit分でも格納する のは容易 • パッキングとアンパッキングが比較的高速 • N bit用いる時の最大数値誤差は最小値から最大値まで均等に分布し、 以下のように表される。 𝜖 𝑁 = 1 2 𝑁 − 1 (𝑀𝑎𝑥 − 𝑀𝑖𝑛)
  13. 13. 最大値最小値を理論的に求める (時間が余った時用) • 例えば、ある法線の圧縮の計算式(|𝕟 𝑥𝑦𝑧| = 1を仮定)は以下のように表 せる 𝕖 𝑥𝑦 = 𝕟 𝑥𝑦 8𝕟 𝑧 + 8 + 1 2 , 1 2 (CryEngineが採用している法線圧縮方式) • ただし、(0,0,-1)は除外点 (ビュー空間の時、(0,0,-1)は映らない位置にあるため) • これの最大値、最小値は高校数学ぐらいの知識で求まる。
  14. 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. 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テクス チャに先ほどの式でパッキングできる。

×