WeChat MiniProgram WebAR

1. LEIA-ME chinês

2. Análise de código-fonte chinês

Atualizado

Data	Atualizar
23/07/2022	Novo: use um trabalhador experimental no iOS. Consulte a "Imagem AR e máscara 3D". Problema corrigido: "Image AR" não pode ser executado no iOS por um tempo.
11/12/2021	Novo: Adicionado um Image Tracker usando OpenCV WebAssembly. Consulte a "Imagem AR usando OpenCV".
2021-09-07	Novo: Adicionado um modo Color Tracker. Por favor, consulte a "Cor AR".
15/08/2021	Novo: Adicionado um modo de máscara de vídeo para imagem AR. Esta é uma transformação CSS 3D, que não requer three.js. Consulte "Image AR e máscara de vídeo". Atualização: Substitua a geometria espiritual por uma geometria plana.
03/04/2021	Atualização: O modo "acessar uma câmera" do Image AR foi recuperado.
15/03/2021	Novo: a exibição da máscara AR foi alterada de 2D para 3D por three.js. Atualização: Como o modo "acessar uma câmera" é lento, ele foi removido.
16/08/2019	Atualização: A estrutura do projeto foi modificada. O rastreador de cores e o rastreador de objetos são removidos. Corrija o modo "acessar uma câmera" que não funciona corretamente no Android.
06/08/2019	Correção do problema: quando a função "wx.canvasToTempFilePath" é chamada com frequência no Android Wechat, o WeChat trava.
01/08/2019	Atualização: A transformação da perspectiva é alcançada.
15/07/2019	Atualização: O NFT (Natural Feature Tracking) foi alcançado.
08/07/2019	Novo: A transformação afim é alcançada.

Introdução ao WeChat Web AR

Este é um WeChat Web AR. Em 5 de julho de 2019, o miniprograma WeChat suportava AR. Foi adicionada uma nova API chamada "CameraFrameListener".

API CameraFrameListener

Podemos criar efeitos AR com a nova API. Esta demonstração demonstra um efeito de rastreador AR usando a biblioteca "tracking.js" e "jsfeat".

O "tracking.js" traz algoritmos e técnicas de visão computacional para o ambiente do navegador. O "jsfeat" também é uma biblioteca JavaScript de visão computacional. Podemos fazer detecção de imagem e rosto em tempo real.

rastreamento.js e JSFeat

Página de índice do miniprograma WeChat

Imagem AR e máscara 3D

Versão iOS Wechat número 8.0.24 ou superior: Ele usará um Trabalhador Experimental.

Android e outros: não usará um trabalhador experimental.

Use a demonstração para digitalizar uma imagem padrão abaixo.

Uma barba de gato está na imagem padrão.

Um efeito de tradução e dimensionamento.

Um efeito de rotação.

Imagem AR usando OpenCV

Isto é o mesmo que acima. Suporta rotação de imagem.

A imagem é girada em 30 graus.

A imagem é girada em 90 graus.

AR de imagem e máscara de vídeo

Use a demonstração para digitalizar uma imagem rotativa abaixo.

Um player de vídeo está ligado e alinhado com a imagem.

AR colorida

Use a demonstração para digitalizar uma cor amarela. Espere um efeito abaixo.

Um efeito de ocultação.

Personalize a cor da área destacada.

AR facial

Use a demonstração para digitalizar um rosto. Espere um efeito abaixo.

Um efeito de tradução e dimensionamento.

Como os pontos de referência da demonstração são simples e básicos, apenas um efeito de tradução e dimensionamento ocorre em uma imagem rotativa.

Como substituir a imagem “barba de gato”

Você pode substituir o URL padrão de uma imagem pela máscara 2D.

Arquivo: /package_image_tracker/pages/photo/photo.js e package_face_tracker/pages/photo/photo.js

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

A largura e altura da imagem "modelurl" devem ser 256 x 256, 512 x 512 e 1024 x 1024 etc.

Como substituir a imagem padrão para Image AR

Arquivo: /package_face_tracker/utils/imageBusiness.js

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

uma imagem padrão

Como colocar uma imagem em outras posições para Image AR

Selecione um ponto de rastreamento em uma imagem padrão, o ponto é usado para definir a imagem "barba de gato".

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

Como colocar uma imagem em outras posições para Face AR

Este é um mapa dos 31 pontos-chave de um rosto.

pontos de referência

Por exemplo, o número 27 e o número 29 são os lados da boca.

Arquivo: /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 conhecidos

A demonstração de AR é muito lenta no iOS WeChat.