asgardius/virtualx-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[HTML5] Editor video driver option. Replace canvas on exit.

Browse source 
Default is "Auto", but can be forced to a specific WebGL version if the
automatic detection fails.

The game and editor canvas are now replaced with a new one in the exit
hooks. This helps the browser do some context cleanup, and allow us to
create a new context of a different type (WebGL/WebGL2).

Enable GLES3/WebGL2 in the Web Editor.
This commit is contained in:
Fabio Alessandrelli 2021-09-20 14:47:55 +02:00
parent 11d1b0387e
commit 3a61d0990e
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
misc/dist/html/editor.html vendored
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <html xmlns="https://www.w3.org/1999/xhtml" lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
@ -269,11 +269,6 @@
<div id="tabs"> <div id="tabs">
<div id="tab-loader"> <div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence"> <div style="color: #e0e0e0;" id="persistence">
<label for="videoMode" style="display: none;">Select video driver:</label><br />
<select id="videoMode" style="display: none;">
<option value="GLES2" selected="selected">WebGL</option>
<option value="GLES3">WebGL 2</option>
</select>
<br /> <br />
<img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" /> <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
<br /> <br />
@ -283,6 +278,14 @@
<br /> <br />
<br /> <br />
<br /> <br />
<label for="videoMode" style="margin-right: 1rem">Video driver:</label>
<select id="videoMode">
<option value="" selected="selected">Auto</option>
<option value="GLES2">WebGL</option>
<option value="GLES3">WebGL 2</option>
</select>
<br />
<br />
<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/> <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/>
<br /> <br />
<a href="demo.zip">(Try this for example)</a> <a href="demo.zip">(Try this for example)</a>
@ -348,7 +351,7 @@
var game = null; var game = null;
var setStatusMode; var setStatusMode;
var setStatusNotice; var setStatusNotice;
var video_driver = "GLES2"; var video_driver = "";
function clearPersistence() { function clearPersistence() {
function deleteDB(path) { function deleteDB(path) {
@ -479,6 +482,15 @@
animationCallbacks.push(adjustCanvasDimensions); animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions(); adjustCanvasDimensions();
function replaceCanvas(from) {
const out = document.createElement("canvas");
out.id = from.id;
out.tabIndex = from.tabIndex;
from.parentNode.replaceChild(out, from);
lastScale = 0;
return out;
}
setStatusMode = function setStatusMode(mode) { setStatusMode = function setStatusMode(mode) {
if (statusMode === mode || !initializing) if (statusMode === mode || !initializing)
return; return;
@ -534,6 +546,7 @@
'canvas': gameCanvas, 'canvas': gameCanvas,
'canvasResizePolicy': 1, 'canvasResizePolicy': 1,
'onExit': function () { 'onExit': function () {
gameCanvas = replaceCanvas(gameCanvas);
setGameTabEnabled(false); setGameTabEnabled(false);
showTab('editor'); showTab('editor');
game = null; game = null;
@ -548,7 +561,7 @@
const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0; const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0; const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
const is_game = !is_editor && !is_project_manager; const is_game = !is_editor && !is_project_manager;
if (is_project_manager) { if (video_driver) {
args.push('--video-driver', video_driver); args.push('--video-driver', video_driver);
} }
if (is_game) { if (is_game) {
@ -561,7 +574,7 @@
showTab('game'); showTab('game');
game.init().then(function() { game.init().then(function() {
requestAnimationFrame(function() { requestAnimationFrame(function() {
game.start({'args': args}).then(function() { game.start({'args': args, 'canvas': gameCanvas}).then(function() {
gameCanvas.focus(); gameCanvas.focus();
}); });
}); });
@ -576,7 +589,7 @@
showTab('loader'); showTab('loader');
setLoaderEnabled(true); setLoaderEnabled(true);
}; };
editor.start({'args': args, 'persistentDrops': is_project_manager}); editor.start({'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas});
}); });
}, 0); }, 0);
OnEditorExit = null; OnEditorExit = null;
@ -603,6 +616,7 @@
'canvas': editorCanvas, 'canvas': editorCanvas,
'canvasResizePolicy': 0, 'canvasResizePolicy': 0,
'onExit': function() { 'onExit': function() {
editorCanvas = replaceCanvas(editorCanvas);
if (OnEditorExit) { if (OnEditorExit) {
OnEditorExit(); OnEditorExit();
} }
@ -634,10 +648,14 @@
} catch(e) { } catch(e) {
// File exists // File exists
} }
//selectVideoMode(); selectVideoMode();
showTab('editor'); showTab('editor');
setLoaderEnabled(false); setLoaderEnabled(false);
editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() { const args = ['--project-manager'];
if (video_driver) {
args.push('--video-driver', video_driver);
}
editor.start({'args': args, 'persistentDrops': true}).then(function() {
setStatusMode('hidden'); setStatusMode('hidden');
initializing = false; initializing = false;
}); });

4
platform/javascript/os_javascript.cpp
View file

@ -702,14 +702,10 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
set_window_per_pixel_transparency_enabled(true); set_window_per_pixel_transparency_enabled(true);
} }
#ifdef TOOLS_ENABLED
bool gles3 = false;
#else
bool gles3 = true; bool gles3 = true;
if (p_video_driver == VIDEO_DRIVER_GLES2) { if (p_video_driver == VIDEO_DRIVER_GLES2) {
gles3 = false; gles3 = false;
} }
#endif
bool gl_initialization_error = false; bool gl_initialization_error = false;