feat: add click-to-load engine examples

docs/user-manual/engine/index.md

@@ -3,7 +3,9 @@ title: PlayCanvas Engine
 description: Open source JavaScript/TypeScript 3D engine published on npm with full TypeScript declarations and comprehensive examples.
 ---
 
-The PlayCanvas Engine is the run-time framework that powers your PlayCanvas applications. It is written in JavaScript and is open sourced under an MIT license on [GitHub](https://github.com/playcanvas/engine). It is published on the [NPM registry](https://www.npmjs.com/package/playcanvas) and ships with full TypeScript declarations. It also comes with a comprehensive set of [code examples](https://playcanvas.github.io/).
+The PlayCanvas Engine is the run-time framework that powers your PlayCanvas applications. It is written in JavaScript and is open sourced under an MIT license on [GitHub](https://github.com/playcanvas/engine). It is published on the [NPM registry](https://www.npmjs.com/package/playcanvas) and ships with full TypeScript declarations. It also comes with a comprehensive set of code examples.
+
+<EngineExample title="PlayCanvas Engine Examples Browser" />
 
 As a developer, you have complete freedom as to how you use the Engine. The two options are:
 

docs/user-manual/gaussian-splatting/building/custom-shaders.md

@@ -17,7 +17,9 @@ For **unified rendering**, see [Work Buffer Rendering](/user-manual/gaussian-spl
 
 Override the `gsplatModifyVS` shader chunk to customize splat position, size, and color. This allows you to override only the relevant parts of the shader while leaving the core shader functionality intact.
 
-**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/multi-splat)** - See shader chunk customization in action with animated splats.
+**View Live Example** - See shader chunk customization in action with animated splats.
+
+<EngineExample id="gaussian-splatting/multi-splat" title="View Live Example" />
 
 ## API Reference
 
@@ -294,4 +296,4 @@ Here are some examples demonstrating custom shader techniques:
 
 ### Animation Effects
 
-[**Simple Sinusoidal Animation**](https://playcanvas.github.io/#/gaussian-splatting/multi-splat) - Applies a simple shader to animate Gaussian color and position using a sine wave. This example demonstrates how to create dynamic, procedural motion effects by modifying splat properties in real-time.
+**Simple Sinusoidal Animation** - Applies a simple shader to animate Gaussian color and position using a sine wave. This example demonstrates how to create dynamic, procedural motion effects by modifying splat properties in real-time.

docs/user-manual/gaussian-splatting/building/fisheye.md

@@ -7,7 +7,9 @@ PlayCanvas supports a fisheye (barrel distortion) projection for Gaussian splats
 
 ![Gaussian splat scene rendered with a strong fisheye projection](/img/user-manual/gaussian-splatting/fisheye-ultra-wide.png)
 
-**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming)** - Open the Settings panel and drag the `fisheye` slider from `0` to `1`. Try combining it with higher `cameraFov` values and different HDRI environments to reproduce the skydome and tiny-planet looks.
+**View Live Example** - Open the Settings panel and drag the `fisheye` slider from `0` to `1`. Try combining it with higher `cameraFov` values and different HDRI environments to reproduce the skydome and tiny-planet looks.
+
+<EngineExample id="gaussian-splatting/lod-streaming" title="View Live Example" />
 
 ## What Is It?
 

docs/user-manual/gaussian-splatting/building/picking.md

@@ -5,7 +5,9 @@ description: "Use the PlayCanvas Picker with splats in unified and non-unified m
 
 The PlayCanvas Engine provides a [Picker API](https://api.playcanvas.com/engine/classes/Picker.html) which can query the object rendered at a specified pixel. The picker works with splats in the same way that it does for meshes.
 
-**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/picking)** - See splat picking in action with interactive selection and world position detection.
+**View Live Example** - See splat picking in action with interactive selection and world position detection.
+
+<EngineExample id="gaussian-splatting/picking" title="View Live Example" />
 
 ## Unified vs Non-Unified Mode
 

docs/user-manual/gaussian-splatting/building/shadows.md

@@ -5,7 +5,9 @@ description: "Enable shadow casting from Gaussian splats onto meshes: API proper
 
 Gaussian Splats can cast shadows onto meshes and other surfaces in your scene.
 
-**[View Live Example](https://playcanvas.github.io/#/gaussian-splatting/simple)** - See splat shadows in action.
+**View Live Example** - See splat shadows in action.
+
+<EngineExample id="gaussian-splatting/simple" title="View Live Example" />
 
 ![Splat Shadows](/img/user-manual/gaussian-splatting/splat-shadows.png)
 

docs/user-manual/gaussian-splatting/building/unified-rendering/index.md

@@ -33,15 +33,15 @@ flowchart LR
         Loaded[Loaded Splats<br/>ply/sog/LOD]
         Container[GSplatContainer<br/>procedural]
     end
-    
+
     Copy([Copy])
-    
+
     WorkBuffer[Work Buffer<br/>per camera/layer]
-    
+
     Sort([Sort])
-    
+
     Render([Render])
-    
+
     Loaded --> Copy
     Container --> Copy
     Copy --> WorkBuffer
@@ -74,7 +74,9 @@ When a camera renders a layer containing unified GSplat components, it draws the
 
 ## Live Example
 
-Check out the [Global Sorting example](https://playcanvas.github.io/#/gaussian-splatting/global-sorting) which demonstrates the difference between unified and non-unified rendering. The example allows you to toggle unified mode on and off to observe how it eliminates artifacts when rendering multiple overlapping splat components.
+Check out the Global Sorting example which demonstrates the difference between unified and non-unified rendering. The example allows you to toggle unified mode on and off to observe how it eliminates artifacts when rendering multiple overlapping splat components.
+
+<EngineExample id="gaussian-splatting/global-sorting" title="Global Sorting example" />
 
 ## Benefits
 
@@ -97,4 +99,4 @@ The following features are available when using unified mode:
 - [GSplatComponent API](https://api.playcanvas.com/engine/classes/GSplatComponent.html)
 - [Draw Order and Sorting](/user-manual/gaussian-splatting/building/draw-order)
 - [Splat Rendering Architecture](/user-manual/gaussian-splatting/building/rendering-architecture)
-- [Global Sorting Example](https://playcanvas.github.io/#/gaussian-splatting/global-sorting)
+- Global Sorting Example

docs/user-manual/gaussian-splatting/building/unified-rendering/lod-streaming.md

@@ -38,8 +38,13 @@ You must create the different LOD levels yourself (LOD 0 = highest detail, highe
 
 Explore these live examples to see LOD streaming in action:
 
-- [LOD Streaming (Basic)](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming) - Demonstrates basic LOD streaming with different detail levels
-- [LOD Streaming with Spherical Harmonics](https://playcanvas.github.io/#/gaussian-splatting/lod-streaming-sh) - Shows LOD streaming with spherical harmonic data
+- LOD Streaming (Basic) - Demonstrates basic LOD streaming with different detail levels
+
+<EngineExample id="gaussian-splatting/lod-streaming" title="LOD Streaming (Basic)" />
+
+- LOD Streaming with Spherical Harmonics - Shows LOD streaming with spherical harmonic data
+
+<EngineExample id="gaussian-splatting/lod-streaming-sh" title="LOD Streaming with Spherical Harmonics" />
 
 ## Enabling LOD Streaming
 

docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/image.md

@@ -90,7 +90,9 @@ The number of splats equals the number of non-transparent pixels in the image. F
 
 ## Live Example
 
-See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates using `GsplatImage` to display textures as ground and wall decorations.
+See the Procedural Shapes example which demonstrates using `GsplatImage` to display textures as ground and wall decorations.
+
+<EngineExample id="gaussian-splatting/procedural-shapes" title="Procedural Shapes example" />
 
 ## Script Location
 

docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/index.md

@@ -270,7 +270,9 @@ These scripts handle the container creation and data population for you.
 
 ## Live Example
 
-See the [Procedural Instanced example](https://playcanvas.github.io/#/gaussian-splatting/procedural-instanced) which demonstrates creating a custom `GSplatContainer` with a custom format and per-instance shader uniforms.
+See the Procedural Instanced example which demonstrates creating a custom `GSplatContainer` with a custom format and per-instance shader uniforms.
+
+<EngineExample id="gaussian-splatting/procedural-instanced" title="Procedural Instanced example" />
 
 ## See Also
 

docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/lines.md

@@ -147,7 +147,9 @@ Lines are rendered as a series of splats placed along the line path:
 
 ## Live Example
 
-See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates CAD-style dimension annotations on a Gaussian splat scene.
+See the Procedural Shapes example which demonstrates CAD-style dimension annotations on a Gaussian splat scene.
+
+<EngineExample id="gaussian-splatting/procedural-shapes" title="Procedural Shapes example" />
 
 ## Script Location
 

docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/mesh.md

@@ -120,7 +120,9 @@ anotherEntity.addComponent('gsplat', {
 
 ## Live Example
 
-See the [Procedural Mesh example](https://playcanvas.github.io/#/gaussian-splatting/procedural-mesh) which demonstrates converting a terrain scene with animated clouds to splat representation.
+See the Procedural Mesh example which demonstrates converting a terrain scene with animated clouds to splat representation.
+
+<EngineExample id="gaussian-splatting/procedural-mesh" title="Procedural Mesh example" />
 
 ## Script Location
 

docs/user-manual/gaussian-splatting/building/unified-rendering/procedural-splats/text.md

@@ -119,7 +119,9 @@ For labels with many characters or large font sizes, the splat count can be sign
 
 ## Live Example
 
-See the [Procedural Shapes example](https://playcanvas.github.io/#/gaussian-splatting/procedural-shapes) which demonstrates using `GsplatText` for dimension labels in a CAD-style visualization.
+See the Procedural Shapes example which demonstrates using `GsplatText` for dimension labels in a CAD-style visualization.
+
+<EngineExample id="gaussian-splatting/procedural-shapes" title="Procedural Shapes example" />
 
 ## Script Location
 

docs/user-manual/gaussian-splatting/building/unified-rendering/splat-processing.md

@@ -130,12 +130,12 @@ The source and destination resources can have different numbers of splats. The `
 ```glsl
 void process() {
     uint destIndex = splat.index;  // Current destination splat index
-    
+
     // Calculate which source splat to read from
     uint sourceIndex = destIndex * 2;  // Example: sample every other splat
     setSplat(sourceIndex);
     vec3 srcPos = getCenter();
-    
+
     // Write to destination
     writePosition(vec4(srcPos, 1.0));
 }
@@ -286,8 +286,13 @@ void process() {
 
 ## Live Examples
 
-- [Paint example](https://playcanvas.github.io/#/gaussian-splatting/paint) - Demonstrates painting splats with a brush
-- [Editor example](https://playcanvas.github.io/#/gaussian-splatting/editor) - Demonstrates selection, deletion, and cloning
+- Paint example - Demonstrates painting splats with a brush
+
+<EngineExample id="gaussian-splatting/paint" title="Paint example" />
+
+- Editor example - Demonstrates selection, deletion, and cloning
+
+<EngineExample id="gaussian-splatting/editor" title="Editor example" />
 
 ## See Also
 

docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-format.md

@@ -27,21 +27,21 @@ flowchart LR
         Loaded[Loaded Splats]
         Container[GSplatContainer]
     end
-    
+
     Copy([Copy])
-    
+
     WorkBuffer[Work Buffer]
-    
+
     Sort([Sort])
-    
+
     Render([Render])
-    
+
     Loaded --> Copy
     Container --> Copy
     Copy --> WorkBuffer
     WorkBuffer --> Sort
     Sort --> Render
-    
+
     style Copy stroke:#f90,stroke-width:3px
 ```
 
@@ -72,7 +72,7 @@ entity.gsplat.setWorkBufferModifier({
             // Offset all splats upward
             center.y += 1.0;
         }
-        void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, 
+        void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter,
                                        inout vec4 rotation, inout vec3 scale) {}
         void modifySplatColor(vec3 center, inout vec4 color) {
             // Tint splats red
@@ -83,7 +83,7 @@ entity.gsplat.setWorkBufferModifier({
         fn modifySplatCenter(center: ptr<function, vec3f>) {
             (*center).y += 1.0;
         }
-        fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, 
+        fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f,
                                      rotation: ptr<function, vec4f>, scale: ptr<function, vec3f>) {}
         fn modifySplatColor(center: vec3f, color: ptr<function, vec4f>) {
             *color = vec4f((*color).rgb * vec3f(1.0, 0.5, 0.5), (*color).a);
@@ -132,7 +132,7 @@ entity.gsplat.setWorkBufferModifier({
         uniform uint uComponentId;
 
         void modifySplatCenter(inout vec3 center) {}
-        void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, 
+        void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter,
                                        inout vec4 rotation, inout vec3 scale) {}
         void modifySplatColor(vec3 center, inout vec4 color) {
             // Write component ID to the splatId stream
@@ -143,7 +143,7 @@ entity.gsplat.setWorkBufferModifier({
         uniform uComponentId: u32;
 
         fn modifySplatCenter(center: ptr<function, vec3f>) {}
-        fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, 
+        fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f,
                                      rotation: ptr<function, vec4f>, scale: ptr<function, vec3f>) {}
         fn modifySplatColor(center: vec3f, color: ptr<function, vec4f>) {
             writeSplatId(vec4u(uniform.uComponentId, 0u, 0u, 0u));
@@ -205,7 +205,9 @@ See [Splat Data Format - Shader Access](/user-manual/gaussian-splatting/building
 
 ## Live Example
 
-See the [LOD Instances example](https://playcanvas.github.io/#/gaussian-splatting/lod-instances) which demonstrates:
+See the LOD Instances example which demonstrates:
+
+<EngineExample id="gaussian-splatting/lod-instances" title="LOD Instances example" />
 
 - Adding a `splatId` stream to the work buffer
 - Writing component IDs during copy using `setWorkBufferModifier()`

docs/user-manual/gaussian-splatting/building/unified-rendering/work-buffer-rendering.md

@@ -27,21 +27,21 @@ flowchart LR
         Loaded[Loaded Splats]
         Container[GSplatContainer]
     end
-    
+
     Copy([Copy])
-    
+
     WorkBuffer[Work Buffer]
-    
+
     Sort([Sort])
-    
+
     Render([Render])
-    
+
     Loaded --> Copy
     Container --> Copy
     Copy --> WorkBuffer
     WorkBuffer --> Sort
     Sort --> Render
-    
+
     style Render stroke:#09f,stroke-width:3px
 ```
 
@@ -54,7 +54,7 @@ Use `getShaderChunks()` on the scene's gsplat material to set the `gsplatModifyV
 ```javascript
 const glslModifier = `
     void modifySplatCenter(inout vec3 center) {}
-    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, 
+    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter,
                                    inout vec4 rotation, inout vec3 scale) {}
     void modifySplatColor(vec3 center, inout vec4 color) {
         // Apply global color grading
@@ -64,7 +64,7 @@ const glslModifier = `
 
 const wgslModifier = `
     fn modifySplatCenter(center: ptr<function, vec3f>) {}
-    fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f, 
+    fn modifySplatRotationScale(originalCenter: vec3f, modifiedCenter: vec3f,
                                  rotation: ptr<function, vec4f>, scale: ptr<function, vec3f>) {}
     fn modifySplatColor(center: vec3f, color: ptr<function, vec4f>) {
         *color = vec4f(pow((*color).rgb, vec3f(0.8)), (*color).a);
@@ -109,12 +109,12 @@ const glslModifier = `
     uniform sampler2D uColorLookup;
 
     void modifySplatCenter(inout vec3 center) {}
-    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, 
+    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter,
                                    inout vec4 rotation, inout vec3 scale) {}
     void modifySplatColor(vec3 center, inout vec4 color) {
         // Read component ID written during copy
         uint id = loadSplatId().r;
-        
+
         // Look up color from texture based on component ID
         vec3 tintColor = texelFetch(uColorLookup, ivec2(int(id), 0), 0).rgb;
         color.rgb *= tintColor;
@@ -187,7 +187,7 @@ const glslModifier = `
         // Read ID from work buffer (can be used in other functions)
         componentId = loadSplatId().r;
     }
-    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter, 
+    void modifySplatRotationScale(vec3 originalCenter, vec3 modifiedCenter,
                                    inout vec4 rotation, inout vec3 scale) {}
     void modifySplatColor(vec3 center, inout vec4 color) {
         // Look up color from texture based on component ID
@@ -199,7 +199,9 @@ const glslModifier = `
 
 ## Live Example
 
-See the [LOD Instances example](https://playcanvas.github.io/#/gaussian-splatting/lod-instances) which demonstrates:
+See the LOD Instances example which demonstrates:
+
+<EngineExample id="gaussian-splatting/lod-instances" title="LOD Instances example" />
 
 - Reading component IDs written during copy
 - Looking up colors from a texture

docs/user-manual/graphics/advanced-rendering/hardware-instancing.md

@@ -11,10 +11,21 @@ Note that all instances are submitted for rendering by the GPU with no camera fr
 
 ## Live Examples
 
-- [Basic Instancing](https://playcanvas.github.io/#/graphics/instancing-basic) - Demonstrates default Mat4 instancing format with StandardMaterial
-- [Custom Instancing](https://playcanvas.github.io/#/graphics/instancing-custom) - Shows custom vertex format with shader chunks override
-- [GLB Instancing](https://playcanvas.github.io/#/graphics/instancing-glb) - Uses EXT_mesh_gpu_instancing extension in GLB files
-- [Gooch Instancing](https://playcanvas.github.io/#/graphics/instancing-gooch) - Full custom ShaderMaterial with instancing support
+- Basic Instancing - Demonstrates default Mat4 instancing format with StandardMaterial
+
+<EngineExample id="graphics/instancing-basic" title="Basic Instancing" />
+
+- Custom Instancing - Shows custom vertex format with shader chunks override
+
+<EngineExample id="graphics/instancing-custom" title="Custom Instancing" />
+
+- GLB Instancing - Uses EXT_mesh_gpu_instancing extension in GLB files
+
+<EngineExample id="graphics/instancing-glb" title="GLB Instancing" />
+
+- Gooch Instancing - Full custom ShaderMaterial with instancing support
+
+<EngineExample id="graphics/instancing-gooch" title="Gooch Instancing" />
 
 ## Basic Instancing with Default Format