WebGL / WebGPU April 2022 meetup highlights

WebGL and WebGPU Updates

Ken Russell — Google
Kelsey Gilbert — Mozilla
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

Intel’s Updates on Web Graphics

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

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

Sean Lilley — Cesium
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.

Creative RAM Savings in WebGL

Toni Martí — Tribia
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



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/