WeChat MiniProgram WebAR

1. Chinesische README

2. Analyse des chinesischen Quellcodes

Aktualisiert

Datum	Aktualisieren
23.07.2022	Neu: Verwenden Sie einen Experimental Worker auf iOS. Bitte beachten Sie die „Bild-AR- und 3D-Maske“. Behobenes Problem: „Image AR“ kann eine Zeit lang nicht auf iOS ausgeführt werden.
11.12.2021	Neu: Image Tracker mit OpenCV WebAssembly hinzugefügt. Bitte sehen Sie sich „Image AR mit OpenCV“ an.
07.09.2021	Neu: Farbverfolgungsmodus hinzugefügt. Bitte beachten Sie die „Color AR“.
15.08.2021	Neu: Videomaskenmodus für Bild-AR hinzugefügt. Dies ist eine CSS-3D-Transformation, die kein three.js erfordert. Bitte beachten Sie die „Bild-AR- und Videomaske“. Update: Ersetzen Sie die Geistergeometrie durch eine ebene Geometrie.
03.04.2021	Update: Der Modus „Zugriff auf eine Kamera“ von Image AR ist wiederhergestellt.
15.03.2021	Neu: Die Darstellung der AR-Maske wird durch three.js von 2D auf 3D umgestellt. Update: Da der Modus „Auf eine Kamera zugreifen“ langsam ist, wurde er entfernt.
16.08.2019	Update: Die Projektstruktur wurde geändert. Der Farb-Tracker und der Objekt-Tracker werden entfernt. Behebung des Modus „Zugriff auf eine Kamera“, der unter Android nicht richtig funktioniert.
06.08.2019	Problem beheben: Wenn die Funktion „wx.canvasToTempFilePath“ häufig auf Android Wechat aufgerufen wird, stürzt WeChat ab.
01.08.2019	Update: Die Perspektivtransformation ist erreicht.
15.07.2019	Update: Das NFT (Natural Feature Tracking) ist erreicht.
08.07.2019	Neu: Die affine Transformation ist erreicht.

Einführung in WeChat Web AR

Dies ist eine WeChat Web AR. Am 5. Juli 2019 unterstützte das WeChat-Miniprogramm AR. Es wurde eine neue API namens „CameraFrameListener“ hinzugefügt.

CameraFrameListener-API

Mit der neuen API können wir AR-Effekte erstellen. Diese Demo demonstriert einen AR-Tracker-Effekt mithilfe der Bibliothek „tracking.js“ und „jsfeat“.

„tracking.js“ bringt Computer-Vision-Algorithmen und -Techniken in die Browserumgebung. „jsfeat“ ist ebenfalls eine JavaScript-Computer-Vision-Bibliothek. Wir können Bild- und Gesichtserkennung in Echtzeit durchführen.

Tracking.js und JSFeat

Indexseite des WeChat-Miniprogramms

Bild AR und 3D-Maske

iOS Wechat Versionsnummer 8.0.24 oder höher: Es wird ein Experimental Worker verwendet.

Android und andere: Es wird kein Experimental Worker verwendet.

Verwenden Sie die Demo, um ein Musterbild unten zu scannen.

Auf dem Musterbild befindet sich ein Katzenbart.

Ein Effekt der Übersetzung und Skalierung.

Ein Rotationseffekt.

Bild-AR mit OpenCV

Das ist das Gleiche wie oben. Unterstützt die Bilddrehung.

Das Bild wird um 30 Grad gedreht.

Das Bild wird um 90 Grad gedreht.

Bild-AR und Videomaske

Verwenden Sie die Demo, um ein rotierendes Bild unten zu scannen.

Ein Videoplayer ist eingeschaltet und auf das Bild ausgerichtet.

Farbe AR

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

Ein Effekt des Versteckens.

Passen Sie die Farbe des hervorgehobenen Bereichs an.

Gesicht AR

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

Ein Effekt der Übersetzung und Skalierung.

Da die Orientierungspunkte der Demo einfach und grundlegend sind, wirkt sich die Übersetzung und Skalierung nur auf ein rotierendes Bild aus.

So ersetzen Sie das Bild „Katzenbart“.

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

Datei: /package_image_tracker/pages/photo/photo.js und package_face_tracker/pages/photo/photo.js

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

Die Breite und Höhe des „modelurl“-Bildes sollte 256 x 256, 512 x 512 und 1024 x 1024 usw. betragen.

So ersetzen Sie das Musterbild für Image AR

Datei: /package_face_tracker/utils/imageBusiness.js

 const patternImageUrl = '../../../face_pattern.jpg' ;

ein Musterbild

So platzieren Sie ein Bild für Image AR an anderen Positionen

Wählen Sie einen Trackpunkt auf einem Musterbild aus. Der Punkt wird zum Festlegen des „Katzenbart“-Bildes verwendet.

Datei: /package_image_tracker/utils/modelBusiness.js

 // a index of a track point on a pattern image
const trackPoint = { 
    x : 185 , // the width of the pattern image is 375
    y : 224 , // the height of the pattern image is 375
} ; 

So platzieren Sie ein Bild für Face AR an anderen Positionen

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

Wahrzeichen

Beispielsweise sind die Zahlen 27 und 29 die Seiten des Mundes.

Datei: /package_face_tracker/utils/modelBusiness.js

 // index of the track points of the face
const trackPointA = {
    // index of a landmark
    id : 27 ,
    // X coordinate
    x : 155.69898111309 , // the width of the face image is 375
} ;
const trackPointB = {
    // index of a landmark
    id : 29 ,
    // X coordinate
    x : 216.53075265284997 , // the width of the face image is 375
} ; 

Bekannte Probleme

Die AR-Demo ist auf iOS WeChat sehr langsam.