forked from jeeliz/jeelizFaceFilter
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.js
150 lines (119 loc) · 4.59 KB
/
demo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
"use strict";
// SETTINGS of this demo :
const SETTINGS = {
cameraFOV: 40, // in degrees, 3D camera FOV
pivotOffsetYZ: [-0.2, -0.2]
};
// some globalz :
let THREECAMERA;
let ISDETECTED;
let ANONYMOUSMESH;
let ANONYMOUSOBJ3D;
let isTransformed = false;
// callback : launched if a face is detected or lost. TODO : add a cool particle effect WoW !
function detect_callback(isDetected) {
if (isDetected) {
console.log('INFO in detect_callback() : DETECTED');
} else {
console.log('INFO in detect_callback() : LOST');
}
}
// build the 3D. called once when Jeeliz Face Filter is OK
function init_threeScene(spec) {
const threeStuffs = THREE.JeelizHelper.init(spec, detect_callback);
// Draw frame canvas
const frameCanvas = document.getElementById('frameCanvas');
const ctx = frameCanvas.getContext('2d');
const img = new Image(600, 600);
img.onload = () => {
ctx.drawImage(img, 0, 0, 600, 600);
}
img.src = './images/frame.png';
const openMouthInstruction = $('#openMouthInstruction');
openMouthInstruction.hide();
// CREATE OUR ANONYMOUS MASK
const headLoader = new THREE.BufferGeometryLoader();
headLoader.load(
'./models/anonymous/anonymous.json',
(geometryHead) => {
const mat = new THREE.MeshLambertMaterial({
map: new THREE.TextureLoader().load('./models/anonymous/anonymous.png'),
transparent: true,
shininess: 0.3
});
ANONYMOUSMESH = new THREE.Mesh(geometryHead, mat);
ANONYMOUSMESH.frustumCulled = false;
ANONYMOUSMESH.scale.multiplyScalar(0.07);
ANONYMOUSMESH.position.y -= 0.7;
ANONYMOUSMESH.renderOrder = 1000000;
// FOR THE APPEAR ANIMATION
// we set the opacity of the materials to zero
// the mesh will appear when the user growwlsss (or simply open his mouth)
ANONYMOUSMESH.material.opacity = 0;
ANONYMOUSOBJ3D = new THREE.Object3D();
ANONYMOUSOBJ3D.add(ANONYMOUSMESH);
addDragEventListener(ANONYMOUSOBJ3D);
threeStuffs.faceObject.add(ANONYMOUSOBJ3D);
openMouthInstruction.show();
}
);
// add our video recording effect
const canvas = document.getElementById('jeeFaceFilterCanvas');
if (canvas) {
addVideoRecordingEffect(canvas);
}
// CREATE THE CAMERA
const aspecRatio = spec.canvasElement.width / spec.canvasElement.height;
THREECAMERA = new THREE.PerspectiveCamera(SETTINGS.cameraFOV, aspecRatio, 0.1, 100);
// CREATE A LIGHT
const ambient = new THREE.AmbientLight(0xffffff, 0.8);
threeStuffs.scene.add(ambient);
// CREAT A SPOTLIGHT
var dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
dirLight.position.set(100, 1000, 1000);
threeStuffs.scene.add(dirLight);
} // end init_threeScene()
// ANIMATION
function animateAppear (object3D) {
new TWEEN.Tween( object3D.material )
.to({ opacity: 1}, 700)
.start();
}
//launched by body.onload() :
function main(){
JeelizResizer.size_canvas({
canvasId: 'jeeFaceFilterCanvas',
callback: function(isError, bestVideoSettings){
init_faceFilter(bestVideoSettings);
}
})
} //end main()
function init_faceFilter(videoSettings){
// Here we set a different pivotOffset value so that the mask fits better
THREE.JeelizHelper.set_pivotOffsetYZ(SETTINGS.pivotOffsetYZ);
JEEFACEFILTERAPI.init({
canvasId: 'jeeFaceFilterCanvas',
NNCpath: '../../../dist/', // root of NNC.json file
videoSettings: videoSettings,
callbackReady: function (errCode, spec) {
if (errCode) {
console.log('AN ERROR HAPPENS. SORRY BRO :( . ERR =', errCode);
return;
}
console.log('INFO : JEEFACEFILTERAPI IS READY');
init_threeScene(spec);
}, // end callbackReady()
// called at each render iteration (drawing loop)
callbackTrack: function (detectState) {
ISDETECTED = THREE.JeelizHelper.get_isDetected();
if (ISDETECTED && detectState.expressions[0] >= 0.8 && !isTransformed) {
isTransformed = true;
animateAppear(ANONYMOUSMESH);
const openMouthInstruction = $('#openMouthInstruction');
openMouthInstruction.hide();
}
TWEEN.update();
THREE.JeelizHelper.render(detectState, THREECAMERA);
} // end callbackTrack()
}); // end JEEFACEFILTERAPI.init call
} // end main()