WebGPU学习(三):MSAA

大家好,本文学习MSAA以及在WebGPU中的实现。

上一篇博文
WebGPU学习(二): 学习“绘制一个三角形”示例

下一篇博文
WebGPU学习(四):Alpha To Coverage

学习MSAA

介绍

MSAA(多重采样抗锯齿),是硬件实现的抗锯齿技术

动机

参考深入剖析MSAA

具体到实时渲染领域中,走样有以下三种:
1.几何体走样(几何物体的边缘有锯齿),几何走样由于对几何边缘采样不足导致。
2.着色走样,由于对着色器中着色公式(渲染方程)采样不足导致。比较明显的现象就是高光闪烁。
3.时间走样,主要是对高速运动的物体采样不足导致。比如游戏中播放的动画发生跳变等。

这里讨论几何体走样。

如上图所示,我们要绘制一个三角形。它由三个顶点组成,红线范围内的三角形是片元primitive覆盖的区域。
primitive会被光栅化为fragment,而一个fragment最终对应屏幕上的一个像素,如图中的小方块所示。

gpu会根据像素中心的采样点是否被pritimive覆盖来判断是否生成该fragment和执行对应的fragment shader。

图中红色的点是被覆盖的采样点,它所在的像素会被渲染。

下图是最终渲染的结果,我们看到三角形边缘产生了锯齿:

原理

MSAA通过增加采样点来减轻几何体走样。
它包括4个步骤:
1.针对采样点进行覆盖检测
2.每个被覆盖的fragment执行一次fragment shader
3.针对采样点进行深度检测和模版检测
4.解析(resolve)

下面以4X MSAA为例(每个像素有4个采样点),说明每个步骤:

1.针对采样点进行覆盖检测

gpu会计算每个fragment的coverage(覆盖率),从而得知对应像素的每个采样点是否被覆盖的信息。

coverage相关知识可以参考WebGPU学习(四):Alpha To Coverage -> 学习Alpha To Coverage -> 原理

这里为了简化,我们只考虑通过“检测每个像素有哪些采样点被primitive覆盖”来计算coverager:

如上图所示,蓝色的采样点是在三角形中,是被覆盖的采样点。

2.每个被覆盖的fragment执行一次fragment shader

如果一个像素至少有一个采样点被覆盖,那么会执行一次它对应的fragment(注意,只执行一次哈,不是执行4次)(它所有的输入varying变量都是针对其像素中心点而言的,所以计算的输出的颜色始终是针对该栅格化出的像素中心点而言的),输出的颜色保存在color buffer中(覆盖的采样点都要保存同一个输出的颜色)

3.针对采样点进行深度检测和模版检测

所有采样点的深度值和模版值都要存到depth buffer和stencil buffer中(无论是否被覆盖)。

被覆盖的采样点会进行深度检测和模版检测,通过了的采样点会进入“解析”步骤。

那为什么要保存所有采样点的深度和模版值了(包括没有被覆盖的)?因为它们在深度检测和模版检测阶段决定所在的fragment是否被丢弃:

那是因为之后需要每个sample(采样点)都执行一下depth-test,以确定整个fragment是否要流向(通往缓冲区输出的)流水线下一阶段——只有当全部fragment-sample的Depth-Test都Fail掉的时候,才决定抛弃掉这个fragment(蒙版值stencil也是这样的,每个sample都得进行Stencil-Test)。

4.解析

什么是解析?

根据深入剖析MSAA 的说法:

像超采样一样,过采样的信号必须重新采样到指定的分辨率,这样我们才可以显示它。
这个过程叫解析(resolving)。

根据乱弹纪录II:Alpha To Coverage 的说法:

