Skip to content

Commit

Permalink
Examples: Refactored webgl_morphtargets_webcam.
Browse files Browse the repository at this point in the history
  • Loading branch information
mrdoob committed May 19, 2023
1 parent 0d8676b commit 1f75a58
Showing 1 changed file with 48 additions and 50 deletions.
98 changes: 48 additions & 50 deletions examples/webgl_morphtargets_webcam.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

Expand Down Expand Up @@ -108,40 +106,6 @@
// '': 'tongueOut'
};

const video = document.createElement( 'video' );

const filesetResolver = await FilesetResolver.forVisionTasks(
'https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm'
);

const faceLandmarker = await FaceLandmarker.createFromOptions( filesetResolver, {
baseOptions: {
modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
delegate: 'GPU'
},
outputFaceBlendshapes: true,
outputFacialTransformationMatrixes: true,
runningMode: 'VIDEO',
numFaces: 1
} );

if ( navigator.mediaDevices && navigator.mediaDevices.getUserMedia ) {

navigator.mediaDevices.getUserMedia( { video: { facingMode: 'user' } } )
.then( function ( stream ) {

video.srcObject = stream;
video.play();

} )
.catch( function ( error ) {

console.error( 'Unable to access the camera/webcam.', error );

} );

}

//

const renderer = new THREE.WebGLRenderer( { antialias: true } );
Expand Down Expand Up @@ -178,13 +142,14 @@
const mesh = gltf.scene.children[ 0 ];
scene.add( mesh );

const head = mesh.getObjectByName( 'mesh_2' );
head.material = new THREE.MeshNormalMaterial();

// GUI

const gui = new GUI();
gui.close();

const head = mesh.getObjectByName( 'mesh_2' );
head.material = new THREE.MeshNormalMaterial();
const influences = head.morphTargetInfluences;

for ( const [ key, value ] of Object.entries( head.morphTargetDictionary ) ) {
Expand All @@ -194,11 +159,15 @@
.listen( influences );

}

renderer.setAnimationLoop( animation );

} );

// Video Texture

const video = document.createElement( 'video' );

const texture = new THREE.VideoTexture( video );
texture.colorSpace = THREE.SRGBColorSpace;

Expand All @@ -207,14 +176,43 @@
const videomesh = new THREE.Mesh( geometry, material );
scene.add( videomesh );

//
// MediaPipe

const filesetResolver = await FilesetResolver.forVisionTasks(
'https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm'
);

const faceLandmarker = await FaceLandmarker.createFromOptions( filesetResolver, {
baseOptions: {
modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
delegate: 'GPU'
},
outputFaceBlendshapes: true,
outputFacialTransformationMatrixes: true,
runningMode: 'VIDEO',
numFaces: 1
} );

const stats = new Stats();
document.body.appendChild( stats.dom );
if ( navigator.mediaDevices && navigator.mediaDevices.getUserMedia ) {

navigator.mediaDevices.getUserMedia( { video: { facingMode: 'user' } } )
.then( function ( stream ) {

video.srcObject = stream;
video.play();

} )
.catch( function ( error ) {

console.error( 'Unable to access the camera/webcam.', error );

} );

}

const transform = new THREE.Object3D();

renderer.setAnimationLoop( function () {
function animation() {

if ( video.readyState >= HTMLMediaElement.HAVE_METADATA ) {

Expand All @@ -241,18 +239,20 @@

if ( results.faceBlendshapes.length > 0 ) {

const faceBlendshapes = results.faceBlendshapes[ 0 ].categories;;
const face = scene.getObjectByName( 'mesh_2' );

const object = scene.getObjectByName( 'mesh_2' );
const faceBlendshapes = results.faceBlendshapes[ 0 ].categories;

for ( const blendshape of faceBlendshapes ) {

const name = blendshapesMap[ blendshape.categoryName ];
const index = object.morphTargetDictionary[ name ];
const categoryName = blendshape.categoryName;
const score = blendshape.score;

const index = face.morphTargetDictionary[ blendshapesMap[ categoryName ] ];

if ( index !== undefined ) {

object.morphTargetInfluences[ index ] = blendshape.score;
face.morphTargetInfluences[ index ] = score;

}

Expand All @@ -269,9 +269,7 @@

controls.update();

stats.update();

} );
}

window.addEventListener( 'resize', function () {

Expand Down

0 comments on commit 1f75a58

Please sign in to comment.