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