Implement async using workers

SharedData.js

@@ -0,0 +1,95 @@
+/**
+ * @typedef {keyof typeof SchemaType} SchemaKey
+ * @typedef {(typeof SchemaType)[SchemaKey]} SchemaType
+ */
+export const SchemaType = {
+    u8: Uint8Array,
+    i32: Int32Array,
+    u32: Uint32Array,
+    f32: Float32Array,
+    f64: Float64Array,
+};
+
+/**
+ * @typedef {Record<string, { type: SchemaKey, count: number}} Schema
+ *//**
+ * @typedef {{schema: T, buffer: SharedArrayBuffer}} SharedBufferData
+ * @template {Schema} T
+ */
+
+/**
+ * Schema builder.
+ */
+export class DataSchema {
+    /** @param {Schema} schema  */
+    static byteSize(schema) {
+        return Object.values(schema).reduce((acc, el) => {
+            const bytes = SchemaType[el.type].BYTES_PER_ELEMENT;
+            const mod = acc % bytes;
+            if (mod !== 0) {
+                acc += bytes - mod;
+            }
+            acc += bytes * el.count;
+            return acc;
+        }, 0);
+    }
+
+    /**
+     * @returns {SharedBufferData} The data to be sahred across workers.
+     */
+    build() {
+        return {
+            schema: this.schema,
+            buffer: new SharedArrayBuffer(this.byteSize()),
+        };
+    }
+
+    /**
+     * Build a schema.
+     * @param {T} schema
+     * @template {Record<string, [SchemaKey, number] | SchemaKey>} T
+     * @returns {{[P in keyof T]: T[P] extends string ? {type: T[P], count: 1} : {type: T[P][0], count: T[P][1]}}
+     */
+    static buildSchema(schema) {
+        const result = {};
+        for (const key in schema) {
+            if (typeof schema[key] === "string") {
+                result[key] = { type: schema[key], count: 1 };
+            } else {
+                result[key] = { type: schema[key][0], count: schema[key][1] };
+            }
+        }
+        return result;
+    }
+    /**
+     * @param {T} schema
+     * @template {Parameters<typeof DataSchema.buildSchema>[0]} T
+     * @returns {SharedBufferData<ReturnType<typeof DataSchema.buildSchema<T>>}
+     */
+    static build(schema) {
+        const s = this.buildSchema(schema);
+        return { buffer: new SharedArrayBuffer(this.byteSize(s)), schema: s };
+    }
+
+    /**
+     * Build views around a schema.
+     * @param {{schema: T, buffer: SharedArrayBuffer}} data
+     * @template {Schema} T
+     * @returns {{[P in keyof T]: InstanceType<(typeof SchemaType)[T[P]["type"]]>}}
+     */
+    static view(data) {
+        let offset = 0;
+        const views = {};
+        for (const [name, el] of Object.entries(data.schema)) {
+            const constructor = SchemaType[el.type];
+            const bytes = constructor.BYTES_PER_ELEMENT;
+            const mod = offset % bytes;
+            if (mod !== 0) {
+                offset += bytes - mod;
+            }
+            views[name] = new constructor(data.buffer, offset, el.count);
+            offset += views[name].byteLength;
+        }
+        return views;
+    }
+}

enable-threads.js

