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.