Skip to content

Commit 4ef8b0b

Browse files
kunitokikunitoki
committed
More emscripten work
1 parent 3bbcd34 commit 4ef8b0b

File tree

4 files changed

+191
-7
lines changed

4 files changed

+191
-7
lines changed

‎cmake/platforms/emscripten/shell.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
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 http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
7+
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
8+
<title>YUP! On Emscripten</title>
9+
<style>
10+
*, *::before, *::after {
11+
box-sizing: border-box;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
body {
17+
background-color: #272822;
18+
color: #F8F8F2;
19+
font-family: 'Courier New', Courier, monospace;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
padding: 20px;
24+
margin: 0px;
25+
}
26+
27+
hr {
28+
width: 100%;
29+
border: none;
30+
border-top: 1px solid #75715E;
31+
margin: 20px 0;
32+
}
33+
34+
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
35+
div.emscripten { text-align: center; }
36+
canvas.emscripten { border: 0px none; background-color: black; }
37+
38+
.logo {
39+
display: inline-block;
40+
margin: 0;
41+
}
42+
43+
.spinner {
44+
height: 50px;
45+
width: 50px;
46+
margin: 0px auto;
47+
animation: rotation 0.8s linear infinite;
48+
border: 6px solid transparent;
49+
border-top-color: #AE81FF;
50+
border-right-color: #66D9EF;
51+
border-bottom-color: #A6E22E;
52+
border-left-color: #F92672;
53+
border-radius: 50%;
54+
}
55+
56+
@keyframes rotation {
57+
from {transform: rotate(0deg);}
58+
to {transform: rotate(360deg);}
59+
}
60+
61+
#status {
62+
display: inline-block;
63+
vertical-align: top;
64+
margin-top: 0px;
65+
margin-bottom: 0px;
66+
font-weight: bold;
67+
color: rgb(120, 120, 120);
68+
}
69+
70+
#progress {
71+
width: 300px;
72+
height: 20px;
73+
}
74+
75+
#controls {
76+
display: inline-block;
77+
float: right;
78+
vertical-align: top;
79+
margin-top: 20px;
80+
margin-bottom: 20px;
81+
}
82+
</style>
83+
</head>
84+
<body>
85+
<div class="logo">YUP! On Emscripten</div>
86+
87+
<hr/>
88+
89+
<div class="spinner" id='spinner'></div>
90+
<div class="emscripten" id="status">Downloading...</div>
91+
<div class="emscripten">
92+
<progress value="0" max="100" id="progress" hidden=1></progress>
93+
</div>
94+
95+
<hr/>
96+
97+
<span id='controls'>
98+
<span><input type="checkbox" id="resize">Resize canvas</span>
99+
<span><input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer</span>
100+
<span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
101+
document.getElementById('resize').checked)">
102+
</span>
103+
</span>
104+
105+
<hr/>
106+
107+
<div class="emscripten">
108+
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
109+
</div>
110+
111+
<script type='text/javascript'>
112+
var statusElement = document.getElementById('status');
113+
var progressElement = document.getElementById('progress');
114+
var spinnerElement = document.getElementById('spinner');
115+
116+
var Module = {
117+
preRun: [],
118+
postRun: [],
119+
print: (function() {
120+
return function(text) {
121+
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
122+
console.log(text);
123+
};
124+
})(),
125+
canvas: (() => {
126+
var canvas = document.getElementById('canvas');
127+
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
128+
// application robust, you may want to override this behavior before shipping!
129+
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
130+
canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
131+
return canvas;
132+
})(),
133+
setStatus: (text) => {
134+
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
135+
if (text === Module.setStatus.last.text) return;
136+
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
137+
var now = Date.now();
138+
if (m && now - Module.setStatus.last.time < 30) return;
139+
Module.setStatus.last.time = now;
140+
Module.setStatus.last.text = text;
141+
if (m) {
142+
text = m[1];
143+
progressElement.value = parseInt(m[2])*100;
144+
progressElement.max = parseInt(m[4])*100;
145+
progressElement.hidden = false;
146+
spinnerElement.hidden = false;
147+
} else {
148+
progressElement.value = null;
149+
progressElement.max = null;
150+
progressElement.hidden = true;
151+
if (!text) spinnerElement.style.display = 'none';
152+
}
153+
statusElement.innerHTML = text;
154+
},
155+
totalDependencies: 0,
156+
monitorRunDependencies: (left) => {
157+
this.totalDependencies = Math.max(this.totalDependencies, left);
158+
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
159+
}
160+
};
161+
Module.setStatus('Downloading...');
162+
window.onerror = (event) => {
163+
Module.setStatus('Exception thrown, see JavaScript console');
164+
spinnerElement.style.display = 'none';
165+
Module.setStatus = (text) => {
166+
if (text) console.error('[post-exception status] ' + text);
167+
};
168+
};
169+
</script>
170+
{{{ SCRIPT }}}
171+
</body>
172+
</html>

‎cmake/yup.cmake‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -735,7 +735,8 @@ function (yup_standalone_app)
735735
-sFORCE_FILESYSTEM=1
736736
-sALLOW_MEMORY_GROWTH=1
737737
-sNODERAWFS=0
738-
-sDEFAULT_LIBRARY_FUNCS_TO_INCLUDE='$dynCall')
738+
-sDEFAULT_LIBRARY_FUNCS_TO_INCLUDE='$dynCall'
739+
--shell-file "${CMAKE_SOURCE_DIR}/cmake/platforms/${yup_platform}/shell.html")
739740

740741
endif()
741742

‎justfile‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
alias g := generate
2+
alias u := update
3+
alias o := open
14

25
default:
36
@just --list
@@ -6,11 +9,7 @@ update:
69
mkdir -p build
710
cmake -G Xcode -B build -DYUP_ENABLE_PROFILING=ON
811

9-
ios:
10-
mkdir -p build
11-
cmake -G Xcode -B build -DCMAKE_TOOLCHAIN_FILE=cmake/toolchains/ios.cmake -DPLATFORM=OS64
12-
13-
clear:
12+
clean:
1413
rm -Rf build/*
1514

1615
generate:
@@ -19,12 +18,22 @@ generate:
1918

2019
open:
2120
@just update
22-
open build/yup.xcodeproj
21+
-open build/yup.xcodeproj
2322

2423
make:
2524
@just update
2625
cmake --build build
2726

27+
ios:
28+
mkdir -p build
29+
cmake -G Xcode -B build -DCMAKE_TOOLCHAIN_FILE=cmake/toolchains/ios.cmake -DPLATFORM=OS64
30+
31+
emscripten:
32+
emcc -v
33+
emcmake cmake -G "Ninja Multi-Config" -B build
34+
cmake --build build
35+
python3 -m http.server -d build/examples/render/Debug
36+
2837
#run:
2938
# @just make
3039
# ./build/app/app

‎modules/yup_gui/native/yup_Windowing_glfw.cpp‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -555,7 +555,9 @@ GLFWComponentNative::GLFWComponentNative (Component& component,
555555
if (currentGraphicsApi == GraphicsContext::OpenGL)
556556
{
557557
glfwMakeContextCurrent (window);
558+
#if ! (JUCE_EMSCRIPTEN && RIVE_WEBGL)
558559
glfwSwapInterval (0);
560+
#endif
559561
}
560562

561563
context = GraphicsContext::createContext (currentGraphicsApi, GraphicsContext::Options {});

0 commit comments

Comments
 (0)