「顔認識ARを作ろう」
MideAR,A-Frame,Google Blocklyで顔認識ARをプログラミングする「顔認識ARを作ろう」はこちら
https://kaihatuiinkai.jp/nesopuro2/face_ar/
顔認識をWebページ上で作動させることができるMindARというJavascriptライブラリを見つけました。以前に作成した「ARを作ろう」に組み込んだところ、あっさり作動しました。（世の中、便利になりましたね）「顔」をマーカーにしてARを表示します。
PNGファイルの透明画像にも対応しているので、「ARを作ろう」よりもっと面白いことができそうです。眼鏡、帽子、カチューシャ、ヒゲなどを顔の上にAR表示できます。「SNOW（スノー）」のアプリのようなことをブロックを組むだけで表示できます。
MindARとA-Frameで顔認識
MindARはオープンソースのJavascriptライブラリです。A-Frameと組み合わせて イメージトラッキング(Image Tracking)とフェイストラッキング(Face Tracking)ができます。今回はフェイストラッキングをしてみました。
ar_test1.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-face embedded color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="hige" src="illustration/hige.png">
<img id="ear" src="illustration/cat_ear.png">
</a-assets>
<a-camera active="false" position="0 0 0"></a-camera>
<a-entity mindar-face-target="anchorIndex: 1">
<a-image src="#hige" height="0.3" width = "1.2" position="0 0.1 0.05"></a-image>
</a-entity>
<a-entity mindar-face-target="anchorIndex: 10">
<a-image src="#ear" height="0.3" width = "0.9" position="0 0.3 -0.3"></a-image>
</a-entity>
</a-scene>
</body>
</html>
サンプルサイトはこちら
https://kaihatuiinkai.jp/ar/arMind_test06.html
マスクをしていても顔を認識します。MindARは高性能なライブラリです。
Google BlocklyでHTMLを生成
新しいブロックをBlocklyに追加するには３つの手順が必要です。
１ ブロックを表示するためのコードを書きます。
event_block.js
Blockly.Blocks['block_ar_cat_ear'] = {
init: function() {
this.appendDummyInput()
.appendField("ネコみみ");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(260);
this.setTooltip("顔認識AR用画像");
this.setHelpUrl("");
}
};
２ 次に、このブロックで実行するコードを書きます。
event_block.js
Blockly.JavaScript['block_ar_cat_ear'] = function(block) {
var code = "//FaceAR <img id='cat_ear' src='illustration/cat_ear.png'>\n";
code = code + "<a-image src='#cat_ear' height='0.3' width = '0.9' position='0 0.3 -0.3'>\n";
code = code + "</a-image>";
return code;
};
３ あとは、本体サイトでブロックを表示させます。
face_ar.html
<!-- // Google Blockly を表示する部分 -->
<div id="blocklyDiv" style="height: 500px; width: 800px;"></div>
<!-- // 表示するブロックの定義 -->
<xml id="toolbox" style="display: none">
<block type="block_ar_cat_ear" ></block>
</xml>
<script>
// ワークスペース設定
var workspace = Blockly.inject(
'blocklyDiv', {
toolbox: document.getElementById('toolbox'),
maxBlocks: Infinity,
grid: {spacing: 18, length: 3, colour: '#ccc', snap: true,},
trashcan: true,
scrollbars: true,
zoom: {controls: true, wheel: false, startScale: 0.9,
maxScale: 3, minScale: 0.3, scaleSpeed: 1.2, },
},
);
// ブロックで作成したプログラムの受け取り
var code = Blockly.JavaScript.workspaceToCode(workspace);
// codeにデータが入っています
</script>
ブロックを並べて作成したプログラムがcodeに入っています。