Skip to content

Commit 81c3640

Browse files
committed
WebGL Build
1 parent fef804a commit 81c3640

File tree

10 files changed

+822
-0
lines changed

10 files changed

+822
-0
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,4 @@ build/
7070
releases/
7171
Documentation/
7272

73+
!docs/**

docs/Build/WebGL.data

17.8 MB
Binary file not shown.

docs/Build/WebGL.framework.js

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/Build/WebGL.loader.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/Build/WebGL.wasm

49 MB
Binary file not shown.

docs/TemplateData/favicon.ico

15 KB
Binary file not shown.
175 Bytes
Loading

docs/TemplateData/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
*, *:before, *:after {
5+
box-sizing: inherit;
6+
}
7+
html, body {
8+
height: 100%;
9+
}
10+
canvas {
11+
display: block;
12+
}
13+
body {
14+
margin: 0;
15+
}
16+
#unity-container {
17+
width: 100%;
18+
height: 100%;
19+
}
20+
#unity-canvas {
21+
width: 100%;
22+
height: 100%;
23+
background: #231F20;
24+
}
25+
#loading-cover {
26+
position: absolute;
27+
top: 0;
28+
left: 0;
29+
width: 100%;
30+
height: 100%;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
#unity-loading-bar {
36+
flex: 1 1 auto;
37+
display: flex;
38+
flex-direction: column;
39+
justify-content: center;
40+
align-items: center;
41+
}
42+
#unity-logo {
43+
text-align: center;
44+
}
45+
#unity-logo img {
46+
max-width: 80%;
47+
}
48+
#unity-progress-bar-empty {
49+
width: 80%;
50+
height: 24px;
51+
margin: 10px 20px 20px 10px;
52+
text-align: left;
53+
border: 1px solid white;
54+
padding: 2px;
55+
}
56+
#unity-progress-bar-full {
57+
width: 0%;
58+
height: 100%;
59+
background: white;
60+
}
61+
.light #unity-progress-bar-empty {
62+
border-color: black;
63+
}
64+
.light #unity-progress-bar-full {
65+
background: black;
66+
}
67+
68+
#unity-fullscreen-button {
69+
position: absolute;
70+
right: 10px;
71+
bottom: 10px;
72+
width: 38px;
73+
height: 38px;
74+
background: url('fullscreen-button.png') no-repeat center;
75+
background-size: contain;
76+
}
77+
78+
.spinner,
79+
.spinner:after {
80+
border-radius: 50%;
81+
width: 5em;
82+
height: 5em;
83+
}
84+
.spinner {
85+
margin: 10px;
86+
font-size: 10px;
87+
position: relative;
88+
text-indent: -9999em;
89+
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
90+
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
91+
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
92+
border-left: 1.1em solid #ffffff;
93+
transform: translateZ(0);
94+
animation: spinner-spin 1.1s infinite linear;
95+
}
96+
@keyframes spinner-spin {
97+
0% {
98+
transform: rotate(0deg);
99+
}
100+
100% {
101+
transform: rotate(360deg);
102+
}
103+
}
104+
105+

docs/index.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, user-scalable=no"
9+
/>
10+
<title>UnitySDK</title>
11+
<link rel="shortcut icon" href="TemplateData/favicon.ico" />
12+
<link rel="stylesheet" href="TemplateData/style.css" />
13+
</head>
14+
<body class="dark">
15+
<div id="unity-container" class="unity-desktop">
16+
<canvas id="unity-canvas"></canvas>
17+
</div>
18+
<div id="loading-cover" style="display: none">
19+
<div id="unity-loading-bar">
20+
<div id="unity-logo"></div>
21+
<div id="unity-progress-bar-empty" style="display: none">
22+
<div id="unity-progress-bar-full"></div>
23+
</div>
24+
<div class="spinner"></div>
25+
</div>
26+
</div>
27+
<div id="unity-fullscreen-button" style="display: none"></div>
28+
<script type="module">
29+
const hideFullScreenButton = "true";
30+
const buildUrl = "Build";
31+
const loaderUrl = buildUrl + "/WebGL.loader.js";
32+
const config = {
33+
dataUrl: buildUrl + "/WebGL.data",
34+
frameworkUrl: buildUrl + "/WebGL.framework.js",
35+
codeUrl: buildUrl + "/WebGL.wasm",
36+
streamingAssetsUrl: "StreamingAssets",
37+
companyName: "Thirdweb",
38+
productName: "UnitySDK",
39+
productVersion: "3.2.1",
40+
};
41+
42+
const container = document.querySelector("#unity-container");
43+
const canvas = document.querySelector("#unity-canvas");
44+
const loadingCover = document.querySelector("#loading-cover");
45+
const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
46+
const progressBarFull = document.querySelector("#unity-progress-bar-full");
47+
const fullscreenButton = document.querySelector("#unity-fullscreen-button");
48+
const spinner = document.querySelector('.spinner');
49+
50+
const canFullscreen = (function() {
51+
for (const key of [
52+
'exitFullscreen',
53+
'webkitExitFullscreen',
54+
'webkitCancelFullScreen',
55+
'mozCancelFullScreen',
56+
'msExitFullscreen',
57+
]) {
58+
if (key in document) {
59+
return true;
60+
}
61+
}
62+
return false;
63+
}());
64+
65+
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
66+
container.className = "unity-mobile";
67+
config.devicePixelRatio = 1;
68+
}
69+
loadingCover.style.display = "";
70+
const script = document.createElement("script");
71+
script.src = loaderUrl;
72+
script.onload = () => {
73+
import('./lib/thirdweb-unity-bridge.js').then(module => {
74+
createUnityInstance(canvas, config, (progress) => {
75+
spinner.style.display = "none";
76+
progressBarEmpty.style.display = "";
77+
progressBarFull.style.width = `${100 * progress}%`;
78+
}).then((unityInstance) => {
79+
loadingCover.style.display = "none";
80+
if (canFullscreen) {
81+
if (!hideFullScreenButton) {
82+
fullscreenButton.style.display = "";
83+
}
84+
fullscreenButton.onclick = () => {
85+
unityInstance.SetFullscreen(1);
86+
};
87+
}
88+
}).catch((message) => {
89+
alert(message);
90+
});
91+
});
92+
};
93+
document.body.appendChild(script);
94+
</script>
95+
</body>
96+
</html>

docs/lib/thirdweb-unity-bridge.js

Lines changed: 597 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)