WeChat MiniProgram WebAR

1. README ภาษาจีน

2. การวิเคราะห์ซอร์สโค้ดภาษาจีน

อัปเดตแล้ว

วันที่	อัปเดต
23-07-2022	ใหม่: ใช้ผู้ปฏิบัติงานทดลองบน iOS โปรดดู "รูปภาพ AR และ 3D Mask" แก้ไขปัญหา: "Image AR" ไม่สามารถทำงานบน iOS ได้สักระยะหนึ่ง
11-12-2021	ใหม่: เพิ่ม Image Tracker โดยใช้ OpenCV WebAssembly โปรดดู "รูปภาพ AR โดยใช้ OpenCV"
2021-09-07	ใหม่: เพิ่มโหมดติดตามสี โปรดดู "สี AR"
15-08-2021	ใหม่: เพิ่มโหมดวิดีโอมาสก์สำหรับรูปภาพ AR นี่คือการแปลง CSS 3D ซึ่งไม่จำเป็นต้องใช้ three.js โปรดดู "Image AR และ Video Mask" อัปเดต: แทนที่เรขาคณิตวิญญาณด้วยเรขาคณิตระนาบ
03-04-2021	อัปเดต: โหมด "เข้าถึงกล้อง" ของ Image AR ได้รับการกู้คืนแล้ว
15-03-2021	ใหม่: การแสดงหน้ากาก AR เปลี่ยนจาก 2D เป็น 3D โดย three.js อัปเดต: เนื่องจากโหมด "เข้าถึงกล้อง" ทำงานช้า จึงถูกลบออก
2019-08-16	อัปเดต: โครงสร้างโครงการได้รับการแก้ไข ตัวติดตามสีและตัวติดตามวัตถุจะถูกลบออก แก้ไขโหมด "เข้าถึงกล้อง" ที่ทำงานไม่ถูกต้องบน Android
2019-08-06	แก้ไขปัญหา: เมื่อมีการเรียกใช้ฟังก์ชัน "wx.canvasToTempFilePath" บ่อยครั้งบน Android Wechat WeChat จะขัดข้อง
2019-08-01	อัปเดต: การแปลงเปอร์สเปคทีฟสำเร็จแล้ว
2019-07-15	อัปเดต: บรรลุ NFT (การติดตามคุณสมบัติทางธรรมชาติ) แล้ว
2019-07-08	ใหม่: การแปลงความสัมพันธ์สำเร็จแล้ว

ข้อมูลเบื้องต้นเกี่ยวกับ WeChat Web AR

นี่คือ WeChat Web AR ในวันที่ 5 กรกฎาคม 2019 มินิโปรแกรม WeChat รองรับ AR มีการเพิ่ม API ใหม่ชื่อ "CameraFrameListener"

CameraFrameListener API

เราสามารถสร้างเอฟเฟกต์ AR ด้วย API ใหม่ การสาธิตนี้สาธิตเอฟเฟกต์ตัวติดตาม AR โดยใช้ไลบรารี "tracking.js" และ "jsfeat"

"tracking.js" นำอัลกอริธึมและเทคนิคการมองเห็นของคอมพิวเตอร์มาสู่สภาพแวดล้อมของเบราว์เซอร์ "jsfeat" ยังเป็นไลบรารีคอมพิวเตอร์วิทัศน์ JavaScript เราสามารถตรวจจับภาพและใบหน้าแบบเรียลไทม์ได้

Tracking.js และ JSFeat

หน้าดัชนีของมินิโปรแกรม WeChat

รูปภาพ AR และ 3D Mask

iOS Wechat เวอร์ชัน 8.0.24 หรือสูงกว่า：จะใช้ Experimental Worker

Android และอื่นๆ: จะไม่ใช้ Experimental Worker

ใช้การสาธิตเพื่อสแกนภาพรูปแบบด้านล่าง

มีหนวดเคราแมวอยู่บนภาพลวดลาย

ผลของการแปลและการปรับขนาด

ผลของการหมุน

รูปภาพ AR โดยใช้ OpenCV

นี่เป็นเช่นเดียวกับข้างต้น รองรับการหมุนภาพ

รูปภาพจะหมุนไป 30 องศา

รูปภาพจะหมุน 90 องศา

รูปภาพ AR และมาสก์วิดีโอ

ใช้การสาธิตเพื่อสแกนภาพที่หมุนด้านล่าง

โปรแกรมเล่นวิดีโอเปิดอยู่และสอดคล้องกับรูปภาพ

เออาร์สี

ใช้การสาธิตเพื่อสแกนสีเหลือง คาดว่าจะมีผลกระทบด้านล่าง

ผลของการซ่อนเร้น

กำหนดสีของพื้นที่ที่ไฮไลต์

เออาร์ใบหน้า

ใช้การสาธิตเพื่อสแกนใบหน้า คาดว่าจะมีผลกระทบด้านล่าง

ผลของการแปลและการปรับขนาด

เนื่องจากจุดสังเกตของการสาธิตนั้นเรียบง่ายและเป็นพื้นฐาน มีเพียงเอฟเฟกต์ของการแปลและการปรับขนาดเท่านั้นที่อยู่บนภาพที่หมุนได้

วิธีเปลี่ยนรูปภาพ "เคราแมว"

คุณสามารถแทนที่ URL เริ่มต้นของรูปภาพสำหรับมาสก์ 2D ได้

ไฟล์: /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 เป็นต้น

วิธีแทนที่รูปภาพรูปแบบสำหรับ Image AR

ไฟล์: /package_face_tracker/utils/imageBusiness.js

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

ภาพรูปแบบ

วิธีวางรูปภาพในตำแหน่งอื่นสำหรับ Image 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
} ; 

ปัญหาที่ทราบ

การสาธิต AR บน iOS WeChat ช้ามาก