狠狠撸

スマホにおける奥别产骋尝入门
菅家　洋太
?
CyberAgent,
?Inc.

自己紹介
?? サイバーエージェントグループの
?
株式会社ジークレストにWebデザイナーとして就職
?
デザインやマークアップ、Flashアニメーションに従事
?

?
デザインよりコードワーク（ac7on
?script）に目覚め始める
?

?
?? その後Flashエンジニアに転身
?
@games（タウンゲーム）のFlash開発などに携わる
?

?
?? 2011年9月より、アメーバ事業本部に転籍
?
フロントエンドディベロッパーとして
?
js、アニメーションを中心に携わる
?

自己紹介
?? 2年前の社内アプリコンテストにおいて、
?
WebGLを使用したホームラン競争ゲームを作成
?

?
ハチャメヂャーリーグ　　　　　　　　　　　　　　1pixelブログにてThree.jsを用いた
?
hCp://hachamajor.com/　　　　　　　　　　　　 WebGL開発を紹介
?

アジェンダ
?? WebGLとは
?
?? 普及状況
?
?? セキュリティー問題
?
?? スマホWebGL対応状況
?
?? スマホにおけるWebGLの活用方法
?
?? まとめ

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要素を使う

普及状況
?? PC主要ブラウザ（※Internet
?Explorerは11から）
?? Android4.x?
?
（※Androidの詳細は後述）
?? iPhoneは未対応
※一部ブラウザは、標準でサポートはしておらず、
?
　　設定を変えることで使えるようになる。
Androidでは昨年から一気に普及し始める。
?
が、iPhoneはどうなのさ….

WebGLのセキュリティー問題
?? クロスドメイン攻撃（cross-?‐domain
?aCacks）
?
?? サービス拒否（denial
?of
?service;
?DoS）
?
?? 任意のコードの実行（arbitrary
?code
?execu7on）

なんのこっちゃ
?? GPUってそもそも高速化を目的として作られており、
?
セキュリティーに考慮されていなかった。
?? ハードウェアにユーザーが任意にアクセス出来てしまうので、
?
OSが止まったりぶっ壊れる危険性あり！
?? このスクリプトはどのぐらいの負荷なのかなんて、
?
実行してみないとわからない！

WebGLのセキュリティー問題
つまり
　※特別なブラウザのプラグインなしで、
?
　　ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。
→逆にこれが大きな問題に！
今はクロスドメインやDoS問題は解決済みではありますが、
?

?
Appleがこんな何されるかわからない技術を、
?
現状のiPhoneに許可するとは到底思えません。
?

?
※しかしiAd内ではOK

スマホ（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
?

?
?
?

2013年の日本のスマホシェア状況
?
?? Apple
?46%
?
?? Android
?50%弱
?
IDC
?Japan
?株式会社　2013年第4四半期および2013年国内携帯電話?スマートフォン市場規模を発表　図4　より
?
hCp://www.idcjapan.co.jp/Press/Current/20140305Apr.html

現状だと約40%のスマホユーザーが
WebGLコンテンツを見れる状況
しかし、iPhoneが対応されない限り、
?
今後増えるにしても
?
50%までしか伸びないかも

?

?
ではWebGLは
?
スマホじゃあきらめモード？？

スマホにおけるWebGLの活用方法
1.　2DでWebGLを使う
2.　ネイティブ3Dゲームの
?
　　体験版やLPなどに使用する

?? 弱点を補い合う使い方
?

?
元々2Dアニメーションに強かったiPhone(dom
?&
?canvas)
?
domアニメーションに強いAndroid4.x系
?
canvasアニメーションに弱いAndroid4.x系
?

?? 弱点を補い合う使い方
?

?
現状様々なライブラリが、環境に応じて
?
WebGLモードにしたり、context2dモードにしたりと、
?
自動でフォールバックする
?
ライブラリが増えてきています。
?

?