在把所有像素输出到渲染缓冲区前执行Resolve以生成单一像素值。
。。。。。。
也该是时候谈到一直说的“计算输出的颜色”是怎么一回事了。MultiSample的Resolve阶段,如果是屏幕输出的话这个阶段会发生在设备的屏幕输出直前;如果是FBO输出,则是发生在把这个Multisample-FBO映射到非multisample的FBO(或屏幕)的时候(见[多重采样(MultiSample)下的FBO反锯齿] )。Resolve,说白了就是把MultiSample的存储区域的数据,根据一定法则映射到可以用于显示的Buffer上了(这里的输出缓冲区包括了Color、Depth或还有Stencil这几个)。Depth和Stencil前面已经提及了法则了,Color方面其实也简单,一般的显卡的默认处理就是把sample的color取平均了。注意,因为depth-test等Test以及Coverage mask的影响下,有些sample是不参与计算的(被摒弃),例如4XMSAA下上面的0101,就只有两个sample,又已知各sample都对应的只是同一个颜色值,所以输出的颜色 = 2 * fragment color / 4 = 0.5 * fragment color。也就是是说该fragemnt最终显示到屏幕(或Non-MS-FBO)上是fragment shader计算出的color值的一半——这不仅是颜色亮度减半还包括真·透明度值的减半。

我的理解:
“解析”是把每个像素经过上述步骤得到的采样点的颜色值,取平均值,得到这个像素的颜色值。


如上图右边所示,像素的2个采样点进入了“解析”,最终该像素的颜色值为 0.5(2/4) * 原始颜色值

经过上述所有步骤后,最终的渲染结果如下:

总结

MSAA能减轻几何体走样,但会增加color buffer、depth buffer、stencil buffer开销。

参考资料

深入剖析MSAA
乱弹纪录II:Alpha To Coverage
Anti Aliasing

WebGPU实现MSAA

有下面几个要点:

  • 能够查询最大的采样个数sample count

目前我没找到查询的方法,但至少支持4个采样点

参考 Investigation: Multisampled Render Targets and Resolve Operations

We can say that 4xMSAA is guaranteed on all WebGPU implementations, and we need to provide APIs for queries on whether we can create a multisampled texture with given format and sample count.

  • 设置sample count
dictionary GPURenderPipelineDescriptor : GPUPipelineDescriptorBase {
...
    unsigned long sampleCount = 1;
...
};
dictionary GPUTextureDescriptor : GPUObjectDescriptorBase {
...
    unsigned long sampleCount = 1;
...
};

我们在WebGPU 规范中看到render pipeline descriptor和texture descriptor可以设置sampleCount。

  • 设置resolveTarget

在“解析”步骤中,需要重新采样到指定的分辨率:

过采样的信号必须重新采样到指定的分辨率,这样我们才可以显示它

所以我们应该设置color的resolveTarget(depth、stencil不支持resolveTarget),它包含“分辨率”的信息。

我们来看下WebGPU 规范:

dictionary GPURenderPassColorAttachmentDescriptor {
    required GPUTextureView attachment;
    GPUTextureView resolveTarget;

    required (GPULoadOp or GPUColor) loadValue;
    GPUStoreOp storeOp = "store";
};

resolveTarget在render pass colorAttachment descriptor中设置,它的类型是GPUTextureView。

而GPUTextureView是从GPUTexture得来的,我们来看下GPUTexture的descriptor的定义:

dictionary GPUExtent3DDict {
    required unsigned long width;
    required unsigned long height;
    required unsigned long depth;
};
typedef (sequence<unsigned long> or GPUExtent3DDict) GPUExtent3D;

dictionary GPUTextureDescriptor : GPUObjectDescriptorBase {
...
  required GPUExtent3D size;
...
};

GPUTextureDescriptor的size属性有width和height属性,只要texture对应了屏幕大小,我们就能获得屏幕“分辨率”的信息(depth设为1,因为分辨率只有宽、高,没有深度)。

实现sample

我们对应到sample来看下。

打开webgl-samplers->helloTriangleMSAA.ts文件。

代码基本上与我们上篇文章学习的webgl-samplers->helloTriangle.ts差不多,

我们看下创建render pipeline代码

    const sampleCount = 4;

    const pipeline = device.createRenderPipeline({
    ...
      sampleCount,
    });

这里设置了sample count为4

我们看下frame函数->render pass descrptor代码

      const renderPassDescriptor: GPURenderPassDescriptor = {
        colorAttachments: [{
          attachment: attachment,
          resolveTarget: swapChain.getCurrentTexture().createView(),
          ...
        }],
      };
  • 设置attachment为多重采样的texture的view

