Scott and CJ sit down live at JSNation NYC with Iwo Plaza, creator of TypeGPU, to dig into how WebGPU is unlocking a new wave of graphics and compute power on the web. They chat about shader authoring in TypeScript, the future of GPU-powered AI in the browser, and what it takes to build a killer developer-friendly graphics library.
<h3 class="code-line">
<a></a>Show Notes</h3>
<ul>
<li class="has-line-data">
<a href="#t=00:00">00:00</a> Welcome to Syntax!</li>
<li class="has-line-data">
<a href="#t=00:32">00:32</a> What is TypeGPU? High-level overview and why it exists</li>
<li class="has-line-data">
<a href="#t=01:20">01:20</a> WebGPU vs WebGL – the new era of GPU access on the web</li>
<li class="has-line-data">
<a href="#t=01:47">01:47</a> Why shader languages are hard + making them accessible</li>
<li class="has-line-data">
<a href="#t=02:24">02:24</a> Iwo’s background in C++, OpenGL, and discovering JS</li>
<li class="has-line-data">
<a href="#t=03:06">03:06</a> Sharing graphics work on the web vs native platforms</li>
<li class="has-line-data">
<a href="#t=03:29">03:29</a> WebGPU frustrations that inspired TypeGPU</li>
<li class="has-line-data">
<a href="#t=04:17">04:17</a> Making GPU–CPU data exchange easier with Zod-like schemas</li>
<li class="has-line-data">
<a href="#t=05:01">05:01</a> Writing shaders in JavaScript + the unified type system</li>
<li class="has-line-data">
<a href="#t=05:38">05:38</a> How the “use_gpu” directive works under the hood</li>
<li class="has-line-data">
<a href="#t=06:05">06:05</a> Building a compiler that turns TypeScript into shader code</li>
<li class="has-line-data">
<a href="#t=07:00">07:00</a> Type inference, primitives, structs, and TypeScript magic</li>
<li class="has-line-data">
<a href="#t=08:21">08:21</a> Leveraging existing tooling via Unplugin + bundler integration</li>
<li class="has-line-data">
<a href="#t=09:15">09:15</a> How TypeGPU extracts ASTs and generates TinyEST metadata</li>
<li class="has-line-data">
<a href="#t=10:10">10:10</a> Runtime shader generation vs build-time macros</li>
<li class="has-line-data">
<a href="#t=11:07">11:07</a> How the AST is traversed + maintaining transparency in output</li>
<li class="has-line-data">
<a href="#t=11:43">11:43</a> Example projects like Jelly Shader and community reception</li>
<li class="has-line-data">
<a href="#t=12:05">12:05</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>
</li>
<li class="has-line-data">
<a href="#t=12:30">12:30</a> Does TypeGPU replace 3JS? How it fits the existing ecosystem</li>
<li class="has-line-data">
<a href="#t=13:20">13:20</a> Low-level control vs high-level abstractions</li>
<li class="has-line-data">
<a href="#t=14:04">14:04</a> Upcoming Three.js integration – plugging TypeGPU into materials compute shaders</li>
<li class="has-line-data">
<a href="#t=15:34">15:34</a> Making GPU development more approachable</li>
<li class="has-line-data">
<a href="#t=16:26">16:26</a> Docs, examples, and the philosophy behind TypeGPU documentation</li>
<li class="has-line-data">
<a href="#t=17:03">17:03</a> Building features by building examples first</li>
<li class="has-line-data">
<a href="#t=18:13">18:13</a> Using examples as a test suite + how docs shape API design</li>
<li class="has-line-data">
<a href="#t=19:00">19:00</a> Docs as a forcing function for intuitive APIs</li>
<li class="has-line-data">
<a href="#t=20:21">20:21</a> GPU for AI – browser inference and future abstractions</li>
<li class="has-line-data">
<a href="#t=21:11">21:11</a> How AI examples inform new libraries (noise, inference, etc.)</li>
<li class="has-line-data">
<a href="#t=21:57">21:57</a> Keeping the core package small and flexible</li>
<li class="has-line-data">
<a href="#t=22:44">22:44</a> Building “TypeGPU AI”-style extensions without bloating the core</li>
<li class="has-line-data">
<a href="#t=23:07">23:07</a> The cost of AI examples and building everything from scratch</li>
<li class="has-line-data">
<a href="#t=23:41">23:41</a> Standard library design and future of the ecosystem</li>
<li class="has-line-data">
<a href="#t=24:04">24:04</a> Closing thoughts from Iwo – OSS, GPU renaissance, and encouragement</li>
<li class="has-line-data">
<a href="#t=24:34">24:34</a> Sick Picks & Shameless Plugs</li>
</ul>
<h3 class="code-line">
<a></a>Sick Picks</h3>
<ul>
<li class="has-line-data">Iwo: Perogies</li>
</ul>
<h3 class="code-line">
<a></a>Shameless Plugs</h3>
<ul>
<li class="has-line-data">Iwo: Syntax Podcast</li>
</ul>
<h3 class="code-line">
<a></a>Hit us up on Socials!</h3>
Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href="https://www.instagram.com/syntax_fm/">Instagram</a> <a href="https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href="https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a>
Wes: <a href="https://twitter.com/wesbos">X</a> <a href="https://www.instagram.com/wesbos/">Instagram</a> <a href="https://www.tiktok.com/@wesbos">Tiktok</a> <a href="https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href="https://www.threads.net/@wesbos">Threads</a>
Scott: <a href="https://twitter.com/stolinski">X</a> <a href="https://www.instagram.com/stolinski/">Instagram</a> <a href="https://www.tiktok.com/@stolinski">Tiktok</a> <a href="https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href="https://www.threads.net/@stolinski">Threads</a>
Randy: <a href="https://twitter.com/randyrektor">X</a> <a href="https://www.instagram.com/randyrektor/">Instagram</a> <a href="https://www.youtube.com/@randyrektor">YouTube</a> <a href="https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

959: TypeScript on the GPU with TypeGPU creator Iwo Plaza

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews