WebGPU学习(四):Alpha To Coverage

大家好,本文学习与MSAA相关的Alpha To Coverage以及在WebGPU中的实现。

上一篇博文
WebGPU学习(三):MSAA

学习Alpha To Coverage

前置知识

介绍

开启了MSAA和Alpha To Coverage后,fragment的alpha值(fragment shader输出的颜色的alpha值)会影响该fragment对应像素的采样点是否被覆盖。

动机

参考乱弹纪录II:Alpha To Coverage




原理

覆盖检测

通过WebGPU学习(三):MSAA对MSAA原理的介绍,我们知道gpu要经过覆盖检测的步骤,来决定哪些采样点被覆盖。没有被覆盖的采样点不会进入“解析”步骤。

覆盖检测的结果是计算出每个fragment的coverage(覆盖率)。

根据乱弹纪录II:Alpha To Coverage 的说法,开启MSAA后,每个fragment带了一个新属性coverage(覆盖率),它是一个二进制的bit掩码mask。

以4X MSAA为例,每个fragment的coverage为xxxx,其中x为0或1。它的每一位对应像素的一个采样点sample,0表示该sample没被覆盖,1表示被覆盖。

所以coverage这个掩码对应了采样点的覆盖情况。

如何计算coverage

1.用户可以设置一个固定的coverage掩码,这里命名为FixedSampleMask

2.gpu检测每个像素有哪些采样点被primitive覆盖,得到该采样点的coverage掩码,这里命名为RasterizerCoverageMask

3.如果开启了Alpha To Coverage,则会将fragment的alpha值转换为coverage掩码,这里命名为AlphaCoverageMask

转换的算法可以参考乱弹纪录II:Alpha To Coverage

一个fragment的Alpha值在0~1间,它对应着一个dither mask。还是以4XMSAA为例,这个dither mask也是xxxx的形式,Alpha为0对应了0000,alpha为1对应了1111,至于中间的值的对应关系,OpenGL是交由显卡制造商决定的——其实一般就是类似[0~0.249 -> 0000, 0.25~0.499 -> 0001, 0.5~0.749 -> 0011, 0.75~0.99-> 0111]这样。

4.fragment shader可以输出该fragment的coverage掩码,这里称为FragShaderSampleMaskOutput

像素最终的coverage = FixedSampleMask & RasterizerCoverageMask & AlphaCoverageMask & FragShaderSampleMaskOutput
(“&”是逻辑与运算,如0011 & 0010 = 0010)

参考资料

乱弹纪录II:Alpha To Coverage

WebGPU实现Alpha To Coverage

暂时没有实现的sample,我们根据WebGPU规范和相关资料,分析下WebGPU如何实现Alpha To Coverage。

  • 在render pipeline descriptor中设置固定的coverage掩码FixedSampleMask和是否开启Alpha To Coverage:
dictionary GPURenderPipelineDescriptor : GPUPipelineDescriptorBase {
...
    unsigned long sampleMask = 0xFFFFFFFF;
    boolean alphaToCoverageEnabled = false;
...
};

我们注意到sampleMask是unsigned long类型,它是32位的,而coverage应该是二进制的(如4X MSAA的coverage是4位的二进制),所以这里是进行了进制转换。

举例来说:
对于4X MSAA,如果设置sampleMask为0x1(十六进制),则它转换为二进制是0001;
如果设置sampleMask为0x3,则它转换为二进制是0010

  • 可以在fragment shader中设置输出的coverage掩码FragShaderSampleMaskOutput

根据Investigation: Multisample Coverage,我们知道Vulkan->SPIR-V的fragment shader支持内置的SampleMask变量。

因为Chrome实现的WebGPU也使用SPIR-V作为shader编译后的字节码,所以WebGPU在这点上应该与Vulkan类似。

我没有搜索到SPIR-V中关于SampleMask的详细资料,但是考虑到Chrome实现的WebGPU使用GLSL 4.5,所以我们可以看下它关于gl_SampleMask的说明

Name
gl_SampleMask — specifies the sample coverage mask for the current fragment
Declaration
out int gl_SampleMask[] ;

我们看到gl_SampleMask的每个元素的类型是32位的,所以也进行了进制转换。

又因为它是数组,所以它支持coverage为超过32位的二进制(如支持64X MSAA)

用代码来说明:

//in fragment shader

gl_SampleMask[0] = 1;   //对于4X MSAA来说,相当于设置该fragment的coverage为0001
//in fragment shader

gl_SampleMask[0] = 2;

