Readme: Added links to run samples in the Web

README.md

@@ -80,6 +80,7 @@ To build and run the applications in the module, please follow the [instructions
 
 This tutorial shows how to render simple triangle using Diligent Engine API.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial01_HelloTriangle/Tutorial01_HelloTriangle.html)
 
 ## [Tutorial 02 - Cube](Tutorials/Tutorial02_Cube)
 
@@ -88,6 +89,7 @@ This tutorial shows how to render simple triangle using Diligent Engine API.
 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.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial02_Cube/Tutorial02_Cube.html)
 
 ## [Tutorial 03 - Texturing](Tutorials/Tutorial03_Texturing)
 
@@ -96,6 +98,7 @@ index and uniform buffers.
 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.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial03_Texturing/Tutorial03_Texturing.html)
 
 ## [Tutorial 03 - Texturing-C](Tutorials/Tutorial03_Texturing-C)
 
@@ -114,6 +117,7 @@ This tutorial demonstrates how to use the Diligent Engine API in .NET applicatio
 This tutorial demonstrates how to use instancing to render multiple copies of one object
 using unique transformation matrix for every copy.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial04_Instancing/Tutorial04_Instancing.html)
 
 ## [Tutorial 05 - Texture Array](Tutorials/Tutorial05_TextureArray)
 
@@ -122,13 +126,15 @@ using unique transformation matrix for every copy.
 This tutorial demonstrates how to combine instancing with texture arrays to 
 use unique texture for every instance.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial05_TextureArray/Tutorial05_TextureArray.html)
 
 ## [Tutorial 06 - Multithreading](Tutorials/Tutorial06_Multithreading)
 
 ![](Tutorials/Tutorial06_Multithreading/Animation_Large.gif)
 
 This tutorial shows how to generate command lists in parallel from multiple threads.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial06_Multithreading/Tutorial06_Multithreading.html)
 
 ## [Tutorial 07 - Geometry Shader](Tutorials/Tutorial07_GeometryShader)
 
@@ -151,6 +157,7 @@ rendering algorithm.
 
 This tutorial shows how to render multiple 2D quads, frequently switching textures and blend modes.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial09_Quads/Tutorial09_Quads.html)
 
 ## [Tutorial 10 - Data Streaming](Tutorials/Tutorial10_DataStreaming)
 
@@ -159,6 +166,7 @@ This tutorial shows how to render multiple 2D quads, frequently switching textur
 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.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial10_DataStreaming/Tutorial10_DataStreaming.html)
 
 ## [Tutorial 11 - Resource Updates](Tutorials/Tutorial11_ResourceUpdates)
 
@@ -167,6 +175,7 @@ flags to efficiently stream varying amounts of data to GPU.
 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.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial11_ResourceUpdates/Tutorial11_ResourceUpdates.html)
 
 ## [Tutorial 12 - Render Target](Tutorials/Tutorial12_RenderTarget)
 
@@ -175,20 +184,23 @@ important internal details and performance implications related to each method.
 This tutorial demonstrates how to render a 3d cube into an offscreen render target and do a simple
 post-processing effect.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial12_RenderTarget/Tutorial12_RenderTarget.html)
 
 ## [Tutorial 13 - Shadow Map](Tutorials/Tutorial13_ShadowMap)
 
 ![](Tutorials/Tutorial13_ShadowMap/Animation_Large.gif)
 
 This tutorial demonstrates how to render basic shadows using a shadow map.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial13_ShadowMap/Tutorial13_ShadowMap.html)
 
 ## [Tutorial 14 - Compute Shader](Tutorials/Tutorial14_ComputeShader)
 
 This tutorial shows how to implement a simple particle simulation system using compute shaders.
 
 ![](Tutorials/Tutorial14_ComputeShader/Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial14_ComputeShader/Tutorial14_ComputeShader.html)
 
 ## [Tutorial 15 - Multiple Windows](Tutorials/Tutorial15_MultipleWindows)
 
@@ -205,6 +217,7 @@ rendering performance.
 
 ![](Tutorials/Tutorial16_BindlessResources/Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial16_BindlessResources/Tutorial16_BindlessResources.html)
 
 ## [Tutorial 17 - MSAA](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial17_MSAA)
 
