「Webのグラフィックス前編: WebGL事例、パフォーマンス」 - HTML5 Conference 2016
-
- いいね！0
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
まずはCPUボトルネックを疑う。 CPUは描画以外のロジックやアニメーション、物理演算等様々な処理を行う。 描画処理を全て省いてみて検証する。 #html5j #html5j_b
2016-09-03 13:43:51
池田 泰延（勉強会用）
@clockmaker_bot
WindowsのChormeは、WebGL命令がレイヤー「ANGLE」によってDIrectXに変換され動いている。 ←すごい、これは知りませんでした！ #html5j #html5j_b
2016-09-03 13:44:45
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
WebGLプロファイラでお勧めなのが、 Web Tracing Framework google.github.io/tracing-framew… #html5j #html5j_b
2016-09-03 13:45:00
池田 泰延（勉強会用）
@clockmaker_bot
Stage3DのAGALみたいなことが、WebGL (Win Chrome)だと実行時に変換されていたのですね。 #html5j #html5j_b
2016-09-03 13:45:43
池田 泰延（勉強会用）
@clockmaker_bot
メッシュのマージやインスタンスドレンダリングを活用するとWebGLは高速化できる可能性がある #html5j #html5j_b
2016-09-03 13:47:08
池田 泰延（勉強会用）
@clockmaker_bot
頂点アトリビュートを設定する際に4バイト(32bit)境界でデータを揃えないと、内部でドライバがアライメントを揃えるためダミーバイトが挿入される。結果として遅くなる。 #html5j #html5j_b
2016-09-03 13:49:56
池田 泰延（勉強会用）
@clockmaker_bot
Three.jsなどのラッパーライブラリを使うと、WebGLレベルの最適化が行えない。 しかしボトルボックの特定については、さっきの図が使える。 #html5j #html5j_b
2016-09-03 13:51:02
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
Three.jsでのWebGL命令は、ライブラリの中に隠蔽されるため、WebGLレベルの最適化が行えない。 ライブラリには大抵独自のチューニング手法があるので、それを探す。 調べやすさでは、普及度の高い有名なライブラリを選ぶのがよいかも。 #html5j #html5j_b
2016-09-03 13:51:17
池田 泰延（勉強会用）
@clockmaker_bot
UnityやUnrealなどのエンジンのWebG出力の場合：WebGLにかかわらないエンジン独自のチューニングのノウハウがある。 #html5j #html5j_b
2016-09-03 13:52:35
池田 泰延（勉強会用）
@clockmaker_bot
・静的な設定にする ・マテリアルの種類は極力少なくする ・半透明の多用は避ける ・毎フレーム実行しなくて良い処理は、レンダリングループの中から出す #html5j #html5j_b
2016-09-03 13:53:51
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
共通して言えることは ・マテリアルの種類は極力少なくする。 ・半透明の多様は避ける ・毎フレーム実行しない処理は、レンダリングループの中から出して事前に処理させる。 #html5j #html5j_b
2016-09-03 13:53:52
edom18@AR / MESON
@edo_m18
前の最適化の資料、これですね。 icloud.com/keynote/000hha… #html5j #html5j_b
2016-09-03 13:55:08
池田 泰延（勉強会用）
@clockmaker_bot
沖さんの質問：Three.jsはオーバースペックのように思うが、利用している理由は？ Mattari_Pandaさん回答：情報を見つけやすいから #html5j #html5j_b
2016-09-03 13:56:11
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
thee.jsのr80はES6 Moduleになったらしい。 #html5j #html5j_b
2016-09-03 13:56:37
池田 泰延（勉強会用）
@clockmaker_bot
小山田さん回答：Three.jsはカスタムビルドが可能になり、利用する機能だけでコンパクトにできるようになる #html5j #html5j_b
2016-09-03 13:56:56
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
Q. 今WebGLが使われる分野はどこか？ A. ゲームは言うまでもない。その他では3Dであることに意義があるコンテンツ。 山の地図、不動産サイトなど。不動産サイトは意外にも積極的に取り入れている。物件の様子を3Dで見れるようにしたり。 #html5j #html5j_b
2016-09-03 13:58:31
池田 泰延（勉強会用）
@clockmaker_bot
DirectXに変換するANGLEはよく知られていることだったそうです。勉強不足で反省です…(T_T) #html5j #html5j_b
2016-09-03 14:05:36
池田 泰延（勉強会用）
@clockmaker_bot
ANGLEによって、OS XとWindowsで表示の相違が発生することもあるそうです。例えば線の太さが違うとか。 #html5j #html5j_b
2016-09-03 14:06:26
daisuke shigyou
@mattari_panda
先ほどのセッション「WebGL事例」で発表したスライドです。slideshare.net/secret/bkb7GOB… #html5j_b #html5j
2016-09-03 14:29:02
slidebot
@slidebot
*New!* Webのグラフィックス2016 WebGL事例 slideshare.net/mattari_panda/… (by mattari_panda 2016-09-03) [en][DL:OK]
2016-09-03 17:30:13