Downloaded 18 times
![• パーティクルのスクリプトを用意
var
spriteSheet
=
new
createjs.SpriteSheet({
images:
['images/kira.png'],
frames:
{width:52,
height:52},
anima7ons:
{
out:
0,
over:
1,
down:
2
}
});
var
_par7cleList
=
[];
for
(var
i
=
0;
i
<
1000;
i++)
{
var
_par7cle
=
new
createjs.Sprite(spriteSheet,
"up");
var
_x
=
160
+
((Math.random()
*
20)|0)
-‐
10;
var
_y
=
200
+
((Math.random()
*
20)|0)
-‐
10;
_par7cle.vecX
=
_x
-‐
160;
_par7cle.kira.vecY
=
_y
-‐
200
-‐
10;
webGLStage.addChild(_par7cle).set({x:_x,
y:_y});
_par7cleList.push(_par7cle);
};
webGLStage.addEventListener('7ck',
func7on(){
for
(var
i
=
0;
i
<
_par7cleList.length;
i++)
{
var
_sp
=
_par7cleList[i];
_sp.rota7on+=5;
_sp.x
+=
_sp.vecX;
_sp.vecX
*=
0.9;
_sp.y
+=
_sp.vecY;
_sp.vecY
+=
1;
};
})](https://image.slidesharecdn.com/frontrendwebglslideshare-140421011759-phpapp01/85/WebGL-28-320.jpg)
Uploaded byYohta Kanke
スマホにおけるWebGL入門
スマホにおけるWebGL入門 菅家 洋太 CyberAgent, Inc. -------------------------------- ・WebGLとは ・普及状況 ・セキュリティー問題 ・スマホWebGL対応状況 ・スマホにおけるWebGLの活用方法 ・まとめ
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://cdn.slidesharecdn.com/ss_thumbnails/webglgtug10th-130122052159-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
スマホにおけるWebGL入門
- 1.
- 2. 自己紹介 • サイバーエージェントグループの 株式会社ジークレストにWebデザイナーとして就職 デザインやマークアップ、Flashアニメーションに従事 デザインよりコードワーク（ac7on script）に目覚め始める • その後Flashエンジニアに転身 @games（タウンゲーム）のFlash開発などに携わる • 2011年9月より、アメーバ事業本部に転籍 フロントエンド ディベロッパーとして js、アニメーションを中心に携わる
- 3. 自己紹介 • 2年前の社内アプリコンテストにおいて、 WebGLを使用したホームラン競争ゲームを作成 ハチャメヂャーリーグ 1pixelブログにてThree.jsを用いた hCp://hachamajor.com/ WebGL開発を紹介
- 4. アジェンダ • WebGLとは • 普及状況 • セキュリティー問題 • スマホWebGL対応状況 • スマホにおけるWebGLの活用方法 • まとめ
- 5. WebGLとは • WebGLは、ウェブブラウザで3次元コンピュータグラフィックスを表示させ るための標準仕様。 • OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、 特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた 三次元グラフィックスを表示可能にする。 • 技術的には、JavaScriptとネイティブのOpenGL ES 2.0の バインディングである。 • WebGLは非営利団体のKhronos Groupで管理されている。 • WebGL1.0は2011年2月に策定 • WebGLはhtml5のcanvas要素を使う
- 6. 普及状況 • PC主要ブラウザ（※Internet Explorerは11から） • Android4.x〜 （※Androidの詳細は後述） • iPhoneは未対応 ※一部ブラウザは、標準でサポートはしておらず、 設定を変えることで使えるようになる。 Androidでは昨年から一気に普及し始める。 が、iPhoneはどうなのさ….
- 7. WebGLのセキュリティー問題 • クロスドメイン攻撃（cross-‐domain aCacks） • サービス拒否（denial of service; DoS） • 任意のコードの実行（arbitrary code execu7on） なんのこっちゃ • GPUってそもそも高速化を目的として作られており、 セキュリティーに考慮されていなかった。 • ハードウェアにユーザーが任意にアクセス出来てしまうので、 OSが止まったりぶっ壊れる危険性あり！ • このスクリプトはどのぐらいの負荷なのかなんて、 実行してみないとわからない！
- 8. WebGLのセキュリティー問題 つまり ※特別なブラウザのプラグインなしで、 ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。 →逆にこれが大きな問題に！ 今はクロスドメインやDoS問題は解決済みではありますが、 Appleがこんな何されるかわからない技術を、 現状のiPhoneに許可するとは到底思えません。 ※しかしiAd内ではOK
- 9. スマホ（Android）WebGL対応状況 Android プラットフォーム稼働状況 • 4.0系が14.3% ※ChromeやFireFoxなど一部端末でWebGL化 • 4.1〜4.4が66.7% ※WebGL標準ブラウザ含めてほぼ対応 Android Developers : Dashboads より hCp://developer.android.com/about/dashboards/index.html 4.1.x 4.2.x 4.3 2.3.x 17.8% 4.0.3 4.0.4
- 10. スマホ（Android）WebGL対応状況 2013年の日本のスマホシェア状況 • Apple 46% • Android 50%弱 IDC Japan 株式会社 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 図4 より hCp://www.idcjapan.co.jp/Press/Current/20140305Apr.html
- 11.
- 12.
- 13.
- 14. スマホにおけるWebGLの活用方法 • 弱点を補い合う使い方 元々2Dアニメーションに強かったiPhone(dom & canvas) domアニメーションに強いAndroid4.x系 canvasアニメーションに弱いAndroid4.x系
- 15. スマホにおけるWebGLの活用方法 • 弱点を補い合う使い方 現状様々なライブラリが、環境に応じて WebGLモードにしたり、context2dモードにしたりと、 自動でフォールバックする ライブラリが増えてきています。
- 16. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う 自動でフォールバックしてくれるライブラリの紹介 • Pixi.js • tofu.js (弊社ライブラリ) + Pixi.js ※tofuはcanvasとhtmlをスイッチ • CreateJS (次期バージョン) etc… → tofu.jsを使用したレンダラ比較 hCp://ameblo.jp/ca-‐1pixel/entry-‐11624820713.html ではWebGLとcanvasとdomでどのぐらい違うのか
- 17. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う CreateJSでWebGL • 次期バージョンではあるが、 CreateJS（Easeljs）でWebGL対応の開発バージョン が公開された。 • 自動的に環境に応じてフォールバックしてくれる ようになる。
- 18. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う CreateJSでWebGL • WebGLが圧倒的に高いスコアを出している。 CreateJS公式BLOGより hCp://blog.createjs.com/webgl-‐support-‐easeljs/
- 19.
- 20. スマホにおけるWebGLの活用方法 Toolkit for CreateJSとは Flash cs6以降のextensionとして配布されているツールであり、 flashで作成したタイムラインアニメーションを html5形式で書き出してくれるツールである。 → 弊社コンテンツの多くで採用している開発ツール
- 21. スマホにおけるWebGLの活用方法 hCp://frontrend.github.io/events/05/ 詳しいToolkit for CreateJSの開発方法は、 Frontrend vol.5でも紹介してあります。 ※2013年5月の講演内容ですので、多少古い情報もあります。
- 22.
- 23. スマホにおけるWebGLの活用方法 • SpriteStageとSpriteContainerクラス SpriteStageクラスは、WebGLのステージを扱います。このクラスは、おなじみのEaselJSの Stageクラスを継承します。新たなメソッドがいくつか備わり、そして大事なことは SpriteStage.addChild()メソッドで加えられる子が WebGLで描きやすい表示オブジェクトにかぎられることです。それらは、 BitmapとSpriteにBitmapText、およびSpriteContainerです。 ※野中文雄さん html5テクニカルノート EaselJS次期バージョンでWebGLを使う より抜粋 hCp://www.fumiononaka.com/Business/html5/FN1401003.html MovieClip未対応！！
- 24. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う CreateJSでWebGL • Toolkit for CreateJSで書き出される、タイムライン上 のインスタンスはMovieClipとして書き出しているも のがほとんど。 • なので、残念ながら現状では、EaseleJSを次期バー ジョンに差し替えればすぐにWebGLで動く、 というわけではありません！！
- 25. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う CreateJSでWebGL • TwoStage.htmlという、サンプルが Github紹介されています。 hCps://github.com/CreateJS/EaselJS/blob/master/examples/WebGL/TwoStages.html • canvasを2つ重ねて、 context2dレンダラとWebGLレンダラ分けて使用する というやり方です。
- 26. • css • Html • script <div class="canvasHolder"> <canvas id="webGLCanvas" width="958" height="398"></canvas> <canvas id="c2dCanvas" width="958" height="160"></canvas> </div> webGLStage = new createjs.SpriteStage("webGLCanvas"); c2dStage = new createjs.Stage("c2dCanvas"); createjs.Ticker.setFPS(50); createjs.Ticker.addEventListener("7ck", c2dStage ); createjs.Ticker.addEventListener("7ck", webGLStage); .canvasHolder { posi7on: rela7ve; } #webGLCanvas , #c2dCanvas { posi7on: absolute; lep: 0; top: 0; }
- 27. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う CreateJSでWebGL • これにより、基本アニメーションは Flashで作成（context2d依存） しつつ、 処理負荷の高いパーティクル等を SpriteStage（WebGL依存）に分ける といったことをします。
- 28. • パーティクルのスクリプトを用意 var spriteSheet = new createjs.SpriteSheet({ images: ['images/kira.png'], frames: {width:52, height:52}, anima7ons: { out: 0, over: 1, down: 2 } }); var _par7cleList = []; for (var i = 0; i < 1000; i++) { var _par7cle = new createjs.Sprite(spriteSheet, "up"); var _x = 160 + ((Math.random() * 20)|0) -‐ 10; var _y = 200 + ((Math.random() * 20)|0) -‐ 10; _par7cle.vecX = _x -‐ 160; _par7cle.kira.vecY = _y -‐ 200 -‐ 10; webGLStage.addChild(_par7cle).set({x:_x, y:_y}); _par7cleList.push(_par7cle); }; webGLStage.addEventListener('7ck', func7on(){ for (var i = 0; i < _par7cleList.length; i++) { var _sp = _par7cleList[i]; _sp.rota7on+=5; _sp.x += _sp.vecX; _sp.vecX *= 0.9; _sp.y += _sp.vecY; _sp.vecY += 1; }; })
- 29. 作っては見たけど 正直めんどくさいです。 WebGLStageにaddChildするものはscriptで用意せにゃならんし
- 30.
- 31.
- 32. それか、 Toolkit for CreateJSの バージョンアップを期待！
- 33. 2. ネイティブ3Dゲームの 体験版やLPなどに使用する スマホにおけるWebGLの活用方法 • ゲームエンジンなどのミドルウエアを利用した開発 ※Unity5 からhtml5書き出しが出来るようになる • Three.jsやAway3D.jsなど、WebGLに特化したライブ ラリによる開発
- 34. 2. ネイティブ3Dゲームの 体験版やLPなどに使用する スマホにおけるWebGLの活用方法 • ゲームエンジンなどのミドルウエアを利用した開発 ※Unity5 からhtml5書き出しが出来るようになる • Three.jsやAway3D.jsなど、WebGLに特化したライブ ラリによる開発
- 35. スマホにおけるWebGLの活用方法 • UnityやCocos2d-‐x、Unreal-‐Engineなど ミドルウェアのWebGL対応化が進んでいる。 これらを使わない手はないです。 • Three.jsやAway3D.jsなどのライブラリは コーディング実装して行くには 開発運用コストがでかいです。 ※バージョンアップで動かなくなるケースも
- 36. スマホにおけるWebGLの活用方法 まとめ • スマホにおけるWebGLの対応状況は40% ※Androidでは70〜80% • iPhoneはしばらく対応難しそうな予感 • 2Dコンテンツでは、フォールバックしてくれる ライブラリを活用 • 3Dネイティブアプリの体験版やLPでの活用が 増えてくるかも
- 37.