「Webのグラフィックス前編: WebGL事例、パフォーマンス」 - HTML5 Conference 2016
-
- いいね！0
池田 泰延（勉強会用）
@clockmaker_bot
「Webのグラフィックス前編: WebGL事例、パフォーマンス」を受講しています。 #html5j #html5j_b
2016-09-03 13:23:00
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
WebGLに、こんなイメージを持っていませんか？ ・3Dコンテンツ ・大規模コンテンツ ・難しい ・重い これからはこういうイメージを持ってほしい ・2DでもOK ・ちょっとした表現でも使える ・簡単に書ける ・工夫次第で軽くなる #html5j #html5j_b
2016-09-03 13:23:21
池田 泰延（勉強会用）
@clockmaker_bot
会場アンケート「WebGLを仕事で使っているか？」→まあまあの数が挙手 #html5j #html5j_b
2016-09-03 13:23:27
池田 泰延（勉強会用）
@clockmaker_bot
ドラゴン・プロジェクトというサイトでWebGLを使っている。3Dのカルーセル部分で利用している。 #html5j #html5j_b
2016-09-03 13:24:15
池田 泰延（勉強会用）
@clockmaker_bot
開発時間に余裕なしという状況だったが(明日、明後日には出さなければならない)、Three.jsを採用。CSSでも実現できるような表現だったが、スマートフォンの動作も考えるとWebGLが妥当だと判断した #html5j #html5j_b
2016-09-03 13:25:16
池田 泰延（勉強会用）
@clockmaker_bot
WebGLｈじゃ描画順に上書きするルール。透明なピクセルも上書きしてしまう。 #html5j #html5j_b
2016-09-03 13:27:19
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
透明ピクセルの描画に注意する。 alphaTest(0~1.0)は数値以下のalphaのピクセルを描画しなくなる設定。 描画順のバグが解消される可能性がある。 #html5j #html5j_b
2016-09-03 13:28:31
池田 泰延（勉強会用）
@clockmaker_bot
小規模なものから取り上げていくと、Three.jsやWebGLに詳しくなっていける #html5j #html5j_b
2016-09-03 13:28:57
池田 泰延（勉強会用）
@clockmaker_bot
ドラゴンプロジェクトや、白猫プロジェクト二周年記念サイトで、パーティクル演出を作った #html5j #html5j_b
2016-09-03 13:29:22
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
WebGLは2Dパーティクル表現にも向いている。 WebGLでパーティクルといえば、FF7 REMAKEの公式サイトでもthree.jsを使ってパーティクル表現をしています。 jp.square-enix.com/ffvii_remake/ #html5j #html5j_b #threejs
2016-09-03 13:30:43
池田 泰延（勉強会用）
@clockmaker_bot
ドラプロ：加算合成を使うために、Three.jsとGLSLで実現。この演出がなくてもいいが、あるとより良い演出。 #html5j #html5j_b
2016-09-03 13:31:17
池田 泰延（勉強会用）
@clockmaker_bot
パーティクルをスクラッチで書きたい方向けのために、次の記事もプッシュしておきます。 CreateJS でパーティクルシステムの開発に挑戦しよう - ICS MEDIA ics.media/tutorial-creat… #html5j #html5j_b
2016-09-03 13:32:17
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
1000個のパーティクル表現をdivでやろうとすれば、1000個のdivが必要。 WebGLは複雑なモーショングラフィックのパフォーマンスに優れている。 小さなコンテンツからWebGLを初めてみましょう。 #html5j #html5j_b
2016-09-03 13:34:05
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
エマさん .@emadurandal が開発されている独自WebGLライブラリ「GLBoost」 github.com/emadurandal/GL… #html5j #html5j_b
2016-09-03 13:37:20
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
GPUパイプライン #html5j #html5j_b pic.twitter.com/FHJWT3VoZh
2016-09-03 13:39:38
拡大
池田 泰延（勉強会用）
@clockmaker_bot
GPUパイプラインの解説。バーテックス(頂点)シェーダやフラグメントシェーダ―の段階を紹介。 #html5j #html5j_b
2016-09-03 13:39:52
Hiroshi Sekiguchi
@discus_hamburg
Webの世界もパフォーマンス重要:) 満席で椅子追加されてこの状態 #html5j_b #html5j pic.twitter.com/j7hUnSIXa3
2016-09-03 13:40:43
拡大
池田 泰延（勉強会用）
@clockmaker_bot
一番ボトルネックになっている箇所を探す。それ以外の部分を最適化してもあまり効果はない ←同意です。 #html5j #html5j_b
2016-09-03 13:42:07
Takeshi Kano 鹿野 壮
@tonkotsuboy_com
最適化に一番重要なのは、一番ボトルネックになっている箇所を潰すこと。 常にパフォーマンスチェックを。 (WebGL以外にも言える話ですね) #html5j #html5j_b
2016-09-03 13:42:11
Hiroshi Sekiguchi
@discus_hamburg
@discus_hamburg 勘だけで最適化しない！ どこの世界でも魔法はないよー #html5j #html5j_b
2016-09-03 13:42:55
池田 泰延（勉強会用）
@clockmaker_bot
CPU側かGPU側のどちらにボトルネックにあるか疑う。CPUの場合は、一度WebGLの描画処理をすべて省く。それでFPSが向上しないなら、描画以外が大きなCPU時間を占めているということになる。 #html5j #html5j_b
2016-09-03 13:43:36