Added initial web page

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

@@ -0,0 +1,52 @@
+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
+
+ - name: Clone DiligentEngine repository
+ uses: actions/checkout@v3
+ with:
+ 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
+
+ - 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,28 @@
+import os
+import shutil
+
+
+SOURCE_IMAGES = 'images'
+SOURCE_TEMPLATE = 'template'
+DESTINATION_DIR = 'BuildArtefacts'
+BUILD_TARGETS = [
+ "Tutorials/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)
+ print(f"Copied '{SOURCE_IMAGES}' to '{DESTINATION_DIR}'.")
+
+ 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)
+
+ print(f"Extracted contents of '{SOURCE_TEMPLATE}' to '{DESTINATION_DIR}'.")

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>