-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex02.html
96 lines (83 loc) · 3.86 KB
/
index02.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
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="en-EN" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--eerst style sheet van de fonts inladen -->
<link rel="stylesheet" href="https://use.typekit.net/ilr2sfa.css">
<link rel="stylesheet" href="./css/style.css">
<title>ATLAS OF ID</title>
<!-- BEGIN WEBAR JS LIBRARIES -->
<!-- INCLUDE WebAR.rocks.face MAIN SCRIPT -->
<script src="./webar/dist/WebARRocksFace.js"></script>
<!-- INCLUDE MAIN HELPER -->
<script src="./webar/helpers/WebARRocksFaceThreeHelper.js"></script>
<!-- THREE.JS, FOR THE RENDERING -->
<!-- WARNING: for production you should replace three.js by three.min.js -->
<script src="./webar/libs/three/v136/build/three.js"></script>
<!-- THREE.JS GLTF loader -->
<script src="./webar/libs/three/v136/examples/js/loaders/GLTFLoader.js"></script>
<!-- THREE.JS postprocessing - useful for the blur mask pass: -->
<script src="./webar/libs/three/v136/examples/js/postprocessing/EffectComposer.js"></script>
<script src="./webar/libs/three/v136/examples/js/postprocessing/ShaderPass.js"></script>
<script src="./webar/libs/three/v136/examples/js/postprocessing/RenderPass.js"></script>
<script src="./webar/libs/three/v136/examples/js/shaders/CopyShader.js"></script>
<!-- INCLUDE LANDMARKS STABILIZER -->
<script src="./webar/helpers/landmarksStabilizers/OneEuroLMStabilizer.js"></script>
<!-- INCLUDE MAIN DEMO SCRIPT: -->
<script src="./js/webar_main.js"></script>
<!-- END WEBAR JS LIBRARIES -->
</head>
<body class="webar">
<div class="container">
<div class="title">ATLAS OF ID 3/13</div>
<!-- <img src="./img/Scene01_4K_13.07.2022_14-34-17.png"style="width:96%;"> -->
<div class="bottom-right"><a href="index01.html">BACK</a></div>
<div class="o"><a href="index03.html">o</a></div>
<div class="top-right">Your face is like a secret code.
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let text;
let favDrink = prompt("Does it show?", "Yes");
switch(favDrink) {
case "Yes":
text = "Excellent choice. Exposure is good for the soul.";
break;
case "No":
text = "You reveal more then you think.";
break;
case "Maybe":
text = "Really? Are you sure you don't know?";
break;
default:
text = "I've never heard of that one.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
</div>
<!-- BEGIN WEBAR HTML CANVAS -->
<!--
The first canvas is used by WebAR.rocks
It is linked to a WebGL context used by the deep learning engine
And it displays the video of the camera.
Since we need to transfer the video to a texture for face detection,
it is not costly at all to use this texture for display.
You can tweak the rendering of the video in WebARRocksFaceThreeHelper.js,
by editing the fragment shader of _shps.copy
This canvas is not displayed on the screen
-->
<canvas id='WebARRocksFaceCanvas'></canvas>
<!-- The second canvas is used by THREE.js for 3D rendering to render
the blurred background mask. It is not displayed on the screen -->
<canvas id='threeCanvas'></canvas>
<!-- This is the composite canvas, where we draw the first canvas
using the second canvas as a mask -->
<canvas id='compositeCanvas'></canvas>
<!-- END WEBAR JS LIBRARIES -->
</body>
</html>