スマホにおけるWebGL入門

7,788 views
7,464 views

Published on

スマホにおけるWebGL入門
菅家 洋太
CyberAgent, Inc.
--------------------------------
・WebGLとは
・普及状況
・セキュリティー問題
・スマホWebGL対応状況
・スマホにおけるWebGLの活用方法
・まとめ

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,788
On SlideShare
0
From Embeds
0
Number of Embeds
242
Actions
Shares
0
Downloads
14
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

スマホにおけるWebGL入門

  1. 1. スマホにおけるWebGL入門 菅家 洋太   CyberAgent,  Inc.
  2. 2. 自己紹介 •  サイバーエージェントグループの   株式会社ジークレストにWebデザイナーとして就職   デザインやマークアップ、Flashアニメーションに従事     デザインよりコードワーク(ac7on  script)に目覚め始める     •  その後Flashエンジニアに転身   @games(タウンゲーム)のFlash開発などに携わる     •  2011年9月より、アメーバ事業本部に転籍   フロントエンド ディベロッパーとして   js、アニメーションを中心に携わる  
  3. 3. 自己紹介 •  2年前の社内アプリコンテストにおいて、   WebGLを使用したホームラン競争ゲームを作成     ハチャメヂャーリーグ              1pixelブログにてThree.jsを用いた   hCp://hachamajor.com/             WebGL開発を紹介  
  4. 4. アジェンダ •  WebGLとは   •  普及状況   •  セキュリティー問題   •  スマホWebGL対応状況   •  スマホにおけるWebGLの活用方法   •  まとめ
  5. 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. 6. 普及状況 •  PC主要ブラウザ(※Internet  Explorerは11から) •  Android4.x〜   (※Androidの詳細は後述) •  iPhoneは未対応 ※一部ブラウザは、標準でサポートはしておらず、     設定を変えることで使えるようになる。 Androidでは昨年から一気に普及し始める。   が、iPhoneはどうなのさ….
  7. 7. WebGLのセキュリティー問題 •  クロスドメイン攻撃(cross-­‐domain  aCacks)   •  サービス拒否(denial  of  service;  DoS)   •  任意のコードの実行(arbitrary  code  execu7on) なんのこっちゃ •  GPUってそもそも高速化を目的として作られており、   セキュリティーに考慮されていなかった。 •  ハードウェアにユーザーが任意にアクセス出来てしまうので、   OSが止まったりぶっ壊れる危険性あり! •  このスクリプトはどのぐらいの負荷なのかなんて、   実行してみないとわからない!
  8. 8. WebGLのセキュリティー問題 つまり  ※特別なブラウザのプラグインなしで、     ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。 →逆にこれが大きな問題に! 今はクロスドメインやDoS問題は解決済みではありますが、     Appleがこんな何されるかわからない技術を、   現状のiPhoneに許可するとは到底思えません。     ※しかしiAd内ではOK
  9. 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. 10. スマホ(Android)WebGL対応状況 2013年の日本のスマホシェア状況   •  Apple  46%   •  Android  50%弱   IDC  Japan  株式会社 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 図4 より   hCp://www.idcjapan.co.jp/Press/Current/20140305Apr.html
  11. 11. スマホ(Android)WebGL対応状況 現状だと約40%のスマホユーザーが WebGLコンテンツを見れる状況 しかし、iPhoneが対応されない限り、   今後増えるにしても   50%までしか伸びないかも
  12. 12.     ではWebGLは   スマホじゃあきらめモード??
  13. 13. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う 2. ネイティブ3Dゲームの     体験版やLPなどに使用する
  14. 14. スマホにおけるWebGLの活用方法 •  弱点を補い合う使い方     元々2Dアニメーションに強かったiPhone(dom  &  canvas)   domアニメーションに強いAndroid4.x系   canvasアニメーションに弱いAndroid4.x系  
  15. 15. スマホにおけるWebGLの活用方法 •  弱点を補い合う使い方     現状様々なライブラリが、環境に応じて   WebGLモードにしたり、context2dモードにしたりと、   自動でフォールバックする   ライブラリが増えてきています。    
  16. 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. 17. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う     CreateJSでWebGL •  次期バージョンではあるが、   CreateJS(Easeljs)でWebGL対応の開発バージョン が公開された。 •  自動的に環境に応じてフォールバックしてくれる   ようになる。
  18. 18. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う     CreateJSでWebGL •  WebGLが圧倒的に高いスコアを出している。 CreateJS公式BLOGより   hCp://blog.createjs.com/webgl-­‐support-­‐easeljs/
  19. 19. スマホにおけるWebGLの活用方法 Toolkit  for  CreateJSでも使えるの!?
  20. 20. スマホにおけるWebGLの活用方法 Toolkit  for  CreateJSとは Flash  cs6以降のextensionとして配布されているツールであり、   flashで作成したタイムラインアニメーションを   html5形式で書き出してくれるツールである。 → 弊社コンテンツの多くで採用している開発ツール
  21. 21. スマホにおけるWebGLの活用方法 hCp://frontrend.github.io/events/05/ 詳しいToolkit  for  CreateJSの開発方法は、   Frontrend  vol.5でも紹介してあります。    ※2013年5月の講演内容ですので、多少古い情報もあります。
  22. 22. スマホにおけるWebGLの活用方法 Toolkit  for  CreateJSでも使えるの!?
  23. 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. 24. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う     CreateJSでWebGL •  Toolkit  for  CreateJSで書き出される、タイムライン上 のインスタンスはMovieClipとして書き出しているも のがほとんど。 •  なので、残念ながら現状では、EaseleJSを次期バー ジョンに差し替えればすぐにWebGLで動く、   というわけではありません!!
  25. 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. 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. 27. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う     CreateJSでWebGL •  これにより、基本アニメーションは   Flashで作成(context2d依存)   しつつ、     処理負荷の高いパーティクル等を   SpriteStage(WebGL依存)に分ける     といったことをします。
  28. 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. 29. 作っては見たけど   正直めんどくさいです。     WebGLStageにaddChildするものはscriptで用意せにゃならんし
  30. 30. いくつか書き出されたソースの   修正もあったりです。
  31. 31. Grunt.jsなどを使用して   自動でソースを書き換えるような   モジュールを作れないかな
  32. 32. それか、   Toolkit  for  CreateJSの   バージョンアップを期待!
  33. 33. 2. ネイティブ3Dゲームの     体験版やLPなどに使用する スマホにおけるWebGLの活用方法 •  ゲームエンジンなどのミドルウエアを利用した開発   ※Unity5  からhtml5書き出しが出来るようになる     •  Three.jsやAway3D.jsなど、WebGLに特化したライブ ラリによる開発    
  34. 34. 2. ネイティブ3Dゲームの     体験版やLPなどに使用する スマホにおけるWebGLの活用方法 •  ゲームエンジンなどのミドルウエアを利用した開発   ※Unity5  からhtml5書き出しが出来るようになる     •  Three.jsやAway3D.jsなど、WebGLに特化したライブ ラリによる開発  
  35. 35. スマホにおけるWebGLの活用方法 •  UnityやCocos2d-­‐x、Unreal-­‐Engineなど   ミドルウェアのWebGL対応化が進んでいる。     これらを使わない手はないです。 •  Three.jsやAway3D.jsなどのライブラリは   コーディング実装して行くには   開発運用コストがでかいです。    ※バージョンアップで動かなくなるケースも
  36. 36. スマホにおけるWebGLの活用方法   まとめ •  スマホにおけるWebGLの対応状況は40%   ※Androidでは70〜80% •  iPhoneはしばらく対応難しそうな予感 •  2Dコンテンツでは、フォールバックしてくれる   ライブラリを活用 •  3Dネイティブアプリの体験版やLPでの活用が 増えてくるかも
  37. 37.     ご清聴ありがとうございました。

×