全屏三角形,HDUtils.DrawFullScreen 方法的理解

概述

在HDRP的后处理系统中,具体来说就是 PostProcessSystem 类中,在绘制全屏后效时调用了几次 HDUtils.DrawFullScreen 方法,

在这里插入图片描述

跳转到定义发现有五个重载的方法,但是最终都是通过调用 commandBuffer.DrawProcedural 方法来实现画三角形的,具体的调用是这样的:

commandBuffer.DrawProcedural(Matrix4x4.identity, material, shaderPassId, MeshTopology.Triangles, 3, 1, properties);

传了一个单位矩阵,指定好的材质球和pass,拓扑结构是三角形(说拓扑结构有点怪怪的,应该就是图元类型即primitive吧),使用3个顶点,画1个实例,以及MaterialPropertyBlock对象,可以携带一些材质球的参数,但是 PostProcessSystem 类中的这几处调用都传的是null

csharp部分看完了,接下来看下shader的部分。可以参考FinalPass.shader,这个shader在后处理的最后一步会用到,可以通过FrameDebug找到:

在这里插入图片描述

这里只关注顶点着色方法就行,即Vert方法:

Varyings Vert(Attributes input)
{
    Varyings output;
    UNITY_SETUP_INSTANCE_ID(input);
    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(output);
    output.positionCS = GetFullScreenTriangleVertexPosition(input.vertexID);
    output.texcoord = GetFullScreenTriangleTexCoord(input.vertexID);
    return output;
}

方法里进行了两个操作:

  1. 把顶点位置转换到 clip space
  2. 计算纹理坐标

先说转换到 clip space 的操作,注意这里使用的不是常用的以_POSITION语义修饰的vertexPos,而是用 SV_VertexID 语义修饰的 vertexID,即顶点ID。因为此处是画一个三角形所以 vertexID的值分别是 0, 1, 2.

GetFullScreenTriangleVertexPosition 方法的定义在Common.hlsl文件中,恰巧 GetFullScreenTriangleTexCoord 方法也在旁边,所以一块列出来:

// Generates a triangle in homogeneous clip space, s.t.
// v0 = (-1, -1, 1), v1 = (3, -1, 1), v2 = (-1, 3, 1).
float2 GetFullScreenTriangleTexCoord(uint vertexID)
{
#if UNITY_UV_STARTS_AT_TOP
    return float2((vertexID << 1) & 2, 1.0 - (vertexID & 2));
#else
    return float2((vertexID << 1) & 2, vertexID & 2);
#endif
}

float4 GetFullScreenTriangleVertexPosition(uint vertexID, float z = UNITY_NEAR_CLIP_VALUE)
{
    float2 uv = float2((vertexID << 1) & 2, vertexID & 2);
    return float4(uv * 2.0 - 1.0, z, 1.0);
}

positionCS

根据 vertexID 的值,用 GetFullScreenTriangleVertexPosition 方法可以分别求出三角形三个顶点的clip space 位置分别是:

pos0 = float4(-1, -1, UNITY_NEAR_CLIP_VALUE, 1);
pos1 = float4(3, -1, UNITY_NEAR_CLIP_VALUE, 1);
pos2 = float4(-1, 3, UNITY_NEAR_CLIP_VALUE, 1);

简化一下,不关注zw分量,只看xy分量就变成了:

pos0 = float2(-1, -1);
pos1 = float2(3, -1);
pos2 = float2(-1, 3);


texcoord

根据 vertexID 的值,用 GetFullScreenTriangleTexCoord 方法可以求出uv坐标,分别是:
(以下值是以没有定义UNITY_UV_STARTS_AT_TOP宏的情况下算出,定义了该宏时的情况下可以自己计算下哈哈哈,道理是一样的)

uv0 = float2(0, 0);
uv1 = float2(2, 0);
uv2 = float2(0, 2);


确定屏幕范围

根据已经计算出的 positionCStexcoord 现在可以知道这个三角形的具体情况以及屏幕范围和整个三角形的关系,我画了一张图可以方便理解下:

在这里插入图片描述

左下角是第一个顶点 v0, pos0 = float2(-1, -1); uv0 = float2(0, 0);
右下角是第二个顶点 v1, pos1 = float2(3, -1); uv1 = float2(2, 0);
右下角是第三个顶点 v2, pos2 = float2(-1, 3); uv2 = float2(0, 2);

中间虚线部分就是屏幕的范围。设屏幕左下角点为bl,右下角点为br,左上角点为tl,右上角点为tr,可以根据三角形三个顶点的坐标和uv,求出这四个点的坐标和uv,为了方便验证结果,把之前计算好的pos和uv数值并列摆出。

// 已知量, 三角形三个顶点的坐标和uv //
pos0 = float2(-1, -1);
pos1 = float2(3, -1);
pos2 = float2(-1, 3);

uv0 = float2(0, 0);
uv1 = float2(2, 0);
uv2 = float2(0, 2);

// 根据上面的已知量计算出屏幕四个点的坐标和uv //
pos_bl = pos0 = float2(-1,-1);    uv_bl = uv0 = float2(0,0);        // 屏幕左下角 //
pos_br = (pos0+pos1)*0.5 = float2(1,-1);    uv_br = (uv0+uv1)*0.5 = float2(1,0);  // 屏幕右下角 //
pos_tl = (pos0+pos2)*0.5 = float2(-1,1);    uv_tl = (uv0+uv2)*0.5 = float2(0,1);        // 屏幕左上角 //
pos_tr = (pos1+pos2)*0.5 = float2(1,1);    uv_tr = (uv1+uv2)*0.5 = float2(1,1);     // 屏幕右上角 //

可以看出屏幕范围读取的uv正好就是 (0,0), (1,0), (0,1), (1,1)。可以完整地读取一张贴图,完美。

以前版本的untiy好像是通过画一个quad来实现全屏效果(quad实际上也是画两个三角形来实现),后来改成了画一个三角形,可能是因为

  1. 画三角形比画四边形少了一个顶点,减少了计算(虽然没多少)
  2. 避免了quad方式在三角形拼接的地方,即对角线出可能出现的接缝问题




参考链接:

: https://rauwendaal.net/2014/06/14/rendering-a-screen-covering-triangle-in-opengl/
: https://gamedev.stackexchange.com/questions/155183/how-does-the-following-code-generate-a-full-screen-quad
: https://docs.unity3d.com/ScriptReference/Rendering.CommandBuffer.DrawProcedural.html
: https://docs.unity3d.com/Manual/SL-ShaderSemantics.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容