Yup On Emscripten: Audio Worklet audio device support and other emscripten features

.clang-format

@@ -1,4 +1,5 @@
 ---
+Language: Cpp
 AccessModifierOffset: -4
 AlignAfterOpenBracket: Align
 AlignConsecutiveAssignments: false
@@ -42,7 +43,6 @@ IndentWrappedFunctionNames: true
 IndentPPDirectives: BeforeHash
 KeepEmptyLinesAtTheStartOfBlocks: false
 LambdaBodyIndentation: Signature
-Language: Cpp
 MaxEmptyLinesToKeep: 1
 NamespaceIndentation: None
 PackConstructorInitializers: Never
@@ -70,6 +70,7 @@ SpacesInSquareBrackets: false
 Standard: "c++17"
 TabWidth: 4
 UseTab: Never
+WhitespaceSensitiveMacros: ['EM_ASM', 'EM_JS', 'EM_ASM_INT', 'EM_ASM_DOUBLE', 'EM_ASM_PTR', 'MAIN_THREAD_EM_ASM', 'MAIN_THREAD_EM_ASM_INT', 'MAIN_THREAD_EM_ASM_DOUBLE', 'MAIN_THREAD_EM_ASM_DOUBLE', 'MAIN_THREAD_ASYNC_EM_ASM']
 ---
 Language: ObjC
 BasedOnStyle: Chromium
@@ -84,3 +85,10 @@ PointerAlignment: Left
 SpacesBeforeTrailingComments: 1
 TabWidth: 4
 UseTab: Never
+---
+Language: JavaScript
+BasedOnStyle: Chromium
+ColumnLimit: 0
+IndentWidth: 4
+TabWidth: 4
+UseTab: Never

README.md

@@ -3,11 +3,14 @@
 UI courtesy from https://www.drywestdesign.com/:
 ![SeaSynth](./images/seasynth_prototype.png)
 
