2021/02/14 - メガデモ勉強会2021
自己紹介
ukonpower
💻: フロントエンドエンジニア
💗: Three.js / WebGL / Blender
目次
このLTってなに
普通のサイトでもレイマーチングがしたい！
そう思ってる人も多いはず
そんな人達の人柱となるべくしてサイトを作りました
Web寄りのWebGLの話です
ちょうど一番目なので準備運動だと思って聞いてください
このLTってなに
めっちゃ調整中です
Recollection
WebGL(Three.js) / Blender などを用いて作成したシーンをまとめるページ。
頑張って比較的品質の良いものをつくる。
ポリゴン ↔ レイマーチング
ポリゴン
レイマーチング
狙った絵が出しやすいので情報を見せるのに向いてる（まあ当たり前
抽象的でイメージを伝えるのには向いてるが、具体的な情報を出すには高負荷になりがち
Webでレイマーチングを使うには
情報
→ ポリゴン
雰囲気
→ レイマーチング
Webでレイマーチングを使うには
情報
→ ポリゴン
雰囲気
→ レイマーチング
結論：
ハイブリッドレンダリング
ラスタライズとレイマーチングのハイブリッドレンダリング
ラスタライズ
Color
Depth
レイマーチング
Color
Depth
オレオレデプステスト
テクスチャのパッキング
深度データには高い精度が必要。(今回の場合は16bit程度)
Floatテクスチャを利用する事もできるが、未対応の端末でも閲覧できるように深度データのパッキングを行った。
ついでに色もレイマーチング側で計算してパッキングした。
G
16bit
R
G
B
A
8bit
G
D1
D2
R
R
B
B1
B2
Depth
D1
D2
Depth
B1
Color
R
G
B2
5bit
3bit
テクスチャのパッキング
大変参考にさせていただきました
@edo_m18: floatの値を4つの8bit intに変換して保持するhttps://qiita.com/edo_m18/items/4b23846b8a97ec2a21de
Packing 3 Colour Channels Into 2 https://community.khronos.org/t/packing-3-colour-channels-into-2/56315
レイマーチングの軽量化
レイマーチングにおいてのLOD
if( sdBox( p, size ) < 0.2 ) {
for (int i = 0; i < 2; i++) {
p.zy = abs(p.zy);
p.xz *= rotate( 0.1 );
// ...略
}
}
d = sdBox( p, size );
がむさん(@gam0022)に教わった手法です!!
レイとオブジェクトとの距離が近いときだけIFSを行う
IFS
毎回複雑な計算がされないためかなり軽量化されます！
底上げ(解像度の調整）
軽量化として取り上げるのはアレですが....
レイマーチングの描画解像度を若干下げてます
レンダーパイプライン
シーンの描画からポストプロセスなどのレンダリングフローの制御 → レンダーパイプライン
Scene
Bright
Composite
(Postprocess)
RenderTarget1
RenderTarget2
RenderTarget3
Edge
BWCalc
Blending
①
②
Blur1
Blur1
Blur1
Blur1
Blur1
Blur1
Blur1
Blur1
Raymarch
Mix
SceneDepth
Content
SceneMixer
SMAA
Bloom
Bloom
4段階の縮小バッファを用いてます。
縮小バッファを使うことは超おすすめです。(ぶっちゃけこれだけで絵が持つ)
SMAA (アンチエイリアス)
お気に入りのアンチエイリアス
比較はしてないけど品質良いしパフォーマンスもそんなに気にするほどじゃなさそう...?
MSDF
テキストをディスタンスフィールドテクスチャで描画する
→ テクスチャ解像度によるジャギりがなくなる
MSDF
テクスチャジェネレータ
文字の座標などが入ったjson
ディスタンスフィールドテクスチャ
まとめ
日常でレイをマーチングできる世界を目指しましょう！！