WebGPU January 2022 meetup — takeaways

The WebGL/WebGPU January talk is up (https://www.youtube.com/watch?v=wYAvVUFQP2M)! I encourage you to watch full video.

I’ve compiled my takeaways here (with a focus on WebGPU) so you can skim the highlights & see links to resources mentioned by the speakers all in one place.

Event link where you can register for future meetups: https://www.khronos.org/events/webgl-webgpu-meetup-january-2022

General updates & new WebGL extensions

Ken Russell (https://twitter.com/gfxprogrammer)
Kai Ninomiya (https://twitter.com/kainino0x)
Slides

Ken encouraged everyone who works with or is interested in WebGPU to join the community! They welcome all feedback.

• See the WebGPU GitHub discussions: https://github.com/gpuweb/gpuweb/discussions/
• Also WebGPU matrix chat https://matrix.to/#/#WebGPU:matrix.org
• This repo is where the spec is being developed & discussed

WebGPU spec 1.0 release is currently targeting ~Q2 2022.

You can release WebGPU apps on the web today without having users enable any special flags by signing your website up for the origin trial (https://web.dev/gpu/#register-for-ot).

There are currently many breaking changes as the spec rapidly develops. I was curious about these changes particularly with WGSL. Skimming the recent PRs you can find:

• Adding increment/decrement operators . PR. Spec link.
• Built in functions for converting to/from degrees & radians. PR. Spec link.

It is exciting for me to see that such core language features are still being added at this stage, and that we as developers get to provide feedback & be a part of this process!

WebGL 2 can now be considered universally supported!

• This is largely thanks to WebGL 2 shipping on iOS/MacOS last year. It runs on Metal on all newer devices.
• Safari team is rapidly fixing any WebGL 2 bugs. If you notice any please report it at https://bugs.webkit.org/.
• Ken’s recommendation for most apps is that you no longer need to maintain a WebGL 1 fallback.

New WebGL 2 extensions

• OES_draw_buffers_indexed — requested by 3D formats working group to implement advanced materials (eg using dual depth peeling). This allows you to use different blend options when writing to multiple color buffers simultaneously.
• WEBGL_draw_instanced_base_vertex_base_instance — Reduces memory use by allowing reusing index buffer to draw multiple different geometries from the same set of vertex buffers. This is still a draft.
• WEBGL_multi_draw_instanced_base_vertex_base_instance — Same as above but for rendering more than 1 primitive with one draw call.

WebGPU Best Practices

Brandon Jones (https://twitter.com/Tojiro)
Slides

Brandon has written a couple of WebGPU best practice guides, like this one about uploading data to GPU buffers: https://toji.github.io/webgpu-best-practices/buffer-uploads.html.

This presentation covered this and a few other other topics I found incredibly useful:

• Use debug labels to get helpful error messages: https://gpuweb.github.io/gpuweb/explainer/#errors-errorscopes-labels
• Use debug groups so that error messages will tell you exactly where in the pipeline the failure occurred (like which render pass): https://gpuweb.github.io/gpuweb/explainer/#command-encoding-debug
• Use compressed textures (see artist’s guide here). Brandon built a library to serve as a reference for loading different texture formats in WebGPU/WebGL: https://github.com/toji/web-texture-tool.
• gltf-transform has a CLI for creating these compressed textures & applying other optimizations: https://gltf-transform.donmccurdy.com/cli.html
• Use async pipeline creation. Otherwise users will experience jank when you use a pipeline that’s not ready.
• Avoid implicit pipeline layouts. Mainly so that you can re-use bind groups for different pipelines, which is the common scenario. For example you would have a bind group for your uniform buffer(s) that is re-used for all your shader pipelines.

WSGL Editor

Takahiro (https://twitter.com/superhoge)
Online demo: https://takahirox.github.io/online-wgsl-editor/index.html
Repo: https://github.com/takahirox/online-wgsl-editor

This is a ShaderToy-like environment but for WGSL & WebGPU. The editor will show you any errors inline.

It’s really useful for learning & experimenting. You can move your mouse away from the screen to hide the code & just see the display. Contributions are welcome!

Takahiro demonstrated using this editor to modify a vertex shader & deform this cube:

Creative coding with WebGL 2

Jaume Sanchez (https://twitter.com/thespite)
Online demo: https://spite.github.io/genuary-2022/
Repo: https://github.com/spite/genuary-2022

Jaume presented incredibly beautiful work he did for Genuary (https://genuary.art/) that’s all open source.

It’s a great resource for learning lots of different techniques for procedurally generated effects like generating noise, using SDF’s (signed distance fields), volume rendering, non photorealistic rendering, and more.

Clustered shading in PlayCanvas

Donovan Hutchence (https://twitter.com/slimbuck7)
Slides

Donovan presented on how the PlayCanvas team recently added clustered lighting to the engine. He gave a great explanation of how it works including some stunning debug views you can see in the video clip in the tweet below.

I hope you found this useful! You can find me on Twitter (https://twitter.com/Omar4ur), I’d love to hear any thoughts.

If you’re interested in giving a talk at this meetup, reach out to them! From their event description:

If you would like to be considered to present at one of our upcoming WebGL+ WebGPU Meetups, please reach out to events@khronos.org.