WebGPU is an upcoming API for efficient graphics and general-purpose computation on the GPU. Its design is similar to modern native APIs, such as Vulkan, DirectX 12, and Metal. It simplifies programming and enables users to take full advantage of modern graphics hardware without the tedious boilerplate commonly associated with it. This workshop is tailored for graphics and visualization researchers interested in learning the fundamentals of WebGPU. Participants will gain a comprehensive understanding of WebGPU’s design, motivation, and positioning compared to other graphics and computation APIs. By going from a simple triangle all the way to a deferred rendering pipeline, the workshop will cover hands-on techniques, including data transfer between the CPU and GPU, shader development in the WebGPU shading language (WGSL), setting up rendering and compute pipelines, and outputting results as images or buffers. As a bonus, everything we develop is readily available on a wide variety of different devices, which is a significant advantage for research dissemination and reproducibility. By participating in this workshop, attendees will acquire practical skills and knowledge of a technology poised to revolutionize the graphics and visualization industry.

What to prepare: If you participate in this workshop, you need to prepare:

1. Internet browser with WebGPU support
2. Local server
3. Workshop Git repository

Internet browser with WebGPU support

• On Windows, MacOs:
  • Download Google Chrome
    • Check if Chrome version is already 113 (early roll-out)
  • Alternatively: Download Chrome Canary
    • Enable WebGPU via chrome://flags (#enable-unsafe-webgpu)
    • Restart browser
• On Linux:
  • • Download Chromium
      • Option 1: https://download-chromium.appspot.com/
      • Option 2: https://github.com/scheib/chromium-latest-linux then update.sh
  • On Ubuntu 22.04: Don’t use snap / apt version
  • Enable WebGPU (#enable-unsafe-webgpu) and Vulkan (#enable-vulkan) backend via chrome://flags then restart browser
  • If it does not work, check chrome://gpu and maybe https://toji.github.io/webgpu-test/
  • If it still does not work, use swiftshader

Local server

• Our recommendation: Visual Studio Code
  • Go to Extensions > Search “Live Server” (over 33 million downloads) > Install
• Alternatively: Have Python installed; we provide a Python server
• Alternatively : Have Node.js installed; we provide a Node.js server
• Alternatively : Have WebStorm installed

Workshop Git repository

• Clone https://github.com/UL-FRI-LGM/cescg2023-webgpu

Žiga Lesar is a teaching assistant and a graphics and visualization researcher currently working for the Laboratory for Computer Graphics and Multimedia at the University of Ljubljana, Faculty of Computer and Information Science. His research is focused on interactive crowded volume visualization in the fields of microbiology, material sciences, and medical imaging. He is passionate about web technologies and open research, which is why he chose to support his work with web-accessible demos.

Lukas Herzberger is a student employee at the Research Unit of Computer Graphics of TU Wien where he is currently working on his master’s thesis. In collaboration with Harvard Medical School, he is developing web-based out-of-core volume rendering methods for biomedical data.
His research interests are real-time graphics and web-based scientific visualization.

Lucas Melo is a master’s student at the Research Unit of Computer Graphics of TU Wien. In collaboration with the Austrian Institute of Technology, he developed Catana, a web-based molecular modelling tool for biotechnologists. At his current position at Nanographics, he is developing a web-based molecular renderer.