-Example rive animations ([source code](./examples/render/source/main.cpp)):
-[![Web Render Example 1](./images/web_render_1.png)](https://kunitoki.github.io/yup/demos/web_render_1/)
-[![Web Render Example 2](./images/web_render_2.png)](https://kunitoki.github.io/yup/demos/web_render_2/)
-[![Web Render Example 3](./images/web_render_3.png)](https://kunitoki.github.io/yup/demos/web_render_3/)
-
+<p float="left">
+  <a href="https://kunitoki.github.io/yup/demos/web_render_1/"><img src="./docs/demos/web_render_1.png" width="24%" /></a>
+  <a href="https://kunitoki.github.io/yup/demos/web_render_2/"><img src="./docs/demos/web_render_2.png" width="24%" /></a>
+  <a href="https://kunitoki.github.io/yup/demos/web_render_3/"><img src="./docs/demos/web_render_3.png" width="24%" /></a>
+  <a href="https://kunitoki.github.io/yup/demos/web_render_4/"><img src="./docs/demos/web_render_4.png" width="24%" /></a>
+</p>
+
+Example Rive animation display ([source code](./examples/render/source/main.cpp)):
 [Renderer Youtube Video](https://youtube.com/shorts/3XC4hyDlrVs)
 
 [![Build And Test MacOS](https://github.com/kunitoki/yup/actions/workflows/build_macos.yml/badge.svg)](https://github.com/kunitoki/yup/actions/workflows/build_macos.yml)
@@ -33,14 +36,28 @@ YUP brings a suite of powerful features, including:
 ## Supported Rendering Backends
 |                          | **Windows**        | **macOS**          | **Linux**          | **WASM**           | **Android**<sup>(1)</sup> | **iOS**<sup>(1)</sup> |
 |--------------------------|:------------------:|:------------------:|:------------------:|:------------------:|:-------------------------:|:---------------------:|
-| **OpenGL 4.2**           | :white_check_mark: |                    | :white_check_mark: |                    | :white_check_mark:        |                       |
-| **OpenGL ES2.0**         |                    |                    |                    | :white_check_mark: |                           |                       |
-| **Metal**                |                    | :white_check_mark: |                    |                    |                           | :white_check_mark:    |
+| **OpenGL 4.2**           | :white_check_mark: |                    | :white_check_mark: |                    |                           |                       |
+| **OpenGL ES2.0**         |                    |                    |                    | :white_check_mark: | :construction:            |                       |
+| **OpenGL ES3.0**         |                    |                    |                    |                    | :construction:            |                       |
+| **Metal**                |                    | :white_check_mark: |                    |                    |                           | :construction:        |
 | **Direct3D 11**          | :white_check_mark: |                    |                    |                    |                           |                       |
-| **Vulkan**<sup>(2)</sup> |                    |                    |                    |                    |                           |                       |
+| **Vulkan**               | :construction:     | :construction:     | :construction:     |                    | :construction:            |                       |
+| **WebGPU**               |                    |                    |                    |                    |                           |                       |
 
 1. Platforms not fully supported by the windowing system
-2. Renderer currently work in progress
+
+## Supported Audio Backends
+|                          | **Windows**        | **macOS**          | **Linux**          | **WASM**           | **Android**               | **iOS**               |
+|--------------------------|:------------------:|:------------------:|:------------------:|:------------------:|:-------------------------:|:---------------------:|
+| **CoreAudio**            |                    | :white_check_mark: |                    |                    |                           | :white_check_mark:    |
+| **ASIO**                 | :white_check_mark: |                    |                    |                    |                           |                       |
+| **DirectSound**          | :white_check_mark: |                    |                    |                    |                           |                       |
+| **WASAPI**               | :white_check_mark: |                    |                    |                    |                           |                       |
+| **ALSA**                 |                    |                    | :white_check_mark: |                    |                           |                       |
+| **JACK**                 |                    |                    | :white_check_mark: |                    |                           |                       |
+| **Oboe**                 |                    |                    |                    |                    | :white_check_mark:        |                       |
+| **OpenSL**               |                    |                    |                    |                    | :white_check_mark:        |                       |
+| **AudioWorklet**         |                    |                    |                    | :white_check_mark: |                           |                       |
 
 ## Development
 > [!IMPORTANT]

cmake/platforms/emscripten/mini-coi.js

@@ -0,0 +1,28 @@
+/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
+/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
+(({ document: d, navigator: { serviceWorker: s } }) => {
+    if (d) {
+      const { currentScript: c } = d;
+      s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
+        r.addEventListener('updatefound', () => location.reload());
+        if (r.active && !s.controller) location.reload();
+      });
+    }
+    else {
+      addEventListener('install', () => skipWaiting());
+      addEventListener('activate', e => e.waitUntil(clients.claim()));
+      addEventListener('fetch', e => {
+        const { request: r } = e;
+        if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
+        e.respondWith(fetch(r).then(r => {
+          const { body, status, statusText } = r;
+          if (!status || status > 399) return r;
+          const h = new Headers(r.headers);
+          h.set('Cross-Origin-Opener-Policy', 'same-origin');
+          h.set('Cross-Origin-Embedder-Policy', 'require-corp');
+          h.set('Cross-Origin-Resource-Policy', 'cross-origin');
+          return new Response(body, { status, statusText, headers: h });
+        }));
+      });
+    }
+  })(self);

cmake/platforms/emscripten/shell.html

@@ -2,9 +2,8 @@
 <html lang="en-us">
   <head>
     <meta charset="utf-8">
+    <script src="mini-coi.js"></script>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
-    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
     <title>YUP! On Emscripten</title>
     <style>
       *, *::before, *::after {

cmake/toolchains/ios.cmake

@@ -151,7 +151,7 @@
 #   command.
 #
 
-cmake_minimum_required(VERSION 3.8.0)
+cmake_minimum_required(VERSION 3.16.0)
 
 # CMake invokes the toolchain file twice during the first build, but only once during subsequent rebuilds.
 if(DEFINED ENV{_IOS_TOOLCHAIN_HAS_RUN})

cmake/yup.cmake

@@ -28,10 +28,10 @@ include (FetchContent)
 #==============================================================================
 
 macro (_yup_setup_platform)
-    if (IOS OR CMAKE_SYSTEM_NAME STREQUAL "iOS" OR CMAKE_TOOLCHAIN_FILE MATCHES ".*ios\.cmake$")
+    if (IOS OR CMAKE_SYSTEM_NAME MATCHES "iOS" OR CMAKE_TOOLCHAIN_FILE MATCHES ".*ios\.cmake$")
         set (yup_platform "ios")
 
-    elseif (ANDROID)
+    elseif (ANDROID OR YUP_TARGET_ANDROID)
         set (yup_platform "android")
 
     elseif (EMSCRIPTEN OR CMAKE_TOOLCHAIN_FILE MATCHES ".*Emscripten\.cmake$")
@@ -44,7 +44,7 @@ macro (_yup_setup_platform)
         set (yup_platform "linux")
 
     elseif (WIN32)
-        if (CMAKE_SYSTEM_NAME STREQUAL "WindowsStore")
+        if (CMAKE_SYSTEM_NAME MATCHES "WindowsStore")
             set (yup_platform "uwp")
         else()
             set (yup_platform "win32")
@@ -721,23 +721,37 @@ function (yup_standalone_app)
 
         list (APPEND additional_options
             -fexceptions
+            -pthread
             -sDISABLE_EXCEPTION_CATCHING=0)
 
         list (APPEND additional_link_options
             $<$<CONFIG:DEBUG>:-gsource-map>
             -fexceptions
+            -pthread
             -sWASM=1
+            -sWASM_WORKERS=1
+            -sAUDIO_WORKLET=1
+            -sSHARED_MEMORY=1
+            -sALLOW_MEMORY_GROWTH=0
             -sASSERTIONS=1
             -sDISABLE_EXCEPTION_CATCHING=0
             -sERROR_ON_UNDEFINED_SYMBOLS=1
             -sDEMANGLE_SUPPORT=1
             -sSTACK_OVERFLOW_CHECK=2
+            -sPTHREAD_POOL_SIZE=8
             -sFORCE_FILESYSTEM=1
-            -sALLOW_MEMORY_GROWTH=1
             -sNODERAWFS=0
+            -sFETCH=1
             -sDEFAULT_LIBRARY_FUNCS_TO_INCLUDE='$dynCall'
             --shell-file "${CMAKE_SOURCE_DIR}/cmake/platforms/${yup_platform}/shell.html")
 
+        set (target_copy_dest "$<TARGET_FILE_DIR:${target_name}>")
+        add_custom_command(
+            TARGET ${target_name} POST_BUILD
+            COMMAND ${CMAKE_COMMAND} -E copy
+                "${CMAKE_SOURCE_DIR}/cmake/platforms/${yup_platform}/mini-coi.js"
+                "${target_copy_dest}/mini-coi.js")
+
     endif()
 
     if (YUP_ARG_TARGET_IDE_GROUP)

docs/demos/web_render_4/index.html

@@ -0,0 +1 @@
+<!doctypehtml><html lang=en-us><head><meta charset=utf-8><script src=mini-coi.js></script><meta content="text/html; charset=utf-8"http-equiv=Content-Type><title>YUP! On Emscripten</title><style>*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{background-color:#272822;color:#f8f8f2;font-family:'Courier New',Courier,monospace;display:flex;flex-direction:column;align-items:center;padding:20px;margin:0}hr{width:100%;border:none;border-top:1px solid #75715e;margin:20px 0}.emscripten{padding-right:0;margin-left:auto;margin-right:auto;display:block}div.emscripten{text-align:center}canvas.emscripten{border:0 none;background-color:#000}.logo{display:inline-block;margin:0}.spinner{height:50px;width:50px;margin:0 auto;animation:rotation .8s linear infinite;border:6px solid transparent;border-top-color:#ae81ff;border-right-color:#66d9ef;border-bottom-color:#a6e22e;border-left-color:#f92672;border-radius:50%}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(360deg)}}#status{display:inline-block;vertical-align:top;margin-top:0;margin-bottom:0;font-weight:700;color:#787878}#progress{width:300px;height:20px}#controls{display:inline-block;float:right;vertical-align:top;margin-top:20px;margin-bottom:20px}</style></head><body><div class=logo>YUP! On Emscripten</div><hr><div class=spinner id=spinner></div><div class=emscripten id=status>Downloading...</div><div class=emscripten><progress hidden id=progress max=100 value=0></progress></div><hr><span id=controls><span><input type=checkbox id=resize>Resize canvas</span><span><input type=checkbox id=pointerLock checked>Lock/hide mouse pointer</span><span><input type=button onclick='Module.requestFullscreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)'value=Fullscreen></span></span><hr><div class=emscripten><canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas></div><script>var statusElement=document.getElementById("status"),progressElement=document.getElementById("progress"),spinnerElement=document.getElementById("spinner"),Module={preRun:[],postRun:[],print:function(e){arguments.length>1&&(e=Array.prototype.slice.call(arguments).join(" ")),console.log(e)},canvas:(()=>{var e=document.getElementById("canvas");return e.addEventListener("webglcontextlost",(e=>{alert("WebGL context lost. You will need to reload the page."),e.preventDefault()}),!1),e})(),setStatus:e=>{if(Module.setStatus.last||(Module.setStatus.last={time:Date.now(),text:""}),e!==Module.setStatus.last.text){var t=e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/),n=Date.now();t&&n-Module.setStatus.last.time<30||(Module.setStatus.last.time=n,Module.setStatus.last.text=e,t?(e=t[1],progressElement.value=100*parseInt(t[2]),progressElement.max=100*parseInt(t[4]),progressElement.hidden=!1,spinnerElement.hidden=!1):(progressElement.value=null,progressElement.max=null,progressElement.hidden=!0,e||(spinnerElement.style.display="none")),statusElement.innerHTML=e)}},totalDependencies:0,monitorRunDependencies:e=>{this.totalDependencies=Math.max(this.totalDependencies,e),Module.setStatus(e?"Preparing... ("+(this.totalDependencies-e)+"/"+this.totalDependencies+")":"All downloads complete.")}};Module.setStatus("Downloading..."),window.onerror=e=>{Module.setStatus("Exception thrown, see JavaScript console"),spinnerElement.style.display="none",Module.setStatus=e=>{e&&console.error("[post-exception status] "+e)}}</script><script src=example_graphics.js async></script></body></html>