@@ -0,0 +1,75 @@
+// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
+// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.
+
+/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
+// From here: https://github.com/gzuidhof/coi-serviceworker
+if(typeof window === 'undefined') {
+  self.addEventListener("install", () => self.skipWaiting());
+  self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+
+  async function handleFetch(request) {
+    if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
+      return;
+    }
+
+    if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
+      request = new Request(request.url, {
+        cache: request.cache,
+        credentials: "omit",
+        headers: request.headers,
+        integrity: request.integrity,
+        destination: request.destination,
+        keepalive: request.keepalive,
+        method: request.method,
+        mode: request.mode,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        signal: request.signal,
+      });
+    }
+
+    let r = await fetch(request).catch(e => console.error(e));
+
+    if(r.status === 0) {
+      return r;
+    }
+
+    const headers = new Headers(r.headers);
+    headers.set("Cross-Origin-Embedder-Policy", "credentialless"); // or: require-corp
+    headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+    return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
+  }
+
+  self.addEventListener("fetch", function(e) {
+    e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
+  });
+
+} else {
+  (async function() {
+    if(window.crossOriginIsolated !== false) return;
+
+    let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
+    if(registration) {
+      console.log("COOP/COEP Service Worker registered", registration.scope);
+
+      registration.addEventListener("updatefound", () => {
+        console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
+        window.location.reload();
+      });
+
+      // If the registration is active, but it's not controlling the page
+      if(registration.active && !navigator.serviceWorker.controller) {
+        console.log("Reloading page to make use of COOP/COEP Service Worker.");
+        window.location.reload();
+      }
+    }
+  })();
+}
+
+// Code to deregister:
+// let registrations = await navigator.serviceWorker.getRegistrations();
+// for(let registration of registrations) {
+//   await registration.unregister();
+// }

examples/shapes_colors_palette_async.c

