WebGL Performance Tuning Tips
14 likes7,502 views
ハードウェア特性に基づいた WebGL 高速化手法 WebGL fast method that is based on hardware characteristics
![#08
型付き配列を活用
Float32Array() が
座標値の配列にも色値
もマトリックス表現も
調度いい。適度な精度
trianglePositions = new
Float32Array([
// X, Y, Z,
-0.5, -0.25, 0.0,
0.5, -0.25, 0.0,
0.0, 0.559016994, 0.0]);](https://image.slidesharecdn.com/webgl-meetup2-ando-150606045232-lva1-app6892/85/WebGL-Performance-Tuning-Tips-46-320.jpg)
WebGL Performance Tuning Tips
- 1. ハードウェア特性に基づいた WebGL 高速化手法 WebGL fast method that is based on hardware characteristics 2015/6/6 WebGL Meetup Tokyo #2 株式会社エクサ 安藤幸央 @yukio_andoh
- 2. WebGL Cheat Sheet via. https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
- 3. SGI IRIS GL 1984∼, OpenGL 1992∼ VRML 1995∼ Canvas3D 2006∼ WebGL 2011∼
- 8. 速い？ 遅い？ photo (cc) ph-stopphoto (cc) Will Richards
- 9. Google RAIL 100 ms Response Animation Idle Load 16 ms 100 ms 1000 ms
- 10. Google RAIL 100 ms Response Animation Idle Load 60 fps 50∼100 ms 1000 ms fps : frame per second = フレームレート
- 14. 何を重視するか、 基本ポリシーを検討 ●美しさ？ ●操作性？ ●オブジェクト数？ ●fps？ Photo (cc) Andrionni Ribo cf. http://akirodic.com/p/jellyfish/
- 15. Pixar の Rendering の歴史 10 hour / frame via. (C) Pixar
- 16. このハードウェアで は、このくらい.... ベンチマークツールで 計ったり、単純サンプ ルで計り比較する （3DMark, GFXBench, UnityBench 等） via. (C) 3DMark
- 18. 手前から描くとカリ ング（隠れている面 を描かない）が効く ので速い。 ただし、PowerVR 系(iOS) は効かない (Tile Based Deferred Renderer) via. (C) imgtec
- 21. ブラウザ間の主な差 分はJavaScript部分 Chrome:V8 Safari: Nitro Firefox: asm.js可 IE11: WebGL0.93 (全命令には未対応) https://kripken.github.io/ammo.js/examples/new/ammo.html
- 24. Page Speed Insights https:// developers.google.com/ speed/pagespeed/ 画像の最適化や、サーバー 側の設定の不備など、まず は JavaScript 周辺の遅い 箇所を発見できる
- 26. fps表示 chrome://flags fps stats.js を取り込んでおく 方法もあり https:// github.com/mrdoob/ stats.js 機能追加ごとに速度を体感
- 29. 描画画面を 1/2 や 1/4 に小さくして みる。 遅さが変わらないの であれば、CPU/ JavaScript 側の 負荷が多い
- 30. 早すぎる最適化 は諸悪の根源で ある ドナルド・クヌース （アルゴリズムの大家。アートオブコ ンピュータプログラミングの作者） photo (cc) Will Richards トニー・ホーア説もあり
- 31. CPU GPU
- 32. 1+1 1+1 1+1 1+1 1+1 1+1 1+1 1+1 1+1, 1+1, 1+1, 1+1, 1+1, 1+1 CPU GPU
- 33. CPU GPU
- 34. JavaScript WebGL
- 35. CPU GPU Unified Memory の場合を除く
- 36. WebGL は、 ステートマシン 一度設定した状 態は保持される photo (cc) Eric Lubbers
- 37. 何度も同じ設定 をするのは無駄 設定を切り替え るのは高負荷 photo (cc) Eric Lubbers
- 40. #02 頂点データの再利用 drawElements() を使っ た indexed Polygon 指定 でできるだけデータ数 を少なく
- 42. #04 同じことするにも、 複数の方法があり、速 い方法と遅い方法があ る。 バイト配列の指定や RGB順の違いなど gl.bindTexture(gl.TEXTURE_2D, tex1024); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, img1024);
- 46. #08 型付き配列を活用 Float32Array() が 座標値の配列にも色値 もマトリックス表現も 調度いい。適度な精度 trianglePositions = new Float32Array([ // X, Y, Z, -0.5, -0.25, 0.0, 0.5, -0.25, 0.0, 0.0, 0.559016994, 0.0]);
- 47. #09 テクスチャは一番資源 を食う。小さくて荒く ても比較しないと実は あまり気付かない。 よく使うテクスチャは できるだけ始めの段階 でロードしてバインド しておく。あとは切り 替えて使うだけ
- 51. #12 ミップマップを活用。 テクスチャがバインド されたままで、最適サ イズを切り替えてうの で一番都合がいい。 遠くにあるオブジェク トは描画面積も小さい ので、小さいテクス チャで十分。
- 52. #13 LOD活用 広い空間や、 広い領域を扱う場合 は、Level of Detail がと ても効果あり。 視点から近い時は細か く、遠い時は荒く
- 62. WebGL は インタラクティブ な上に、動画より も小さいよね！ Mr. doob （Three.js の開発者） photo (cc) ricardo cabello