WeChat MiniProgram WebAR

1. Léame chino

2. Análisis del código fuente chino

Actualizado

Fecha	Actualizar
2022-07-23	Nuevo: utilice un trabajador experimental en iOS. Consulte "Imagen AR y máscara 3D". Problema solucionado: "Image AR" no se puede ejecutar en iOS por un tiempo.
2021-12-11	Nuevo: se agregó un rastreador de imágenes usando OpenCV WebAssembly. Consulte "Imagen AR usando OpenCV".
2021-09-07	Nuevo: se agregó un modo de seguimiento de color. Consulte el "Color AR".
2021-08-15	Nuevo: se agregó un modo de máscara de video para imágenes AR. Esta es una transformación CSS 3D, que no requiere three.js. Consulte la "Máscara de vídeo y AR de imagen". Actualización: reemplace la geometría espiritual con una geometría plana.
2021-04-03	Actualización: Se recupera el modo "acceder a una cámara" de Image AR.
2021-03-15	Nuevo: three.js cambia la visualización de la máscara AR de 2D a 3D. Actualización: debido a que el modo "acceder a una cámara" es lento, se eliminó.
2019-08-16	Actualización: La estructura del proyecto ha sido modificada. Se eliminan el rastreador de color y el rastreador de objetos. Se corrigió el modo "acceder a una cámara" que no funciona correctamente en Android.
2019-08-06	Solución del problema: cuando se llama con frecuencia a la función "wx.canvasToTempFilePath" en Android Wechat, WeChat se bloqueará.
2019-08-01	Actualización: se logra la transformación de perspectiva.
2019-07-15	Actualización: Se logra el NFT (Seguimiento de características naturales).
2019-07-08	Nuevo: se logra la transformación afín.

Introducción a WeChat Web AR

Este es un WeChat Web AR. El 5 de julio de 2019, el miniprograma WeChat admitió AR. Se agregó una nueva API llamada "CameraFrameListener".

API CameraFrameListener

Podemos crear efectos AR con la nueva API. Esta demostración demuestra un efecto de seguimiento de AR utilizando la biblioteca "tracking.js" y "jsfeat".

"tracking.js" incorpora algoritmos y técnicas de visión por computadora al entorno del navegador. "jsfeat" también es una biblioteca de visión por computadora de JavaScript. Podemos realizar detección de imágenes y rostros en tiempo real.

seguimiento.js y JSFeat

Página de índice del miniprograma WeChat

Imagen AR y máscara 3D

Número de versión de iOS Wechat 8.0.24 o superior: utilizará un trabajador experimental.

Android y otros: No utilizará un Trabajador Experimental.

Utilice la demostración para escanear una imagen de patrón a continuación.

En la imagen del patrón hay una barba de gato.

Un efecto de traducción y escala.

Un efecto de rotación.

Imagen AR usando OpenCV

Esto es lo mismo que el anterior. Admite rotación de imágenes.

La imagen se gira 30 grados.

La imagen se gira 90 grados.

Imagen AR y máscara de vídeo

Utilice la demostración para escanear una imagen giratoria a continuación.

Un reproductor de vídeo está encendido y alineado con la imagen.

Color AR

Utilice la demostración para escanear un color amarillo. Espere un efecto a continuación.

Un efecto de ocultación.

Personaliza el color del área resaltada.

Cara AR

Utilice la demostración para escanear una cara. Espere un efecto a continuación.

Un efecto de traducción y escala.

Debido a que los puntos de referencia de la demostración son simples y básicos, solo se produce un efecto de traducción y escala en una imagen en rotación.

Cómo reemplazar la imagen de "barba de gato"

Puede reemplazar la URL predeterminada de una imagen por una máscara 2D.

Archivo: /package_image_tracker/pages/photo/photo.js y package_face_tracker/pages/photo/photo.js

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

El ancho y alto de la imagen "modelurl" deben ser 256 x 256, 512 x 512 y 1024 x 1024, etc.

Cómo reemplazar la imagen del patrón para Image AR

Archivo: /package_face_tracker/utils/imageBusiness.js

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

una imagen de patrón

Cómo poner una imagen en otras posiciones para Image AR

Seleccione un punto de seguimiento en una imagen de patrón; el punto se utiliza para configurar la imagen de "barba de gato".

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

Cómo poner una imagen en otras posiciones para Face AR

Este es un mapa de los 31 puntos clave de una cara.

puntos de referencia

Por ejemplo, un número 27 y un número 29 son los lados de la boca.

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

Problemas conocidos

La demostración de AR es muy lenta en iOS WeChat.