OpenLive3D.github.io/index.html at master · OpenLive3D/OpenLive3D.github.io · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="apple-touch-icon" sizes="180x180" href="asset/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="asset/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="asset/favicon/favicon-16x16.png">
    <link rel="manifest" href="asset/favicon/site.webmanifest">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="ol3dc/css/openlive3d.css">
    <link rel="stylesheet" href="ol3dc/css/ghostkwebb.css" id="theme-ghostkwebb" disabled>
    <!-- start fetching the MediaPipe wasm runtime + default (Face-Only) model
         as early as possible, in parallel with the rest of page load, rather
         than waiting until deep into script execution when the Worker/
         FaceLandmarker is actually constructed. Deliberately does not
         preload holistic_landmarker.task - that one is lazy-loaded only if
         the user switches to Upper-Body/Heart tracking, and preloading it
         unconditionally would cost every visitor ~11MB they likely never use. -->
    <link rel="preload" href="ol3dc/vision/wasm/vision_wasm_internal.wasm" as="fetch" crossorigin>
    <link rel="preload" href="ol3dc/vision/wasm/vision_wasm_internal.js" as="script" crossorigin>
    <link rel="preload" href="ol3dc/vision/face_landmarker.task" as="fetch" crossorigin>
    <!-- the VRM avatar is otherwise only requested from loadVRM(), called at
         the very end of the ~30 blocking <script> tags below - meaning
         without this hint its download doesn't even start until well after
         the ML preloads above have already finished, making the two loads
         sequential rather than actually overlapping. Preloading only the
         default model here; a custom/cookie-saved MODEL still loads the
         normal (non-preloaded) way. -->
    <link rel="preload" href="asset/vrm/three-vrm-girl.vrm" as="fetch" crossorigin>
</head>
<body>
    <!-- layout -->
    <div class="vrm" id="divvrm">
        <canvas class="foregroundeffect" id="foregroundeffect"></canvas>
        <canvas class="vrm" id="canvas"></canvas>
        <canvas class="backgroundeffect" id="backgroundeffect"></canvas>
    </div>
    <div class="bgimg" id="bgimg"></div>
    <div class="w3-sidebar w3-animate-left" style="width:340px;background-color:#0006;display:none" id="thesidebar">
        <div class="w3-bar-item" style="height:60px;color:#0000"> . </div>
        <br/>
        <button onclick="hideObj('vrmbox')" id="vrmboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" id="vrmbox"></div>
        <button onclick="hideObj('dbgbox')" id="videoctlbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" style="background-color:#000a" id="dbgbox">
            <select id="videoselect"></select>
            <div class="w3-margin-left">
                <input type="checkbox" id="dbgimcheck">
                <label id="dbgimlabel" style="color:#fff"></label>
                <text style="color:#0000"> . </text>
                <input type="checkbox" id="dbglmcheck">
                <label id="dbglmlabel" style="color:#fff"></label>
            </div>
            <canvas id="dbg"></canvas>
        </div>
        <button onclick="hideObj('effectbox')" id="effectboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" id="effectbox"></div>
        <button onclick="hideObj('confbox')" id="confboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" id="confbox"></div>
        <!--music box-->
        <button onclick="hideObj('musicbox')" id="musicboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" id="musicbox"></div>
        <!---->
        <button onclick="hideObj('logbox')" id="logboxbutton" class="w3-button w3-block w3-left-align w3-text-white"></button>
        <div class="w3-bar-item w3-hide" id="logbox"></div>
        <div class="w3-bar-item w3-margin" id="about"></div>
    </div>

    <div class="w3-sidebar w3-animate-left" style="width:52px;background-color:#00000008;display:block" id="themoodbar">
    </div>
    <div class="w3-sidebar w3-animate-right" style="width:52px;background-color:#00000008;right:0;display:block" id="theposebar">
    </div>
    <div class="systembox" id="systembox">
        <img id="systemimg" src="asset/logo-dark.png" style="height:50px;cursor:pointer"/>
        <text class="systemtext" id="systemtext"> OpenLive3D </text>
    </div>
    <div class="alertbox" id="alertbox">
        <img id="alertimg" onclick="displayObj('alerttext')" src="asset/alert/alert.png" style="width:30px;cursor:pointer"/>
        <text class="alerttext" style="display:none" id="alerttext"></text>
    </div>
    <div class="loadbox" id="loadbox">
        <div class="w3-display-middle" style="width:280px">
            <img id="loadimg" src="asset/logo.png" style="height:50px"/>
            <text class="loading"> OpenLive3D </text>
            <div><br/> Click LOGO Opens the Menu! <br/></div>
            <div id="loadinfo">
                <p> ⟳ Initializing ... </p>
                <p> ⟳ Loading ML and VRM could take 3 minutes ... </p>
            </div>
        </div>
    </div>
    <div class="webcambox">
        <video id="webcam" autoplay playsinline></video>
    </div>
    <!-- three-vrm dependencies -->
    <script src="lib/three.min.js"></script>
    <script src="lib/GLTFLoader.js"></script>
    <script src="lib/OrbitControls.js"></script>
    <script src="lib/three-vrm.min.js"></script>
    <!-- local dependencies -->
    <script src="src/js/interface/interface.js"></script>
    <script src="ol3dc/vision/vision_bundle.js"></script>
    <script src="ol3dc/vision/single.js"></script>
    <script src="ol3dc/js/camera/media-manager.js"></script>
    <script src="ol3dc/js/clientStorage/index.js"></script>
    <script src="ol3dc/js/converter/facekey.js"></script>
    <script src="ol3dc/js/converter/posekey.js"></script>
    <script src="ol3dc/js/converter/handkey.js"></script>
    <script src="ol3dc/js/converter/arm-magic.js"></script>
    <script src="ol3dc/js/ml/landmark-manager.js"></script>
    <script src="ol3dc/js/ml/meta.js"></script>
    <script src="ol3dc/js/ml/log.js"></script>
    <script src="ol3dc/js/ml/ml-manager.js"></script>
    <script src="ol3dc/js/interpolator/interpolator.js"></script>
    <script src="ol3dc/js/entry/entry-manager.js"></script>
    <script src="ol3dc/js/effect/fsr.js"></script>
    <script src="ol3dc/js/effect/blur.js"></script>
    <script src="ol3dc/js/effect/frontlight.js"></script>
    <script src="ol3dc/js/effect/toplight.js"></script>
    <script src="ol3dc/js/effect/backlight.js"></script>
    <script src="ol3dc/js/effect/rain.js"></script>
    <script src="ol3dc/js/effect/effect-manager.js"></script>
    <script src="ol3dc/js/config/config-manager.js"></script>
    <script src="ol3dc/js/gui/multi-language.js"></script>
    <script src="ol3dc/js/vrm/vrm-manager.js"></script>
    <script src="ol3dc/js/control/health-manager.js"></script>
    <script src="ol3dc/js/control/control-manager.js"></script>
    <script src="ol3dc/js/control/hotkey.js"></script>
    <script src="ol3dc/js/gui/gui-layout.js"></script>
    <script>

// start camera, load resources, link things
initialize();

// mobile testing entry: ?test_mobile=1 forces mobile-safe settings
if (new URLSearchParams(window.location.search).get('test_mobile') === '1') {
    setCMV("TEST_MOBILE_ENTRY", true);
    setCMV("MULTI_THREAD", false);
}

// kick off the initialization loop!
requestAnimationFrame(initLoop);

    </script>
</body>
</html>