From 89fa7ada4f8f454ce149219be0d650cea501294a Mon Sep 17 00:00:00 2001 From: hiukim Date: Sat, 10 Jun 2023 17:02:01 -0700 Subject: [PATCH] default flip face in face tracking selfie mode --- examples/face-tracking/example1.html | 1 - examples/face-tracking/example2.html | 1 - examples/face-tracking/example3.html | 1 - examples/face-tracking/three-css.html | 2 -- examples/face-tracking/three-facemesh.html | 1 - examples/face-tracking/three.html | 3 +-- src/face-target/aframe.js | 16 ++++++++++++++-- src/face-target/controller.js | 4 ++-- src/face-target/face-mesh-helper.js | 7 +++++-- src/face-target/three.js | 13 +++++++++++-- 10 files changed, 33 insertions(+), 16 deletions(-) diff --git a/examples/face-tracking/example1.html b/examples/face-tracking/example1.html index 6c623ea5..ad612800 100644 --- a/examples/face-tracking/example1.html +++ b/examples/face-tracking/example1.html @@ -18,7 +18,6 @@ position: absolute; width: 100%; height: 100%; - transform: scaleX(-1); } diff --git a/examples/face-tracking/example2.html b/examples/face-tracking/example2.html index ea4a35da..a886e49d 100644 --- a/examples/face-tracking/example2.html +++ b/examples/face-tracking/example2.html @@ -43,7 +43,6 @@ position: absolute; width: 100%; height: 100%; - transform: scaleX(-1); } .options-panel { position: fixed; diff --git a/examples/face-tracking/example3.html b/examples/face-tracking/example3.html index 24e22f3e..429e8707 100644 --- a/examples/face-tracking/example3.html +++ b/examples/face-tracking/example3.html @@ -58,7 +58,6 @@ position: absolute; width: 100%; height: 100%; - transform: scaleX(-1); } #example-control-overlay { diff --git a/examples/face-tracking/three-css.html b/examples/face-tracking/three-css.html index 05f6d1e3..fe2417b5 100644 --- a/examples/face-tracking/three-css.html +++ b/examples/face-tracking/three-css.html @@ -31,7 +31,6 @@ height: 100vh; position: relative; overflow: hidden; - transform: scaleX(-1); } #ar-div { width: 1000px; @@ -46,7 +45,6 @@ color: white; } #ar-div > div { - transform: scaleX(-1); } diff --git a/examples/face-tracking/three-facemesh.html b/examples/face-tracking/three-facemesh.html index cfd5d234..db27f22d 100644 --- a/examples/face-tracking/three-facemesh.html +++ b/examples/face-tracking/three-facemesh.html @@ -38,7 +38,6 @@ height: 100vh; position: relative; overflow: hidden; - transform: scaleX(-1); } diff --git a/examples/face-tracking/three.html b/examples/face-tracking/three.html index c78910e4..c8b07552 100644 --- a/examples/face-tracking/three.html +++ b/examples/face-tracking/three.html @@ -21,7 +21,7 @@ filterMinCF: 0.001, filterBeta: 10, userDeviceId, - environmentDeviceId + environmentDeviceId, }); const anchor = mindarThree.addAnchor(1); @@ -94,7 +94,6 @@ height: 100vh; position: relative; overflow: hidden; - transform: scaleX(-1); } #control { diff --git a/src/face-target/aframe.js b/src/face-target/aframe.js index 07254d31..35b5c1fa 100644 --- a/src/face-target/aframe.js +++ b/src/face-target/aframe.js @@ -8,16 +8,18 @@ AFRAME.registerSystem('mindar-face-system', { video: null, shouldFaceUser: true, lastHasFace: false, + disableFaceMirror: false, init: function() { this.anchorEntities = []; this.faceMeshEntities = []; }, - setup: function({uiLoading, uiScanning, uiError, filterMinCF, filterBeta}) { + setup: function({uiLoading, uiScanning, uiError, filterMinCF, filterBeta, disableFaceMirror}) { this.ui = new UI({uiLoading, uiScanning, uiError}); this.filterMinCF = filterMinCF; this.filterBeta = filterBeta; + this.disableFaceMirror = disableFaceMirror; }, registerFaceMesh: function(el) { @@ -160,7 +162,9 @@ AFRAME.registerSystem('mindar-face-system', { }); this._resize(); - await this.controller.setup(); + const flipFace = this.shouldFaceUser && !this.disableFaceMirror; + + await this.controller.setup(flipFace); await this.controller.dummyRun(this.video); for (let i = 0; i < this.faceMeshEntities.length; i++) { @@ -208,6 +212,12 @@ AFRAME.registerSystem('mindar-face-system', { this.video.style.width = vw + "px"; this.video.style.height = vh + "px"; + if (this.shouldFaceUser && !this.disableFaceMirror) { + video.style.transform = 'scaleX(-1)'; + } else { + video.style.transform = 'scaleX(1)'; + } + const sceneEl = container.getElementsByTagName("a-scene")[0]; sceneEl.style.top = this.video.style.top; sceneEl.style.left = this.video.style.left; @@ -227,6 +237,7 @@ AFRAME.registerComponent('mindar-face', { uiError: {type: 'string', default: 'yes'}, filterMinCF: {type: 'number', default: -1}, filterBeta: {type: 'number', default: -1}, + disableFaceMirror: {type: 'boolean', default: 'false'}, }, init: function() { @@ -244,6 +255,7 @@ AFRAME.registerComponent('mindar-face', { uiError: this.data.uiError, filterMinCF: this.data.filterMinCF === -1? null: this.data.filterMinCF, filterBeta: this.data.filterBeta === -1? null: this.data.filterBeta, + disableFaceMirror: this.data.disableFaceMirror, }); if (this.data.autoStart) { diff --git a/src/face-target/controller.js b/src/face-target/controller.js index cac3a74a..45d1fdf1 100644 --- a/src/face-target/controller.js +++ b/src/face-target/controller.js @@ -27,9 +27,9 @@ class Controller { this.faceScaleFilter = new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta}); } - async setup() { + async setup(flipFace) { await waitCV(); - this.faceMeshHelper = new FaceMeshHelper(); + this.faceMeshHelper = new FaceMeshHelper(flipFace); } onInputResized(input) { diff --git a/src/face-target/face-mesh-helper.js b/src/face-target/face-mesh-helper.js index 0577cd3f..917e60e9 100644 --- a/src/face-target/face-mesh-helper.js +++ b/src/face-target/face-mesh-helper.js @@ -1,7 +1,7 @@ import {FaceMesh} from "@mediapipe/face_mesh"; class FaceMeshHelper { - constructor() { + constructor(flipFace) { this.detectResolve = null; let _FaceMesh = FaceMesh; @@ -14,12 +14,15 @@ class FaceMeshHelper { return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4/${file}`; }}); + console.log("flipFace", flipFace); + this.faceMesh.setOptions({ maxNumFaces: 1, //refineLandmarks: true, refineLandmarks: false, minDetectionConfidence: 0.5, - minTrackingConfidence: 0.5 + minTrackingConfidence: 0.5, + selfieMode: flipFace }); this.faceMesh.onResults((results) => { diff --git a/src/face-target/three.js b/src/face-target/three.js index bc19c0f0..c973be4c 100644 --- a/src/face-target/three.js +++ b/src/face-target/three.js @@ -8,7 +8,7 @@ const THREE={BufferGeometry,BufferAttribute}; export class MindARThree { constructor({container, uiLoading="yes", uiScanning="yes", uiError="yes", filterMinCF=null, filterBeta=null, - userDeviceId = null, environmentDeviceId = null + userDeviceId = null, environmentDeviceId = null, disableFaceMirror = false, }) { this.container = container; this.ui = new UI({ uiLoading, uiScanning, uiError }); @@ -17,6 +17,7 @@ export class MindARThree { filterMinCF: filterMinCF, filterBeta: filterBeta, }); + this.disableFaceMirror = disableFaceMirror; this.scene = new Scene(); this.cssScene = new Scene(); this.renderer = new WebGLRenderer({ antialias: true, alpha: true }); @@ -183,7 +184,9 @@ export class MindARThree { } this._resize(); - await this.controller.setup(); + const flipFace = this.shouldFaceUser && !this.disableFaceMirror; + + await this.controller.setup(flipFace); await this.controller.dummyRun(video); this._resize(); @@ -227,6 +230,12 @@ export class MindARThree { video.style.width = vw + "px"; video.style.height = vh + "px"; + if (this.shouldFaceUser && !this.disableFaceMirror) { + video.style.transform = 'scaleX(-1)'; + } else { + video.style.transform = 'scaleX(1)'; + } + const canvas = renderer.domElement; const cssCanvas = cssRenderer.domElement;