我怎样才能使用着色器使广场有一个挥舞的效果?

我是使用着色器做一些奇特效果的新手,我正在与他们拼搏。 我正在使用DirectX 11和HLSL。 我在屏幕中间有这个广场:

在这里输入图像描述

这只是我用4个顶点创建的一个正方形。 我想把这个挥舞的效果放在两边,但我不知道该怎么做。

在这里输入图像描述

这是一个小2D游戏,所以我有一个正交投影matrix,这是我使用的。 视图matrix被设置为标识。

DirectX::XMMATRIX view = DirectX::XMMatrixIdentity(); DirectX::XMMATRIX projection = DirectX::XMMatrixOrthographicOffCenterLH(0.0f, SCREEN_WIDTH, SCREEN_HEIGHT, 0.0f, 0.0f, 1.0f); 

这是我设置每帧的常量缓冲区,所以我可以将一个浮点时间variables传递给着色器:

 struct constant_buffer { DirectX::XMMATRIX WVP; // this value starts in 0 and increases by 1 each frame until 359 degrees float time; }; constant_buffer cbuffer; 

我目前使用的着色器非常简单,只是将matrix应用到每个顶点来转换它。

 struct in_pshader { float4 position : SV_POSITION; float4 color : COLOR; }; cbuffer constant_buffer { float4x4 WVP; float time; }; in_pshader vshader(float4 position : POSITION, float4 color : COLOR) { in_pshader output; output.position = mul(position, WVP); output.color = color; return output; } float4 pshader(float4 position : SV_POSITION, float4 color : COLOR) : SV_TARGET { return color; } 

我猜测这里有一些正弦函数,所以我决定通过每帧的角度作为input。 我尝试了很多组合,但是我是一个新手,不能正确的完成任务。 :(任何帮助,将非常感激。

首先,要创建这种效果,你将需要超过4个顶点。 你可以将顶点位置移动到所有你喜欢的位置,但是用4个顶点构成的形状只能是一个四边形,而不是像你所示的那样具有波浪边的形状。 至less需要垂直细分形状,以便沿着每一边有足够的顶点来制作平滑的正弦曲线。 为了达到您所展示的效果,不需要对其进行水平细分。

一旦完成,这很容易做到这一点。 你会添加一行到你的顶点着色器中

 position.x += a * sin(k * position.y + f * time); 

其中a,k,f是你可以调整的一些常量(可以是硬编码的,或者你可以把它们放在常量缓冲区中)。 这将根据垂直位置(position.y)和当前时间水平移动每个顶点(调整position.x)。

这应该在WVPmatrix乘法之前完成,假设您想要在世界空间中应用失真,而不是屏幕空间。

作为顶点曲面细分/细分的替代解决scheme,您也可以在片段着色器中通过在四边形内绘制较小的正方形并偏移像素来完成此操作。 您需要将几何尺寸调整为较大的大小以使其与您想要的结果相匹配。

例如,在您的片段着色器中,您有从顶点着色器传入的局部X,Y坐标,范围从0到1。 你检查它们是否在0.25到0.75范围内,如果不是,则丢弃该像素。 要应用挥舞的效果,请将正弦函数添加到X坐标。 根据正弦波的强度,您需要缩小正方形以适应绘图区域(四边形)内的扭曲边缘。

请记住,由于GPU处理更多像素来绘制正方形(即“透支”),因此此方法可能不如细分四元组效果更好。