DirectX11 GerstnerWaves模拟（计算着色器）

DirectX11 GerstnerWaves模拟（计算着色器）

计算着色器（Computer Shader）中可以使用线程组并行进行计算，很适合用来计算波浪（水面、地形等）的顶点数据。在学习完DirectX11 With Windows 计算着色器：波浪（水波）后，自己动手设计了GerstnerWavesRender来模拟GerstnerWaves。此外，还学习了ImGui并在项目中使用，可以通过ImGui窗口来调整波浪参数。

GerstnerWaves

在《GPU精粹1：实时图形编程的技术、技巧和技艺》中提供了Gerstner波函数：

　　P（x,y,t）=

　　(
　　　　x+∑(QiAi × Di.x × cos(ωiDi·(x,y)+ψit)),
　　　　y+∑(QiAi × Di.y × cos(ωiDi·(x,y)+ψit)),
　　　　∑(Ai × sin(ωiDi·(x,y)+ψit))
　　)

其中，Q是控制波陡度的参数。对于单个波，Q=0是正常的正弦波Q=1/(ωA)是尖峰的波形。当Q较大时，会在波峰形成环。在项目中，Q为控制波峰的参数，范围为0~1，使用Qi = Q / (ωiAi × numWaves)来计算分波的Qi。

ω是波传播的角频率，可由波长L计算得到：

　　　　 ω=sqrt(g× 2PI/L)

也可以简单的使用：ω = 2PI / L 计算 。

A是振幅，振幅决定波浪的峰和谷的高度。我们可以将振幅和波长与外界条件（如天气、风速等）关联，振幅和波长之比也要满足一定条件，在本项目中不作考虑。

D为波的传播方向，它是一个float2l类型的数，x量和y量分别表示x方向和y方向。（在DirectX中应为X方向和Z方向）

除以上参数外，公式中还有ψ和t。ψ是由公式:

 　　　　ψ = Speed×ω

Speed是波的传播速度，t是传播时间，可以用程序的执行时间代替，也可以另行定义。

书中也提供了法线的计算公式：

　　N=(
　　　　-∑( Di.x × WA × C()),
　　　　-∑( Di.y × WA × C()),
　　　　1-∑( Qi × WA × S())
　　　)

其中，

 　　　　WA=ωi×Ai

 　　　　S()=sin(ωi×Di·P+ψit)

 　　　　C()=cos(ωi×Di·P+ψit)

 

HLSL

在上一部分了解到，我们需要获得每个波的L、A、Q、S、D.x、D.y和系统的时间t。此外，为了在计算着色器中计算index，我们还需要知道列线程组的数目。知道了需要，我们就可以在GerstnerWaves.hlsli中定义结构体：

struct GerstnerWave
{
  float g_WaveL;     // 波长
  float g_WaveA;     // 振幅
  float g_WaveSpeed; // 速度
  float g_WaveQ;     // 陡度
   
  float2 g_WaveD;   // 方向
  float2 g_pad;     // 打包
};

我们要计算顶点的数据，需要在GerstnerWaves.hlsli中定义顶点的结构体：

struct VertexPosNormalTex
{
  float3 PosL : POSITION;
  float3 NormalL : NORMAL;
  float2 Tex : TEXCOORD;
};

整个GerstnerWaves.hlsli如下：

//GerstnerWaves.hlsli
​
#define GroundThreadSize 16
#define WaveCount 3
​
static const float PI = 3.14159267f;
static const float g = 9.8f;
​
struct GerstnerWave
{
  float g_WaveL;     // 波长
  float g_WaveA;     // 振幅
  float g_WaveSpeed; // 速度
  float g_WaveQ;     // 陡度
   
  float2 g_WaveD;   // 方向
  float2 g_pad;     // 打包
};
​
struct VertexPosNormalTex
{
  float3 PosL : POSITION;
  float3 NormalL : NORMAL;
  float2 Tex : TEXCOORD;
};
​
RWStructuredBuffer<VertexPosNormalTex> g_Input : register(u0);
RWStructuredBuffer<VertexPosNormalTex> g_Output : register(u1);
​
// 用于更新模拟
cbuffer cbUpdateSettings : register(b0)
{
  GerstnerWave g_gerstnerData[WaveCount];   // 几个波叠加
   
  float g_TotalTime;   // 总时长
  float g_GroundCountX; // X方向上的线程团数
  float2 g_Pad;
}

 

RWStructuredBuffer是可读写的结构体缓冲区类型的无序访问视图，我们可以通过g_Input来读取顶点数据，通过计算后将新数据写进g_Output。关于各种着色器资源的特点以及用法，可以参考深入了解与使用缓冲区资源。

以下是三个波的叠加的GerstnerWaves计算着色器：

