Skip to content

Commit 7ed5b1c

Browse files
CalinouCalinou
authored
Update web demo exports for Godot 4.3 (#1127)
This comes with other improvements: - Demos now work on desktop and mobile browsers, as ETC2 import is now automatically enabled before exporting each demo. - Progressive web app is available for each project. - Can be added to the home screen on a device for a closer-to-native experience. - Cross-origin isolation headers are automatically added, so that the export works with threads enabled despite being hosted on GitHub Pages (which doesn't send these headers). Several demos will need further tweaks to look better when using the Compatibility rendering method. Currently, many 3D demos appear too bright due to lights with shadows enabled using sRGB blending. Also, many demos will need to be modified to indicate which parts of them are not supported when running on the web platform, or when using the Compatibility rendering method.
1 parent 53d3f9c commit 7ed5b1c

File tree

5 files changed

+125
-60
lines changed

5 files changed

+125
-60
lines changed

‎.github/dist/export_presets.cfg‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,41 @@
11
[preset.0]
22

3-
name="HTML5"
4-
platform="HTML5"
3+
name="Web"
4+
platform="Web"
55
runnable=true
6+
advanced_options=false
7+
dedicated_server=false
68
custom_features=""
79
export_filter="all_resources"
8-
include_filter="*.json"
10+
include_filter=""
911
exclude_filter=""
1012
export_path=""
11-
script_export_mode=1
12-
script_encryption_key=""
13+
encryption_include_filters=""
14+
encryption_exclude_filters=""
15+
encrypt_pck=false
16+
encrypt_directory=false
17+
script_export_mode=2
1318

1419
[preset.0.options]
1520

1621
custom_template/debug=""
1722
custom_template/release=""
18-
variant/export_type=0
23+
variant/extensions_support=false
24+
variant/thread_support=true
1925
vram_texture_compression/for_desktop=true
20-
vram_texture_compression/for_mobile=false
26+
vram_texture_compression/for_mobile=true
27+
html/export_icon=true
2128
html/custom_html_shell=""
2229
html/head_include=""
23-
html/full_window_size=true
30+
html/canvas_resize_policy=2
31+
html/focus_canvas_on_start=true
32+
html/experimental_virtual_keyboard=true
33+
progressive_web_app/enabled=true
34+
progressive_web_app/ensure_cross_origin_isolation_headers=true
35+
progressive_web_app/offline_page=""
36+
progressive_web_app/display=0
37+
progressive_web_app/orientation=1
38+
progressive_web_app/icon_144x144=""
39+
progressive_web_app/icon_180x180=""
40+
progressive_web_app/icon_512x512=""
41+
progressive_web_app/background_color=Color(0, 0, 0, 1)

‎.github/dist/footer.html‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,37 @@
11
<!-- The list of demos will be inserted above by the CI process. -->
22
</ul>
33
<h2>Unavailable demos</h2>
4-
<ul>
5-
<li><code>2d/hdr/</code>: Not supported on HTML5 yet.</li>
6-
<li><code>3d/global_illumination/</code>: Not supported on HTML5 yet (freezes the browser).</li>
7-
<li><code>3d/voxel/</code>: Not supported on HTML5 yet.</li>
8-
<li><code>audio/device_changer/</code>: Not supported on HTML5 due to browser limitations.</li>
9-
<li><code>loading/background_load/</code>: Not supported on HTML5 yet.</li>
10-
<li><code>loading/multiple_threads_loading/</code>: Not supported on HTML5 yet.</li>
11-
<li><code>loading/threads/</code>: Not supported on HTML5 yet.</li>
12-
<li><code>misc/matrix_transform/</code>: Results are only visible in the editor.</li>
13-
<li><code>mobile/android_iap/</code>: Only relevant on native Android.</li>
14-
<li><code>mobile/sensors/</code>: Not supported on HTML5 yet.</li>
15-
<li><code>mono/*/</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
16-
<li><code>networking/*/</code>: Doesn't make sense to be hosted on a static host, as the server must be hosted on the same origin due to the browser's same-origin policy.</li>
17-
<li><code>plugins/*/</code>: Only effective within the editor.</li>
4+
<ul class="unsupported-demos">
5+
<li><code>2d/glow</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
6+
<li><code>2d/navigation_mesh_chunks</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
7+
<li><code>2d/physics_tests</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
8+
<li><code>3d/labels_and_texts</code>: Does not export in headless mode due to an engine bug (font importing infinite loop).</li>
9+
<li><code>3d/decals</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
10+
<li><code>3d/ik</code>: Demo is not fully ported to Godot 4 yet (even though the feature works on the web).</li>
11+
<li><code>3d/navigation_mesh_chunks</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
12+
<li><code>3d/occlusion_culling_mesh_lod</code>: Occlusion culling is disabled by default in web builds to decrease binary size.</li>
13+
<li><code>3d/particles</code>: Demo mostly showcases features that are not available in Compatibility (which the web platform always uses).</li>
14+
<li><code>3d/physical_light_camera_units</code>: Demo is not tuned for the Compatibility rendering method (which the web platform always uses).</li>
15+
<li><code>3d/physics_tests</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
16+
<li><code>3d/variable_rate_shading</code>: Not supported on the Compatibility rendering method (which the web platform always uses)</li>
17+
<li><code>3d/volumetric_fog</code>: Not supported on the Compatibility rendering method (which the web platform always uses)</li>
18+
<li><code>3d/voxel</code>: Freezes after a few seconds of gameplay due to web platform-specific threading issues.</li>
19+
<li><code>audio/bpm_sync</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
20+
<li><code>audio/device_changer</code>: Not relevant for the web platform, as the web browser always chooses the audio output device.</li>
21+
<li><code>audio/midi_piano</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
22+
<li><code>audio/spectrum</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
23+
<li><code>compute/*</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
24+
<li><code>gui/msdf_font</code>: Does not export in headless mode due to an engine bug (font importing crashes).</li>
25+
<li><code>gui/translation</code>: Does not export in headless mode due to an engine bug (font importing crashes).</li>
26+
<li><code>loading/runtime_save_load</code>: Native filesystem access is not available on the web platform.</li>
27+
<li><code>misc/compute_shader_heightmap</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
28+
<li><code>misc/large_world_coordinates</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
29+
<li><code>misc/matrix_transform</code>: Results are only visible in the editor.</li>
30+
<li><code>mobile/android_iap</code>: Only relevant on native Android.</li>
31+
<li><code>mobile/sensors</code>: Not supported on the web platform.</li>
32+
<li><code>mono/*</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
33+
<li><code>networking/*</code>: Doesn't make sense to be hosted on a static host, as the server must be hosted on the same origin due to the browser's same-origin policy.</li>
34+
<li><code>plugins/*</code>: Only effective within the editor.</li>
1835
</ul>
1936
</body>
2037
</html>

‎.github/dist/header.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Godot demos exported to HTML5</title>
7+
<title>Official Godot demos exported to Web</title>
88
<style>
99
:root {
1010
--background-color: #fff;
1111
--text-color: #222;
1212
--link-color: hsl(220, 100%, 45%);
13+
--link-visited-color: hsl(270, 100%, 55%);
1314
--link-underline-color: hsla(220, 100%, 45%, 0.3);
15+
--link-underline-visited-color: hsla(270, 100%, 45%, 0.3);
1416
}
1517

1618
@media (prefers-color-scheme: dark) {
1719
:root {
1820
--background-color: #222;
1921
--text-color: #eee;
2022
--link-color: hsl(200, 100%, 70%);
23+
--link-visited-color: hsl(250, 100%, 80%);
2124
--link-underline-color: hsla(200, 100%, 70%, 0.3);
25+
--link-underline-visited-color: hsla(250, 100%, 70%, 0.3);
2226
}
2327
}
2428

@@ -52,6 +56,11 @@
5256
text-decoration-thickness: 0.125rem;
5357
}
5458

59+
a:visited {
60+
color: var(--link-visited-color);
61+
text-decoration-color: var(--link-visited-color);
62+
}
63+
5564
a:hover {
5665
filter: brightness(117.5%);
5766
}
@@ -88,6 +97,9 @@
8897
margin: 20px 10px;
8998
}
9099

100+
.unsupported-demos li {
101+
margin-bottom: 2rem;
102+
}
91103
</style>
92104
</head>
93105

@@ -96,12 +108,12 @@ <h1>Godot demo projects</h1>
96108
<p>
97109
This page lists
98110
<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
99-
exported to HTML5 for testing purposes. These projects are deployed automatically
111+
exported to the web for testing purposes. These projects are deployed automatically
100112
on every commit on the <code>master</code> branch of the repository.
101113
</p>
102114
<p>
103-
The HTML5 exports on this page are provided for demonstration purposes only.
104-
Some of these demos may not function or render correctly on HTML5,
115+
The web exports on this page are provided for demonstration purposes only.
116+
Some of these demos may not function or render correctly on the web platform,
105117
especially on mobile devices.
106118
For best performance, it's recommended to
107119
<a href="https://godotengine.org/download">download</a> a native editor
@@ -110,7 +122,7 @@ <h1>Godot demo projects</h1>
110122
<p>
111123
See the
112124
<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
113-
documentation for information on exporting your own projects to HTML5.
125+
documentation for information on exporting your own projects to the web.
114126
</p>
115127

116128
<h2>List of demos</h2>

‎.github/workflows/export_html5.yml.disabled‎ renamed to ‎.github/workflows/export_web.yml‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,59 @@
1-
name: Export projects to HTML5 and deploy to GitHub Pages
1+
name: Export projects to Web and deploy to GitHub Pages
22
on:
33
push:
44
branches:
55
- master
66

77
env:
8-
GODOT_VERSION: 3.3.3
8+
GODOT_VERSION: 4.3
99

1010
jobs:
1111
export-html5:
12-
name: Export projects to HTML5 and deploy to GitHub Pages
13-
runs-on: ubuntu-20.04
12+
name: Export projects to Web and deploy to GitHub Pages
13+
runs-on: ubuntu-24.04
1414
container:
15-
image: barichello/godot-ci:3.3.3
15+
image: barichello/godot-ci:4.3
1616
steps:
1717
- name: Checkout
18-
uses: actions/checkout@v3
18+
uses: actions/checkout@v4
1919

2020
- name: Setup
2121
run: |
22-
mkdir -p ~/.local/share/godot/templates/
23-
mv /root/.local/share/godot/templates/$GODOT_VERSION.stable ~/.local/share/godot/templates/$GODOT_VERSION.stable
22+
mkdir -p ~/.local/share/godot/export_templates/
23+
mv /root/.local/share/godot/export_templates/$GODOT_VERSION.stable ~/.local/share/godot/export_templates/$GODOT_VERSION.stable
2424
25-
- name: Export projects to HTML5
25+
- name: Export projects to Web
2626
run: |
2727
apt-get update -qq && apt-get install -qqq imagemagick
2828
29-
# Don't export Mono demos (not supported yet), demos that can't be run in HTML5
30-
# since they're platform-specific or demos that are currently broken in HTML5.
29+
# Don't export Mono demos (not supported yet), demos that can't be run in Web
30+
# since they're platform-specific or demos that are currently broken in Web.
3131
# Remember to update `.github/dist/footer.html` when updating the list of excluded demos.
3232
rm -rf \
33-
2d/hdr/ \
34-
3d/global_illumination/ \
33+
2d/glow/ \
34+
2d/navigation_mesh_chunks/ \
35+
2d/physics_tests/ \
36+
3d/labels_and_texts/ \
37+
3d/decals/ \
38+
3d/ik/ \
39+
3d/navigation_mesh_chunks/ \
40+
3d/occlusion_culling_mesh_lod/ \
41+
3d/particles/ \
42+
3d/physical_light_camera_units/ \
43+
3d/physics_tests/ \
44+
3d/variable_rate_shading/ \
45+
3d/volumetric_fog/ \
3546
3d/voxel/ \
47+
audio/bpm_sync/ \
3648
audio/device_changer/ \
37-
loading/background_load/ \
38-
loading/multiple_threads_loading/ \
39-
loading/threads/ \
49+
audio/midi_piano/ \
50+
audio/spectrum/ \
51+
compute/ \
52+
gui/msdf_font/ \
53+
gui/translation/ \
54+
loading/runtime_save_load \
55+
misc/compute_shader_heightmap \
56+
misc/large_world_coordinates/ \
4057
misc/matrix_transform/ \
4158
mobile/android_iap/ \
4259
mobile/sensors/ \
@@ -45,38 +62,42 @@ jobs:
4562
plugins/
4663
4764
for panorama in 3d/material_testers/backgrounds/*.hdr; do
48-
# Decrease the resolution to get below the 20 MB per-file limit.
49-
# Otherwise, the website can't be deployed as files larger than 20 MB
50-
# can't be pushed to GitHub anymore.
51-
mogrify -resize 75% "$panorama"
65+
# Decrease the resolution to get below the 100 MB PCK size limit.
66+
# Otherwise, the website can't be deployed as files larger than 100 MB
67+
# can't be pushed to GitHub.
68+
mogrify -resize 66.667% "$panorama"
5269
done
5370
5471
BASEDIR="$PWD"
5572
5673
# Use absolute paths so that we can `cd` without having to go back to the parent directory manually.
5774
for demo in */*/; do
5875
echo ""
59-
echo "================================"
76+
echo ""
77+
echo "================================================================================"
6078
echo "Exporting demo $demo..."
61-
echo "================================"
79+
echo "================================================================================"
6280
6381
mkdir -p "$BASEDIR/.github/dist/$demo"
6482
cd "$BASEDIR/$demo"
6583
66-
# Copy an export template preset file configured for HTML5 exporting.
84+
# Copy an export template preset file configured for Web exporting.
6785
# This way, we don't have to commit `export_presets.cfg` for each project.
6886
cp "$BASEDIR/.github/dist/export_presets.cfg" .
69-
godot --export "HTML5" "$BASEDIR/.github/dist/$demo/index.html"
87+
# Enable ETC2 texture importing, which is disabled by default (but required for web exports to work on mobile platforms).
88+
echo "[rendering]\n\ntextures/vram_compression/import_etc2_astc=true" >> project.godot
89+
90+
godot --verbose --headless --export-release "Web" "$BASEDIR/.github/dist/$demo/index.html"
7091
7192
# Replace the WASM file with a symbolic link to avoid duplicating files in the pushed branch.
72-
# (WASM files are identical across projects, but not PCK or HTML files.)
93+
# (WASM files are identical across projects, but not PCK or HTML/JavaScript files.)
7394
mv -f "$BASEDIR/.github/dist/$demo/index.wasm" "$BASEDIR/.github/dist/index.wasm"
7495
# The symlink must be relative as it needs to point to a file within the pushed repository.
7596
ln -s "../../index.wasm" "$BASEDIR/.github/dist/$demo/index.wasm"
7697
7798
# Append the demo to the list of demos for the website.
7899
PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
79-
echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""><p>$PROJECT_NAME</p></a></li>" >> "$BASEDIR/.github/dist/demos.html"
100+
echo "<li><a href='$demo'><img width="64" height="64" src="$demo/index.icon.png" alt=""><p>$PROJECT_NAME</p></a></li>" >> "$BASEDIR/.github/dist/demos.html"
80101
done
81102
82103
cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
@@ -89,12 +110,9 @@ jobs:
89110
run: |
90111
apt-get update -qq && apt-get install -qqq rsync
91112
- name: Deploy to GitHub Pages 🚀
92-
uses: JamesIves/github-pages-deploy-action@releases/v3
113+
uses: JamesIves/github-pages-deploy-action@releases/v4
93114
with:
94-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
95-
# The branch the action should deploy to.
96-
BRANCH: gh-pages
97115
# The folder the action should deploy.
98-
FOLDER: .github/dist
116+
folder: .github/dist
99117
# Artifacts are large; don't keep the branch's history.
100-
SINGLE_COMMIT: true
118+
single-commit: true

‎.github/workflows/static_checks.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ on: [push, pull_request]
44
jobs:
55
format:
66
name: File formatting (file_format.sh)
7-
runs-on: ubuntu-20.04
7+
runs-on: ubuntu-24.04
88
steps:
99
- name: Checkout
1010
uses: actions/checkout@v4

0 commit comments

Comments
 (0)