Give your Web App superpowers by using GPUs
0 likes260 views
The document discusses the advantages of using GPUs for web applications, highlighting their ability to perform parallel processing and enhance rendering performance through GPU acceleration. It covers various aspects including 2D rendering, challenges with large documents, and the use of shaders for graphical tasks. Additionally, it introduces WebGPU and its applications in general-purpose computing and advanced rendering techniques.
![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]](https://image.slidesharecdn.com/smaller-230720202346-304e3fea/85/Give-your-Web-App-superpowers-by-using-GPUs-26-320.jpg)
Give your Web App superpowers by using GPUs
- 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
- 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]
- 28. Vertex + Fragment Shader For each Vertex For each Pixel
- 29. Vertex Shader
- 30. Fragment Shader
- 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
- 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/
- 59. Multichannel Signed Distance Functions
- 60. Multichannel Signed Distance Functions