u3d-community · klaussilveira · Oct 28, 2023 · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/.github/workflows/web.yml b/.github/workflows/web.yml
@@ -0,0 +1,47 @@
+name: 🌎 Web
+on: [push, pull_request]
+
+concurrency:
+  group: ci-${{github.actor}}-${{github.head_ref || github.run_number}}-${{github.ref}}-web
+  cancel-in-progress: true
+
+jobs:
+  web:
+    name: Web
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        build-type:
+          - Release
+          #- Debug
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      # - name: Cache
+      #   id: cache-system-libraries
+      #   uses: actions/cache@v2
+      #   with:
+      #     path: emsdk-cache
+      #     key: emsdk-${{ runner.os }}
+
+      - name: Emscripten
+        uses: mymindstorm/setup-emsdk@v11
+        with:
+          #actions-cache-folder: 'emsdk-cache'
+          no-cache: true
+          version: 3.1.17
+
+      - name: Verify Emscripten
+        run: emcc -v
+
+      - name: CMake
+        run: emcmake script/cmake_emscripten.sh build -DCMAKE_BUILD_TYPE=${{ matrix.build-type }} -DURHO3D_LIB_TYPE=static -DURHO3D_PROFILING=0
+
+      - name: Build
+        run: cmake --build build --parallel 2 --config ${{ matrix.build-type }}
+
+      - name: Publish
+        if: 0
+        # TODO: port the ci_publish_web: task from the rakefile
diff --git a/Docs/GettingStarted.dox b/Docs/GettingStarted.dox
@@ -300,9 +300,9 @@ Execute cmake_mingw.sh then go to the build tree to execute make command. After
 
 This section assumes you have already updated, installed, and activated the latest Emscripten cross-compiler toolchain with upstream LLVM WASM backend on your host system as per described in https://emscripten.org/docs/getting_started/downloads.html.
 
-Set the EMSCRIPTEN_ROOT_PATH environment variable or build option to point to the root path of Emscripten cross-compiler tools. Alternatively, call the emsdk_env script to set the EMSCRIPTEN environment variable for you. The Emscripten sysroot path will be derived from the root path, usually from 'system' subdir relative to the root path. However, you can optionally set the EMSCRIPTEN_SYSROOT environment variable or build option to point to another system root path.
+Use the emcmake or emcmake.bat wrapper to set the emscripten toolchain file for you. This will set the needed cmake build options for the Emscripten cross-compiler tools. This can be called from the installed emsdk as an absolute path within the emsdk or you can source the emsdk_env script (extension depending on your shell) to add the tools to the path.
 
-On Windows host, execute cmake_emscripten.bat. On MacOS or Linux host, execute cmake_emscripten.sh. Then go to the build tree and execute the 'make' command to start the build as usual. You may want to set the URHO3D_SAMPLES build option to build all the samples. You may also optionally set the URHO3D_LUA build option to enable Lua scripting support. If you encounter "Too many open files" warning when archiving the Urho3D static library, follow by "Unresolved symbol" errors on MacOS then you have to increase the soft-limit in your host system before rebuilding the library and all the main targets.
+On Windows host, execute "emcmake.bat cmake_emscripten.bat". On MacOS or Linux host, execute "emcmake cmake_emscripten.sh". Then go to the build tree and execute the 'make' command to start the build as usual. If you encounter "Too many open files" warning when archiving the Urho3D static library, follow by "Unresolved symbol" errors on MacOS then you have to increase the soft-limit in your host system before rebuilding the library and all the main targets.
 
 For example, to double the limit (which normally defaults to 256 on MacOS):
 \verbatim