@@ -213,6 +226,7 @@ geometrical edges look smoother and more temporarily stable.
 
 ![](Tutorials/Tutorial17_MSAA/Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial17_MSAA/Tutorial17_MSAA.html)
 
 ## [Tutorial 18 - Queries](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial18_Queries)
 
@@ -221,13 +235,15 @@ the GPU operation, such as the number of primitives rendered, command processing
 
 ![](Tutorials/Tutorial18_Queries/Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial18_Queries/Tutorial18_Queries.html)
 
 ## [Tutorial 19 - Render passes](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial19_RenderPasses)
 
 This tutorial demonstrates how to use the render passes API to implement simple deferred shading.
 
 ![](Tutorials/Tutorial19_RenderPasses/Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial19_RenderPasses/Tutorial19_RenderPasses.html)
 
 ## [Tutorial 20 - Mesh Shader](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial20_MeshShader)
 
@@ -281,13 +297,15 @@ application starts.
 
 ![](Tutorials/Tutorial26_StateCache/Screenshot.jpg)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial26_StateCache/Tutorial26_StateCache.html)
 
 ## [Tutorial 27 - Post-Processing](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial27_PostProcessing)
 
 This tutorial demonstrates how to use post-processing effects from the DiligentFX module.
 
 ![](Tutorials/Tutorial27_PostProcessing/Screenshot.jpg)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial27_PostProcessing/Tutorial27_PostProcessing.html)
 
 # Samples
 
@@ -299,6 +317,7 @@ This sample demonstrates how to integrate
 [Epipolar Light Scattering](https://github.com/DiligentGraphics/DiligentFX/tree/master/PostProcess/EpipolarLightScattering)
 post-processing effect into an application to render physically-based atmosphere.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Atmosphere/Atmosphere.html)
 
 ## [GLFW Demo](Samples/GLFWDemo)
 
@@ -314,6 +333,8 @@ This simple maze mini-game demonstrates how to use GLFW to create window and han
 | ![](https://github.com/DiligentGraphics/DiligentFX/blob/master/PBR/screenshots/damaged_helmet.jpg) | ![](https://github.com/DiligentGraphics/DiligentFX/blob/master/PBR/screenshots/flight_helmet.jpg) |
 | ![](https://github.com/DiligentGraphics/DiligentFX/blob/master/PBR/screenshots/mr_spheres.jpg)     | ![](Samples/GLTFViewer/screenshots/cesium_man_large.gif)  |
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/GLTFViewer/GLTFViewer.html)
+
 This sample demonstrates how to use the [Asset Loader](https://github.com/DiligentGraphics/DiligentTools/tree/master/AssetLoader)
 and [GLTF PBR Renderer](https://github.com/DiligentGraphics/DiligentFX/tree/master/PBR) to load and render GLTF models.
 
@@ -333,13 +354,15 @@ an implementation of the Hydra rendering API in Diligent Engine.
 This sample demonstrates how to integrate the [Shadowing component](https://github.com/DiligentGraphics/DiligentFX/tree/master/Components#shadows)
 into an application to render high-quality shadows.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Shadows/Shadows.html)
 
 ## [Dear ImGui Demo](Samples/ImguiDemo)
 
 ![](Samples/ImguiDemo/Screenshot.png)
 
 This sample demonstrates the integration of the engine with [dear imgui](https://github.com/ocornut/imgui) UI library.
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/ImguiDemo/ImguiDemo.html)
 
 ## [Nuklear Demo](Samples/NuklearDemo)
 

Samples/Atmosphere/readme.md

@@ -2,5 +2,7 @@
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Atmosphere/Atmosphere.html)
+
 This sample demonstrates how to integrate [Epipolar Light Scattering](https://github.com/DiligentGraphics/DiligentFX/tree/master/PostProcess/EpipolarLightScattering)
 post-processing effect into an application to render physically-based atmosphere.

Samples/GLFWDemo/readme.md

@@ -2,6 +2,8 @@
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/GLTFViewer/GLTFViewer.html)
+
 This simple maze mini-game demonstrates how to use [GLFW](https://www.glfw.org/) to create window and handle keyboard and mouse input.
 
 ## GLFW Initialization

Samples/ImguiDemo/readme.md

@@ -2,4 +2,6 @@
 
 ![](Screenshot.png)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/ImguiDemo/ImguiDemo.html)
+
 This sample demonstrates the integration of the engine with [dear imgui](https://github.com/ocornut/imgui) UI library.

Samples/Shadows/readme.md

@@ -2,6 +2,8 @@
 
 ![](Screenshot.jpg)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Shadows/Shadows.html)
+
 This sample demonstrates how to integrate the [Shadowing component](https://github.com/DiligentGraphics/DiligentFX/tree/master/Components#shadows)
 into an application to render high-quality shadows.
 

Tutorials/Tutorial01_HelloTriangle/readme.md

@@ -5,6 +5,8 @@ and how to render a simple triangle.
 
 ![](Screenshot.png)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial01_HelloTriangle/Tutorial01_HelloTriangle.html)
+
 ## Shaders
 
 This tutotial uses very basic shaders. The vertex shader generates a procedural triangle. It uses an array of hard-coded

Tutorials/Tutorial02_Cube/readme.md

@@ -5,6 +5,8 @@ It shows how to load shaders from files, create and use vertex, index and unifor
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial02_Cube/Tutorial02_Cube.html)
+
 ## Shaders
 
 This tutorial uses a little bit more complicated vertex shader that reads two attributes from the

Tutorials/Tutorial03_Texturing/readme.md

@@ -5,6 +5,8 @@ from file, create shader resource binding object and how to sample a texture in
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial03_Texturing/Tutorial03_Texturing.html)
+
 ## Shaders
 
 The vertex shader is very similar to the one we used in Tutorial02. The only difference is that instead of color,

