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

HTML5 Conference 2016(http://events.html5j.org/conference/2016/9/)における「Webのグラフィックス前編: WebGL事例、パフォーマンス」に関するツイートをまとめました。
ゲーム開発 Web WebGL
4
h_doxas @h_doxas
なんか想像していたより WebGL 部屋盛況です #html5j
池田 泰延(勉強会用) @clockmaker_bot
「Webのグラフィックス前編: WebGL事例、パフォーマンス」を受講しています。 #html5j #html5j_b
鹿野壮@1/25書籍発売 @tonkotsuboy_com
WebGLに、こんなイメージを持っていませんか? ・3Dコンテンツ ・大規模コンテンツ ・難しい ・重い これからはこういうイメージを持ってほしい ・2DでもOK ・ちょっとした表現でも使える ・簡単に書ける ・工夫次第で軽くなる #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
会場アンケート「WebGLを仕事で使っているか?」→まあまあの数が挙手 #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
ドラゴン・プロジェクトというサイトでWebGLを使っている。3Dのカルーセル部分で利用している。 #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
開発時間に余裕なしという状況だったが(明日、明後日には出さなければならない)、Three.jsを採用。CSSでも実現できるような表現だったが、スマートフォンの動作も考えるとWebGLが妥当だと判断した #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
WebGLhじゃ描画順に上書きするルール。透明なピクセルも上書きしてしまう。 #html5j #html5j_b
sawa-zen @sawa_zen
Three,jsの円柱の透明自分もハマったなぁ #html5_b
鹿野壮@1/25書籍発売 @tonkotsuboy_com
透明ピクセルの描画に注意する。 alphaTest(0~1.0)は数値以下のalphaのピクセルを描画しなくなる設定。 描画順のバグが解消される可能性がある。 #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
小規模なものから取り上げていくと、Three.jsやWebGLに詳しくなっていける #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
ドラゴンプロジェクトや、白猫プロジェクト二周年記念サイトで、パーティクル演出を作った #html5j #html5j_b
鹿野壮@1/25書籍発売 @tonkotsuboy_com
WebGLは2Dパーティクル表現にも向いている。 WebGLでパーティクルといえば、FF7 REMAKEの公式サイトでもthree.jsを使ってパーティクル表現をしています。 https://t.co/5J7FfZFbvF #html5j #html5j_b #threejs
池田 泰延(勉強会用) @clockmaker_bot
ドラプロ:加算合成を使うために、Three.jsとGLSLで実現。この演出がなくてもいいが、あるとより良い演出。 #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
パーティクルをスクラッチで書きたい方向けのために、次の記事もプッシュしておきます。 CreateJS でパーティクルシステムの開発に挑戦しよう - ICS MEDIA ics.media/tutorial-creat… #html5j #html5j_b
鹿野壮@1/25書籍発売 @tonkotsuboy_com
1000個のパーティクル表現をdivでやろうとすれば、1000個のdivが必要。 WebGLは複雑なモーショングラフィックのパフォーマンスに優れている。 小さなコンテンツからWebGLを初めてみましょう。 #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
GPUパイプラインの解説。バーテックス(頂点)シェーダやフラグメントシェーダ―の段階を紹介。 #html5j #html5j_b
Hiroshi Sekiguchi  @discus_hamburg
Webの世界もパフォーマンス重要:) 満席で椅子追加されてこの状態 #html5j_b #html5j pic.twitter.com/j7hUnSIXa3
 拡大
池田 泰延(勉強会用) @clockmaker_bot
一番ボトルネックになっている箇所を探す。それ以外の部分を最適化してもあまり効果はない ←同意です。 #html5j #html5j_b
鹿野壮@1/25書籍発売 @tonkotsuboy_com
最適化に一番重要なのは、一番ボトルネックになっている箇所を潰すこと。 常にパフォーマンスチェックを。 (WebGL以外にも言える話ですね) #html5j #html5j_b
Hiroshi Sekiguchi  @discus_hamburg
@discus_hamburg 勘だけで最適化しない! どこの世界でも魔法はないよー #html5j #html5j_b
池田 泰延(勉強会用) @clockmaker_bot
CPU側かGPU側のどちらにボトルネックにあるか疑う。CPUの場合は、一度WebGLの描画処理をすべて省く。それでFPSが向上しないなら、描画以外が大きなCPU時間を占めているということになる。 #html5j #html5j_b
残りを読む(24)

コメント

ログインして広告を非表示にする
ログインして広告を非表示にする