A graphics pipeline consists of shader stages, a pipeline layout, a render pass, and fixed-function pipeline stages. Dynamic State A dynamic pipeline state is a state that can be changed by a command buffer command during the execution of a command b…
大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的分析.这是我非常感兴趣的技术方向,也是图形学的发展方向之一.本系列后续文章会围绕这个方向进行更多的研究和实现相关的Demo. 上一篇博文: WebGPU学习(四):Alpha To Coverage 本文内容 前置知识 技术要点 并行 Multiple Queues 同步 多线程 内存管理 延迟渲染…
大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Coverage 学习MSAA 介绍 MSAA(多重采样抗锯齿),是硬件实现的抗锯齿技术 动机 参考深入剖析MSAA : 具体到实时渲染领域中,走样有以下三种: 1.几何体走样(几何物体的边缘有锯齿),几何走样由于对几何边缘采样不足导致. 2.着色走样,由于对着色器中着色公式(渲染方程)采样不足导致.比较明显的现象…
大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研 学习rotatingCube.ts 我们已经学习了"绘制三角形"的示例,与它相比,本示例增加了以下的内容: 增加一个uniform buffer object(简称为ubo),用于传输model矩阵view矩阵projection矩阵的结果矩阵(简称为mvp矩阵),并在每帧被更新 设置顶点…
大家好,本文介绍了"reuse render command buffer"和"dynamic uniform buffer offset"这两个优化,以及Chrome->webgpu-samplers->animometer示例对它们进行的benchmark性能测试. 上一篇博文: WebGPU学习(十):介绍"GPU实现粒子效果" 学习优化:reuse render command buffer 提出问题 每一帧经过下面的步骤进行…
It’s been awhile since I posted something here, and I figured I might use this spot to explain some general points about graphics hardware and software as of 2011; you can find functional descriptions of what the graphics stack in your PC does, but u…
介绍 大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习WebGPU WebGPU更好地支持多线程 WebGPU支持compute shader,从而让程序员能利用GPU实现很多优化 WebGPU与WebGL2的区别很大,两者不容易兼容.如果要从WebGL1升级,最好直接升级到WebGPU,一劳永逸 WebGPU是标准,各大浏览器都会支持.不像WebGL…
大家好,本文学习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…
大家好,本文学习与MSAA相关的Alpha To Coverage以及在WebGPU中的实现. 上一篇博文 WebGPU学习(三):MSAA 学习Alpha To Coverage 前置知识 WebGPU学习(三):MSAA 一个fragment对应一个像素 介绍 开启了MSAA和Alpha To Coverage后,fragment的alpha值(fragment shader输出的颜色的alpha值)会影响该fragment对应像素的采样点是否被覆盖. 动机 参考乱弹纪录II:Alpha T…
大家好,本文学习Chrome->webgpu-samplers->twoCubes和instancedCube示例. 这两个示例都与"rotatingCube"示例差不多.建议大家先学习该示例,再学习本文的两个示例 上一篇博文: WebGPU学习(六):学习"rotatingCube"示例 学习twoCubes.ts 该示例绘制了两个立方体. 与"rotatingCube"示例相比,该示例增加了以下的内容: 一个ubo保存两个立方体的…