gl_SampleMask[1] = 1;   //对于64X MSAA来说,可能相当于设置该fragment的coverage为000...1000...10 (前面的000...1有32位,后面的000...10有32位) (我不能确定这是否正确!)
  • 如果开启了Alpha To Coverage,则不能在fragment shader中输出coverage掩码
  • 如果开启了Alpha To Coverage,将alpha转换为掩码的算法在不同的浏览器中不一样

参考资料

Investigation: Multisample Coverage
Minutes for GPU Web meeting 2019-04-29
OpenGL->gl_SampleMask

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

时间: 2024-10-17 03:02:12

WebGPU学习(四):Alpha To Coverage的相关文章

WebGPU学习(三):MSAA

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

WebGPU学习系列目录

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

Direct-X学习笔记--Alpha颜色混合

Alpha混合技术是灰常有用的东东.待我好好学习一下. 一.简介 首先看一下Alpha通道,Alpha通道是计算机中存储图片透明度信息的通道,它是一个8位灰度的通道,用256级灰度记录图像中的透明信息,定义透明,不透明,半透明等,其中黑色表示完全透明,白色表示不透明,灰色为半透明. 如果不用Alpha混合,我们绘制图形的颜色总是替换当前颜色缓冲区中存在的颜色,这样后面的物体总是覆盖在原有的物体上.但是当想要绘制类似于玻璃.水等具有透明效果的物体时,这种方法显然满足不了要求.通过定义一个表示物体半

deep learning学习(四) 逻辑斯蒂(logistic)回归深入理解和matlab程序求参数

第一节中说了,logistic 回归和线性回归的区别是:线性回归是根据样本X各个维度的Xi的线性叠加(线性叠加的权重系数wi就是模型的参数)来得到预测值的Y,然后最小化所有的样本预测值Y与真实值y'的误差来求得模型参数.我们看到这里的模型的值Y是样本X各个维度的Xi的线性叠加,是线性的. Y=WX (假设W>0),Y的大小是随着X各个维度的叠加和的大小线性增加的,如图(x为了方便取1维): 然后再来看看我们这里的logistic 回归模型,模型公式是:,这里假设W>0,Y与X各维度叠加和(这里

alpha to coverage

alpha to coverage 在游戏中,经常使用带有半透明信息纹理的多边形模型来模拟复杂的物体,例如,草.树叶.铁丝网等.如果使用真正的模型,一颗边缘参差不齐的小草可能就要消耗掉几百个多边形:然而采用透明纹理,可以只用2-3个多边形就解决了. 然而,当使用这种有半透明信息的纹理时候,它的不透明和透明部分的边界线上,常常会出现难看的锯齿.采用半透明混合技术可以解决这个问题,但是它需要把场景中所有这类物体按照由远到近的顺序来绘制,才能保证它们的遮挡关系是正确的,这会给CPU带来很大的压力,并不

nodejs学习四 Node.js NPM

什么是NPM? 不知道大家注意没有,windows平台下的Node.js安装包大小才区区4M多,真可以用短小精悍来形容它,作为一种编程语言,像java一个SDK 就几十M,为什么node.js的运行环境这么小呢?这其中的微妙之处在于,它拥有一个庞大的第三方软件库. 在Node本身提供的包(原生)中没有我们要实现的功能模块的时候,我们可以去寻找下是否已经有人实现了这种功能.毕竟重复造轮子这种事情,很多人都不想干. 去哪里寻找我们想要的包呢?如果你还不知道报的名字,你可以去https://www.n

ZigBee学习四 无线+UART通信

ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique message ID (counter) afAddrType_t GenericApp_DstAddr; //unsigned char uartbuf[128];/********************************************************************** L

Spark学习四:网站日志分析案例

Spark学习四:网站日志分析案例 标签(空格分隔): Spark Spark学习四网站日志分析案例 一创建maven工程 二创建模板 三日志分析案例 一,创建maven工程 1,执行maven命令创建工程 mvn archetype:generate -DarchetypeGroupId=org.scala-tools.archetypes -DarchetypeArtifactId=scala-archetype-simple -DremoteRepositories=http://scal

Beaglebone Back学习四(GPIO实验)

GPIO Beaglebone Back开发板引出了92个引脚,其中只有65个GPIO口可通过配置使用,由于引脚具有"复用"的特性,大约每个引脚有8种工作模式(Beagle System Reference Manual),默认情况下,设为Mode7.由于P8扩展部分的引脚功能相对简单,复用不多,故项目功能复杂时,最好选择P8上的GPIO口. 对GPIO口的操作,主要有三个步骤 1 选择GPIO口根据以下两表,确定使用那个GPIO口,该表也可以在BBB_SRM文件中找到. (1)拉电流