Tutorials/Tutorial04_Instancing/readme.md

@@ -5,6 +5,8 @@ of one object using unique transformation matrix for every copy.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial04_Instancing/Tutorial04_Instancing.html)
+
 Instancing is a very widely used technique. It allows rendering multiple copies of one object (trees 
 in a forest or characters in a crowd), using just single draw call. 
 

Tutorials/Tutorial05_TextureArray/readme.md

@@ -5,6 +5,8 @@ use unique texture for every instance.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial05_TextureArray/Tutorial05_TextureArray.html)
+
 Texture array is a special kind of texture that consists of multiple 2D (or 1D) textures sharing the same
 format, size, and the number of mip levels. Every individual texture in the array is called *slice*. Slices can
 be dynamically indexed by the shaders which enables a number of useful techniques such as selecting different slices 

Tutorials/Tutorial06_Multithreading/readme.md

@@ -4,6 +4,8 @@ This tutorial shows how to record command lists in parallel from multiple thread
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial06_Multithreading/Tutorial06_Multithreading.html)
+
 This tutorial generates the same output as Tutorial05, but renders every cube using individual draw call.
 It shows how recording commands can be split between multiple threads. Note that this tutorial illustrates
 the API usage and for this specific rendering problem, instancing is a more efficient solution.

Tutorials/Tutorial09_Quads/readme.md

@@ -4,6 +4,8 @@ This tutorial shows how to render multiple 2D quads, frequently switching textur
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial09_Quads/Tutorial09_Quads.html)
+
 The tutorial is based on [Tutorial06 - Multithreading](../Tutorial06_Multithreading), but renders
 2D quads instead of 3D cubes and changes the states frequently. It also demonstrates *Pipeline State
 compatibility feature* - if two PSOs share the same shader resource layout, they can use shader resource

Tutorials/Tutorial10_DataStreaming/readme.md

@@ -5,6 +5,8 @@ flags to efficiently stream varying amounts of data to GPU.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial10_DataStreaming/Tutorial10_DataStreaming.html)
+
 The tutorial is based on [Tutorial09 - Quads](../Tutorial09_Quads), but instead of quads it renders polygons
 with varying number of vertices, streaming geometry of every polygon at every draw call.
 

Tutorials/Tutorial11_ResourceUpdates/readme.md

