Orillusion-3D引擎开源社区
WebGPU小白入门（三）：顶点插槽&资源绑定
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区为了让大家更好的理解和使用即将开源的WebGPU引擎，Orillusion的工程师们为大家准备了一系列的WebGPU课程！
上节课我们介绍了如何绘制一个WebGPU三角形，并且掌握WebGPU 在浏览器中运行的架构，了解整个 WebGPU 绘制的基本流程，初始化device，创建渲染管线，录制渲染通道。每一步中都对应一些常用的API。
本期视频，我们将介绍如何利用顶点插槽和资源绑定来实现动态设置Vertex Shader的顶点数据，以及Fragment Shader中的颜色信息。在浏览器端通过UI改变三角形的状态。
小小的三角形，大大的知识体系，赶快学起来吧！
https://www.bilibili.com/video/BV13u411v7nN/?vd_source=1fa2fb264a953f5311ffb73685c06d7f
相关推荐
webgpu-trial:WebGPU试用
网络试用 在Chrome Canary上通过chrome：// flags打开#enable-unsafe-webgpu 链接
webgpu-test:测试WebGPU
Web图形API测试 实时页面位于 。 此项目使用2020年2月左右在Chrome Canary中实现的WebGL，WebGL 2.0和WebGPU渲染场景。该用途主要是对我有教育意义，我想了解WebGPU的当前状态，但我还想创建一个页面将允许在API之间进行简单的比较和分析。 每个API的渲染器均从glTF文件加载资源，并使用每个API的最佳做法来渲染资源（无扩展名）。 在几何形状和材质方面，场景被选择为有趣且相当真实的场景，但是对于许多现代GPU而言，它并不是特别具有挑战性，因此不要期望看到渲染器之间的帧率差异。 另外，由于场景是相同的，并且着色器在渲染器之间大致相同，因此花费的GPU时间可能大致相同。 值得一看的是，每个API在JavaScript主线程上花费多少时间来提交命令，这就是默认情况下左上角的stats计数器配置为显示的时间。 即使如此，值得注意的是，这是每个API的
webgpu-wgsl-hello-triangle:如何使用WebGPU着色语言使用WebGPU渲染三角形的示例-“ Hello world！” 图形学
WebGPU / WGSL三角形您好！ 如何使用WebGPU阴影语言-“ Hello World！”使用WebGPU渲染三角形的示例。 图形学。 它能做什么？ 如果您的浏览器支持WebGPU和WGSL ，则应该可以看到一个灰色的正方形，中间有一个绿色的三角形。 就是这样。 实时示例： : WebGPU和WGSL正在开发中！ 请注意， 和规范尚未最终确定，实现方式也在发生变化！ 访问以检查当前状态。 把事情简单化！ WebGPU是一个低级API，因此它是“ Hello World！”。 不能是单线的，但是此回购协议应尽可能地简单。 只有两个文件：一个用于HTML，一个用于JavaScript-没有Node.js，Weback等。 是否可以进一步简化代码？ 教我如何！ :) 测试结果（2021-03-25） 在Chrome Canary v91.0.4457.2 x64 Wi
:smiling_face_with_sunglasses:围绕WebGPU生态系统的令人敬畏的事物列表。- mikbry / awesome-webgpu
:smiling_face_with_sunglasses:围绕WebGPU生态系统的令人敬畏的事物列表。- mikbry / awesome-webgpu-源码
webgpu-clustered-shading:个人实验项目，用于使用WebGPU实现聚类着色
WebGPU群集正向着色 实况页面位于 。 该项目使用WebGPU实现了一个简单的群集前向着色渲染器。 我开发它的主要目标是学习更多有关该技术和一些相关技术（如计算着色器）的知识，用WebGPU / WGSL实现一些不平凡的事情以识别错误，并演示一个有趣的WebGPU用例对于WebGL来说这是不切实际的。 尽管该技术旨在提高性能，但优化并不是我的首要任务，因此可以很容易地针对实际用例对该代码进行改进。 也就是说，它很好地证明了群集阴影与更幼稚的照明方法相比可观的性能优势。 要测试WebGPU渲染器，请在Windows或MacOS上使用Chrome Canary，导航至about：标志，然后打开“不安全的WebGPU”标志。 包含WebGL 2.0渲染器以进行比较/调试，但仅实现幼稚的路径。 已知的问题 对于WebGL 2.0，仅“幼稚”路径适用。 这是有意的，我认为我不会很快尝试修
