「顔認識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に入っています。

MindAR,A-Frame,Google Blocklyで顔認識ARをプログラミングするサイトを作ってみた

「顔認識ARを作ろう」

MindARとA-Frameで顔認識

Google BlocklyでHTMLを生成