My Takeaways from WebGPU July 2021 Meetup

Advice for porting a large WebGL project to WebGPU

Jasper St. Pierre — Yacht Club Games.
Timestamp: 6:02–21:25
Slides

  • WebGPU requires the use of uniform buffers, which is one big difference with WebGL. You can’t define and update individual uniform values anymore. You put all your uniforms into a buffer and send that all at once, which is a more efficient use of modern GPU hardware.
  • Jasper recommends porting WebGL 1 -> WebGL 2 as an intermediate step. Since WebGL 2 supports uniform buffers, and the code for binding is a little simpler.
  • Do not update uniform buffers between draw calls in WebGPU. This may be a common pattern in WebGL 2, but you want to keep GPU memory untouched as long as possible so it can execute draw calls in parallel. Instead, he created one single large buffer, containing data for all draw calls, and binding different parts of it before different draw calls.
  • Jasper kept his shaders in GLSL and converts to WGSL at runtime using https://github.com/gfx-rs/naga using WebAssembly. WGSL stands for WebGPU Shading Language.
  • Viewport and clipspace conventions are different in WebGPU. WebGPU has 0,0 in the top left (as opposed to bottom left). And the frustum in WebGPU is 1 to 0 (as opposed to 1 to -1). This was easy to account for.
  • Consider a “draw call objects” design for your renderer. This one is more general advice: Instead of each object initiating draw calls directly, it pushes an object into a list containing info needed for the draw call. This makes it easier to handle multi pass rendering, sorting if needed for transparency, and collecting uniform data up front.

glTF Sampler Viewer

Moritz Becher — UX3D
Timestamp: 21:35–35:30

Slides

PBR & KTX extensions for glTF

Sandra Voelker — Target
Timestamp: 35:40–54:20
Slides

Using multi-draw to speed up drawing many small objects

Philip Taylor — Zea
Timestamp: 54:40–1:12:20
Slides

  • “If instancing is drawing the same geometry many times, multi draw is drawing different geometries many times” is how Philip described it. So it’s getting the same performance benefit of instancing with more flexibility.
  • He referenced this blog post as a good source to learn about it: The road to 1 million draws
  • You essentially pack all your geometry into one huge vertex buffer which you then pass to the multi-draw call with offsets that define geometry for separate objects
  • You have a “drawId” which can be used in the shader to figure out which object is being drawn in the multi-draw call
  • It is not possible to switch/bind different uniforms across different objects, since they are all grouped into one multi-draw call
  • So they bind everything into textures, including model matrices. The drawId is used to index into these textures and get the model matrix, material properties, etc.
  • The disadvantage of this is that all these properties have to be the same precision, so this will be wasting extra memory. This is also a very non-trivial architecture, and makes it very difficult to change materials at runtime.

Speeding up Unity’s WebGL export with batching techniques

Brendan Duncan — Unity
Timestamp: 1:13:00–1:30:11
Slides

  • They initially couldn’t use this technique as-is in WebGL because it required 2 features not supported in WebGL: uniform layout locations and buffer binding points. This is what allows the shaders to reference the right data when it is all sent to the GPU ahead of time.
  • Specifically the issue is that WebGL does not use integer uniform locations. This is done as a security/sandboxing measure
  • They worked around this by creating an open source Emscripten plugin: https://github.com/emscripten-core/emscripten/pull/13887
  • This plugin preprocesses the shaders. You can write OpenGL shaders using this feature (so they can keep the shaders as-is for Unity desktop/other platforms), the plugin will create a dictionary of all the uniform binding points, and generate GLSL code that works in WebGL with the correct bindings.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Omar Shehata

Omar Shehata

Graphics programmer working on maps. I love telling stories and it's why I do what I do, from making games, to teaching & writing. https://omarshehata.me/