// GerstnerWaves_CS.hlsl
​
#include "GerstnerWaves.hlsli"
​
[numthreads(GroundThreadSize, GroundThreadSize, 1)]
void CS(uint3 DTid : SV_DispatchThreadID)
{
  int index = DTid.x + DTid.y * g_GroundCountX * GroundThreadSize;
   
  float posx = g_Input[index].PosL.x;
  float posy = g_Input[index].PosL.z;
   
  float3 Gpos = { posx, g_Input[index].PosL.y, posy };
  float3 Gnormal = { 0.0f, 0.0f, 0.0f };
   
  // GerstnerWaves计算
​
  for (int i = 0; i < WaveCount; i++)
  {
      // 计算顶点坐标
   
      float w = sqrt(g * 2 * PI / g_gerstnerData[i].g_WaveL);
      //float w = 2 * PI / g_WaveL;
      float psi = g_gerstnerData[i].g_WaveSpeed * w;
       
      // g_WaveQ 相同， 使用以下公式计数分波的Qi
      float Q = g_gerstnerData[i].g_WaveQ / (w * g_gerstnerData[i].g_WaveA * WaveCount);
   
      float phase = w * g_gerstnerData[i].g_WaveD.x * posx + w * g_gerstnerData[i].g_WaveD.y * posy + psi * g_TotalTime;
   
      float sinp, cosp;
      sincos(phase, sinp, cosp);
​
      Gpos.x += Q * g_gerstnerData[i].g_WaveA * g_gerstnerData[i].g_WaveD.x * cosp;
      Gpos.z += Q * g_gerstnerData[i].g_WaveA * g_gerstnerData[i].g_WaveD.y * cosp;
      Gpos.y += g_gerstnerData[i].g_WaveA * sinp;
​
      // 计算法向量
   
      float WA = w * g_gerstnerData[i].g_WaveA;
      float th = w * (g_gerstnerData[i].g_WaveD.x * Gpos.x + g_gerstnerData[i].g_WaveD.y * Gpos.z) + psi * g_TotalTime;
   
      float sint, cost;
      sincos(th, sint, cost);
   
      Gnormal.x = -g_gerstnerData[i].g_WaveD.x * WA * cost;
      Gnormal.z = -g_gerstnerData[i].g_WaveD.y * WA * cost;
      Gnormal.y = -Q * WA * sint;    
  }
   
  Gnormal.y += 1;
  Gnormal = normalize(Gnormal); // 标准化
   
  // 保存
  g_Output[index].PosL = float3(Gpos);
  g_Output[index].NormalL = float3(Gnormal);
  g_Output[index].Tex = g_Input[index].Tex;
 
}

GerstnerWavesRender

GerstnerWavesRender的设计如下图：

从第一支初始化开始看，GerstnerWavesRender中有较多成员数据：

//**********
// 数据类型
//

UINT m_NumRows = 0;// 顶点行数
UINT m_NumCols = 0;// 顶点列数
​
UINT m_VertexCount = 0;// 顶点数目
UINT m_IndexCount = 0;// 索引数目
​
Transform m_Transform = {};// 水面变换
DirectX::XMFLOAT2 m_TexOffset = {};// 纹理坐标偏移
float m_TexU = 0.0f;// 纹理坐标U方向最大值
float m_TexV = 0.0f;// 纹理坐标V方向最大值
Material m_Material = {};// 水面材质
​
GerstnerWave m_gerstnerwaveData[3] = {};
​
float m_TimeStep = 0.0f;// 时间步长
float m_SpatialStep = 0.0f;// 空间步长
float m_AccumulateTime = 0.0f;// 累积时间
float m_TotalTime = 0.0f;           // 总时长

//**********
// 资源类型
//

ComPtr<ID3D11Buffer> m_pCurrVertex;       // 保存当前模拟结果的顶点
ComPtr<ID3D11UnorderedAccessView> m_pCurrVertexUAV;   // 缓存当前模拟结果的顶点 无序访问视图
​
ComPtr<ID3D11Buffer> m_pVertex;           // 初始顶点 缓冲区
ComPtr<ID3D11UnorderedAccessView> m_pVertexUAV;       // 初始顶点 无序访问视图
​
ComPtr<ID3D11Buffer> m_pVertexBuffer;// 顶点缓冲区
ComPtr<ID3D11Buffer> m_pIndexBuffer;// 索引缓冲区
ComPtr<ID3D11Buffer> m_pConstantBuffer;// 常量缓冲区

ComPtr<ID3D11Buffer> m_pTempBuffer;// 用于顶点数据拷贝的缓冲区
​
ComPtr<ID3D11ComputeShader> m_pWavesUpdateCS;// 用于计算模拟结果的着色器
​
ComPtr<ID3D11ShaderResourceView> m_pTextureDiffuse;// 水面纹理

