WeChat MiniProgram AR TFJS

Chinesische README

Aktualisiert

Datum	Aktualisieren
05.01.2022	Neu: Eine Demo zur Bildklassifizierung mit tfjs hinzugefügt.
08.09.2021	Neu: Eine Handpose-Demo mit tfjs hinzugefügt. Es ist langsam und dauert etwa 500 ms pro Erkennung.
13.03.2021	Behobener Fehler: 1. Das Bild der Gesichts-2D-Maske wird auf Android WeChat nicht angezeigt. 2. Wenn Sie die Demo-Benutzeroberfläche zum zweiten Mal aufrufen, wird das 3D-Modell nicht angezeigt.
11.03.2021	Neu: Eine Gesichts-AR mit „face-landmarks-detection“ und „TensorFlow.js“. Update: Ersetzen Sie „face-api.js“ durch „face-landmarks-detection“, die Codes von „face-api.js“ werden entfernt.
07.09.2019	Neu: Eine Gesichtserkennung und -erkennung mit „face-api.js“.

Einführung in das WeChat-Miniprogramm AR

TensorFlow.js ist eine JavaScript-Bibliothek für maschinelles Lernen. Es gibt ein WeChat-Miniprogramm-Plugin für TensorFlow.js.

tfjs-wechat

Mit TensorFlow.js können wir AR-Effekte erstellen. Eine „face-landmarks-detection“-Bibliothek basiert auf TensorFlow.js.

Die Bibliothek „face-landmarks-detection“ bietet eine Gesichtserkennung in der Browserumgebung.

Gesichts-Sehenswürdigkeiten-Erkennung

Warum „Gesichts-Sehenswürdigkeiten-Erkennung“ wählen?

Weil ich kein kleines Modell von TensorFlow.js zur Gesichtserkennung gefunden habe, bis ich die Bibliothek „face-landmarks-detection“ gefunden habe.

Diese Demo demonstriert eine Gesichts-AR.

Indexseite des WeChat-Miniprogramms

Gesichtserkennung und 3D-Maske

Verwenden Sie die Demo, um ein Gesicht zu scannen. Erwarten Sie unten einen Effekt.

Ein Effekt der Übersetzung und Skalierung.

Ein Rotationseffekt.

Gesichtserkennung und 2D-Maske

Verwenden Sie die Demo, um ein Gesicht zu scannen. Erwarten Sie unten einen Effekt.

Ein Effekt der Übersetzung und Skalierung.

Ein Rotationseffekt.

Handhaltung und 2D-Maske

Verwenden Sie die Demo, um eine Hand zu scannen. Erwarten Sie unten einen Effekt.

Bild klassifizieren

Verwenden Sie die Demo, um eine Tasse zu scannen. Erwarten Sie unten einen Effekt.

Wie baut man

Das WeChat-Miniprogramm enthält einige npm-Pakete. Wir installieren und kompilieren die npm-Pakete.

Schritt 1: „npm install“ ausführen

Schritt 2: Führen Sie „WeChat Developer Tool – Tool Menu – Build NPM“ aus. Ein Ordner „miniprogram_npm“ wird erstellt.

Das Projekt enthält einen vorkompilierten Ordner „miniprogram_npm“.

Datei: /package.json

  "dependencies" : {
    "@tensorflow-models/face-landmarks-detection" : "0.0.3" ,
    "@tensorflow-models/handpose" : "0.0.6" ,
    "@tensorflow/tfjs-backend-webgl" : "2.1.0" ,
    "@tensorflow/tfjs-converter" : "2.1.0" ,
    "@tensorflow/tfjs-core" : "2.1.0" ,
    "abab" : "2.0.0" ,
    "base64-js" : "1.3.1" ,
    "fetch-wechat" : "0.0.3" ,
    "text-encoder" : "0.0.4" ,
    "threejs-miniprogram" : "0.0.2"
  } 