@@ -5,6 +5,8 @@ internal details and performance implications related to each method.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial11_ResourceUpdates/Tutorial11_ResourceUpdates.html)
+
 ## Buffers
 
 ### Buffer Initialization

Tutorials/Tutorial12_RenderTarget/readme.md

@@ -6,6 +6,8 @@ that you are familiar with all basics covered in Tutorial01 to Tutorial03.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial12_RenderTarget/Tutorial12_RenderTarget.html)
+
 ## Cube Resources
 
 Initialization of all cube-related resources and states is almost identical to how it is done

Tutorials/Tutorial13_ShadowMap/readme.md

@@ -9,6 +9,8 @@ for a real-world shadow map implementation.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial13_ShadowMap/Tutorial13_ShadowMap.html)
+
 Rendering shadows with a shadow map consists of two steps:
 
 * The scene is rendered from the point of view of the light into a dedicated depth

Tutorials/Tutorial14_ComputeShader/readme.md

@@ -4,6 +4,8 @@ This tutorial shows how to implement a simple particle simulation system using c
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial14_ComputeShader/Tutorial14_ComputeShader.html)
+
 The particle system consists of a number of spherical particles moving in random directions that
 encounter [elastic collisions](https://en.wikipedia.org/wiki/Elastic_collision). The simulation
 and collision detection is performed on the GPU by compute shaders. To accelerate collision detection,

Tutorials/Tutorial16_BindlessResources/readme.md

@@ -6,6 +6,8 @@ improve rendering performance.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial16_BindlessResources/Tutorial16_BindlessResources.html)
+
 In old APIs (Direct3D11, OpenGL/GLES), when an application needed to render multiple objects
 using different shader resources, it had to run the following loop:
 

Tutorials/Tutorial17_MSAA/readme.md

@@ -5,6 +5,8 @@ and more temporarily stable.
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial17_MSAA/Tutorial17_MSAA.html)
+
 [MSAA](https://en.wikipedia.org/wiki/Multisample_anti-aliasing) is an industry-standard method of alleviating
 geometrical aliasing and is supported by all modern graphics hardware. This tutorial shows how to use MSAA
 in Diligent Engine.

Tutorials/Tutorial18_Queries/readme.md

@@ -5,6 +5,8 @@ the GPU operation, such as the number of primitives rendered, command processing
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial18_Queries/Tutorial18_Queries.html)
+
 ## Queries
 
 Queries operate by enclosing a sequence of commands in interest in `BeginQuery()`/`EndQuery()` block.

Tutorials/Tutorial19_RenderPasses/readme.md

@@ -4,6 +4,8 @@ This tutorial demonstrates how to use the render passes API to implement simple
 
 ![](Animation_Large.gif)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial19_RenderPasses/Tutorial19_RenderPasses.html)
+
 Render passes is a feature of the next-generation APIs that allows applications to define rendering commands in a way
 that better maps to tiled-deferred rendering architectures used by virtually all mobile platforms. Unlike immediate
 rendering architectures typical for desktop platforms, tiled-deferred renderers split the screen into small tiles (e.g. 64x64 pixels,

Tutorials/Tutorial26_StateCache/readme.md

@@ -6,6 +6,8 @@ application starts.
 
 ![](Screenshot.jpg)
 
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial26_StateCache/Tutorial26_StateCache.html)
+
 [Tutorial 25](https://github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial25_StatePackager) shows
 how to package pipeline states off-line during the build process. This tutorial demonstrates an alternative approach, where
 pipeline states are created at run time, but when the application exits, they are saved to a file and loaded when

Tutorials/Tutorial27_PostProcessing/readme.md

@@ -1,8 +1,9 @@
  # Tutorial27 - Post Processing
+This tutorial demonstrates how to use post-processing effects from the DiligentFX module.
 
 ![](Screenshot.jpg )
 
-This tutorial demonstrates how to use post-processing effects from the DiligentFX module.
+[Run in the browser](https://diligentgraphics.github.io/wasm-modules/Tutorial27_PostProcessing/Tutorial27_PostProcessing.html)
 
 ## Table of contents