Skip to content

Commit

Permalink
Update web demo exports for Godot 4.3
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@Calinou
Calinou committed Oct 29, 2024
1 parent 53d3f9c commit a2b6bd4
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 62 deletions.
34 changes: 26 additions & 8 deletions .github/dist/export_presets.cfg
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,41 @@
[preset.0]

name="HTML5"
platform="HTML5"
name="Web"
platform="Web"
runnable=true
advanced_options=false
dedicated_server=false
custom_features=""
export_filter="all_resources"
include_filter="*.json"
include_filter=""
exclude_filter=""
export_path=""
script_export_mode=1
script_encryption_key=""
encryption_include_filters=""
encryption_exclude_filters=""
encrypt_pck=false
encrypt_directory=false
script_export_mode=2

[preset.0.options]

custom_template/debug=""
custom_template/release=""
variant/export_type=0
variant/extensions_support=false
variant/thread_support=true
vram_texture_compression/for_desktop=true
vram_texture_compression/for_mobile=false
vram_texture_compression/for_mobile=true
html/export_icon=true
html/custom_html_shell=""
html/head_include=""
html/full_window_size=true
html/canvas_resize_policy=2
html/focus_canvas_on_start=true
html/experimental_virtual_keyboard=true
progressive_web_app/enabled=true
progressive_web_app/ensure_cross_origin_isolation_headers=true
progressive_web_app/offline_page=""
progressive_web_app/display=0
progressive_web_app/orientation=1
progressive_web_app/icon_144x144=""
progressive_web_app/icon_180x180=""
progressive_web_app/icon_512x512=""
progressive_web_app/background_color=Color(0, 0, 0, 1)
43 changes: 30 additions & 13 deletions .github/dist/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,36 @@
</ul>
<h2>Unavailable demos</h2>
<ul>
<li><code>2d/hdr/</code>: Not supported on HTML5 yet.</li>
<li><code>3d/global_illumination/</code>: Not supported on HTML5 yet (freezes the browser).</li>
<li><code>3d/voxel/</code>: Not supported on HTML5 yet.</li>
<li><code>audio/device_changer/</code>: Not supported on HTML5 due to browser limitations.</li>
<li><code>loading/background_load/</code>: Not supported on HTML5 yet.</li>
<li><code>loading/multiple_threads_loading/</code>: Not supported on HTML5 yet.</li>
<li><code>loading/threads/</code>: Not supported on HTML5 yet.</li>
<li><code>misc/matrix_transform/</code>: Results are only visible in the editor.</li>
<li><code>mobile/android_iap/</code>: Only relevant on native Android.</li>
<li><code>mobile/sensors/</code>: Not supported on HTML5 yet.</li>
<li><code>mono/*/</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
<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>
<li><code>plugins/*/</code>: Only effective within the editor.</li>
<li><code>2d/glow</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
<li><code>2d/navigation_mesh_chunks</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
<li><code>2d/physics_tests</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
<li><code>3d/labels_and_texts</code>: Does not export in headless mode due to an engine bug (font importing infinite loop).</li>
<li><code>3d/decals</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
<li><code>3d/ik</code>: Demo is not fully ported to Godot 4 yet (even though the feature works on the web).</li>
<li><code>3d/navigation_mesh_chunks</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
<li><code>3d/occlusion_culling_mesh_lod</code>: Occlusion culling is disabled by default in web builds to decrease binary size.</li>
<li><code>3d/particles</code>: Demo mostly showcases features that are not available in Compatibility (which the web platform always uses).</li>
<li><code>3d/physical_light_camera_units</code>: Demo is not tuned for the Compatibility rendering method (which the web platform always uses).</li>
<li><code>3d/physics_tests</code>: Relies on debug-only drawing functionality which is not available in projects exported in release mode.</li>
<li><code>3d/variable_rate_shading</code>: Not supported on the Compatibility rendering method (which the web platform always uses)</li>
<li><code>3d/volumetric_fog</code>: Not supported on the Compatibility rendering method (which the web platform always uses)</li>
<li><code>3d/voxel</code>: Freezes after a few seconds of gameplay due to web platform-specific threading issues.</li>
<li><code>audio/bpm_sync</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
<li><code>audio/device_changer</code>: Not relevant for the web platform, as the web browser always chooses the audio output device.</li>
<li><code>audio/midi_piano</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
<li><code>audio/spectrum</code>: Not functional on the web platform due to differences in the audio playback implementation.</li>
<li><code>compute/*</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
<li><code>gui/msdf_font</code>: Does not export in headless mode due to an engine bug (font importing crashes).</li>
<li><code>gui/translation</code>: Does not export in headless mode due to an engine bug (font importing crashes).</li>
<li><code>loading/runtime_save_load</code>: Native filesystem access is not available on the web platform.</li>
<li><code>misc/compute_shader_heightmap</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
<li><code>misc/large_world_coordinates</code>: Not supported on the Compatibility rendering method (which the web platform always uses).</li>
<li><code>misc/matrix_transform</code>: Results are only visible in the editor.</li>
<li><code>mobile/android_iap</code>: Only relevant on native Android.</li>
<li><code>mobile/sensors</code>: Not supported on the web platform.</li>
<li><code>mono/*</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
<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>
<li><code>plugins/*</code>: Only effective within the editor.</li>
</ul>
</body>
</html>
24 changes: 18 additions & 6 deletions .github/dist/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,25 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Godot demos exported to HTML5</title>
<title>Official Godot demos exported to Web</title>
<style>
:root {
--background-color: #fff;
--text-color: #222;
--link-color: hsl(220, 100%, 45%);
--link-visited-color: hsl(270, 100%, 55%);
--link-underline-color: hsla(220, 100%, 45%, 0.3);
--link-underline-visited-color: hsla(270, 100%, 45%, 0.3);
}

@media (prefers-color-scheme: dark) {
:root {
--background-color: #222;
--text-color: #eee;
--link-color: hsl(200, 100%, 70%);
--link-visited-color: hsl(250, 100%, 80%);
--link-underline-color: hsla(200, 100%, 70%, 0.3);
--link-underline-visited-color: hsla(250, 100%, 70%, 0.3);
}
}

Expand Down Expand Up @@ -52,6 +56,11 @@
text-decoration-thickness: 0.125rem;
}

a:visited {
color: var(--link-visited-color);
text-decoration-color: var(--link-visited-color);
}

a:hover {
filter: brightness(117.5%);
}
Expand Down Expand Up @@ -88,6 +97,9 @@
margin: 20px 10px;
}

.unsupported-demos li {
margin-bottom: 2rem;
}
</style>
</head>

Expand All @@ -96,12 +108,12 @@ <h1>Godot demo projects</h1>
<p>
This page lists
<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
exported to HTML5 for testing purposes. These projects are deployed automatically
exported to the web for testing purposes. These projects are deployed automatically
on every commit on the <code>master</code> branch of the repository.
</p>
<p>
The HTML5 exports on this page are provided for demonstration purposes only.
Some of these demos may not function or render correctly on HTML5,
The web exports on this page are provided for demonstration purposes only.
Some of these demos may not function or render correctly on the web platform,
especially on mobile devices.
For best performance, it's recommended to
<a href="https://godotengine.org/download">download</a> a native editor
Expand All @@ -110,9 +122,9 @@ <h1>Godot demo projects</h1>
<p>
See the
<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
documentation for information on exporting your own projects to HTML5.
documentation for information on exporting your own projects to the web.
</p>

<h2>List of demos</h2>
<ul>
<ul class="unsupported-demos">
<!-- The list of demos will be inserted below by the CI process. -->
86 changes: 52 additions & 34 deletions .github/workflows/export_html5.yml.disabled → .github/workflows/export_web.yml
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,59 @@
name: Export projects to HTML5 and deploy to GitHub Pages
name: Export projects to Web and deploy to GitHub Pages
on:
push:
branches:
- master
#branches:
# - master !!! FIXME: Uncomment before opening a PR !!!

env:
GODOT_VERSION: 3.3.3
GODOT_VERSION: 4.3

jobs:
export-html5:
name: Export projects to HTML5 and deploy to GitHub Pages
runs-on: ubuntu-20.04
name: Export projects to Web and deploy to GitHub Pages
runs-on: ubuntu-24.04
container:
image: barichello/godot-ci:3.3.3
image: barichello/godot-ci:4.3
steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Setup
run: |
mkdir -p ~/.local/share/godot/templates/
mv /root/.local/share/godot/templates/$GODOT_VERSION.stable ~/.local/share/godot/templates/$GODOT_VERSION.stable
mkdir -p ~/.local/share/godot/export_templates/
mv /root/.local/share/godot/export_templates/$GODOT_VERSION.stable ~/.local/share/godot/export_templates/$GODOT_VERSION.stable
- name: Export projects to HTML5
- name: Export projects to Web
run: |
apt-get update -qq && apt-get install -qqq imagemagick
# Don't export Mono demos (not supported yet), demos that can't be run in HTML5
# since they're platform-specific or demos that are currently broken in HTML5.
# Don't export Mono demos (not supported yet), demos that can't be run in Web
# since they're platform-specific or demos that are currently broken in Web.
# Remember to update `.github/dist/footer.html` when updating the list of excluded demos.
rm -rf \
2d/hdr/ \
3d/global_illumination/ \
2d/glow/ \
2d/navigation_mesh_chunks/ \
2d/physics_tests/ \
3d/labels_and_texts/ \
3d/decals/ \
3d/ik/ \
3d/navigation_mesh_chunks/ \
3d/occlusion_culling_mesh_lod/ \
3d/particles/ \
3d/physical_light_camera_units/ \
3d/physics_tests/ \
3d/variable_rate_shading/ \
3d/volumetric_fog/ \
3d/voxel/ \
audio/bpm_sync/ \
audio/device_changer/ \
loading/background_load/ \
loading/multiple_threads_loading/ \
loading/threads/ \
audio/midi_piano/ \
audio/spectrum/ \
compute/ \
gui/msdf_font/ \
gui/translation/ \
loading/runtime_save_load \
misc/compute_shader_heightmap \
misc/large_world_coordinates/ \
misc/matrix_transform/ \
mobile/android_iap/ \
mobile/sensors/ \
Expand All @@ -45,38 +62,42 @@ jobs:
plugins/
for panorama in 3d/material_testers/backgrounds/*.hdr; do
# Decrease the resolution to get below the 20 MB per-file limit.
# Otherwise, the website can't be deployed as files larger than 20 MB
# can't be pushed to GitHub anymore.
mogrify -resize 75% "$panorama"
# Decrease the resolution to get below the 100 MB PCK size limit.
# Otherwise, the website can't be deployed as files larger than 100 MB
# can't be pushed to GitHub.
mogrify -resize 66.667% "$panorama"
done
BASEDIR="$PWD"
# Use absolute paths so that we can `cd` without having to go back to the parent directory manually.
for demo in */*/; do
echo ""
echo "================================"
echo ""
echo "================================================================================"
echo "Exporting demo $demo..."
echo "================================"
echo "================================================================================"
mkdir -p "$BASEDIR/.github/dist/$demo"
cd "$BASEDIR/$demo"
# Copy an export template preset file configured for HTML5 exporting.
# Copy an export template preset file configured for Web exporting.
# This way, we don't have to commit `export_presets.cfg` for each project.
cp "$BASEDIR/.github/dist/export_presets.cfg" .
godot --export "HTML5" "$BASEDIR/.github/dist/$demo/index.html"
# Enable ETC2 texture importing, which is disabled by default (but required for web exports to work on mobile platforms).
echo "[rendering]\n\ntextures/vram_compression/import_etc2_astc=true" >> project.godot
godot --verbose --headless --export-release "Web" "$BASEDIR/.github/dist/$demo/index.html"
# Replace the WASM file with a symbolic link to avoid duplicating files in the pushed branch.
# (WASM files are identical across projects, but not PCK or HTML files.)
# (WASM files are identical across projects, but not PCK or HTML/JavaScript files.)
mv -f "$BASEDIR/.github/dist/$demo/index.wasm" "$BASEDIR/.github/dist/index.wasm"
# The symlink must be relative as it needs to point to a file within the pushed repository.
ln -s "../../index.wasm" "$BASEDIR/.github/dist/$demo/index.wasm"
# Append the demo to the list of demos for the website.
PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
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"
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"
done
cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
Expand All @@ -89,12 +110,9 @@ jobs:
run: |
apt-get update -qq && apt-get install -qqq rsync
- name: Deploy to GitHub Pages 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3
uses: JamesIves/github-pages-deploy-action@releases/v4
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
# The branch the action should deploy to.
BRANCH: gh-pages
# The folder the action should deploy.
FOLDER: .github/dist
folder: .github/dist
# Artifacts are large; don't keep the branch's history.
SINGLE_COMMIT: true
single-commit: true
2 changes: 1 addition & 1 deletion .github/workflows/static_checks.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ on: [push, pull_request]
jobs:
format:
name: File formatting (file_format.sh)
runs-on: ubuntu-20.04
runs-on: ubuntu-24.04
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down

0 comments on commit a2b6bd4

Please sign in to comment.