Your SlideShare is downloading. ×
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

スマホにおけるWebGL入門

4,854

Published on

スマホにおけるWebGL入門 …

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

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

No Downloads
Views
Total Views
4,854
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. スマホにおけるWebGL入門 菅家 洋太   CyberAgent,  Inc.
  • 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. スマホ(Android)WebGL対応状況 現状だと約40%のスマホユーザーが WebGLコンテンツを見れる状況 しかし、iPhoneが対応されない限り、   今後増えるにしても   50%までしか伸びないかも
  • 12.     ではWebGLは   スマホじゃあきらめモード??
  • 13. スマホにおけるWebGLの活用方法 1. 2DでWebGLを使う 2. ネイティブ3Dゲームの     体験版やLPなどに使用する
  • 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. スマホにおけるWebGLの活用方法 Toolkit  for  CreateJSでも使えるの!?
  • 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. スマホにおけるWebGLの活用方法 Toolkit  for  CreateJSでも使えるの!?
  • 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. Grunt.jsなどを使用して   自動でソースを書き換えるような   モジュールを作れないかな
  • 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.     ご清聴ありがとうございました。

×