WebGPU January 2022 meetup — takeaways

Omar Shehata
4 min readFeb 1, 2022

--

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.

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

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:

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.

--

--

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/