「Webのグラフィックス前編: WebGL事例、パフォーマンス」 - HTML5 Conference 2016

HTML5 Conference 2016(http://events.html5j.org/conference/2016/9/)における「Webのグラフィックス前編: WebGL事例、パフォーマンス」に関するツイートをまとめました。
4
h_doxas @h_doxas

なんか想像していたより WebGL 部屋盛況です #html5j

2016-09-03 13:17:02
池田 泰延(勉強会用) @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

WebGLhじゃ描画順に上書きするルール。透明なピクセルも上書きしてしまう。 #html5j #html5j_b

2016-09-03 13:27:19
sawa-zen @sawa_zen

Three,jsの円柱の透明自分もハマったなぁ #html5_b

2016-09-03 13:27:43
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を使ってパーティクル表現をしています。 https://t.co/5J7FfZFbvF #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
池田 泰延(勉強会用) @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
残りを読む(24)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?