# Guide: How do I use VTK-wasm webgpu experimental feature

**URL:** https://discourse.vtk.org/t/guide-how-do-i-use-vtk-wasm-webgpu-experimental-feature/11164
**Category:** Development
**Tags:** guide
**Created:** [April 7, 2023, 5:27pm UTC](https://discourse.vtk.org/t/guide-how-do-i-use-vtk-wasm-webgpu-experimental-feature/11164 "2023-04-07T17:27:59Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [April 7, 2023, 5:27pm UTC](https://discourse.vtk.org/t/guide-how-do-i-use-vtk-wasm-webgpu-experimental-feature/11164/1 "2023-04-07T17:27:59Z")

</div>

As some people are already aware, there’s ongoing developments to leverage WebGPU in VTK-C++ desktop applications with Dawn - Google’s native implementation of WebGPU spec on top of Vulkan, OpenGL, OpenGLES, Metal, D3D11 and D3D12 for Chromium-based browsers

**VTK-wasm**  
As a side-effect, that very same C++ code can use WebGPU in a browser with VTK-wasm! Read on to learn how a VTK-wasm project can be adapted to use WebGPU.

1. Find `VTK::RenderingWebGPU`. This component is built by default in VTK webassembly builds.

2. Link your targets. There’s no problem linking to OpenGL2 as well. It lets you retain support for older browsers!

3. Patch your initialization code so that VTK object factory plumbing prefers WebGPU instead of OpenGL VTK classes at runtime. For emscripten-based projects, this means one needs to preload the `ENV` variable with `VTK_GRAPHICS_BACKEND='WEBGPU'`.

4. And finally, instantiate a webgpu device and hand it over to the `Module` object.

**Example**

[VTK/Examples/Emscripten/Cxx/ConeMultiBackend](https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx/ConeMultiBackend) serves to illustrate the use of both VTK backends using two web-pages. It’s very basic, has no UI at all. Please refer to that example’s code for better understanding about integrating webgpu.

Here’s a quick way to build and test it.

_Things you’ll need:_

- For windows/macOS, get Chrome beta: [Try New Features with Google Chrome Beta - Google Chrome](https://www.google.com/chrome/beta/)
- For linux, get chromium 113.0.5668.0 from [https://chromium.cypress.io/](https://chromium.cypress.io/)
- npm
- docker

_Steps:_

1. Grab that example:

2. Install toolset

3. Kitware builds and publishes VTK-wasm docker images so you don’t have to compile VTK with emscripten from scratch. Grab the latest image.

4. Build and serve!

5. Open [http://localhost:8080](http://localhost:8080)  

6. Click on VTK WebGPU  

So far, the benefits we’re noticing with WebGPU implementation in VTK is lower memory usage, a critical requirement for wasm applications and the ability to scale well for large number of actors. This example renders 10,000 `vtkActor` instances without hiccups.

Tread with caution. All of this is highly experimental and many features are not yet implemented. Although, most polydata rendering is ready.

The VTK WebGPU implementation is interesting. It is designed to simplify custom mapper development and enables sharing universal shader code with vtk.js because the shader inputs reflect VTK data model which is the common ground between VTK and vtk.js

These [slides](https://docs.google.com/presentation/d/1Nl0TVa55616QKCSHP54BoYBvByMKe6lIUl6IFZqSeJo/edit) (Slide 42 onwards) outline the existing VTK WebGPU design. It also goes through performance profiles against WebGL2 and API inspection with RenderDoc.

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [May 1, 2023, 2:00pm UTC](https://discourse.vtk.org/t/guide-how-do-i-use-vtk-wasm-webgpu-experimental-feature/11164/2 "2023-05-01T14:00:26Z")

</div>

Updated post with link to slides about implementation design and performance comparisons.
