00:00 hello everyone in this video we'll go
00:01 over everything you need to know about
00:03 web GPU we'll start with a history
00:05 lesson on the state of 3D computer
00:07 Graphics then we'll learn about what web
00:09 GPU is and how it's different from webgl
00:12 after that we'll take a look at how big
00:14 tech companies are investing in web GPU
00:17 and finally we'll go over how you can
00:18 start learning web GPU today before we
00:20 get started I do need to give a quick
00:22 disclaimer I am by no means an expert on
00:25 web GPU it was just released to Chrome
00:27 last year and I only started looking
00:29 into it a few month months ago my
00:30 biggest accomplishment so far is
00:32 recreating a simpler version of
00:33 Sebastian lags slime mold simulation
00:35 using the compute Shader functionality
00:37 of web GPU but even with such a complex
00:40 project under my belt I still consider
00:42 myself to be a beginner at web GPU I'm
00:44 also trying to condense dozens of hours
00:47 of research into a single 15minute video
00:50 all I ask in return is that you guys hit
00:52 the like button for the YouTube
00:53 algorithm cool with that out of the way
00:58 In to understand understand how web GPU
01:01 came to be today we need to go back in
01:03 time by 30 years and no I don't mean the
01:05 1970s I mean the 1990s around this time
01:08 the gaming industry started to pick up
01:10 speed and game developers were hungry to
01:13 access the full power of the graphics
01:15 Hardware in 1992 a company called
01:17 silicon Graphics created and released
01:19 openg or open Graphics library with this
01:22 Graphics API released the next 10 years
01:24 saw the rise of two major gaming
01:27 companies Sony with its Flagship
01:28 consoles PS1 and PS2 and Nintendo with
01:32 N64 and GameCube feeling left out
01:34 Microsoft decided to get in on the
01:36 action with its own Graphics API called
01:38 direct X and launched Xbox in 2001
01:41 things stayed relatively calm in the
01:43 graphics industry for the next 10 years
01:46 even with the release of the Nintendo
01:47 Wii PS3 and Xbox 360 from 1990 to 2010
01:52 openg and direct X remained the most
01:55 popular Graphics API for console game
01:58 developers while the gaming industry was
02:00 growing so was the worldwide web each
02:02 tech company had a horse in this race it
02:04 was clear even from the early 2000s that
02:07 web apps were here to stay and then
02:08 JavaScript would eat the world at the
02:10 same time personal computers started
02:12 shipping with gpus some of these devices
02:15 were equipped with more powerful
02:17 Hardware than video game consoles
02:19 realizing this the Kronos group who now
02:22 worked on openg Go released webgl AKA
02:25 web Graphics library in 2011 webgl is a
02:28 JavaScript API that allows you to talk
02:30 to the computer's GPU directly from the
02:33 browser while creating webg the Kronos
02:36 group realized that openg gl's
02:37 architecture was suboptimal for modern
02:40 Graphics hardware and began working on
02:42 Vulcan around the same time Apple also
02:45 started working on its own modern
02:47 Graphics API for Mac OS and iOS called
02:50 metal so now we had five different
02:52 Graphics apis webg which was based on
02:55 openg go metal directex and Vulcan
02:58 things were getting out of hand the gra
02:59 graphic space was becoming very
03:01 fragmented and since most big tech
03:03 companies had huge investments in
03:05 browser technology they decided to do
03:07 something about this problem so some
03:09 really smart folks at Google Apple
03:11 Microsoft Mozilla the Kronos group Intel
03:14 and a bunch of other tech companies
03:15 formed the group and started working on
03:17 a new graphics API called Web
03:21 GPU at a high level web GPU is a
03:24 graphics API that sits on top of
03:26 directex Vulcan and metal it allows you
03:29 to talk to the graphics apis that your
03:31 computer is running without having to
03:33 worry about the details of each
03:35 framework the name web GPU is a little
03:38 confusing because you can use web GPU
03:41 outside of a web browser context there's
03:43 a web GPU implementation for C++ called
03:46 Dawn and there's also a web GPU
03:48 implementation for rust called wgpu fun
03:51 fact Bevy the game engine written in
03:53 Rust uses wgpu under the hood being that
03:55 I'm most familiar with the JavaScript
03:57 ecosystem I'll focus on the web side of
03:59 things things for the rest of the video
04:01 web GPU aims to strike a good balance
04:03 between performance and ease of use it's
04:05 faster than Frameworks like openg G and
04:08 webgl and it's easier to set up and use
04:10 than Frameworks like metal Vulcan and
04:13 directex for reference and I'm not
04:15 exaggerating here it takes 800 to 1,000
04:18 lines of code to draw a simple triangle
04:21 in Vulcan it can take more than 400
04:23 lines of code in direct X12 and in
04:26 comparison it takes 70 lines of code to
04:28 draw a triangle in webg and about a 100
04:31 lines of code in web
04:34 GPU you can think of web GPU as being
04:37 the successor to webgl it allows you to
04:40 do two basic things draw triangles
04:43 points and lines to textures and run
04:45 computations on the GPU the first part
04:47 drawing triangles is something we could
04:49 already do in webgl so what's the
04:51 difference the web GPU API doesn't
04:53 require you to work with global state
04:54 which was considered a downside of webgl
04:57 the web GPU API is also a little faster
04:59 because it's a wrapper around the more
05:01 modern apis Vulcan directex and metal
05:05 early benchmarks by the Safari team
05:06 showed that web GPU can draw triangles 2
05:10 to eight times faster than webg the
05:12 second part running computations on the
05:14 GPU is a real game changer what this
05:16 means is that you can create and run
05:18 compute shaders directly from the
05:20 browser and in case you didn't know
05:22 running code in a compute Shader can be
05:24 1,000 to 10,000 times faster than
05:27 running it on the CPU
05:31 I know that was a lot of information to
05:33 process so let's do a quick recap web
05:35 GPU allows you to access the graphics
05:37 card directly from the web browser using
05:39 JavaScript or even outside of a browser
05:42 in programming languages like C++ or
05:44 Russ web GPU can be 2 to eight times
05:47 faster than webgo because it interfaces
05:49 with more modern apis like DirectX
05:51 Vulcan and metal webgpu is easier to
05:55 maintain than webg because its
05:57 architecture is also more modern and
05:58 does not requ require the use of a
06:00 global State and finally web GPU gives
06:03 you the ability to run arbitrary
06:05 computations in parallel with compute
06:09 shaders web GPU is the future of
06:12 Graphics development in industries that
06:14 can get by with 80 to 90% performance of
06:17 native apps the best real world example
06:20 is figma the story starts in 2011 when
06:23 webgl was still in its infancy and Evan
06:25 Wallace started creating demos with it I
06:27 mean just look at this webgl water demo
06:29 he made as a college student after
06:31 toying with webgl Evan quickly
06:33 understood its significance and teamed
06:35 up with Dylan field to launch figma
06:38 figma is a web-based design tool that
06:40 built a very complex rendering engine on
06:43 top of webgl figma became the fastest
06:45 growing design company of the last
06:47 decade Adobe noticed figma's success and
06:50 even tried to acquire it for $20 billion
06:53 a price that was 50 times figma's yearly
06:57 recurring Revenue at the time this type
06:59 of of deal was unheard of to the relief
07:01 of many figma users that deal was
07:03 blocked by antitrust Regulators stories
07:06 like this show the importance of webgl
07:08 and how it helped a small startup like
07:10 figma bring fear to a decades old tech
07:13 company with a market valuation of $250
07:17 billion figma is sure to be at the
07:19 Forefront of the transition from webgl
07:22 to web GPU and for that reason you can
07:23 be 100% sure that adobe will invest in
07:26 web GPU as well fun fact the best
07:28 resource for learning web GPU with C++
07:31 is created by a research scientist who
07:35 Adobe another industry in which web GPU
07:38 will play a big role in is computer AED
07:40 design or CAD specifically in bringing
07:43 complicated software like solid works or
07:45 AutoCAD to the web John H was a player
07:48 and instructor in mit's blackjack team
07:51 the same Blackjack team that inspired
07:53 the movie 21 and documentary series
07:56 Breaking Vegas he used the $1 million he
07:58 won in in Vegas to start solid works in
08:01 1993 solid works ended up becoming so
08:04 popular in the cad industry that it got
08:06 acquired by dult systems for 300 million
08:09 in 1997 14 years later in 2011 webgl was
08:14 released and perhaps by pure chance Jon
08:18 left assault systems that same year that
08:21 was also the same year that John
08:23 co-founded on shape a cloud-based 3D CAD
08:27 software built on top of webgl
08:29 it also did well for itself and
08:31 eventually got acquired for $470 million
08:35 I'm not saying that a web-based CAD
08:37 software like on shape will replace
08:39 AutoCAD or solid works in the next 1 to
08:41 2 years but at the same time you can
08:44 never be too sure about anything in the
08:46 tech industry for that reason I'm
08:48 certain that Autodesk and assault
08:50 systems and any other CAD designed
08:52 company will heavily invest in making
08:55 more of their software webbased using
09:01 medical education has remained stagnant
09:03 using 2D diagrams for hundreds of years
09:07 since its release in 2011 webgl has
09:10 already made a huge impact in bringing
09:12 healthtech to the 21st century companies
09:15 like biodigital have used webgo to
09:17 create 3D web platforms that visualize
09:20 the human body in various ails these 3D
09:23 models Empower students Frontline
09:25 workers and patients to understand
09:27 diseases and various treatment options
09:29 at a deeper level transitioning to web
09:31 GPU will allow these companies to
09:33 deliver a better experience which will
09:36 further modernize the health tech
09:39 industry another company heavily
09:41 invested in web GPU success is Google
09:44 Chrome has over 60% market share amongst
09:47 web browsers and making it more powerful
09:49 will certainly help Google sell more ads
09:51 Google also has a huge mobile market
09:53 share and it just released web GPU for
09:56 Android 12 last week and don't forget
09:58 about apps like Google gole maps and
09:59 Google Earth which currently run on
10:01 webgl you can be certain that these apps
10:03 will also benefit from
10:07 webgpu being that every single company
10:10 is now trying to be the next innovator
10:12 in AI I thought I'd include a section
10:14 about how webgpu has played a role in
10:16 this space I recently stumbled upon web
10:18 GPT a large language model that runs
10:21 directly on Chrome using web GPU this is
10:24 an important application of web GPU
10:27 because it allows llms to run in a
10:29 browser completely offline this is
10:31 essential in areas where internet
10:33 connection is difficult to sustain this
10:35 project hit the front page of Hacker
10:37 News got 3K stars on GitHub and its
10:39 creator a 19-year-old college student
10:42 got picked up by open AI soon after safe
10:45 to say that open aai will be looking
10:47 into the use of web GPU and since open
10:49 aai combined with Microsoft is an
10:52 existential risk for Google you can bet
10:54 that Google will also be looking into
10:56 the use of web GPU for AI and ml
10:59 purposes Apple struggled in the AI and
11:01 ml space for the better part of a decade
11:03 with its Voice assistance Theory it
11:05 won't make the same mistake twice Apple
11:07 will certainly be looking into the
11:09 applications of web GPU in Safari and
11:12 maybe even their Vision Pro
11:15 headsets web GPU will also be essential
11:18 for making Graphics programming more
11:20 accessible I say this because Shader toy
11:22 a website focused on writing webgl
11:24 shaders has been influential in the
11:26 computer Graphics Community Shader toys
11:28 creators Inigo kilas and Paul jeremias
11:31 received the ACM sigraph practitioner
11:34 award in 2022 because shadertoy helps
11:37 tens of thousands of researchers
11:39 Educators and artists see and build on
11:42 each other's work in a 2017 GDC talk
11:45 Shan Murray creator of No Man's Sky said
11:48 that inigo's tutorials on noise
11:50 functions and fractional Brownian motion
11:52 were essential for building the
11:54 procedural world generation of No Man's
11:56 Sky let me rephrase that the creat
11:58 creator of a game that sold 10 million
12:01 copies and generated over half a billion
12:04 dollars in sales said that inigo's work
12:07 on Shader toy was essential given that
12:09 webgpu is webgl successor it's safe to
12:12 say that a website for writing webgpu
12:14 shaders will have a similar effect on
12:17 making Graphics programming more
12:20 accessible now that you see the power
12:23 and influence of web Graphics you may be
12:25 wondering how to get started learning
12:27 web GPU fortunately there are two good
12:29 resources to follow both made by Google
12:32 Engineers who work on web GPU the first
12:35 is Brandon Jones's Google Cod laab and
12:37 the second is gregman webgpu
12:40 fundamentals. org both of these
12:41 resources go over the entire process of
12:44 creating a webgpu app from scratch I'd
12:47 recommend starting with the Google code
12:49 lab because it's something you can
12:53 weekend one thing to remember is that
12:55 web GPU is still a new technology it's
12:58 better than webg in many ways but at the
13:00 same time it will never reach the
13:01 popularity of everyday Frameworks like
13:03 reactjs or node it's also important to
13:06 note that web GPU doesn't support all
13:08 the latest Graphics improvements like
13:09 Ray tracing or mesh shaders yet
13:12 nonetheless I'm very optimistic about
13:14 webgpu most companies that use webgl
13:16 will transition to webgpu in the coming
13:18 years webgpu will help bring more
13:21 complex Technologies made by big tech
13:23 companies like Adobe and Autodesk to the
13:25 web similar to how webg helped companies
13:28 like MMA and on shape I also believe
13:30 that web GPU will become the standard
13:33 Graphics API for Native apps that don't
13:35 require maximum performance like video
13:37 games this is because making
13:39 crossplatform native apps in C++
13:41 requires the developer to create three
13:44 separate backends interfacing with metal
13:46 Vulcan and directex web GPU directly
13:49 solves this problem I'm curious what you
13:51 guys think do you think that web GPU
13:52 will largely replace the usage of metal
13:54 Vulcan and direct X are you learning
13:56 about it in your free time already are
13:57 you more interested in the web or native
14:00 applications of web GPU I'd love to hear
14:02 your thoughts on anything related to web
14:04 GPU down in the comments below thanks
14:06 for watching and I'll catch you guys
