-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (70 loc) · 2.45 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.jsdelivr.net/npm/kalidokit/dist/kalidokit.umd.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
</head>
<body>
<canvas class="renderCanvas"></canvas>
<div class="container">
<video class="input_video"></video>
<div class="canvas-container">
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
<div class="loading">
<div class="spinner"></div>
<div class="message">Loading</div>
</div>
</div>
</div>
<script src="./kalman.min.js"></script>
<script src="./script.js"></script>
<script src="./babylon.js"></script>
<script>
var canvas = document.getElementsByClassName("renderCanvas")[0];
var startRenderLoop = function (engine, canvas)
{
engine.runRenderLoop(function ()
{
if (sceneToRender && sceneToRender.activeCamera)
{
sceneToRender.render();
}
});
}
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false }); };
var delayCreateScene = createScene;
window.initFunction = async function ()
{
var asyncEngineCreation = async function ()
{
try
{
return createDefaultEngine();
} catch (e)
{
console.log("the available createEngine function failed. Creating the default engine instead");
return createDefaultEngine();
}
}
window.engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
startRenderLoop(engine, canvas);
window.scene = delayCreateScene();
};
initFunction().then(() => { scene.then(returnedScene => { sceneToRender = returnedScene; }); });
window.addEventListener("resize", function ()
{
engine.resize();
});
</script>
</body>
</html>