These samples run in Google Chrome and Firefox Nightly and require WebGPU and WebAssembly JavaScript Promise Integration (JSPI).
WebGPU is enabled by default on most platforms in Chrome. To enable it on Linux, navigate to chrome://flags, and enable "Vulkan" and "Unsafe WebGPU Support".
(This site is registered for the JSPI origin trial, so it is no longer necessary to enable JSPI manually in Chrome.)
| Demo | Source | Description |
|---|---|---|
| triangle | triangle.t | The canonical "Hello, Triangle" example, now in green. |
| shiny | shiny.t | An environment-mapped teapot in a skybox of the same texture. |
| shiny-dragon | shiny-dragon.t | An environment-mapped dragon in a skybox of the same texture. |
| shiny-anim | shiny-anim.t | Animated teapot via Bezier patch animation on the host CPU. |
| shiny-compute-anim | shiny-compute-anim.t | Animated teapot via Bezier patch animation in a GPU compute shader. |
| springy | springy.t | A particle physics demo, with a 10x10 grid of particles connected by springs. |
| springy-compute | springy-compute.t | The same particle physics demo, running in a GPU compute shader. |
| springy-3d | springy-3d.t | A particle physics demo, with a 20x20x20 mesh of particles. |
| springy-compute-3d | springy-compute-3d.t | Same as above, running in a compute shader. | disco-dragon | disco-dragon.t | A Toucan port of the Deferred rendering WebGPU sample. |
Toucan uses JSPI to make certain operations appear synchronous to the developer, so that the Web version of a Toucan application mimics the behaviour of the native version of the same app. In this way, the Toucan API resembles the simple, synchronous windowing and graphics APIs that graphics developers would likely be familiar with. The operations are:
System.GetNextEvent() blocks until a new event is received.
Swapchain.Present() may block until a new frame is available.
Buffer.Map() may block until the graphics driver has made the buffer available for access.