-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
133 lines (109 loc) · 4.43 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
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
<!DOCTYPE html>
<html>
<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" />
<title>Helmet VTO Demo</title>
<!-- INCLUDE WebAR.rocks.face MAIN SCRIPT -->
<script src="../../dist/WebARRocksFace.js"></script>
<!-- INCLUDE MAIN HELPER -->
<script src="../../helpers/WebARRocksFaceThreeHelper.js"></script>
<!-- THREE.JS, FOR THE RENDERING -->
<!-- WARNING: for production you should replace three.js by three.min.js -->
<script src="../../libs/three/v136/build/three.js"></script>
<script src="../../libs/three/v136/examples/js/loaders/GLTFLoader.js"></script>
<!-- THREE.JS RGBE loader - you can remove it if you don't use envmap: -->
<script src="../../libs/three/v136/examples/js/loaders/RGBELoader.js"></script>
<!-- THREE.JS postprocessing - you can remove it if you don't use bloom or temporal anti aliasing : -->
<script src="../../libs/three/v136/examples/js/postprocessing/EffectComposer.js"></script>
<script src="../../libs/three/v136/examples/js/postprocessing/ShaderPass.js"></script>
<script src="../../libs/three/v136/examples/js/postprocessing/RenderPass.js"></script>
<script src="../../libs/three/v136/examples/js/shaders/CopyShader.js"></script>
<!-- Bloom postprocessing: -->
<script src="../../libs/three/v136/examples/js/postprocessing/UnrealBloomPassTweaked.js"></script>
<script src="../../libs/three/v136/examples/js/shaders/LuminosityHighPassShader.js"></script>
<!-- TAA specifics: -->
<script src="../../libs/three/v136/examples/js/postprocessing/SSAARenderPass.js"></script>
<script src="../../libs/three/v136/examples/js/postprocessing/TAARenderPass.js"></script>
<!-- INCLUDE WebAR.rocks.mirror main helper -->
<script src="../../helpers/WebARRocksMirror.js"></script>
<!-- INCLUDE LANDMARKS STABILIZER -->
<script src="../../helpers/landmarksStabilizers/OneEuroLMStabilizer.js"></script>
<!-- INCLUDE MAIN DEMO SCRIPT: -->
<script src="./main.js"></script>
<style type='text/css'>
body {
margin: 0;
background-color: silver;
overflow: hidden;
}
#WebARRocksFaceCanvas, #threeCanvas {
position: fixed;
width: 100vw;
top: 0;
left: 0;
/* mirror the canvas: */
transform: rotateY(180deg);
}
#WebARRocksFaceCanvas {
z-index: 0;
}
#threeCanvas {
z-index: 1;
}
#controls {
display: none;
position: fixed;
z-index: 2;
width: 100vw;
bottom: 0;
left: 0;
flex-direction: row;
flex-wrap: wrap;
}
#controls > div {
cursor: pointer;
flex-grow: 1;
font-variant: small-caps;
font-size: 14pt;
text-align: center;
min-width: 110px;
box-sizing: border-box;
padding-top: 10px;
background: rgba(0, 0, 0, 0.5);
height: 40px;
color: #eee;
}
#controls > div:hover {
background: rgba(50, 50, 50, 0.5);
color: #fff;
}
</style>
</head>
<body>
<!--
The first canvas is used by WebAR.rocks.mirror
It is linked to a WebGL context used by the deep learning engine
And it displays the video of the webcam.
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
-->
<canvas id='WebARRocksFaceCanvas'></canvas>
<!--
The second canvas is used by THREE.js for 3D rendering:
-->
<canvas id='threeCanvas'></canvas>
<div id='controls'>
<div onclick = 'WebARRocksMirror.load("assets/models3D/headphones.glb")'>Headphones</div>
<div onclick = 'WebARRocksMirror.load("assets/models3D/motorcycleHelmet.glb")'>Motorcycle helmet</div>
<div onclick = 'WebARRocksMirror.load(false)'>Video only</div>
<div onclick = 'WebARRocksMirror.pause(true)'>Pause</div>
<div onclick = 'WebARRocksMirror.resume(true)'>Resume</div>
<div onclick = 'WebARRocksMirror.resize(400, 400)'>Resize</div>
<div onclick = 'capture_image()'>Capture</div>
</div>
</body>
</html>