WeChat MiniProgram WebAR

1. 中国語の README

2. 中国語のソースコード分析

更新されました

日付	アップデート
2022-07-23	新規: iOS で実験用ワーカーを使用します。 「映像ARと3Dマスク」をご覧ください。修正された問題: 「Image AR」はしばらくの間、iOS で実行できません。
2021-12-11	新規: OpenCV WebAssembly を使用したイメージ トラッカーを追加しました。 「OpenCVを利用した画像AR」をご覧ください。
2021-09-07	新規: カラー トラッカー モードを追加しました。 「カラーAR」をご覧ください。
2021-08-15	新規: 画像 AR のビデオ マスク モードを追加しました。これは CSS 3D 変換であり、three.js を必要としません。 「イメージARとビデオマスク」をご覧ください。更新: スピリット ジオメトリを平面ジオメトリに置き換えます。
2021-04-03	更新: Image AR の「カメラにアクセス」モードが回復されました。
2021-03-15	New: ARマスクの表示がthree.jsにより2Dから3Dに変更されました。更新: 「カメラにアクセス」モードは遅いため、削除されました。
2019-08-16	更新: プロジェクト構造が変更されました。カラー トラッカーとオブジェクト トラッカーが削除されます。 Android で正しく動作しない「カメラにアクセス」モードを修正しました。
2019-08-06	問題の修正: Android Wechat で関数「wx.canvasToTempFilePath」が頻繁に呼び出される場合、WeChat がクラッシュします。
2019-08-01	更新: 遠近法変換が達成されました。
2019-07-15	追記：NFT(Natural Feature Tracking)を実現しました。
2019-07-08	New: アフィン変換が実現されました。

WeChat Web AR のご紹介

これはWeChatのWeb ARです。 2019 年 7 月 5 日、WeChat ミニプログラムが AR をサポートしました。 「CameraFrameListener」という名前の新しい API が追加されました。

CameraFrameListener API

新しい API を使用して AR エフェクトを作成できます。このデモでは、「tracking.js」と「jsfeat」ライブラリを使用した AR トラッカー エフェクトをデモンストレーションします。

「tracking.js」は、コンピュータ ビジョンのアルゴリズムと技術をブラウザ環境に導入します。 「jsfeat」も JavaScript コンピュータ ビジョン ライブラリです。リアルタイムの画像と顔の検出を行うことができます。

tracking.js と JSFeat

WeChat ミニプログラムのインデックス ページ

画像ARと3Dマスク

iOS Wechat バージョン番号 8.0.24 以降：Experimental Worker を使用します。

Android およびその他: Experimental Worker は使用されません。

デモを使用して、以下のパターン画像をスキャンします。

柄画像には猫のひげが描かれています。

移動と拡大縮小の効果。

回転の効果です。

OpenCVを利用した画像AR

これも上記と同じです。画像の回転をサポートします。

画像は 30 度回転されます。

画像が 90 度回転されます。

画像ARとビデオマスク

デモを使用して、以下の回転画像をスキャンします。

ビデオプレーヤーがオンになり、画像と合わせられます。

カラーAR

デモを使用して黄色をスキャンします。以下のような効果が期待できます。

隠れる効果です。

ハイライトされた領域の色をカスタマイズします。

顔AR

デモを使用して顔をスキャンします。以下のような効果が期待できます。

移動と拡大縮小の効果。

デモのランドマークはシンプルで基本的なものであるため、回転する画像では移動と拡大縮小の効果のみが得られます。

「猫のひげ」画像を差し替える方法

2D マスクの画像のデフォルト URL を置き換えることができます。

ファイル: /package_image_tracker/pages/photo/photo.js および package_face_tracker/pages/photo/photo.js

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

「modelurl」画像の幅と高さは、256 x 256、512 x 512、1024 x 1024 などにする必要があります。

画像ARのパターン画像を差し替える方法

ファイル: /package_face_tracker/utils/imageBusiness.js

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

パターン画像

画像ARの他の位置に画像を配置する方法

パターン画像上のトラックポイントを選択すると、そのポイントは「猫のひげ」画像を設定するために使用されます。

ファイル: /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
} ; 

Face ARの他の位置に画像を配置する方法

これは顔の 31 のキーポイントのマップです。

ランドマーク

たとえば、27 番と 29 番は口の側面です。

ファイル: /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
} ; 

既知の問題

iOS WeChat では AR デモが非常に遅いです。