其中数据类型的成员用来保存网格的顶点数、引索数、纹理最大值，各类时间，空间、时间步长，以及三个Gerstner波的参数。资源类型的成员用来保存网格的顶点、引索，在绘制时作为HLSL的资源，其中m_pCurrVertexUAV、m_pVertexUAV是计算着色器m_pWavesUpdateCS输入和输出。

我们还要在类中定义与HLSL中对应的储存波参数的结构体：

struct GerstnerWave
{
    float WaveL;     // 波长
    float WaveA;     // 振幅
    float WaveSpeed; // 速度
    float WaveQ;     // 陡度
​
    DirectX::XMFLOAT2 WaveD;   // 方向
    DirectX::XMFLOAT2 pad;     // 打包
};

// 以及与常量缓冲区修改相关的m_CBUpdateSettings:

struct {
​
    GerstnerWave gerstnerData[3];
​
    float TotalTime;   // 总时长
    float GroundCountX; // X方向上的线程团数
    DirectX::XMFLOAT2 Pad;
​
}

顶点缓冲区、引索缓冲区、常量缓冲区、计算着色器的创建比较常规，下面讲一讲结构化缓冲区和无序访问视图的创建。

我们想要在CS中使用存有顶点的资源，就需要使用结构化缓冲区以及对应的无序访问视图

// 创建GPU结构体缓冲区
hr = CreateStructuredBuffer(device, meshData.vertexVec.data(), (UINT)meshData.vertexVec.size() * sizeof(VertexPosNormalTex), (UINT)sizeof(VertexPosNormalTex), m_pCurrVertex.GetAddressOf(), false, true );

// 实际调用了
d3dDevice->CreateBuffer(&bufferDesc, &initData, buffer);
// 具体可查看文档

创建无序访问视图需要先填充D3D11_UNORDERED_ACCESS_VIEW_DESC：

D3D11_UNORDERED_ACCESS_VIEW_DESC uavDesc;
uavDesc.ViewDimension = D3D11_UAV_DIMENSION_BUFFER;
uavDesc.Format = DXGI_FORMAT_UNKNOWN;
uavDesc.Buffer.FirstElement = 0;
uavDesc.Buffer.NumElements = (UINT)meshData.vertexVec.size();
uavDesc.Buffer.Flags = 0;

再调用：

// 创建无序访问视图
hr = device->CreateUnorderedAccessView(m_pCurrVertex.Get(), &uavDesc, m_pCurrVertexUAV.GetAddressOf());
 

更新

更新分为两步：

// 设置数据
void SetData(GerstnerWave* gerstnerData);
​
// 更新
void Update(ID3D11DeviceContext* deviceContext, float t);

先通过SetData设置波的参数，再使用Update进行时间上的更新：

