Ver código fonte

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.
Hugo Locurcio 10 meses atrás
pai
commit
7ed5b1c116

+ 26 - 8
.github/dist/export_presets.cfg

@@ -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)

+ 31 - 14
.github/dist/footer.html

@@ -1,20 +1,37 @@
         <!-- The list of demos will be inserted above by the CI process. -->
     </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>
+    <ul class="unsupported-demos">
+        <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>

+ 17 - 5
.github/dist/header.html

@@ -4,13 +4,15 @@
 <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) {
@@ -18,7 +20,9 @@
 				--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);
 			}
 		}
 
@@ -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%);
 		}
@@ -88,6 +97,9 @@
 			margin: 20px 10px;
 		}
 
+		.unsupported-demos li {
+			margin-bottom: 2rem;
+		}
 	</style>
 </head>
 
@@ -96,12 +108,12 @@
 	<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
@@ -110,7 +122,7 @@
 	<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>

+ 50 - 32
.github/workflows/export_html5.yml.disabled → .github/workflows/export_web.yml

@@ -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
 
 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/ \
@@ -45,10 +62,10 @@ 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"
@@ -56,27 +73,31 @@ jobs:
           # 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"
@@ -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

+ 1 - 1
.github/workflows/static_checks.yml

@@ -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