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

上一篇博文

WebGPU学习(三):MSAA

下一篇博文

WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研

学习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

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

  1. WebGPU学习(三):MSAA

    大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Cov ...

  2. WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研

    大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...

  3. WebGPU学习系列目录

    介绍 大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习 ...

  4. SCARA——OpenGL入门学习四(颜色)

    OpenGL入门学习[四] 本次学习的是颜色的选择.终于要走出黑白的世界了~~ OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 无论哪种颜色模式,计算机都必须为每一个像素保存一些数 ...

  5. 英语学习app——Alpha发布2

    英语学习app--Alpha发布1 这个作业属这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ ...

  6. 英语学习app——Alpha发布1

    英语学习app--Alpha发布1 这个作业属这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ ...

  7. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  8. alpha to coverage

    alpha to coverage 在游戏中,经常使用带有半透明信息纹理的多边形模型来模拟复杂的物体,例如,草.树叶.铁丝网等.如果使用真正的模型,一颗边缘参差不齐的小草可能就要消耗掉几百个多边形:然 ...

  9. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. 解决本地无法访问vm虚拟机上centos7服务器中已配置好的hugo站点的问题

    一.配置VM网络连接 打开vm,找到"编辑",打开"虚拟网络编辑器" 选中下面截图中的上方为类型为"NAT模式"那一栏,然后点击下方的&qu ...

  2. csp-s模拟测试101的T3代码+注释

    因为题目过于大神所以单独拿出来说.而且既然下发std了颓代码貌似也不算可耻233 很难讲啊,所以还是写在代码注释里面吧 因为比较认真的写了不少注释,所以建议缩放到80%观看,或者拿到gedit上 1 ...

  3. StrGame

    如果先手可以控制一轮必胜或者必败,则先手必胜 如果只有必胜的方法,不能保证必败,则最后一轮的先手获得胜利,倒数第二轮的先手会被后手想办法”被胜利“从而在最后一轮成为后手,必败.倒数第三轮先手故意胜利, ...

  4. NOIP模拟 24

    连续爆炸的开端. 从这一场开始我没状态了 T1 star way to heaven 受强降雨boboQQQ影响,我一直认为这是一道和凸包有关的计算几何题 很快就弃了,除了期望没做过带实数的题,所以吓 ...

  5. JavaScript中BOM与DOM的使用

    BOM: 概念:Browser Object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象. 组成: Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对 ...

  6. 你不知道的JS系列【1】- 什么是作用域

      几乎所有的编程语言都能够储存变量,并且能在之后对这个变量值进行访问或修改,正是储存和访问变量的能力将状态带给了程序,那么,这些变量储存在哪里呢?程序需要时又是如何找到他们?这些问题说明需要一套设计 ...

  7. [spark程序]统计人口平均年龄(本地文件)(详细过程)

    一.题目描述 (1)编写Spark应用程序,该程序可以在本地文件系统中生成一个数据文件peopleage.txt,数据文件包含若干行(比如1000行,或者100万行等等)记录,每行记录只包含两列数据, ...

  8. cn_windows虚拟机配置

    1.打开“VMware”,点击“主页”,点“创建新的虚拟机”: 2.会弹出一个“新建虚拟机向导”,类型选择“典型”,点击“下一步”: 3.选择“稍后安装操作系统”,点击“下一步”: 4.选择“Micr ...

  9. 新闻实时分析系统-Flume+HBase+Kafka集成与开发

    1.下载Flume源码并导入Idea开发工具 1)将apache-flume-1.7.0-src.tar.gz源码下载到本地解压 2)通过idea导入flume源码 打开idea开发工具,选择File ...

  10. 【Luogu P1164】小A点菜

    题目原链接: Luogu 小A点菜 [解题思路] 常规的0-1背包,不过是求装满整个背包的方案数,只要把0-1背包的状态转移方程稍微改一下就行.因为要求方案数,那么把方程中的max换成sum就行. [ ...