「マンガテレビ」の作り方

http://goo.gl/O2YkkJ
「マンガテレビ」の
作り方
第41回 HTML5とか勉強会
2013.8.26 こまつけんさく

自己紹介
 こまつけんさく
 NTTコミュニケーションズ
 最新Web技術の研究開発
 html5j スタッフ
 Google Developers Expert (HTML5)
 Microsoft Valuable Professional (IE)

「マンガテレビ」？
https://app.html5experts.jp/manga/

いわゆる「リスペクト」です
( ｰ`дｰ´)ｷﾘｯ

開発のきっかけ
http://www.kakkoii.tv/events/20130726/index.html

HTML5 Experts Night
on 8/23@MTL
http://html5experts.jp/yusuke-naka/1698/

開発メンバー

What is 機能

マンガ化

音声コマンド、ふきだし、エ
フェクト

リアルタイムフィードバック

How to 実装
マンガ化
WebSpeech API
Headtrackr.js

マンガ化
1. getUserMedia()でビデオ取得
2. CanvasPixelArray 取得
3. フィルター処理

マンガ化 (1/3)
getUserMedia()
navigator.webkitGetUserMedia({video: true, audio: false},
function(stream){
var url = window.webkitURL.createObjectURL(stream);
$v_[0].src = url;
$v_[0].play();
});

マンガ化(2/3)
CanvasPixelArray取得
var imgData = ctx.getImageData(0, 0, 640, 480);
3
1 2
4
imgData = [
255, 0, 0, 255, // 1 (R, G, B, α)
0, 255, 0, 255, // 2 (R, G, B, α)
0, 0, 255, 255, // 3 (R, G, B, α)
255, 255, 0, 255 // 4 (R, G, B, α)
];

マンガ化(3/3)
フィルター処理
 階調化とエッジ中抽出の組み合わせ
エッジ抽出
階調化
（三階調）
合成
参考）http://www.slideshare.net/masayukimaekawa/java-script-14727253

Code
for(var y = 1; y < height-1; y++){
for(var x = 1; x < width-1; x++){
c = y * width + x;
i = c << 2;
// 周辺ピクセル
tmp = (c - width) << 2;
a0 = (dotList[tmp] + dotList[tmp+1] + dotList[tmp + 2]) & FILTER;
tmp = (c - 1) << 2;
tmp = (c + 1) << 2;
tmp = (c + width) << 2;
// グレー値
gray = (dotList[i] + dotList[i+1] + dotList[i + 2] );
if((a0 + a1 + a2+ a3) < ((gray & FILTER) << 2)) {
// エッジ化
img_toon.data[i] = 0;
img_toon.data[i+1] = 0;
} else {
// 階調化
if( gray < DARK ) {
gra = 0;
} else if( gray > BLIGHT ) {
gra = 255;
} else {
gra = 1;
}
// スクリーントーン
if( gra == 1 ) {
dx_ = (x & 0x03); dy_ = (y & 0x03)
if( (!dx_ && !dy_) || (dx_ == 2) && (dy_ == 2)){
gra = 0;
} else {
gra = 255;
}
};
img_toon.data[i] = gra;
img_toon.data[i+1] = gra;
}
img_toon.data[i+3] = 0xff; //img.data[i + 3];
}
}
30万回のループ処理です。。。

WebSpeech API
var rec = new webkitSpeechRecognition();
rec.start();
rec.onresult = function(event) {
// event.results に認識結果が格納
}
 音声認識API
 W3Cでドラフトにもなっていない。Chromeのみ実装
 認識は、Googleさんが頑張っています

意外に重要
httpsじゃないと、途中でも、これ出ちゃう・・・

Headtrackr.js
 OepraのAudunさんが開発した顔検出ライブラリ
 Face.jsより高速で動く（MBPで30fpsぐらい）
var htracker = new headtrackr.Tracker();
htracker.init($("video")[0], $("canvas")[0]);
htracker.start();
document.addEventListener("facetrackingEvent", function( ev ) {
// ev.width : 幅, ev.height : 高さ, ev.x : 中心(x), ev.y : 中心 (y)
});

ここまでの内容
http://html5experts.jp/komasshu/1649/

How to 向上
performance

高速化の
ポイント
for(var y = 1; y < height-1; y++){
for(var x = 1; x < width-1; x++){
c = y * width + x;
i = c << 2;
// 周辺ピクセル
tmp = (c - width) << 2;
tmp = (c - 1) << 2;
tmp = (c + 1) << 2;
tmp = (c + width) << 2;
// グレー値
gray = (dotList[i] + dotList[i+1] + dotList[i + 2] );
if((a0 + a1 + a2+ a3) < ((gray & FILTER) << 2)) {
// エッジ化
img_toon.data[i] = 0;
} else {
// 階調化
if( gray < DARK ) {
gra = 0;
} else if( gray > BLIGHT ) {
gra = 255;
} else {
gra = 1;
}
// スクリーントーン
if( gra == 1 ) {
dx_ = (x & 0x03); dy_ = (y & 0x03)
if( (!dx_ && !dy_) || (dx_ == 2) && (dy_ == 2)){
gra = 0;
} else {
gra = 255;
}
};
img_toon.data[i] = gra;
}
img_toon.data[i+3] = 0xff; //img.data[i + 3];
}
}

目標
 マンガ化フィルター処理を 60 fps @ MBPで!!
 1回あたりの処理は、大体10msec以下に抑える必要
がある
 1000 [msec] / 60 = (約)16 msec
 ループ1回あたりの処理は、30 nano-sec以下が目標
 10 msec / 300,000

パフォーマンスチェック

結論
 関数呼び出しは減らそう
 プロパティ参照は無くそう
 演算処理はなるべく減らそう
 ビットシフトは、若干早くなる
 （でも、なんか頭が良くなった気がする）
 parseInt(“1”) < “1”|0
 InternetExplorerを除く

パフォーマンスチューニング
はエコ！！

Thank you!!
@komasshu

「マンガテレビ」の作り方

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 「マンガテレビ」の作り方

Ähnlich wie 「マンガテレビ」の作り方 (6)

Mehr von Kensaku Komatsu

Mehr von Kensaku Komatsu (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

「マンガテレビ」の作り方