WeChat MiniProgram WebAR

1. 중국어 읽어보기

2. 중국어 소스코드 분석

업데이트됨

날짜	업데이트
2022-07-23	신규: iOS에서 Experimental Worker를 사용하세요. "이미지 AR 및 3D 마스크"를 참고하세요. 해결된 문제: "Image AR"이 한동안 iOS에서 실행되지 않습니다.
2021-12-11	신규: OpenCV WebAssembly를 사용하여 이미지 추적기를 추가했습니다. "OpenCV를 이용한 이미지 AR"을 참고하세요.
2021-09-07	신규: 색상 추적기 모드가 추가되었습니다. "컬러 AR"을 참조하시기 바랍니다.
2021-08-15	신규: 이미지 AR용 비디오 마스크 모드를 추가했습니다. 이는 three.js가 필요하지 않은 CSS 3D 변환입니다. "이미지 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	신규: 아핀 변환이 달성되었습니다.

WeChat Web AR 소개

위챗 웹 AR입니다. 2019년 7월 5일, 위챗 미니프로그램이 AR을 지원했습니다. "CameraFrameListener"라는 새로운 API가 추가되었습니다.

카메라프레임리스너 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 등이어야 합니다.

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
} ; 

알려진 문제

iOS WeChat에서는 AR 데모가 매우 느립니다.