该texture的创建代码为:

    const texture = device.createTexture({
      size: {
        width: canvas.width,
        height: canvas.height,
        depth: 1,
      },
      sampleCount,
      format: swapChainFormat,
      usage: GPUTextureUsage.OUTPUT_ATTACHMENT,
    });
    const attachment = texture.createView();

注意:texture的sampleCount应该与render pipeline的sampleCount一样,都是4

  • 设置resolveTarget为swapChain对应的view

swapChain.getCurrentTexture()获得的texture的大小是与屏幕相同,所以它包含了屏幕分辨率的信息。

参考资料

helloTriangleMSAA.ts
Investigation: Multisampled Render Targets and Resolve Operations

原文地址:https://www.cnblogs.com/chaogex/p/12003722.html

时间: 2024-10-20 15:24:35

WebGPU学习(三):MSAA的相关文章

WebGPU学习(四):Alpha To Coverage

大家好,本文学习与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

WebGPU学习系列目录

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

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

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

算法学习三阶段

?? 第一阶段:练经典经常使用算法,以下的每一个算法给我打上十到二十遍,同一时候自己精简代码, 由于太经常使用,所以要练到写时不用想,10-15分钟内打完,甚至关掉显示器都能够把程序打 出来. 1.最短路(Floyd.Dijstra,BellmanFord) 2.最小生成树(先写个prim,kruscal 要用并查集,不好写) 3.大数(高精度)加减乘除 4.二分查找. (代码可在五行以内) 5.叉乘.判线段相交.然后写个凸包. 6.BFS.DFS,同一时候熟练hash 表(要熟,要灵活,代码要

Jetty学习三:配置概览-需要配置什么

上一节讲述了怎么配置Jetty,这节将告诉你使用Jetty你需要配置些什么. 配置Server Server实例是Jetty服务端的中心协调对象,它为所有其他Jetty服务端组件提供服务和生命周期管理.在标准Jetty发布中,核心的服务端配置是在etc/jetty.xml文件中,你也能在其中包含其他服务端配置,可以包括: 1)ThreadPool Server实例提供了一个线程池,你可以在etc/jetty.xml中配置最大线程数和最小线程数. 2)Handlers Jetty服务端只能有一个H

ZigBee学习三 UART通信

ZigBee学习三 UART通信 本实验只对coordinator.c文件进行改动就可以实现串口的收发. 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique message ID (counter) afAddrType_t GenericApp_DstAddr; unsigned char uartbuf[128];/**************************************************

Spark学习三:Spark Schedule以及idea的安装和导入源码

Spark学习三:Spark Schedule以及idea的安装和导入源码 标签(空格分隔): Spark Spark学习三Spark Schedule以及idea的安装和导入源码 一RDD操作过程中的数据位置 二Spark Schedule 三Idea导入spark源码 一,RDD操作过程中的数据位置 [hadoop001@xingyunfei001 spark-1.3.0-bin-2.5.0]$ bin/spark-shell --master local[2] val rdd = sc.t

mongodb学习(三)

菜鸟啊...先吐槽一下自己 一 准备工作: 1.安装服务端: 去官网下载 http://www.mongodb.org/downloads 其实也自带了客户端 shell 2.安装客户端: mongoVUE http://blog.mongovue.com/ 并不是完全免费 破解方法: http://yhv5.com/mongovue_480.html 将服务端下载下来后直接安装 我下载在D盘也安装在D盘的... 启动mongodb的服务端不需要各种命令....直接鼠标左键双击bin中的mong

c++ boost库学习三:实用工具

noncopyable 大家都知道定义一个空类的时候,它实际包含了构造函数,拷贝构造函数,赋值操作符和析构函数等. 这样就很容易产生一个问题,就是当用户调用A a(“^_^") 或者A c="^_^" 时会发生一些意想不到的行为,所以很多时候我们需要禁用这样的用法. 一种方法就是把拷贝构造函数和赋值操作符显式的定义为private,但是这样需要很多代码. 于是boost库为大家提供了一个简单的方法:只需要将类继承于noncopyable就可以了. #include "