void GerstnerWavesRender::SetData(GerstnerWave* gerstnerData)
{
for (int i = 0; i < sizeof(m_gerstnerwaveData) / sizeof(GerstnerWave); ++i)
{
m_gerstnerwaveData[i] = *(gerstnerData + i);
}
}
​
void GerstnerWavesRender::Update(ID3D11DeviceContext* deviceContext, float t)
{
// 时间累加
m_AccumulateTime += t;
m_TotalTime += t;
​
// 纹理位移
for (int i = 0; i < sizeof(m_gerstnerwaveData) / sizeof(GerstnerWave); ++i)
{
float DirSide = sqrt(m_gerstnerwaveData[i].WaveD.x * m_gerstnerwaveData[i].WaveD.x + m_gerstnerwaveData[i].WaveD.y * m_gerstnerwaveData[i].WaveD.y);

m_TexOffset.x -= m_gerstnerwaveData[i].WaveSpeed * m_gerstnerwaveData[i].WaveD.x / DirSide * t * 0.1f;
m_TexOffset.y -= m_gerstnerwaveData[i].WaveSpeed * m_gerstnerwaveData[i].WaveD.y / DirSide * t * 0.1f;
}
​
// 在累积时间大于时间步长时更新
if (m_AccumulateTime > m_TimeStep)
{
// 更新常量缓冲区
D3D11_MAPPED_SUBRESOURCE data;
m_CBUpdateSettings.gerstnerData[0] = m_gerstnerwaveData[0];
m_CBUpdateSettings.gerstnerData[1] = m_gerstnerwaveData[1];
m_CBUpdateSettings.gerstnerData[2] = m_gerstnerwaveData[2];
m_CBUpdateSettings.TotalTime = m_TotalTime;
m_CBUpdateSettings.GroundCountX = m_NumCols / 16;
​
deviceContext->Map(m_pConstantBuffer.Get(), 0, D3D11_MAP_WRITE_DISCARD, 0, &data);
memcpy_s(data.pData, sizeof m_CBUpdateSettings, &m_CBUpdateSettings, sizeof m_CBUpdateSettings);
deviceContext->Unmap(m_pConstantBuffer.Get(), 0);
​
// 设置计算资源
deviceContext->CSSetShader(m_pWavesUpdateCS.Get(), nullptr, 0);
deviceContext->CSSetConstantBuffers(0, 1, m_pConstantBuffer.GetAddressOf());
ID3D11UnorderedAccessView* pUAVs[2] = { m_pVertexUAV.Get() ,m_pCurrVertexUAV.Get() };
deviceContext->CSSetUnorderedAccessViews(0, 2, pUAVs, nullptr);
​
// 开始调度 使用16 * 16 * 1的线程组
deviceContext->Dispatch(m_NumCols / 16, m_NumRows / 16, 1);
​
// 清除绑定
pUAVs[0] = pUAVs[1] = nullptr;
deviceContext->CSSetUnorderedAccessViews(0, 2, pUAVs, nullptr);
​
// 数据copy
​
　　　　 // 读取
　　　 　deviceContext->CopyResource(m_pTempBuffer.Get(), m_pCurrVertex.Get());
　　　　 D3D11_MAPPED_SUBRESOURCE rsSrc;
　　　　 VertexPosNormalTex* dataSrc;
　　　 　deviceContext->Map(m_pTempBuffer.Get(), 0, D3D11_MAP_READ, 0, &rsSrc);
　　　 　dataSrc = (VertexPosNormalTex*)rsSrc.pData;
　　　　 deviceContext->Unmap(m_pTempBuffer.Get(), 0);
​
　　　 　// 写入
　　　 　D3D11_MAPPED_SUBRESOURCE rsDest;
　　　 　deviceContext->Map(m_pVertexBuffer.Get(), 0, D3D11_MAP_WRITE_DISCARD, 0, &rsDest);
　　　 　memcpy_s(rsDest.pData, m_VertexCount * sizeof(VertexPosNormalTex), dataSrc, m_VertexCount * sizeof(VertexPosNormalTex));
　　　 　deviceContext->Unmap(m_pVertexBuffer.Get(), 0);
​
　　　　 m_AccumulateTime = 0.0f;// 重置时间
​
}
}

StructuredBuffer不能直接作为顶点缓冲区绑定到渲染管线上，因为IASetVertexBuffers的缓冲区必须有D3D11_BIND_VERTEX_BUFFER标记，StructuredBuffer已经有D3D11_BIND_SHADER_RESOURCE | D3D11_BIND_UNORDERED_ACCESS标记，当尝试添加D3D11_BIND_VERTEX_BUFFER时，发现无法创建出缓冲区，也就是说，一个缓冲区不能同时拥有这三个属性。因此我们需要从m_pCurrVertex读取顶点数据，再写人m_pVertexBuffer。

绘制

绘制的代码大部分使用到开头提及的教程中的BasicEffect，不好展开讲解，直接给出代码：

UINT strides[1] = { sizeof(VertexPosNormalTex) };
UINT offsets[1] = { 0 };
​
// 设置绘制所有的顶点缓冲区（当前顶点缓冲区）
deviceContext->IASetVertexBuffers(0, 1, m_pCurrVertex.GetAddressOf(), strides, offsets);
// 设置绘制所有的引索缓冲区
deviceContext->IASetIndexBuffer(m_pIndexBuffer.Get(), DXGI_FORMAT_R32_UINT, 0);
​
// 关闭波浪绘制，因为这里的波浪绘制时教程中用来计算法线的，我们不需要
effect.SetWavesStates(false);
// 设置材质
effect.SetMaterial(m_Material);
// 设置纹理
effect.SetTextureDiffuse(m_pTextureDiffuse.Get());
// 设置世界矩阵
effect.SetWorldMatrix(m_Transform.GetLocalToWorldMatrixXM());
// 设置纹理位移（偏移）
effect.SetTexTransformMatrix(XMMatrixScaling(m_TexU, m_TexV, 1.0f) * XMMatrixTranslationFromVector(XMLoadFloat2(&m_TexOffset)));
effect.Apply(deviceContext);
// 绘制
deviceContext->DrawIndexed(m_IndexCount, 0, 0);

// 解除当前顶点缓冲区的绑定
deviceContext->IASetVertexBuffers(0, 1, m_pVertexBuffer.GetAddressOf(), strides, offsets);        
effect.Apply(deviceContext);

演示

这里给出最终结果（包括ImGui）的演示，以后有时间再录制每一步的演示结果。