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

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.
ご清聴ありがとうございました。