https://congyuxiaoyoudao.github.io/tags/webgpu/ Recent content in WebGPU on The Only Problem's Blog Hugo -- 0.157.0 en-us Mon, 30 Jun 2025 00:00:00 +0000 https://congyuxiaoyoudao.github.io/posts/interludes/webgpu-from-scratch/ Mon, 30 Jun 2025 00:00:00 +0000 https://congyuxiaoyoudao.github.io/posts/interludes/webgpu-from-scratch/ <blockquote> <p>从导师那里听说了 WebGPU，做了点调查发现这个 API 还挺新的，正好之前只零零碎碎学了一点 OpenGL，相比于不适合人类学的 Vulkan，还是 WebGPU 显得友好一点。</p> </blockquote> <hr> <h2 id="-0x00-to-begin-with">🚩 0x00 To begin with</h2> <p>这篇文章将会包含以下内容：</p> <ul> <li><input checked="" disabled="" type="checkbox"> 什么是 WebGPU</li> <li><input checked="" disabled="" type="checkbox"> 配置 WebGPU 开发环境</li> <li><input checked="" disabled="" type="checkbox"> 第一个 WebGPU 项目：HelloTriangle！</li> </ul> <p><strong>For reference</strong>👇：</p> <ul> <li>🍪 <a href="https://webgpu.github.io/webgpu-samples/">WebGPU Samples</a> </li> <li>📖 <a href="https://gpuweb.github.io/gpuweb/">WebGPU API Spec</a> </li> <li>📖 <a href="https://www.w3.org/TR/WGSL/">WebGPU Shading Language</a> </li> <li>📺 <a href="https://www.bilibili.com/video/BV1uu411B7uq/">WebGPU小白入门（一）：如何零基础创建第一个WebGPU项目！</a> </li> <li>📖 <a href="https://codelabs.developers.google.com/your-first-webgpu-app?hl=zh-cn&amp;authuser=0#0">您的第一个 WebGPU 应用</a> </li> <li>📖 <a href="https://lil-gui.georgealways.com/">lil-gui 0.20.0</a> </li> </ul> <hr> <h2 id="0x01-认识-webgpu">0x01 认识 WebGPU</h2> <p>WebGPU 是一个由 W3C GPU 工作组制定的新的现代图形 API，用于在 Web 应用中访问 GPU 功能。</p> <p>在 WebGPU 出现之前，Web 端的图形编程应用主要采用 WebGL 和 WebGL 2，虽然它们有着跨平台能力和强大的社区支持，但架构过于古老，最新的 WebGL 2 只是封装了 2009 年 OpenGL 3.2 的实现。Khronos 也指出 WebGL 后续更新中不再引入现代 GPU 的新特性。</p>