Weitere ähnliche Inhalte
Ähnlich wie スマホにおけるWebGL入門 (20)
スマホにおける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要素を使う
- 7. WebGLのセキュリティー問題
• クロスドメイン攻撃(cross-‐domain
aCacks)
• サービス拒否(denial
of
service;
DoS)
• 任意のコードの実行(arbitrary
code
execu7on)
なんのこっちゃ
• GPUってそもそも高速化を目的として作られており、
セキュリティーに考慮されていなかった。
• ハードウェアにユーザーが任意にアクセス出来てしまうので、
OSが止まったりぶっ壊れる危険性あり!
• このスクリプトはどのぐらいの負荷なのかなんて、
実行してみないとわからない!
- 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
- 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;
}
- 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;
};
})