ABSTRACT: GPUs are cool! You can use them to play games, create entire movies and even run machine learning models. By using some native libraries it's possible to embrace their powers, using programming languages such as Python or C++. How does this work, though, in a world where everything is a web page? New exciting technologies, such as WebGL and WebGPU, are giving programmers the full power of the underlying hardware. We will see how to build applications that use GPU superpowers to offer things that were previously impossible, such as rendering giant scenes or running ChatGPT locally in the browser, using some real-world production examples. BIO: Giulio Zausa is a Technical Lead and Software Engineer working at Flux, where he uses web technologies to bring hardware design into the future. He is passionate about 3D rendering technologies, performance optimisations, and building cool stuff for the web, like custom React reconcilers, real-time computer vision on Web Workers, and hardware emulators with WebAssembly.

1. Speck&Tech 55
Give your Web App
superpowers by using GPUs

2. Hi, IÕm Giulio! !
" → #
$ % & '
@giuliozausa

3. I think GPUs are cool

5. Skia
GPU Accelerated
2D Engine
(used by Chrome)

6. GPUs are insanely parallel processors

10. Ok but I build websites,
how does this affects me?

19. Figma
React & C++
2D GPU accelerated
Multi-level tile-based
rendering

23. Challenges
Giant documents with thousands of parts
The entire document can be viewed at once
Everything at 60 FPS on medium-end hardware
Electrical properties calculation
Always running SPICE circuit simulator
Collaborative real-time multiplayer

25. The OpenGL Pipeline

26. Shaders: vertex attributes
• Position (vec3)
• UV coord (vec2)
• Normal Vector (vec3)
• É
[posX,posY,posZ,uvX,uvY,nrmX,nrmY,nrmZ, posX,posY,posZ,uvX,uvY,nrmX,nrmY,nrmZ, ...]
Vertex Data:
Index Data:
|0 |1 |2
[0,2,1, 1,2,3, 2,4,3]

27. Shaders with GLSL
https://slidetodoc.com/objectives-simple-shaders-vertex-shader-fragment-shaders-programming/

28. Vertex + Fragment Shader
For each Vertex For each Pixel

29. Vertex Shader

30. Fragment Shader

31. Tooling & Ecosystem

33. ≈60 LOC

37. CPU/GPU Bottleneck
PCIe + RPC
Overhead

38. CPU/GPU Bottleneck
4kb 10000x drawMesh()
10000 instances
GPU
4kb x 10000
= 40mb
for (instance in instances) {
drawMesh(instance);
}

39. CPU/GPU Bottleneck 33 FPS
for (instance in instances) {
drawMesh(instance);
}

40. Instanced Rendering
4kb drawMeshes(10000)
10000 instances
GPU
4kb
for (instance in instances) {
drawMesh(instance);
}
drawMeshes(instances);

41. Instanced Rendering 120 FPS
for (instance in instances) {
drawMesh(instance);
}
drawMeshes(instances);

42. Instanced Rendering at scale

43. Index "T"
109,169,0
121,196,0
133,194,252
...
...

44. Ok, but what about
number crunching?

48. Almost every browser Chrome/Edge only (for now)
Low Level Even Lower Level
One context per <canvas> Independent from <canvas>
GLSL Shading Language (C++ like) WGSL Shading Language (Rust like)
Fixed pipeline Customisable pipeline
Suitable for General Purpose
Computing!

52. Thank you!

54. WebGPU: API

55. WGSL

56. 2D Rendering: Text
https://css-tricks.com/techniques-for-rendering-text-with-webgl/

57. 2D Rendering: Text
https://css-tricks.com/techniques-for-rendering-text-with-webgl/

58. Signed Distance Functions
https://css-tricks.com/techniques-for-rendering-text-with-webgl/

59. Multichannel Signed Distance Functions

60. Multichannel Signed Distance Functions