@@ -0,0 +1,104 @@
+/*******************************************************************************************
+*
+*   raylib [shapes] example - Colors palette
+*
+*   Example originally created with raylib 1.0, last time updated with raylib 2.5
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2014-2024 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+#define MAX_COLORS_COUNT    21          // Number of colors available
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - colors palette");
+
+    Color colors[MAX_COLORS_COUNT] = {
+        DARKGRAY, MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, DARKBROWN,
+        GRAY, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK, YELLOW,
+        GREEN, SKYBLUE, PURPLE, BEIGE };
+
+    const char *colorNames[MAX_COLORS_COUNT] = {
+        "DARKGRAY", "MAROON", "ORANGE", "DARKGREEN", "DARKBLUE", "DARKPURPLE",
+        "DARKBROWN", "GRAY", "RED", "GOLD", "LIME", "BLUE", "VIOLET", "BROWN",
+        "LIGHTGRAY", "PINK", "YELLOW", "GREEN", "SKYBLUE", "PURPLE", "BEIGE" };
+
+    Rectangle colorsRecs[MAX_COLORS_COUNT] = { 0 };     // Rectangles array
+
+    // Fills colorsRecs data (for every rectangle)
+    for (int i = 0; i < MAX_COLORS_COUNT; i++)
+    {
+        colorsRecs[i].x = 20.0f + 100.0f *(i%7) + 10.0f *(i%7);
+        colorsRecs[i].y = 80.0f + 100.0f *(i/7) + 10.0f *(i/7);
+        colorsRecs[i].width = 100.0f;
+        colorsRecs[i].height = 100.0f;
+    }
+
+    int colorState[MAX_COLORS_COUNT] = { 0 };           // Color state: 0-DEFAULT, 1-MOUSE_HOVER
+
+    Vector2 mousePoint = { 0.0f, 0.0f };
+
+    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        // Update
+        //----------------------------------------------------------------------------------
+        mousePoint = GetMousePosition();
+
+        for (int i = 0; i < MAX_COLORS_COUNT; i++)
+        {
+            if (CheckCollisionPointRec(mousePoint, colorsRecs[i])) colorState[i] = 1;
+            else colorState[i] = 0;
+        }
+        //----------------------------------------------------------------------------------
+
+        // Draw
+        //----------------------------------------------------------------------------------
+        BeginDrawing();
+
+            ClearBackground(RAYWHITE);
+
+            DrawText("raylib colors palette", 28, 42, 20, BLACK);
+            DrawText("press SPACE to see all colors", GetScreenWidth() - 180, GetScreenHeight() - 40, 10, GRAY);
+
+            for (int i = 0; i < MAX_COLORS_COUNT; i++)    // Draw all rectangles
+            {
+                DrawRectangleRec(colorsRecs[i], Fade(colors[i], colorState[i]? 0.6f : 1.0f));
+
+                if (IsKeyDown(KEY_SPACE) || colorState[i])
+                {
+                    DrawRectangle((int)colorsRecs[i].x, (int)(colorsRecs[i].y + colorsRecs[i].height - 26), (int)colorsRecs[i].width, 20, BLACK);
+                    DrawRectangleLinesEx(colorsRecs[i], 6, Fade(BLACK, 0.3f));
+                    DrawText(colorNames[i], (int)(colorsRecs[i].x + colorsRecs[i].width - MeasureText(colorNames[i], 10) - 12),
+                        (int)(colorsRecs[i].y + colorsRecs[i].height - 20), 10, colors[i]);
+                }
+            }
+
+        EndDrawing();
+        //----------------------------------------------------------------------------------
+    }
+
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    CloseWindow();                // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+
+    return 0;
+}

index.html

@@ -39,7 +39,8 @@
             max-width: 8rem;
         }
 
-        .not-hosted-msg {
+        .not-hosted-msg,
+        .no-coi-msg {
             text-align: center;
             position: absolute;
 
@@ -57,19 +58,21 @@
             src: url(fonts/acme_7_wide_xtnd.woff);
         }
     </style>
-    <script src="raylib.js"></script>
+    <!-- Hack for GitHub Pages found on https://github.com/orgs/community/discussions/13309#discussioncomment-3844940 -->
+    <script src="enable-threads.js"></script>
 </head>
 <body>
     <label for="raylib-example-select">Choose an Example:</label>
-        <select id="raylib-example-select" onchange="startRaylib(this.value)">
+        <select id="raylib-example-select">
         <!-- This is populated by js -->
         </select>
     <canvas id="game"></canvas>
-    <script>
+    <script type="module">
+        import RaylibJs from "./raylib-wrapper.js";
         const wasmPaths = {
             "tsoding": ["tsoding_ball", "tsoding_snake",],
             "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
-            "shapes": ["shapes_colors_palette"],
+            "shapes": ["shapes_colors_palette", "shapes_colors_palette_async"],
             "text": ["text_writing_anim"],
             "textures": ["textures_logo_raylib"],
         }
@@ -84,9 +87,11 @@
             }
             raylibExampleSelect.innerHTML += "</optgroup>"
         }
+        raylibExampleSelect.onchange = (ev) => startRaylib(ev.currentTarget.value);
 
         const { protocol } = window.location;
         const isHosted = protocol !== "file:";
+        const isCOI = crossOriginIsolated ?? false;
         let raylibJs = undefined;
 
         function startRaylib(selectedWasm){
@@ -96,6 +101,21 @@
             raylibExampleSelect.value = selectedWasm;
 
             if (isHosted) {
+                if (!isCOI) {
+                  window.addEventListener("load", () => {
+                      document.body.innerHTML = `
+                          <div class="no-coi-msg">
+                              <div class="important">
+                              <p>Unfortunately, due to security restrictions, <code>SharedArrayBuffer</code> cannot be used.</p>
+                              <p>Please navigate to this location using a web server that has the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements">required headers set</a>.</p>
+                                  <p>If you have Python 3 on your system you can just do:</p>
+                              </div>
+                              <code>$ python3 ./server.py 6969</code>
+                          </div>
+                          `;
+                  });
+                  return;
+                }
                 if (raylibJs !== undefined) {
                     raylibJs.stop();
                 }
@@ -113,7 +133,7 @@
                                 <p>Please navigate to this location using a web server.</p>
                                 <p>If you have Python 3 on your system you can just do:</p>
                             </div>
-                            <code>$ python3 -m http.server 6969</code>
+                            <code>$ python3 ./server.py 6969</code>
                         </div>
                         `;
                 });

nob.c

@@ -28,6 +28,11 @@ Example examples[] = {
         .bin_path   = "./build/shapes_colors_palette",
         .wasm_path  = "./wasm/shapes_colors_palette.wasm",
     },
+    {
+        .src_path   = "./examples/shapes_colors_palette_async.c",
+        .bin_path   = "./build/shapes_colors_palette_async",
+        .wasm_path  = "./wasm/shapes_colors_palette_async.wasm",
+    },
     {
         .src_path   = "./examples/tsoding_ball.c",
         .bin_path = "./build/tsoding_ball",