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

# 「顔認識ARを作ろう」
　MideAR,A-Frame,Google Blocklyで顔認識ARをプログラミングする「顔認識ARを作ろう」はこちら
https://kaihatuiinkai.jp/nesopuro2/face_ar/

　顔認識をWebページ上で作動させることができるMindARというJavascriptライブラリを見つけました。以前に作成した「ARを作ろう」に組み込んだところ、あっさり作動しました。（世の中、便利になりましたね）「顔」をマーカーにしてARを表示します。
　PNGファイルの透明画像にも対応しているので、「ARを作ろう」よりもっと面白いことができそうです。眼鏡、帽子、カチューシャ、ヒゲなどを顔の上にAR表示できます。「SNOW（スノー）」のアプリのようなことをブロックを組むだけで表示できます。
![スクリーンショット 2023-05-05 143935.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509199/76dd68c1-f365-48fb-8b38-24250d01bf50.jpeg)



# MindARとA-Frameで顔認識
　MindARはオープンソースのJavascriptライブラリです。A-Frameと組み合わせて イメージトラッキング(Image Tracking)とフェイストラッキング(Face Tracking)ができます。今回はフェイストラッキングをしてみました。

```HTML: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に追加するには３つの手順が必要です。
１　ブロックを表示するためのコードを書きます。
```JavaScript: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("");
  }
};
```

２　次に、このブロックで実行するコードを書きます。
```JavaScript: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;
};
```

３　あとは、本体サイトでブロックを表示させます。
```HTML: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に入っています。