WebGL / WebGPU April 2022 meetup highlights

The Khronos WebGL/WebGPU meetup is a recurring event where the folks working on these web graphics API’s share updates followed by talks from the community.

I’ve summarized highlights from April’s event in this article.

For my past event recaps, see January 2022, July 2021.

WebGL and WebGPU Updates

Ken Russell — Google
Kelsey Gilbert — Mozilla
Slides
Timestamp, 1:20

• Wide color gamut support for WebGL is being implemented in Chrome & Firefox (example: P3 support, see proposal here). I believe this is planned for WebGPU in the future, see discussion here.
• Lots of recent Firefox WebGL updates, most notably support for OffscreenCanvas (enables real multithreaded WebGL, can render on workers)
• Chrome & Safari working to switch to Metal backend. You can test Chrome with Metal today (set “Choose ANGLE graphics backend” to “Metal” in about:flags). Report bugs in the ANGLE issue tracker.
• Current WebGPU 1.0 spec release is targeted for Q3 2022. Breaking changes are still expected. Main things they’re working on now are updates to the shading language (reducing verbosity, adding features requested by community etc), privacy & security, and conformance tests.
• Ways to contribute to WebGPU: (1) use the API and report bugs. (2) Write conformance tests (great way to learn WebGPU) (3) contribute samples/demo

You can get in touch with the folks working on the WebGPU spec through (1) the GitHub repo (2) the Matrix chat room. Ken & Kelsey emphasized that questions, feedback, and contributions are welcome!

One of the new WebGPU resources Kelsey shared was Tim Jones’ shader playground: https://shader-playground.timjones.io/. This lets you see the output of various shader compilers, or see how GLSL -> WGSL transpiling works. It can be a useful tool for learning or debugging.

Below is an example of a GLSL snippet transpiled to WGSL using Naga.

Intel’s Updates on Web Graphics

Yang Gu — Intel Web Graphics Team
Slides
Timestamp, 18:45

Yang talked about Intel’s contributions to web graphics, dating back to Nov 2011. Their recent focus has been on WebGPU, and TensorFlow.js’s WebGPU backend.

The Intel Web Graphics team are currently the maintainers of the TensorFlow.js’s WebGPU backend. He mentioned that they are already seeing better performance than the WebGL backend with medium & large size models.

Yang also mentioned that there is a large community of web graphics developers in China and that they are trying to grow this community. If you’re interested in that, Yang Gu’s contact is in the slide below.

3D Tiles Next: Bringing massive 3D geospatial data to the web

Sean Lilley — Cesium
Slides
Timestamp, 28:25

• Sean talked about 3D Tiles, a format used for visualizing & storing 3D geospatial data. He explained that it’s a “spatial data structure for glTF, where each tile is a glTF. It allows you to stream in only what’s needed for a given view”.
• 3D Tiles Next is an upcoming revision of this format that has (1) better support for metadata (2) and a cleaner integration with the glTF ecosystem, which makes it easier to use 3D Tiles in engines that support glTF.
• The Cesium team has been working on 2 new glTF extensions to support this: (1) EXT_mesh_features (2) EXT_structural_metadata. Together these extensions allow you to embed rich metadata into glTF models while still allowing you to combine & batch geometry for fast rendering.
• Sean covered a little bit about how the CesiumJS renderer works. How they handle global scale precision, how they batch draw calls for fast rendering, and how they handle picking features in city scale datasets.

Below is an example of the metadata support Sean mentioned. The glTF nodes in this 3D Tileset have a “feature ID texture”, that allows the engine to look up properties associated with a particular point on the mesh. This is often used to encode information from an AI model (like that it classified it as a window, or a door etc) or information from the sensors that capture & generated this model (such as accuracy, camera angle, etc).

Creative RAM Savings in WebGL

Toni Martí — Tribia
Slides
Timestamp, 50:21

• Toni shared his “data textures” technique for aggressively reducing GPU-RAM consumption in WebGL (by about 80% in his application)
• He implemented this in xeokit — a viewer for high precision 3D engineering & BIM models on the web
• The basic idea is using NO vertex attributes. Instead, all vertices, colors etc are written to textures. This uses significantly less memory because color data doesn’t need to be repeated for all vertices that use it. This also makes it faster to update.
• He covered the implementation of this technique in this PR. Specifically, see the vertex shader in TrianglesDataTextureColorRenderer.js

Below is the demo he showed: 73k objects with individual color & position offsets that are updated 10 times per second.

I hope you found this useful! You can find me on Twitter or on my website.

You can sign up to be notified of the future WebGL/WebGPU meetups here: https://www.khronos.org/news/subscribe/