WebGPU[1] 三角形

【WebGPU[1] 三角形】的更多相关文章

代码见: https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/01-triangle 如果本篇的代码不能跑了,请联系我或自己看看文档试试修改. 2021年3月31日入口:navigator.gpu WebGL1 或 WebGL2 是从 canvas.getContext('webgl') 这样获取一个上下文对象来进行一切操作的. 而 WebGPU 则直接从浏览器对象中获取一个附件一样的东西:navigator.gp…

WebGPU学习（二）: 学习“绘制一个三角形”示例

大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 准备Sample代码克隆webgl-samplers Github Repo到本地. (备注:当前的version为0.0.2) 实际的sample代码在src/examples/文件夹中,是typescript代码写的: 学习helloTriangle.ts 打开helloTriangle.ts文件,我们来看下init函数的内容. 首先是shader代码 const vertexShaderG…

WebGPU[4] 纹理三角形

代码见:https://github.com/onsummer/my-dev-notes/tree/master/webgpu-Notes/04-texture-triangle 原创,发布日 2021年4月5日,@秋意正寒.若代码失效请留言,或自行到官网根据最新 API 修改. 数据预览 NDC 坐标和纹理坐标(原点.朝向.值域)基础不再补充. 0.1 VBO const vbodata = new Float32Array([ -1.0, -1.0, 0.0, 1.0, 0.0, 1.0,…

WebGPU图形编程（3）：构建三角形图元<学习引自徐博士教程>

一.首先修改你的index.html文件请注意主要在html页面修改添加的是需要加选择项:"triangle-list"和"triangle-strip",如果你不理解这两个关键词,移步查看webgpu文档:https://www.orillusion.com/zh/webgpu.html#primitive-state 的第10.3.2节Primitive state查看原始状态可以创建哪些图元. 1 <!DOCTYPE html> 2 <he…

WebGPU图形编程（2）：构建一个单色的三角形<学习引自徐博士教程>

非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习这项技术的前景会更加光明. 本节来创建单色三角形,并通过输入color四元数组数值对三角形颜色进行改变. 一.使用搭建好的开发环境进行所有软件包的安装使用上一章节搭建好的所有配置文件,先进行一步所有软件包的安装(这是徐博士教程里的步骤),为的是产生node_modules文件夹内的所有配置文件,但…

WebGPU学习（三）:MSAA

大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例下一篇博文 WebGPU学习(四):Alpha To Coverage 学习MSAA 介绍 MSAA(多重采样抗锯齿),是硬件实现的抗锯齿技术动机参考深入剖析MSAA : 具体到实时渲染领域中,走样有以下三种: 1.几何体走样(几何物体的边缘有锯齿),几何走样由于对几何边缘采样不足导致. 2.着色走样,由于对着色器中着色公式(渲染方程)采样不足导致.比较明显的现象…

WebGPU学习（六）：学习“rotatingCube”示例

大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研学习rotatingCube.ts 我们已经学习了"绘制三角形"的示例,与它相比,本示例增加了以下的内容: 增加一个uniform buffer object(简称为ubo),用于传输model矩阵view矩阵projection矩阵的结果矩阵(简称为mvp矩阵),并在每帧被更新设置顶点…

WebGPU学习系列目录

介绍大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习WebGPU WebGPU更好地支持多线程 WebGPU支持compute shader,从而让程序员能利用GPU实现很多优化 WebGPU与WebGL2的区别很大,两者不容易兼容.如果要从WebGL1升级,最好直接升级到WebGPU,一劳永逸 WebGPU是标准,各大浏览器都会支持.不像WebGL…

WebGPU学习（十一）：学习两个优化：“reuse render command buffer”和“dynamic uniform buffer offset”

大家好,本文介绍了"reuse render command buffer"和"dynamic uniform buffer offset"这两个优化,以及Chrome->webgpu-samplers->animometer示例对它们进行的benchmark性能测试. 上一篇博文: WebGPU学习(十):介绍"GPU实现粒子效果" 学习优化:reuse render command buffer 提出问题每一帧经过下面的步骤进行…

WebGPU学习（十）：介绍“GPU实现粒子效果”

大家好,本文介绍了"GPU实现粒子效果"的基本思想,并推荐了相应的学习资料. 本文学习webgpu-samplers->computeBoids示例,它展示了如何用compute shader实现粒子效果,模拟鸟群的行为. 上一篇博文: WebGPU学习(九):学习"fractalCube"示例最终渲染结果: 为什么不在CPU端实现粒子效果? 虽然在CPU端实现会更灵活和可控,但如果粒子数量很大(如上百万),且与场景有交互,则最好在GPU端实现. 示例的实现…