?
　　自動でフォールバックしてくれるライブラリの紹介
?? Pixi.js
?
?? tofu.js
?(弊社ライブラリ)
?+
?Pixi.js
?
?
※tofuはcanvasとhtmlをスイッチ
?
?? CreateJS
?(次期バージョン)
?
etc…
→　tofu.jsを使用したレンダラ比較
?
hCp://ameblo.jp/ca-?‐1pixel/entry-?‐11624820713.html
ではWebGLとcanvasとdomでどのぐらい違うのか

?
　　CreateJSでWebGL
?? 次期バージョンではあるが、
?
CreateJS（Easeljs）でWebGL対応の開発バージョン
が公開された。
?? 自動的に環境に応じてフォールバックしてくれる
?
ようになる。

?
?? WebGLが圧倒的に高いスコアを出している。
CreateJS公式BLOGより
?
hCp://blog.createjs.com/webgl-?‐support-?‐easeljs/

Toolkit
?for
?CreateJSでも使えるの！？

Toolkit
?for
?CreateJSとは
Flash
?cs6以降のextensionとして配布されているツールであり、
?
?ashで作成したタイムラインアニメーションを
?
html5形式で書き出してくれるツールである。
→　弊社コンテンツの多くで採用している開発ツール

hCp://frontrend.github.io/events/05/
詳しいToolkit
?for
?CreateJSの開発方法は、
?
Frontrend
?vol.5でも紹介してあります。
?
　※2013年5月の講演内容ですので、多少古い情報もあります。

?? 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未対応！！

?
?? Toolkit
?for
?CreateJSで書き出される、タイムライン上
のインスタンスはMovieClipとして書き出しているも
のがほとんど。
?? なので、残念ながら現状では、EaseleJSを次期バー
ジョンに差し替えればすぐにWebGLで動く、
?
というわけではありません！！

?
?? TwoStage.htmlという、サンプルが
?
Github紹介されています。
?
hCps://github.com/CreateJS/EaselJS/blob/master/examples/WebGL/TwoStages.html
??
?canvasを2つ重ねて、
?
context2dレンダラとWebGLレンダラ分けて使用する
?
というやり方です。

?? 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;
?
}

?
?? これにより、基本アニメーションは
?
Flashで作成（context2d依存）
?
しつつ、
?

?
処理負荷の高いパーティクル等を
?
SpriteStage（WebGL依存）に分ける
?

?
といったことをします。

?? パーティクルのスクリプトを用意
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;
?

?
?
?
?};
?
})
?

作っては見たけど
?
正直めんどくさいです。
?

?
WebGLStageにaddChildするものはscriptで用意せにゃならんし

いくつか書き出されたソースの
?
修正もあったりです。

Grunt.jsなどを使用して
?
自動でソースを書き換えるような
?
モジュールを作れないかな

それか、
?
Toolkit
?for
?CreateJSの
?
バージョンアップを期待！

?
?? ゲームエンジンなどのミドルウエアを利用した開発
?
※Unity5
?からhtml5書き出しが出来るようになる
?

?
?? Three.jsやAway3D.jsなど、WebGLに特化したライブ
ラリによる開発
?

?

?
?? ゲームエンジンなどのミドルウエアを利用した開発
?
※Unity5
?からhtml5書き出しが出来るようになる
?

?
?? Three.jsやAway3D.jsなど、WebGLに特化したライブ
ラリによる開発
?

?? UnityやCocos2d-?‐x、Unreal-?‐Engineなど
?
ミドルウェアのWebGL対応化が進んでいる。
?

?
これらを使わない手はないです。
?? Three.jsやAway3D.jsなどのライブラリは
?
コーディング実装して行くには
?
開発運用コストがでかいです。
?
　※バージョンアップで動かなくなるケースも

?
まとめ
?? スマホにおけるWebGLの対応状況は40%
?
※Androidでは70?80%
?? iPhoneはしばらく対応難しそうな予感
?? 2Dコンテンツでは、フォールバックしてくれる
?
ライブラリを活用
?? 3Dネイティブアプリの体験版やLPでの活用が
増えてくるかも

?

?
ご清聴ありがとうございました。

狠狠撸

スマホにおける奥别产骋尝入门

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to スマホにおける奥别产骋尝入门 (20)

スマホにおける奥别产骋尝入门