Legen Sie die URL des Modells „TensorFlow.js“ fest

Sie können im Ordner „blazeface“ nach dem Schlüsselwort „BLAZEFACE_MODEL_URL“ suchen. Das Suchergebnis wird geändert.

Datei: /miniprogram_npm/@tensorflow-models/blazeface

 // modified
var BLAZEFACE_MODEL_URL = 'https://m.sanyue.red/demo/tfjs/blazeface_v1' ;

Sie können im Ordner „face-landmarks-detection“ nach dem Schlüsselwort „FACEMESH_GRAPHMODEL_PATH“ suchen.

Datei: /miniprogram_npm/@tensorflow-models/face-landmarks-detection

 // modified
var FACEMESH_GRAPHMODEL_PATH = 'https://m.sanyue.red/demo/tfjs/facemesh_v1' ;

Sie können im Ordner „handpose“ nach Schlüsselwörtern wie „HANDDETECT_MODEL_PATH“ und „HANDPOSE_MODEL_PATH“ suchen.

Datei: /miniprogram_npm/@tensorflow-models/handpose

 // modified
HANDDETECT_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handdetector_v1' ;

// modified
HANDPOSE_MODEL_PATH = 'https://m.sanyue.red/demo/tfjs/handskeleton_v1' ;

Sie können in der Datei „mobilenet.js“ nach Schlüsselwörtern suchen, die „mobilenet_model_path“ lauten.

Datei: /package_mobilenet/utils/mobilenet.js

 // mobilenet_model_path
  '2.00' : {
    '0.50' : {
      url : 'https://m.sanyue.red/demo/tfjs/mobilenet_v2_050_224' ,
      inputRange : [ 0 , 1 ]
    } , 

Legen Sie die URL des 3D-Modells fest

Sie können die Standard-URL eines GLTF-Modells durch eine 3D-Maske ersetzen.

Datei: /package_face_3d_mask/pages/photo/photo.js und /package_face_3d_mask/pagescamera/camera.js

 // a url of gltf model
const modelUrl = 'https://m.sanyue.red/demo/gltf/sunglass.glb' ; ; 

Legen Sie die URL des 2D-Sprite-Bildes fest

Sie können die Standard-URL eines Bildes durch eine 2D-Maske ersetzen.

Datei: /package_face_2d_mask/pages/photo/photo.js und /package_face_2d_mask/pages/camera/camera.js

 // a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ; 

So platzieren Sie ein 3D-Modell oder ein Bild an einer anderen Position

Dies ist eine Karte der 486 Schlüsselpunkte eines Gesichts.

486 Schlüsselpunkte Karte

Beispielsweise sind die Nummern 168, 122 und 351 die Augenmitten.

Datei: /package_face_3d_mask/utils/modelBusiness.js

 // index of the track points of the face
const trackPointA = 168 ;
const trackPointB = 122 ;
const trackPointC = 351 ;

Beispielsweise sind die Zahlen 0, 61 und 291 der Mund.

Datei: /package_face_2d_mask/utils/modelBusiness.js

 // index of the track points of the face
const trackPointA = 0 ;
const trackPointB = 61 ;
const trackPointC = 291 ; 

Handhaltungskarte

Die Orientierungspunkte der Handhaltung.

    // the "predictions" is an array of objects describing each detected hand.
    [
      {
        handInViewConfidence : 1 ,
        boundingBox : {
          topLeft : [ 162.91 , - 17.42 ] ,
          bottomRight : [ 548.56 , 368.23 ] ,
        } ,
        landmarks : [
          [ 472.52 , 298.59 , 0.00 ] ,
          [ 412.80 , 315.64 , - 6.18 ] ,
          // etc.
        ] ,
        annotations : {
          thumb : [
            [ 412.80 , 315.64 , - 6.18 ]
            [ 350.02 , 298.38 , - 7.14 ] ,
            // etc.
          ] ,
          // etc.
        }
      }
    ]