diff --git a/Source/ThirdParty/SDL/src/video/emscripten/SDL_emscriptenvideo.c b/Source/ThirdParty/SDL/src/video/emscripten/SDL_emscriptenvideo.c
@@ -347,8 +347,12 @@ Emscripten_SetWindowFullscreen(_THIS, SDL_Window * window, SDL_VideoDisplay * di
 
 static void
 Emscripten_SetWindowTitle(_THIS, SDL_Window * window) {
+    // Urho3D: newer emscripten uses a free function and not one in the module. Taken from newer SDL.
     EM_ASM_INT({
-      if (typeof Module['setWindowTitle'] !== 'undefined') {
+      if (typeof setWindowTitle !== 'undefined') {
+        setWindowTitle(UTF8ToString($0));
+      }
+      else if (typeof Module['setWindowTitle'] !== 'undefined') {
         Module['setWindowTitle'](UTF8ToString($0));
       }
       return 0;

diff --git a/Source/Urho3D/CMakeLists.txt b/Source/Urho3D/CMakeLists.txt
@@ -645,3 +645,10 @@ endif ()
 if (URHO3D_FORCE_AS_MAX_PORTABILITY)
     add_definitions (-DAS_MAX_PORTABILITY)
 endif ()
+
+# Symlink/copy html shell for use by downstream projects
+if (WEB)
+    # Ensure the output directory exist before creating the symlink
+    file (MAKE_DIRECTORY ${CMAKE_BINARY_DIR}/bin)
+    create_symlink (${CMAKE_SOURCE_DIR}/bin/shell.html ${CMAKE_BINARY_DIR}/bin/shell.html FALLBACK_TO_COPY)
+endif ()
diff --git a/bin/shell.html b/bin/shell.html
@@ -6,12 +6,23 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>U3D</title>
     <style>
+        #clicktoplaydiv {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            color: white;
+            background-color: rgba(0,0,0,0.2);
+            position: absolute;
+        }
+
         body, html {
             padding: 0;
             margin: 0;
             margin: 0;
             overflow: hidden;
             font-family: sans-serif;
+            color: #ddd;
+            background-color: #111;
         }
 
         .emscripten {
@@ -190,6 +201,31 @@
             }, 100);
         }
 
+        // Set up the click to play message
+        var div = document.createElement('div');
+        div.id = 'clicktoplaydiv';
+        p = document.createElement('p');
+        p.innerHTML = 'Click or tap to begin.';
+        div.appendChild(p);
+        document.body.appendChild(div);
+        div.addEventListener('click', function (e) {
+            div.remove();
+
+            if (Module.calledRun)
+            {
+                // Loading has finished, we have run but not called main
+                callMain();
+                // This calls ready a second time, but it fixes the screen size
+                ready();
+            }
+            else
+            {
+                // If the module has not been run, just turn off noInitialRun
+                Module.noInitialRun = false;
+            }
+        }, { once: true });
+
+        // Emscripten Module
         var Module = {
             preRun: [],
             postRun: [],
@@ -204,6 +240,9 @@
                 console.error(text);
             },
 
+            // Disable running until we have interacted with the page so we can run it on click
+            noInitialRun: true,
+
             // Urho3D called method which tells the canvas the current renderer resolution, based on E_SCREENMODE event values
             SetRendererSize: function(width, height) {
                 console.log('Engine renderer size changed to', width, height);

diff --git a/cmake/Modules/UrhoCommon.cmake b/cmake/Modules/UrhoCommon.cmake
@@ -353,8 +353,8 @@ if (RPI)
     set (RPI_ABI ${RPI_ABI} CACHE STRING "Specify target ABI (RPI platform only), possible values are RPI0, RPI1, RPI2, RPI3, RPI4" FORCE)
 endif ()
 if (EMSCRIPTEN)     # CMAKE_CROSSCOMPILING is always true for Emscripten
-    set (EMSCRIPTEN_ROOT_PATH "" CACHE PATH "Root path to Emscripten cross-compiler tools (Emscripten only)")
-    set (EMSCRIPTEN_SYSROOT "" CACHE PATH "Path to Emscripten system root (Emscripten only)")
+    set (EMSCRIPTEN_ROOT_PATH "${EMSCRIPTEN_ROOT_PATH}" CACHE PATH "Root path to Emscripten cross-compiler tools (Emscripten only)")
+    set (EMSCRIPTEN_SYSROOT "${EMSCRIPTEN_SYSROOT}" CACHE PATH "Path to Emscripten system root (Emscripten only)")
     option (EMSCRIPTEN_AUTO_SHELL "Auto adding a default HTML shell-file when it is not explicitly specified (Emscripten only)" TRUE)
     option (EMSCRIPTEN_ALLOW_MEMORY_GROWTH "Enable memory growing based on application demand, default to true as there should be little or no overhead (Emscripten only)" TRUE)
     math (EXPR EMSCRIPTEN_TOTAL_MEMORY "128 * 1024 * 1024")
@@ -1160,19 +1160,28 @@ macro (add_html_shell)
     check_source_files ("Could not call add_html_shell() macro before define_source_files() macro.")
     if (EMSCRIPTEN)
         if (NOT ${ARGN} STREQUAL "")
+            # Prefer the user-defined shell
             set (HTML_SHELL ${ARGN})
+        elseif (EXISTS ${CMAKE_SOURCE_DIR}/bin/shell.html)
+            # Fallback to the shell present in the project source
+            set (HTML_SHELL ${CMAKE_SOURCE_DIR}/bin/shell.html)
+        elseif (DEFINED URHO3D_HOME AND EXISTS ${URHO3D_HOME}/bin/shell.html)
+            # Then to the Urho3D shell (full window/screen with no console output)
+            set (HTML_SHELL ${URHO3D_HOME}/bin/shell.html)
+        elseif (EXISTS ${EMSCRIPTEN_ROOT_PATH}/src/shell.html)
+            # Finally create a shell from the emscripten one that embeds the Urho project logo
+            message (WARNING "Deprecated: Could not find '\${URHO3D_HOME}/bin/shell.html'. Falling back to '${EMSCRIPTEN_ROOT_PATH}/src/shell.html'. This behavior will be removed in a future release.")
+            file (READ ${EMSCRIPTEN_ROOT_PATH}/src/shell.html HTML_SHELL)
+            string (REPLACE "<!doctype html>" "<!-- This is a generated file. DO NOT EDIT!-->\n\n<!doctype html>" HTML_SHELL "${HTML_SHELL}")     # Stringify to preserve semicolons
+            string (REPLACE "<body>" "<body>\n<script>document.body.innerHTML=document.body.innerHTML.replace(/^#!.*\\n/, '');</script>\n<a href=\"https://urho3d.io\" title=\"Urho3D Homepage\"><img src=\"https://urho3d.io/assets/images/logo.png\" alt=\"link to https://urho3d.io\" height=\"80\" width=\"160\" /></a>\n" HTML_SHELL "${HTML_SHELL}")
+            file (WRITE ${CMAKE_BINARY_DIR}/Source/shell.html "${HTML_SHELL}")
+            set (HTML_SHELL ${CMAKE_BINARY_DIR}/Source/shell.html)
         else ()
-            # Create Urho3D custom HTML shell that also embeds our own project logo
-            if (NOT EXISTS ${CMAKE_SOURCE_DIR}/bin/shell.html)
-                file (READ ${EMSCRIPTEN_ROOT_PATH}/src/shell.html HTML_SHELL)
-                string (REPLACE "<!doctype html>" "<!-- This is a generated file. DO NOT EDIT!-->\n\n<!doctype html>" HTML_SHELL "${HTML_SHELL}")     # Stringify to preserve semicolons
-                string (REPLACE "<body>" "<body>\n<script>document.body.innerHTML=document.body.innerHTML.replace(/^#!.*\\n/, '');</script>\n<a href=\"https://urho3d.io\" title=\"Urho3D Homepage\"><img src=\"https://urho3d.io/assets/images/logo.png\" alt=\"link to https://urho3d.io\" height=\"80\" width=\"160\" /></a>\n" HTML_SHELL "${HTML_SHELL}")
-                file (WRITE ${CMAKE_BINARY_DIR}/Source/shell.html "${HTML_SHELL}")
-                set (HTML_SHELL ${CMAKE_BINARY_DIR}/Source/shell.html)
-            else ()
-                set (HTML_SHELL ${CMAKE_SOURCE_DIR}/bin/shell.html)
-            endif ()
+            message (ERROR "Deducing HTML_SHELL failed. \nPlease add \${CMAKE_SOURCE_DIR}/bin/shell.html or update Urho so it provides \${URHO3D_HOME}/bin/shell.html")
         endif ()
+        if (NOT EXISTS "${HTML_SHELL}")
+            message (ERROR "Could not find html shell '${HTML_SHELL}'")
+        endif()
         list (APPEND SOURCE_FILES ${HTML_SHELL})
         set_source_files_properties (${HTML_SHELL} PROPERTIES EMCC_OPTION shell-file)
     endif ()