Added initial web page

DiligentGraphics · Aug 23, 2024 · cfc649a · cfc649a
1 parent 4326232
commit cfc649a
Show file tree

Hide file tree

Showing 131 changed files with 36,281 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+CMakeFiles
+*.cmake
+*.py
diff --git a/enable-threads.js b/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();
+  // }
+
diff --git a/images/header/diligentgraphics-icon.ico b/images/header/diligentgraphics-icon.ico
diff --git a/images/header/diligentgraphics-logo.png b/images/header/diligentgraphics-logo.png
diff --git a/images/header/github-mark-white.png b/images/header/github-mark-white.png
diff --git a/images/samples/Atmosphere.gif b/images/samples/Atmosphere.gif
diff --git a/images/samples/GLTFViewer.jpg b/images/samples/GLTFViewer.jpg
diff --git a/images/samples/ImguiDemo.png b/images/samples/ImguiDemo.png
diff --git a/images/samples/Shadows.jpg b/images/samples/Shadows.jpg
diff --git a/images/tutorials/Tutorial01_HelloTriangle.png b/images/tutorials/Tutorial01_HelloTriangle.png
diff --git a/images/tutorials/Tutorial02_Cube.gif b/images/tutorials/Tutorial02_Cube.gif
diff --git a/images/tutorials/Tutorial03_Texturing.gif b/images/tutorials/Tutorial03_Texturing.gif
diff --git a/images/tutorials/Tutorial04_Instancing.gif b/images/tutorials/Tutorial04_Instancing.gif
diff --git a/images/tutorials/Tutorial05_TextureArray.gif b/images/tutorials/Tutorial05_TextureArray.gif
diff --git a/images/tutorials/Tutorial06_Multithreading.gif b/images/tutorials/Tutorial06_Multithreading.gif
diff --git a/images/tutorials/Tutorial09_Quads.gif b/images/tutorials/Tutorial09_Quads.gif
diff --git a/images/tutorials/Tutorial10_DataStreaming.gif b/images/tutorials/Tutorial10_DataStreaming.gif
diff --git a/images/tutorials/Tutorial11_ResourceUpdates.gif b/images/tutorials/Tutorial11_ResourceUpdates.gif
diff --git a/images/tutorials/Tutorial12_RenderTarget.gif b/images/tutorials/Tutorial12_RenderTarget.gif
diff --git a/images/tutorials/Tutorial13_ShadowMap.gif b/images/tutorials/Tutorial13_ShadowMap.gif
diff --git a/images/tutorials/Tutorial14_ComputeShader.gif b/images/tutorials/Tutorial14_ComputeShader.gif
diff --git a/images/tutorials/Tutorial16_BindlessResources.gif b/images/tutorials/Tutorial16_BindlessResources.gif
diff --git a/images/tutorials/Tutorial17_MSAA.gif b/images/tutorials/Tutorial17_MSAA.gif
diff --git a/images/tutorials/Tutorial18_Queries.gif b/images/tutorials/Tutorial18_Queries.gif
diff --git a/images/tutorials/Tutorial19_RenderPasses.gif b/images/tutorials/Tutorial19_RenderPasses.gif
diff --git a/images/tutorials/Tutorial25_StatePackager.jpg b/images/tutorials/Tutorial25_StatePackager.jpg
diff --git a/images/tutorials/Tutorial26_StateCache.jpg b/images/tutorials/Tutorial26_StateCache.jpg
diff --git a/images/tutorials/Tutorial27_PostProcessing.jpg b/images/tutorials/Tutorial27_PostProcessing.jpg
diff --git a/index.html b/index.html
@@ -3,25 +3,54 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Under Development</title>
-    <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-            background-color: #f0f0f0;
-        }
-        .message {
-            text-align: center;
-            font-size: 24px;
-            color: #333;
-        }
-    </style>
+    <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>
-    <div class="message">Under Development</div>
+
+<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>
+        </ul>
+    </nav>
+
+    <div class="content">
+        <div class="search-bar">
+            <input type="text" placeholder="Search Examples">
+        </div>
+
+        <section id="tutorials">
+            <h2>Tutorials</h2>
+            <div class="grid" id="tutorialGrid">
+                <!-- Cards will be generated here by JavaScript -->
+            </div>
+        </section>
+
+        <section id="samples">
+            <h2>Samples</h2>
+            <div class="grid" id="samplesGrid">
+                <!-- Cards will be generated here by JavaScript -->
+            </div>
+        </section>
+    </div>
+</div>
+
+<script src="enable-threads.js"></script>
+<script src="script.js"></script>
+
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,206 @@
+const tutorials = [
+    {
+        id: "Tutorial01_HelloTriangle",
+        title: "01 - Hello Triangle",
+        description: "This tutorial demonstrates the basics of Diligent Engine API. It shows how to create shaders, pipeline state object and how to render a simple triangle.",
+        image: "images/tutorials/Tutorial01_HelloTriangle.png",
+        tutorialLink: "wasm-modules/Tutorial01_HelloTriangle/Tutorial01_HelloTriangle.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial01_HelloTriangle"
+    },
+    {
+        id: "Tutorial02_Cube",
+        title: "02 - Cube",
+        description: "This tutorial demonstrates how to render an actual 3D object, a cube. It shows how to load shaders from files, create and use vertex, index and uniform buffers.",
+        image: "images/tutorials/Tutorial02_Cube.gif",
+        tutorialLink: "wasm-modules/Tutorial02_Cube/Tutorial02_Cube.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial02_Cube"
+    },
+    {
+        id: "Tutorial03_Texturing",
+        title: "03 - Texturing",
+        description: "This tutorial demonstrates how to apply a texture to a 3D object. It shows how to load a texture from file, create shader resource binding object and how to sample a texture in the shader.",
+        image: "images/tutorials/Tutorial03_Texturing.gif",
+        tutorialLink: "wasm-modules/Tutorial03_Texturing/Tutorial03_Texturing.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial03_Texturing"
+    },
+    {
+        id: "Tutorial04_Instancing",
+        title: "04 - Instancing",
+        description: "This tutorial demonstrates how to use instancing to render multiple copies of one object using unique transformation matrix for every copy.",
+        image: "images/tutorials/Tutorial04_Instancing.gif",
+        tutorialLink: "wasm-modules/Tutorial04_Instancing/Tutorial04_Instancing.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial04_Instancing"
+    },
+    {
+        id: "Tutorial05_TextureArray",
+        title: "05 - Texture Array",
+        description: "This tutorial demonstrates how to combine instancing with texture arrays to use unique texture for every instance.",
+        image: "images/tutorials/Tutorial05_TextureArray.gif",
+        tutorialLink: "wasm-modules/Tutorial05_TextureArray/Tutorial05_TextureArray.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial05_TextureArray"
+    },
+    {
+        id: "Tutorial06_Multithreading",
+        title: "06 - Multithreading",
+        description: "This tutorial shows how to generate command lists in parallel from multiple threads.",
+        image: "images/tutorials/Tutorial06_Multithreading.gif",
+        tutorialLink: "wasm-modules/Tutorial06_Multithreading/Tutorial06_Multithreading.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial06_Multithreading"
+    },
+    {
+        id: "Tutorial09_Quads",
+        title: "09 - Quads",
+        description: "This tutorial shows how to render multiple 2D quads, frequently switching textures and blend modes.",
+        image: "images/tutorials/Tutorial09_Quads.gif",
+        tutorialLink: "wasm-modules/Tutorial09_Quads/Tutorial09_Quads.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial09_Quads"
+    },
+    {
+        id: "Tutorial10_DataStreaming",
+        title: "10 - DataStreaming",
+        description: "This tutorial shows dynamic buffer mapping strategy using MAP_FLAG_DISCARD and MAP_FLAG_DO_NOT_SYNCHRONIZE flags to efficiently stream varying amounts of data to GPU.",
+        image: "images/tutorials/Tutorial10_DataStreaming.gif",
+        tutorialLink: "wasm-modules/Tutorial10_DataStreaming/Tutorial10_DataStreaming.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial10_DataStreaming"
+    },
+    {
+        id: "Tutorial11_ResourceUpdates",
+        title: "11 - ResourceUpdates",
+        description: "This tutorial demonstrates different ways to update buffers and textures in Diligent Engine and explains important internal details and performance implications related to each method.",
+        image: "images/tutorials/Tutorial11_ResourceUpdates.gif",
+        tutorialLink: "wasm-modules/Tutorial11_ResourceUpdates/Tutorial11_ResourceUpdates.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial11_ResourceUpdates"
+    },
+    {
+        id: "Tutorial12_RenderTarget",
+        title: "12 - RenderTarget",
+        description: "This tutorial demonstrates how to render a 3d cube into an offscreen render target and do a simple post-processing effect.",
+        image: "images/tutorials/Tutorial12_RenderTarget.gif",
+        tutorialLink: "wasm-modules/Tutorial12_RenderTarget/Tutorial12_RenderTarget.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial12_RenderTarget"
+    },
+    {
+        id: "Tutorial13_ShadowMap",
+        title: "13 - ShadowMap",
+        description: "This tutorial demonstrates how to render basic shadows using a shadow map.",
+        image: "images/tutorials/Tutorial13_ShadowMap.gif",
+        tutorialLink: "wasm-modules/Tutorial13_ShadowMap/Tutorial13_ShadowMap.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial13_ShadowMap"
+    },
+    {
+        id: "Tutorial14_ComputeShader",
+        title: "14 - ComputeShader",
+        description: "This tutorial shows how to implement a simple particle simulation system using compute shaders.",
+        image: "images/tutorials/Tutorial14_ComputeShader.gif",
+        tutorialLink: "wasm-modules/Tutorial14_ComputeShader/Tutorial14_ComputeShader.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial14_ComputeShader"
+    },
+    {
+        id: "Tutorial16_BindlessResources",
+        title: "16 - BindlessResources",
+        description: "This tutorial shows how to implement bindless resources, a technique that leverages dynamic shader resource indexing feature enabled by the next-gen APIs to significantly improve rendering performance.",
+        image: "images/tutorials/Tutorial16_BindlessResources.gif",
+        tutorialLink: "wasm-modules/Tutorial16_BindlessResources/Tutorial16_BindlessResources.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial16_BindlessResources"
+    },
+    {
+        id: "Tutorial17_MSAA",
+        title: "17 - MSAA",
+        description: "This tutorial demonstrates how to use multisample anti-aliasing (MSAA) to make geometrical edges look smoother and more temporarily stable.",
+        image: "images/tutorials/Tutorial17_MSAA.gif",
+        tutorialLink: "wasm-modules/Tutorial17_MSAA/Tutorial17_MSAA.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial17_MSAA"
+    },
+    {
+        id: "Tutorial18_Queries",
+        title: "18 - Queries",
+        description: "This tutorial demonstrates how to use queries to retrieve various information about the GPU operation, such as the number of primitives rendered, command processing duration, etc.",
+        image: "images/tutorials/Tutorial18_Queries.gif",
+        tutorialLink: "wasm-modules/Tutorial18_Queries/Tutorial18_Queries.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial18_Queries"
+    },
+    {
+        id: "Tutorial19_RenderPasses",
+        title: "19 - RenderPasses",
+        description: "This tutorial demonstrates how to use the render passes API to implement simple deferred shading.",
+        image: "images/tutorials/Tutorial19_RenderPasses.gif",
+        tutorialLink: "wasm-modules/Tutorial19_RenderPasses/Tutorial19_RenderPasses.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial19_RenderPasses"
+    },
+    {
+        id: "Tutorial27_PostProcessing",
+        title: "27 - Post Processing",
+        description: "This tutorial demonstrates how to use post-processing effects from the DiligentFX module.",
+        image: "images/tutorials/Tutorial27_PostProcessing.jpg",
+        tutorialLink: "wasm-modules/Tutorial27_PostProcessing/Tutorial27_PostProcessing.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial27_PostProcessing"
+    }
+];
+
+const samples = [
+    {
+        id: "Sample_Atmosphere",
+        title: "Atmosphere",
+        description: "This sample demonstrates how to integrate Epipolar Light Scattering post-processing effect into an application to render physically-based atmosphere.",
+        image: "images/samples/Atmosphere.gif",
+        tutorialLink: "wasm-modules/Atmosphere/Atmosphere.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Samples/Atmosphere"
+    },
+    {
+        id: "Sample_GLTFViewer",
+        title: "GLTF Viewer",
+        description: "This sample demonstrates how to use the Asset Loader and PBR Renderer to load and render GLTF models.",
+        image: "images/samples/GLTFViewer.jpg",
+        tutorialLink: "wasm-modules/GLTFViewer/GLTFViewer.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Samples/GLTFViewer"
+    },
+    {
+        id: "Sample_ImguiDemo",
+        title: "Dear ImGui Demo",
+        description: "This sample demonstrates the integration of the engine with dear imgui UI library.",
+        image: "images/samples/ImguiDemo.png",
+        tutorialLink: "wasm-modules/ImguiDemo/ImguiDemo.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Samples/ImguiDemo"
+    },
+    {
+        id: "Sample_Shadows",
+        title: "Shadows",
+        description: "This sample demonstrates how to use the Shadowing component to render high-quality shadows.",
+        image: "images/samples/Shadows.jpg",
+        tutorialLink: "wasm-modules/Shadows/Shadows.html",
+        githubLink: "https://github.com/DiligentGraphics/DiligentSamples/tree/master/Samples/Shadows"
+    }
+];
+
+function createCard(item) {
+    return `
+        <div class="card" id="${item.id}">
+            <img src="${item.image}" alt="${item.title}" loading="lazy">
+            <h3>${item.title}</h3>
+            <p>${item.description}</p>
+            <div class="buttons-container">
+                <a href="${item.tutorialLink}" class="view-link">Run sample</a>
+                <a href="${item.githubLink}" class="github-button" target="_blank">View on GitHub</a>
+            </div>
+        </div>
+    `;
+}
+
+const tutorialGrid = document.getElementById('tutorialGrid');
+const samplesGrid = document.getElementById('samplesGrid');
+
+tutorials.forEach(tutorial => {
+    tutorialGrid.innerHTML += createCard(tutorial);
+});
+
+samples.forEach(sample => {
+    samplesGrid.innerHTML += createCard(sample);
+});
+
+document.querySelector('.search-bar input').addEventListener('input', function(e) {
+    const query = e.target.value.toLowerCase();
+    document.querySelectorAll('.card').forEach(function(card) {
+        const title = card.querySelector('h3').innerText.toLowerCase();
+        card.style.display = title.includes(query) ? '' : 'none';
+    });
+});