Introduction to WebGPU - CIS 565 GPU Programming Fall 2023

Guest lecture I gave at the University of Pennsylvania in November 2023, covering the WebGPU graphics API. Covers a wide range of WebGPU topics, including API overview, best practices, and more.
Links from the lecture:
Slide Deck - bit.ly/webgpu-cis-565
Metaballs Demo - toji.github.io/webgpu-metaballs/
Babylon Ocean Demo - popov72.github.io/OceanDemo/d...
Render Bundles Demo - playground.babylonjs.com/?web...#1092
This is a modified version of the same lecture I gave in person in 2022, which you can see here: • Introduction to WebGPU... The audio was a worse on that recording, however, and the slides spent more time comparing WebGPU to WebGL.
Chapters
00:00 Intro
03:03 WebGL History
08:37 WebGPU Overview
12:47 WebGPU Demos
16:10 Web APIs vs Native APIs
21:30 "Hello Triangle"
39:51 More WebGPU concepts
43:44 Exposing Resources to Shaders
51:00 How WebGPU helps developers
57:48 WebGPU tips
1:13:10 Additional Resources
1:15:45 Q&A Part 1
1:44:03 Career Advice
1:51:38 Q&A Part 2

[@WoWbob396]

Thank you for uploading! So excited to learn about this

[@jonmichaelgalindo]

Very useful and informative, thank you.

[@kodejohan]

Thanks so much for this awesome talk Brandon!

[@Flashclipped]

THanks brotha

[@corvoworldbuilding]

Great presentation

[@valentinkrajzelman4649]

nice

[@Trooperos90]

goddamn its so much knowledg here. give some table of content plox. thanks.

[@BrandonJonesToji]

Thanks for the suggestion! Added chapters.

[@stbjang]

we are interested with 3d graphics APIs.

[@u_walk2251]

hey brandon, as far as i know, the PLAYCANVAS engine you link to at 01:16:50 runs on htlm 5 and webGL, not webGPU. did i miss sth here ?

[@BrandonJonesToji]

PlayCanvas has announced initial support at blog.playcanvas.com/initial-webgpu-support-lands-in-playcanvas-engine-1-62/ I am not sure if it's still behind a flag or not, but it's definitely been in development.

[@Cos3D]

@@BrandonJonesToji so when building on playcanvas is webgpu features like better graphics running at better fps activated by default ?

[@BrandonJonesToji]

@@Cos3D I'm not sure what their current default settings are. You'd have to consult their documentation.

[@Cos3D]

ty@@BrandonJonesToji

[@geelemo]

Is this beginner friendly. Assuming i already know javascript ...?

[@BrandonJonesToji]

GPU development *is* a complex subject no matter what API is being used, but if it's something that you're interested in WebGPU is going to be an easier path to learning how it works than some of the native APIs, and it reflects how modern GPUs work better than WebGL does. I suggest webgpufundamentals.org/ as a great place to get started!
If, on the other hand, what you're looking for is just to be able to throw graphics onscreen quickly and don't care about the details of how it happens, I'd suggest looking at libraries like Three.js, Babylon, or PlayCanvas. They'll get you up and running faster.