GREE Tech Talk #08「WebGL」

りぃ / Yuji Sugiura  @leaysgur

まさかのニコ生でやってるの見つけた！　 nico.ms/lv224472032 #greetech08

Kuu MIYAZAKI @miyazaqui

Canvas 2DでもHWアクセラレーションは動作している。動作しているんだけれども、なぜ遅いか。それは中で不要なdraw callをたくさん実行しているため。#greetech08

Daijiro Wachi☔ @watilde

Extensible WebとMagicの話 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

パフォーマンス最適化 ・ドローコールを抑える ・テクスチャーの更新を抑える ・フラグメントシェーダーの実行コストを抑える #greetech08 #WebGL

池田 泰延（勉強会用） @clockmaker_bot

ハードウェアアクセラレーションだけでは、良いパフォーマンスを保証するものではない。 #greetech08

Daijiro Wachi☔ @watilde

Capture Canvas Frameとかchrome://gpuとかchrome://tracingをみんなで見てる #greetech08

Kuu MIYAZAKI @miyazaqui

chrome://tracingを使ったライブレコーディング #greetech08

池田 泰延（勉強会用） @clockmaker_bot

複雑なSWFのアニメーションを再生して、Canvas2DとWebGLのパフォーマンスを比較。 Canvasでは12FPSで限界だが、WebGLだと更にFPSをあげても滑らかに再生可能。 #greetech08 pic.twitter.com/2LRM65euGy

拡大

池田 泰延（勉強会用） @clockmaker_bot

シアトリカルでSWFを再生するときに、ベクターグラフィックスをトライアングル化してWebGLで再生させている。 #greetech08

Kurashita @umi_kappa

これだ！Tesspathy github.com/gree/tesspathy #greetech08

very tired @very_tired

Tesspathy凄い #greetech08

GREE Engineers' Life @gree_tech

現在グリーの劉 光耀によるYou Don't Know WebGLです！ 発表資料はこちら slideshare.net/GuangyaoLiu/yo…　#greetech08

池田 泰延（勉強会用） @clockmaker_bot

シアトリカルのベクターグラフィックスの実現方法の紹介。 他のTriangulation手法とは曲線の実現の仕方が違う。細分化による方法ではない。 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

Three.jsではTriangulation手法を使って、ベクターグラフィックスを三角形に分割するが、制限がある。 Adobe Flash Proやイラレで作られたベクターグラフィックスがその作りになっているか チェックしなければならない。 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

CreateJSではWebGLに対応しているが、Canvas2D APIを重ねることでベクターグラフィックスを実現できる。が、重ねるためブラウザに負荷がかかるし、二重にcanvasを管理する必要がでてくる。 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

ベクターグラフィックスは、解像度に頼らない使い方ができる。これを実現する手法を紹介。 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

WebGLでは線やトライアングルを描くAPIしかない。 そのためラスターグラフィックスを表示するためには矩形イメージを三角形に分割する。 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

SWFファイルをロードして、JS/WebGL(シアトリカル)で再生。 Chromeの開発ツールで描画命令が実行されていることを見せ、WebGLで再生されていることを紹介。 #greetech08 pic.twitter.com/lEaPBfozp4

拡大

Kiyoshi Nomo 🐟☔️🍈🍋🍜 @kysnm

おお “現在はJavaScriptのチューニングのため、もっぱらV8のJITエンジンを勉強している” atnd.org/events/66780 #greetech08

池田 泰延（勉強会用） @clockmaker_bot

シアトリカルスイートというGREE内製のWebGLプレイヤーを紹介。 #greetech08

Daijiro Wachi☔ @watilde

You don't know WebGL / よくあるWebGLの勘違いについて #greetech08

kihare @kiharekato

フルスクラッチいいね #greetech08

chuck @chuck0523

先週のtriton.jsに引き続き、GREE techに参加中。面白い！#greetech08 pic.twitter.com/1Z5nKL6xrk

拡大

Daijiro Wachi☔ @watilde

WebVR Spec気になる人、ぜひWatchingしましょう:D github.com/MozVR/webvr-sp… #greetech08

江戸川基地局（再稼働中） @nhiro78

#greetech08 Wi-Fi復活！