Added initial web page

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,59 @@
+name: Build and Deploy web
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: macos-14
+    name: MacOS -> Emscripten, Release
+
+    steps:
+    - name: Clone DiligentGraphics.github.io repository
+      uses: actions/checkout@v3
+      with:
+        submodules: recursive
+
+    - run: |
+        mkdir DiligentEngine
+        cd ./DiligentEngine
+
+    - name: Clone DiligentEngine repository
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+        submodules: recursive
+        repository: DiligentGraphics/DiligentEngine
+
+    - name: Set up build environment
+      if:  success()
+      uses: DiligentGraphics/github-action/setup-build-env@v1
+      with:
+        platform: Emscripten
+
+    - name: Configure CMake
+      if:   success()
+      uses: DiligentGraphics/github-action/configure-cmake@v1
+      with:
+        build-type: Release
+        cmake-args: -DDILIGENT_NO_WEBGPU=ON
+
+    - name: Build
+      if: success()
+      uses: DiligentGraphics/github-action/build@v1
+      with:
+        build-args: --target=Tutorial01_HelloTriangle
+
+    - run: cd ..
+
+    - name: Combine artifacts
+      if: success()
+      run: |
+        python ./combine_artifacts.py
+
+    - name: Upload artifacts
+      if: success()
+      uses: actions/upload-artifact@v3
+      with:
+        path: |
+          ${{github.workspace}}/BuildArtefacts
+        retention-days: 90

.gitignore

@@ -0,0 +1,3 @@
+CMakeFiles
+*.cmake
+https_server.py

combine_artifacts.py

@@ -0,0 +1,37 @@
+import os
+import shutil
+
+
+SOURCE_IMAGES = 'images'
+SOURCE_TEMPLATE = 'template'
+SOURCE_BUILD = 'DiligentEngine/build/Emscripten/DiligentSamples'
+DESTINATION_DIR = 'BuildArtefacts'
+BUILD_TARGETS = [
+    "Tutorial01_HelloTriangle"
+]
+
+if __name__ == '__main__':
+    if not os.path.exists(DESTINATION_DIR):
+        os.makedirs(DESTINATION_DIR)
+
+    shutil.copytree(SOURCE_IMAGES, os.path.join(DESTINATION_DIR, 'images'), dirs_exist_ok=True)
+    for item in os.listdir(SOURCE_TEMPLATE):
+        source_item = os.path.join(SOURCE_TEMPLATE, item)
+        destination_item = os.path.join(SOURCE_TEMPLATE, item)
+
+        if os.path.isdir(source_item):
+            shutil.copytree(source_item, destination_item, dirs_exist_ok=True)
+        else:
+            shutil.copy2(source_item, destination_item)
+
+    for folder in BUILD_TARGETS:
+        source_folder_path_tutorials = os.path.join(SOURCE_BUILD, "Tutorials", folder)
+        source_folder_path_samples = os.path.join(SOURCE_BUILD, "Samples", folder)
+        destination_folder_path = os.path.join(DESTINATION_DIR, "wasm-modules", folder)
+
+        if os.path.exists(source_folder_path_tutorials):
+            shutil.copytree(source_folder_path_tutorials, destination_folder_path, dirs_exist_ok=True)
+        elif os.path.exists(source_folder_path_samples):
+            shutil.copytree(source_folder_path_samples, destination_folder_path, dirs_exist_ok=True)
+        else:
+            print(f"Folder '{folder}' not found.")

template/enable-threads.js

@@ -0,0 +1,76 @@
+// 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();
+  // }
+

template/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Diligent Graphics">
+    <title>Diligent Graphics</title>
+    <link rel="icon" href="images/header/diligentgraphics-icon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<header>
+    <a href="https://diligentgraphics.com/" target="_blank">
+        <img src="images/header/diligentgraphics-logo.png" alt="Diligent Graphics" class="logo">
+    </a>
+    <a href="https://github.com/DiligentGraphics/DiligentEngine" class="github-link" target="_blank">
+        <img src="images/header/github-mark-white.png" alt="GitHub">
+    </a>
+</header>
+
+<div class="container">
+    <nav>
+        <h2>Categories</h2>
+        <ul>
+            <li><a href="#tutorials">Tutorials</a></li>
+            <li><a href="#samples">Samples</a></li>
+            <li><a href="#known-issues">Known issues</a></li>
+        </ul>
+    </nav>
+
+    <div class="content">
+        <div class="search-bar">
+            <input type="text" placeholder="Search Example">
+            <span class="search-icon"></span>
+        </div>
+
+        <section id="tutorials">
+            <h2>Tutorials</h2>
+            <div class="grid" id="tutorialGrid">
+            </div>
+        </section>
+
+        <section id="samples">
+            <h2>Samples</h2>
+            <div class="grid" id="samplesGrid">
+            </div>
+        </section>
+        <section id="known-issues">
+            <h2>Known issues</h2>
+            <ul>
+                <li>14 - Compute Shader tutorial doesn't work on WebGL.</li>
+                <li>18 - Queries tutorial doesn't work on WebGPU.</li>
+                <li>19 - Render Passes tutorial doesn't work on WebGL.</li>
+                <li>Atmosphere sample doesn't work on WebGL.</li>
+                <li>Shadows sample has artifacts on WebGL.</li>
+            </ul>
+        </section>
+    </div>
+</div>
+
+<script src="enable-threads.js"></script>
+<script src="script.js"></script>
+
+</body>
+</html>