benjamin kenwright webgpu api lecture 1.pptx
- 1. Benjamin Kenwright WebGPU API Benjamin Kenwright WebGPU API Benjamin Kenwright Lecture 1: Introduction
- 2. Benjamin Kenwright WebGPU API Benjamin Kenwright Brief Overview • Course Structure • Background History/Trends • Basic Concepts/WebGPU API • Whats/Whys/Where • WebGL vs WebGPU • Shader Languages • GLSL and new WGSL (WebGPU Shader Language) • Discussion & Questions
- 3. Benjamin Kenwright WebGPU API Benjamin Kenwright Who’s this Course for? • Hobbyists, Academics, Beginners, Programmers, (Curious) Any requirements? • Basic programming knowledge (Loops/Variables) • Basic web-based concepts (e.g., HTML/CSS/JS) • Advantage but not required if you have some basic ‘graphics’ knowledge (e.g., color transforms, shaders, …)
- 4. Benjamin Kenwright WebGPU API Benjamin Kenwright What this course is ‘NOT’.. • Writing a Framework • Learning a middleware (e.g.. ‘ThreeJS’) • Writing a ‘full’ game (or complete complex application) • Teaching computer graphics This course is about ‘getting started’ – learning the raw API and using it directly • WebGPU API (Syntax & Blocks) • Minimum working examples (MWE) • Springboards to bigger projects
- 5. Benjamin Kenwright WebGPU API Benjamin Kenwright Notes • Warning… • Supported Browsers (install) • Involve coding! (Not ‘theoretical’) • … • Simple (MWE) Examples • Clearing screen, flashing, … • Buffers, geometry… • Extending examples (step by step) • Graphics then Compute • .. Activities after each Example Question Slides (Think) Stop Points (Try and Test Yourself)
- 6. Benjamin Kenwright WebGPU API Benjamin Kenwright
- 7. Benjamin Kenwright WebGPU API Benjamin Kenwright What is the WebGPU API?
- 8. Benjamin Kenwright WebGPU API Benjamin Kenwright What is the WebGPU API? WebGPU API is a new Cross-Platform 2/3D Compute/Graphics API (for the web) High-level graphics/compute API that taps “openness” of the Native GPU API (Vulkan/DX/Metal)
- 9. Benjamin Kenwright WebGPU API Benjamin Kenwright Why a new GPU API? Do we need the WebGPU API? Why not create just create WebGL 3?
- 10. Benjamin Kenwright WebGPU API Benjamin Kenwright Technologies have changed (Plan for Future) New ways of thinking and working
- 11. Benjamin Kenwright WebGPU API Benjamin Kenwright Problems with Backward Compatibility
- 12. Benjamin Kenwright WebGPU API Benjamin Kenwright Time for a tidy up! New API (Fresh Start)
- 13. Benjamin Kenwright WebGPU API Benjamin Kenwright Change how we approach the problem… Tools, resources, technologies, …
- 14. Benjamin Kenwright WebGPU API Benjamin Kenwright (Multi GPUs) GFLOPS TFLOPS Trends GPU ‘Performance’ Time FLOPS
- 15. Benjamin Kenwright WebGPU API Benjamin Kenwright GPU (Not just for ‘Graphics’) AI Physics (Simulations) Security/Crypt Analytics
- 16. Benjamin Kenwright WebGPU API Benjamin Kenwright Is WebGL dead? Does this mean WebGL is dead? Won’t be supported anymore? RIP WebGL?
- 17. Benjamin Kenwright WebGPU API Benjamin Kenwright NO WebGL is part of the W3c standards Be around for a long time New Tool
- 18. Benjamin Kenwright WebGPU API Benjamin Kenwright All APIs continue to evolve and be maintained to meet industry standards. Provides a rich mix of open technologies for future innovation Workhorse cross-platform API for professional 3D apps and gaming 1990s Ubiquitous API for mobile gaming and general purpose graphics 2000s Heterogeneous parallel computation 2008s High-efficiency GPU graphics and compute API 2015 Graphics and compute API that exposes the capabilities of GPU hardware for the Web 2022 Simplified Overview of the Open Graphics and Compute Standards Web Graphics API (1.0) 2011 2013/17 WebGL 2.0
- 19. Benjamin Kenwright WebGPU API Benjamin Kenwright Dangers and Challenges • New API • Not all fun and games • Support/consistency • Number of core principles • Security Priority, Stability, Consistency • New = Untested
- 20. Benjamin Kenwright WebGPU API Benjamin Kenwright API is ‘NEW’ (Final Changes) • Final phases development tests/checks before release • Check official specification (final updates) • WebGPU API: https://www.w3.org/TR/webgpu/ • WGSL: https://www.w3.org/TR/WGSL/ Open standard
- 21. Benjamin Kenwright WebGPU API Benjamin Kenwright WebGPU multi-worker/tasks 1. Asynchronous texture & buffer uploads 2. Asynchronous shader compilation 3. Asynchronous pipeline state creation 4. Parallel rendering/encoding 5. Multiple threads/pool own command buffer Textures (bindless) GPU more fine-grained Visibility No need to pass data back and forth between CPU and GPU Important WebGPU Features Opens the door…
- 22. Benjamin Kenwright WebGPU API Benjamin Kenwright Do you have the WebGPU API? Enabling API (Chrome Canary/Firefox Nightly/Edge Dev) WebGPU is available (for Chrome Canary/Firefox Nightly/MS Edge Dev) behind an experimental flag. You can enable on: Chrome -> chrome://flags Firefox -> about:config Edge -> edge://flags
- 23. Benjamin Kenwright WebGPU API Benjamin Kenwright
- 24. Benjamin Kenwright WebGPU API Benjamin Kenwright Stats: https://caniuse.com/webgpu (Red – Disabled by Default)
- 25. Benjamin Kenwright WebGPU API Benjamin Kenwright Small check – see if your browser has the WebGPU API Note, as you’ll see later, just because you ‘have’ the API available, doesn’t necessarily mean you can use it (also needs to have a driver/device) Small JS Program 1 2 https://webgpulab.xbdev.net/index.php?page=editor&id=test&
- 26. Benjamin Kenwright WebGPU API Benjamin Kenwright 1 navigator object contains information about the browser (e.g., apis, such as, WebXR and WebGPU API) You can always ‘list’ all the available entries in the navigator like this: for (let n in navigator){ console.log( n ); } 2 navigator.gpu is the ‘webgpu’ api – if this is not ‘undefined’ you have the api
- 27. Benjamin Kenwright WebGPU API Benjamin Kenwright Question Who manages the WebGPU API? (Organisation)
- 28. Benjamin Kenwright WebGPU API Benjamin Kenwright Answer Who manages the WebGPU API? WebGPU is managed by Khronos Group (working group). The group includes Apple, Google, Mozilla and Opera
- 29. Benjamin Kenwright WebGPU API Benjamin Kenwright What to find out more? (Resources/Links) Official website (official standard w3c specification/documentation) • WebGPU API • WGSL • Loads Examples Online/Websites
- 30. Benjamin Kenwright WebGPU API Benjamin Kenwright Introduction to Ray-Tracing using WebGPU API in 20 Minutes (Coffee Book Series) ISBN-13 : 979-8842178605 Kenwright WebGPU API: An Introduction ISBN-13 : 979-8836435554 Kenwright
- 31. Benjamin Kenwright WebGPU API Benjamin Kenwright Stay Tuned Lecture 2
- 32. Benjamin Kenwright WebGPU API Benjamin Kenwright • New era • Final stages (lots of opportunities/potential) • Easy to get started (no excuse) • Challenges/updates/fixes • Must not forget about ‘security’, ‘stability’, … • WebGPU driving future technologies to think outside the box • WebGPU API is ‘NEW’ (untested) • Example, try WebGPULab.com range examples • … Lots of examples and resources available…. Learn the basics first (makes it easy when debugging/fixing problems in more complex projects)