Add option 'wasm' to compile to WebAssembly in web export
WebAssembly is still experimental, so disabled by default. The HTML shell file now uses $GODOT_BASE, a placeholder for the base filename, instead of $GODOT_JS, $GODOT_MEM and $GODOT_FS.
This commit is contained in:
eska
parent
7384a6519f
commit
d6f2862429
4 changed files with 30 additions and 32 deletions
|
|
@ -10,8 +10,6 @@ javascript_files = [
|
|||
"javascript_eval.cpp"
|
||||
]
|
||||
|
||||
#obj = env.SharedObject('godot_javascript.cpp')
|
||||
|
||||
env_javascript = env.Clone()
|
||||
if env['target'] == "profile":
|
||||
env_javascript.Append(CPPFLAGS=['-DPROFILER_ENABLED'])
|
||||
|
|
@ -21,9 +19,19 @@ for x in javascript_files:
|
|||
javascript_objects.append( env_javascript.Object( x ) )
|
||||
|
||||
env.Append(LINKFLAGS=["-s","EXPORTED_FUNCTIONS=\"['_main','_audio_server_mix_function','_main_after_fs_sync']\""])
|
||||
env.Append(LINKFLAGS=["--shell-file",'"platform/javascript/godot_shell.html"'])
|
||||
|
||||
prog = None
|
||||
build = env.Program('#bin/godot',javascript_objects,PROGSUFFIX=env["PROGSUFFIX"]+".html")
|
||||
|
||||
#env_javascript.SharedLibrary("#platform/javascript/libgodot_javascript.so",[javascript_objects])
|
||||
def make_html_shell(target, source, env):
|
||||
html_path = target[0].rstr()
|
||||
assert html_path[:4] == 'bin/'
|
||||
assert html_path[-5:] == '.html'
|
||||
basename = html_path[4:-5]
|
||||
with open(html_path, 'r+') as html_file:
|
||||
fixed_html = html_file.read().replace('.html.mem', '.mem').replace(basename, '$GODOT_BASE')
|
||||
html_file.seek(0)
|
||||
html_file.truncate()
|
||||
html_file.write(fixed_html)
|
||||
|
||||
env.Program('#bin/godot',javascript_objects,PROGSUFFIX=env["PROGSUFFIX"]+".html")
|
||||
env.AddPostAction(build, Action(make_html_shell, "Creating HTML shell file"))
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ def can_build():
|
|||
def get_opts():
|
||||
|
||||
return [
|
||||
['wasm','Compile to WebAssembly','no'],
|
||||
['javascript_eval','Enable JavaScript eval interface','yes'],
|
||||
]
|
||||
|
||||
|
|
@ -42,7 +43,6 @@ def configure(env):
|
|||
em_path=os.environ["EMSCRIPTEN_ROOT"]
|
||||
|
||||
env['ENV']['PATH'] = em_path+":"+env['ENV']['PATH']
|
||||
|
||||
env['CC'] = em_path+'/emcc'
|
||||
env['CXX'] = em_path+'/emcc'
|
||||
#env['AR'] = em_path+"/emar"
|
||||
|
|
@ -77,14 +77,20 @@ def configure(env):
|
|||
env.Append(CPPFLAGS=['-DJAVASCRIPT_ENABLED', '-DUNIX_ENABLED', '-DPTHREAD_NO_RENAME', '-DNO_FCNTL','-DMPC_FIXED_POINT','-DTYPED_METHOD_BIND','-DNO_THREADS'])
|
||||
env.Append(CPPFLAGS=['-DGLES2_ENABLED'])
|
||||
env.Append(CPPFLAGS=['-DGLES_NO_CLIENT_ARRAYS'])
|
||||
env.Append(CPPFLAGS=['-s','ASM_JS=1'])
|
||||
env.Append(CPPFLAGS=['-s','FULL_ES2=1'])
|
||||
# env.Append(CPPFLAGS=['-DANDROID_ENABLED', '-DUNIX_ENABLED','-DMPC_FIXED_POINT'])
|
||||
|
||||
if env['wasm'] == 'yes':
|
||||
env.Append(LINKFLAGS=['-s','BINARYEN=1'])
|
||||
env.Append(LINKFLAGS=['-s','\'BINARYEN_METHOD="native-wasm"\''])
|
||||
env["PROGSUFFIX"]+=".webassembly"
|
||||
else:
|
||||
env.Append(CPPFLAGS=['-s','ASM_JS=1'])
|
||||
env.Append(LINKFLAGS=['-s','ASM_JS=1'])
|
||||
|
||||
if env['javascript_eval'] == 'yes':
|
||||
env.Append(CPPFLAGS=['-DJAVASCRIPT_EVAL_ENABLED'])
|
||||
|
||||
env.Append(LINKFLAGS=['-s','ASM_JS=1'])
|
||||
env.Append(LINKFLAGS=['-O2'])
|
||||
#env.Append(LINKFLAGS=['-g4'])
|
||||
|
||||
|
|
|
|||
|
|
@ -180,9 +180,7 @@ void EditorExportPlatformJavaScript::_fix_html(Vector<uint8_t>& p_html, const St
|
|||
|
||||
String current_line = lines[i];
|
||||
current_line = current_line.replace("$GODOT_TMEM",itos((1<<(max_memory+5))*1024*1024));
|
||||
current_line = current_line.replace("$GODOT_FS",p_name+"fs.js");
|
||||
current_line = current_line.replace("$GODOT_MEM",p_name+".mem");
|
||||
current_line = current_line.replace("$GODOT_JS",p_name+".js");
|
||||
current_line = current_line.replace("$GODOT_BASE",p_name);
|
||||
current_line = current_line.replace("$GODOT_CANVAS_WIDTH",Globals::get_singleton()->get("display/width"));
|
||||
current_line = current_line.replace("$GODOT_CANVAS_HEIGHT",Globals::get_singleton()->get("display/height"));
|
||||
current_line = current_line.replace("$GODOT_HEAD_TITLE",!html_title.empty()?html_title:(String) Globals::get_singleton()->get("application/name"));
|
||||
|
|
@ -319,16 +317,19 @@ Error EditorExportPlatformJavaScript::export_project(const String& p_path, bool
|
|||
}
|
||||
if (file=="godot.js") {
|
||||
|
||||
//_fix_godot(data);
|
||||
file=p_path.get_file().basename()+".js";
|
||||
}
|
||||
|
||||
if (file=="godot.mem") {
|
||||
|
||||
//_fix_godot(data);
|
||||
file=p_path.get_file().basename()+".mem";
|
||||
}
|
||||
|
||||
if (file=="godot.wasm") {
|
||||
|
||||
file=p_path.get_file().basename()+".wasm";
|
||||
}
|
||||
|
||||
String dst = p_path.get_base_dir().plus_file(file);
|
||||
FileAccess *f=FileAccess::open(dst,FileAccess::WRITE);
|
||||
if (!f) {
|
||||
|
|
|
|||
357
platform/javascript/godot_shell.html
Normal file
357
platform/javascript/godot_shell.html
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>$GODOT_HEAD_TITLE</title>
|
||||
$GODOT_HEAD_INCLUDE
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
border: 0 none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
font-family: $GODOT_STYLE_FONT_FAMILY;
|
||||
}
|
||||
|
||||
|
||||
/* Godot Engine default theme style
|
||||
* ================================ */
|
||||
|
||||
.godot {
|
||||
color: #e0e0e0;
|
||||
background-color: #3b3943;
|
||||
background-image: linear-gradient(to bottom, #403e48, #35333c);
|
||||
border: 1px solid #45434e;
|
||||
box-shadow: 0 0 1px 1px #2f2d35;
|
||||
}
|
||||
|
||||
button.godot {
|
||||
font-family: $GODOT_STYLE_FONT_FAMILY; /* override user agent style */
|
||||
padding: 1px 5px;
|
||||
background-color: #37353f;
|
||||
background-image: linear-gradient(to bottom, #413e49, #3a3842);
|
||||
border: 1px solid #514f5d;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 1px 1px #2a2930;
|
||||
}
|
||||
|
||||
button.godot:hover {
|
||||
color: #f0f0f0;
|
||||
background-color: #44414e;
|
||||
background-image: linear-gradient(to bottom, #494652, #423f4c);
|
||||
border: 1px solid #5a5667;
|
||||
box-shadow: 0 0 1px 1px #26252b;
|
||||
}
|
||||
|
||||
button.godot:active {
|
||||
color: #fff;
|
||||
background-color: #3e3b46;
|
||||
background-image: linear-gradient(to bottom, #36343d, #413e49);
|
||||
border: 1px solid #4f4c59;
|
||||
box-shadow: 0 0 1px 1px #26252b;
|
||||
}
|
||||
|
||||
button.godot:disabled {
|
||||
color: rgba(230, 230, 230, 0.2);
|
||||
background-color: #3d3d3d;
|
||||
background-image: linear-gradient(to bottom, #434343, #393939);
|
||||
border: 1px solid #474747;
|
||||
box-shadow: 0 0 1px 1px #2d2b33;
|
||||
}
|
||||
|
||||
|
||||
/* Canvas / wrapper
|
||||
* ================ */
|
||||
|
||||
#container {
|
||||
display: inline-block; /* scale with canvas */
|
||||
vertical-align: top; /* prevent extra height */
|
||||
position: relative; /* root for absolutely positioned overlay */
|
||||
margin: 0;
|
||||
border: 0 none;
|
||||
padding: 0;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
/* canvas must have border and padding set to zero to
|
||||
* calculate cursor coordinates correctly */
|
||||
border: 0 none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Status display
|
||||
* ============== */
|
||||
|
||||
#status-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* don't consume click events - make children visible explicitly */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#status {
|
||||
visibility: visible;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
|
||||
/* On-hover controls
|
||||
* ================= */
|
||||
|
||||
#controls {
|
||||
visibility: hidden;
|
||||
opacity: 0.0;
|
||||
transition: opacity 500ms ease-in-out 200ms;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
padding: 3px 5px;
|
||||
font-size: small;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
#container:hover > #controls {
|
||||
opacity: 1.0;
|
||||
transition: opacity 60ms ease-in-out;
|
||||
}
|
||||
|
||||
#controls > button,
|
||||
#controls > label {
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#controls > label > input[type="checkbox"] {
|
||||
/* override user agent style */
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
label > input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#display-output { display: none; }
|
||||
|
||||
|
||||
/* Debug output
|
||||
* ============ */
|
||||
|
||||
#output {
|
||||
display: none;
|
||||
margin: 6px auto;
|
||||
border: 2px groove grey;
|
||||
padding: 4px;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
font-size: small;
|
||||
color: #eee;
|
||||
background-color: black;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Export style include
|
||||
* ==================== */
|
||||
|
||||
$GODOT_STYLE_INCLUDE
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" oncontextmenu="event.preventDefault();">
|
||||
HTML5 canvas appears to be unsupported in the current browser.<br />Please try updating or use a different browser.
|
||||
</canvas>
|
||||
<div id="status-container">
|
||||
<span id="status" class="godot" onclick="this.style.visibility='hidden';">Loading page...</span>
|
||||
</div>
|
||||
<div id="controls" class="godot">
|
||||
<label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label>
|
||||
<!-- hidden until implemented
|
||||
<label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label>
|
||||
<label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label>
|
||||
-->
|
||||
<button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 -->
|
||||
<textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea>
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
var Presentation = (function() {
|
||||
var statusElement = document.getElementById("status");
|
||||
var outputElement = document.getElementById("output");
|
||||
var doneLoading = false;
|
||||
|
||||
function onLoaded() {
|
||||
doneLoading = true;
|
||||
var fullscreenButtonElement = document.getElementById("fullscreen");
|
||||
fullscreenButtonElement.disabled = false;
|
||||
}
|
||||
|
||||
var presentation = {
|
||||
statusElement: statusElement,
|
||||
outputElement: outputElement,
|
||||
setOutputVisible: function setOutputVisible(visible) {
|
||||
outputElement.style.display = (visible?"block":"none");
|
||||
},
|
||||
setStatusVisible: function setStatusVisible(visible) {
|
||||
statusElement.style.visibility = (visible?"visible":"hidden");
|
||||
},
|
||||
setStatus: function setStatus(text) {
|
||||
if (!text || text.length === 0) {
|
||||
Presentation.setStatusVisible(false);
|
||||
onLoaded();
|
||||
} else {
|
||||
Presentation.setStatusVisible(true);
|
||||
statusElement.innerHTML = text;
|
||||
}
|
||||
},
|
||||
goFullscreen: function goFullscreen() {
|
||||
if (doneLoading) Module.requestFullScreen(false, false);
|
||||
}
|
||||
};
|
||||
|
||||
if ($GODOT_CONTROLS_ENABLED) { // controls enabled
|
||||
(function() {
|
||||
var controlsElement = document.getElementById("controls");
|
||||
controlsElement.style.visibility="visible";
|
||||
})();
|
||||
}
|
||||
|
||||
if ($GODOT_DEBUG_ENABLED) { // debugging enabled
|
||||
(function() {
|
||||
var outputToggleLabel = document.getElementById("display-output");
|
||||
var outputToggle = document.getElementById("output-toggle");
|
||||
|
||||
outputElement.value = ""; // clear browser cache
|
||||
outputElement.style.display = "block";
|
||||
outputToggle.checked = true;
|
||||
outputToggleLabel.style.display = "inline";
|
||||
|
||||
presentation.print = function print(text) {
|
||||
if (outputElement.value.length !== 0)
|
||||
outputElement.value += "\n";
|
||||
outputElement.value += text;
|
||||
outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
return presentation;
|
||||
})();
|
||||
|
||||
// Emscripten interface
|
||||
var Module = (function() {
|
||||
var print = (function() {
|
||||
if (typeof Presentation.print === "function") {
|
||||
return function print(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
console.log(text);
|
||||
Presentation.print(text);
|
||||
};
|
||||
} else {
|
||||
return function print(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
console.log(text);
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
var canvas = (function() {
|
||||
var canvasElement = document.getElementById("canvas");
|
||||
|
||||
// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
|
||||
// application robust, you may want to override this behavior before shipping!
|
||||
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
||||
canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
|
||||
|
||||
return canvasElement;
|
||||
})();
|
||||
|
||||
var setStatus = (function() {
|
||||
if (typeof Presentation.setStatus === "function")
|
||||
return function setStatus(text) {
|
||||
if (!Module.setStatus.last)
|
||||
Module.setStatus.last = { time: Date.now(), text: "" };
|
||||
if (text === Module.setStatus.text)
|
||||
return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m) {
|
||||
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
|
||||
return;
|
||||
text = m[1];
|
||||
}
|
||||
Presentation.setStatus(text);
|
||||
};
|
||||
else
|
||||
return function setStatus(text) {
|
||||
if (!Module.setStatus.last)
|
||||
Module.setStatus.last = { time: Date.now(), text: "" };
|
||||
if (text === Module.setStatus.text)
|
||||
return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m) {
|
||||
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
|
||||
return;
|
||||
text = m[1];
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
return {
|
||||
TOTAL_MEMORY: 268435456,
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: print,
|
||||
printErr: function printErr(text) {
|
||||
if (arguments.length > 1)
|
||||
text = Array.prototype.slice.call(arguments).join(" ");
|
||||
if (0) { // XXX disabled for safety `if (typeof dump == "function")`
|
||||
dump(text + "\n"); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: canvas,
|
||||
setStatus: setStatus,
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function monitorRunDependencies(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete.");
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
Presentation.setStatus("Downloading...");
|
||||
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus("Exception thrown, see JavaScript console");
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr("[post-exception status] " + text);
|
||||
};
|
||||
};
|
||||
//]]></script>
|
||||
<script type="text/javascript" src="$GODOT_BASEfs.js"></script>
|
||||
{{{ SCRIPT }}}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue