WeChat MiniProgram WebAR

1. README Cina

2. Analisis Kode Sumber Tiongkok

Diperbarui

Tanggal	Memperbarui
23-07-2022	Baru: Gunakan Pekerja Eksperimental di iOS. Silakan lihat "Gambar AR dan Masker 3D". Memperbaiki Masalah: "Image AR" tidak dapat berjalan di iOS untuk sementara waktu.
11-12-2021	Baru: Menambahkan Pelacak Gambar menggunakan OpenCV WebAssembly. Silakan lihat "Gambar AR menggunakan OpenCV".
07-09-2021	Baru: Menambahkan mode Pelacak Warna. Silakan lihat "Warna AR".
15-08-2021	Baru: Menambahkan mode masker video untuk AR gambar. Ini adalah transformasi 3D CSS, yang tidak memerlukan three.js. Silakan lihat "Gambar AR dan Video Mask". Pembaruan: Ganti geometri roh dengan geometri bidang.
03-04-2021	Pembaruan: Mode "akses kamera" pada Image AR dipulihkan.
15-03-2021	Baru: Tampilan topeng AR diubah dari 2D menjadi 3D oleh three.js. Pembaruan: Karena mode "akses kamera" lambat, maka dihapus.
16-08-2019	Pembaruan: Struktur proyek telah diubah. Pelacak warna dan pelacak objek dihapus. Perbaiki mode "akses kamera" yang tidak berfungsi dengan baik di Android.
06-08-2019	Perbaiki Masalah: Ketika fungsi "wx.canvasToTempFilePath" sering dipanggil di Android Wechat, WeChat akan mogok.
01-08-2019	Pembaruan: Transformasi perspektif tercapai.
15-07-2019	Pembaruan: NFT (Pelacakan Fitur Alami) tercapai.
08-07-2019	Baru: Transformasi affine tercapai.

Pengenalan tentang WeChat Web AR

Ini adalah AR Web WeChat. Pada tanggal 5 Juli 2019, program mini WeChat mendukung AR. Telah ditambahkan API baru bernama "CameraFrameListener".

API CameraFrameListener

Kita dapat membuat efek AR dengan API baru. Demo ini mendemonstrasikan efek pelacak AR menggunakan pustaka "tracking.js" dan "jsfeat".

"Tracking.js" menghadirkan algoritme dan teknik visi komputer ke dalam lingkungan browser. "Jsfeat" juga merupakan perpustakaan visi komputer JavaScript. Kita dapat melakukan deteksi gambar dan wajah secara real-time.

pelacakan.js dan JSFeat

Halaman Indeks program Mini WeChat

Gambar AR dan Masker 3D

iOS WeChat versi nomor 8.0.24 atau lebih tinggi：Ini akan menggunakan Pekerja Eksperimental.

Android dan lainnya: Ini tidak akan menggunakan Pekerja Eksperimental.

Gunakan demo untuk memindai gambar pola di bawah ini.

Jenggot kucing ada pada gambar pola.

Efek penerjemahan dan penskalaan.

Efek berputar.

Gambar AR menggunakan OpenCV

Ini sama seperti di atas. Mendukung rotasi gambar.

Gambar diputar 30 derajat.

Gambar diputar 90 derajat.

AR Gambar dan Masker Video

Gunakan demo untuk memindai gambar berputar di bawah.

Pemutar video aktif dan sejajar dengan gambar.

Warna AR

Gunakan demo untuk memindai warna kuning. Harapkan efeknya di bawah ini.

Efek menyembunyikan.

Sesuaikan warna area yang disorot.

Wajah AR

Gunakan demo untuk memindai wajah. Harapkan efeknya di bawah ini.

Efek penerjemahan dan penskalaan.

Karena landmark dari demo ini sederhana dan mendasar, hanya efek penerjemahan dan penskalaan yang ada pada gambar yang berputar.

Bagaimana cara mengganti gambar "janggut kucing".

Anda dapat mengganti url default gambar dengan topeng 2D.

File: /package_image_tracker/pages/photo/photo.js dan package_face_tracker/pages/photo/photo.js

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

Lebar dan tinggi gambar "modelurl" harus 256 x 256, 512 x 512 dan 1024 x 1024 dll.

Bagaimana cara mengganti gambar pola untuk Image AR

File: /package_face_tracker/utils/imageBusiness.js

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

gambar pola

Cara meletakkan gambar pada posisi lain untuk Image AR

Pilih track point pada gambar pola, titik tersebut digunakan untuk mengatur gambar “janggut kucing”.

File: /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
} ; 

Cara memasang gambar di posisi lain untuk Face AR

Ini adalah peta dari 31 titik kunci sebuah wajah.

landmark

Misalnya angka 27 dan angka 29 adalah bagian samping mulutnya.

File: /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
} ; 

Masalah yang Diketahui

Demo AR sangat lambat di iOS WeChat.