2023-05-15

Core SDK WebGPU and WebGL samples


Low-level functionality tests compiled with Emscripten.

Archive with all tests: webgpu-20230515.zip

WebGPU compatible browser is required.

Parallel Fluid 2D


Simple 2D fluid simulation based on Fast Fourier Transformation.

Parallel Radix Sort


Multiple independent sorting algorithms can be dispatched in parallel. There is no overhead in comparision with the single array sort. Additionally, dispatch parameters can be fetched from the indirect buffer.
'1' shows the input data.
'2' activates global sort.

Parallel Spatial Grid


Simple physics simulation with collisions based on the SpatialGrid class. It is the fastest way to collide objects of the same size.

Parallel Spatial Tree


Simple physics simulation with collisions based on the SpatialTree class. The SpatialTree allows collision and intersection tests with any primitive inside BVH.

Clustered Lights


Forward shading with 16384 dynamic lights. This algorithm is compatible with deferred shading and transparent objects.

Meshlet Render


A massive meshlets rendering example with Mesh Shader for hardware and Compute Shader for software rasterization.
'1' activates Instancing mode.
'2' activates Mesh Shader mode.
'3' activates Compute rasterization mode.

WebGPU: Mesh Shader mode is not supported. Z-order for Compute rasterization is invalid because WebGPU does not provide read-write or atomic operations for storage images.

Ordered Independent Transparency


Ordered Independent Transparency with atomic buffer operations from the fragment shader.

WebGPU: High resolution is not supported because of limited SSBO size.

Software Ray Tracing Shadows


Software raytracing shadows with simple deferred shading. Compatible with all APIs.

Percentage Closer Filtering Shadow Map


PCF Shadow Maps provides shadow with variable penumbra size based on the distance between the shadow caster and receiver.

Exponential Shadow Maps


Exponential Shadow Maps provides noise-free shadows with a fixed performance cost and constant penumbra size.

Parallax 2D


Parallax occlusion mapping with self-shadowing for the mesh geometry.

Parallax Cube


Parallax occlusion mapping with self-shadowing for the analytical sphere.

Mesh Tangent Basis


Mesh tangent basis renormalization at the Fragment Shader. Mesh class can re-create normal and tangent vectors.

Mesh Model


MeshModel class creates a rendering model representation for the input Mesh or MeshGeometry with a specified Pipeline layout.
It is possible to inherit MeshModel class and combine multiple meshes into the single Buffer.

Mesh Skinned


This is a basic skinned mesh animation example. Mesh classes give comprehensive access to all mesh data, including Nodes, Animations, Materials, Cameras, and Lights.

Platform Precision


Performance and precision difference between 16-bit, 32-bit, and 64-bit floating formats.
'1' activates 64-bit precision.
'2' activates 16-bit precision.

WebGPU: 64-bit and 16-bit modes are not supported.

Platform Texture


Dynamic 3D texture created with SIMD CPU instructions.

Platform Command


Command class for basic rendering. Depth Cube texture for omnidirectional shadow map.

Platform Compute


Compute class for simple compute shader texture generation.

Platform Fence


Multi-GPU N-body simulation with Fence synchronization. A shared buffer is used for data exchange between GPUs.

WebGPU: Single-GPU simulation mode only.

Platform Dynamic


A single-thread dynamic geometry rendering can provide more than 100M triangles per second rate.

Platform Stencil Buffer


Constructive Solid Geometry with the Stencil Buffer. This algorithm is compatible with procedural geometry.

Platform Texture Samples


Writing and reading individual multisample texture samples with active Pipeline sample write mask.

Interface Canvas


Different CanvasElement classes, including texture filtration, gradients, contour outlines, and SVG rendering.

Interface Controls


Different User Interface Control classes in resolution-independent configuration.

Interface Layer


A transparent multilayer Controls with variable background blur.

SVG Image


Simple SVG image loading and rendering. CanvasShape class accepts SVG path string as input data.

Custom Control


Custom Controls can be created by simple ControlBase class inheritance. The Control behavior can be completely overridden.

Mesh Reduce


MeshReduce is a simple way to simplify input mesh geometry. Simplification preserves all Mesh Attributes, and it is compatible with Skinning Animation.
'1' shows the original geometry.

Mesh Refine


MeshRefine refines geometry mesh using Catmull-Clark (for quadrilaterals) or Loop (for triangles) subdivision algorithms. The Crease Attribute allows additional control over the subdivision process.
'1' shows the original geometry.