飘屏的火焰： DirectX 12 + ComputeSharp + Win32

实现原理
 基于 Win32 透明分层窗口 + DirectComposition + ComputeSharp GPU 计算着色器，实现全屏置顶、鼠标穿透的火焰漂浮效果。火焰着色器移植自 anatole duprat (XT95/2013) 的 Shadertoy 作品，采用光线步进（Ray Marching）+ 球体 SDF + 3D 噪声变形，在 GPU 上并行计算每像素颜色，形成橙→蓝渐变、半透明漂浮的火焰

效果：

窗口铺满屏幕，背景完全透明，可看到桌面、始终在最前层、点击、移动等操作直接作用于下层窗口、火焰以 3D 球体为基底，经噪声扭曲后呈现有机漂浮形态、光线步进 64 步，内部发光由橙红渐变到蓝色、无火焰处 alpha=0，实现透明背景，与桌面完美融合。

核心流程

1. 窗口：Win32 分层窗口 + WS_EX_LAYERED | WS_EX_TRANSPARENT | WS_EX_TOPMOST 实现全屏、置顶、鼠标穿透

2. 渲染管线：CreateSwapChainForComposition + DXGI_ALPHA_MODE_PREMULTIPLIED，将 SwapChain 绑定到 DirectComposition 视觉，实现每像素透明

3. 绘制：ComputeSharp GPU 计算着色器（FlameShader）在纹理上并行执行：每线程对应一像素，从相机发射光线，光线步进 64 步求交火焰 SDF，累加发光强度，再按高度插值橙→蓝颜色并输出预乘 Alpha；最后 CopyResource 到 SwapChain 后缓冲

4. 动画：独立渲染线程约 60fps 驱动 OnUpdate，传入 TimeSpan 给着色器，着色器内基于时间驱动噪声偏移，使火焰形态随时间缓慢变化，呈现漂浮感

核心技术点
窗口控制（Win32TransparentApplicationRunner）：

// WS_EX_LAYERED + WS_EX_TRANSPARENT：鼠标穿透；WS_EX_TOPMOST：置顶
hwnd = Windows.CreateWindowExW(
    WS_EX_LAYERED | WS_EX_TRANSPARENT | WS_EX_TOPMOST,
    windowClassEx.lpszClassName,
    title,
    WS.WS_POPUP,
    windowX, windowY, windowWidth, windowHeight,
    ...);

// 分层窗口需调用 SetLayeredWindowAttributes，否则 WS_EX_TRANSPARENT 可能不生效
SetLayeredWindowAttributes((nint)hwnd.Value, 0, 255, LWA_ALPHA);
每像素透明（CreateSwapChainForComposition + DirectComposition）：

DXGI_SWAP_CHAIN_DESC1 dxgiSwapChainDesc1 = default;
dxgiSwapChainDesc1.AlphaMode = DXGI_ALPHA_MODE.DXGI_ALPHA_MODE_PREMULTIPLIED;  // 预乘 Alpha
dxgiSwapChainDesc1.BufferCount = 2;
dxgiSwapChainDesc1.Format = DXGI_FORMAT.DXGI_FORMAT_R8G8B8A8_UNORM;
// ...

CreateSwapChainForComposition(...);  // 无窗口句柄，用于 DComp 合成

// 将 SwapChain 设置为 DComp 视觉的内容
dcompVisual->SetContent((IUnknown*)dxgiSwapChain1.Get());
dcompTarget->SetRoot(dcompVisual.Get());
dcompDevice->Commit();


ComputeSharp 火焰着色器（FlameShader）核心结构：

[ThreadGroupSize(DefaultThreadGroupSizes.XY)]
[GeneratedComputeShaderDescriptor]
internal readonly partial struct FlameShader(float time) : IComputeShader<float4>
{
    public float4 Execute()
    {
        float2 resolution = (float2)DispatchSize.XY;
        float aspect = resolution.X / resolution.Y;
        float2 v = -1f + 2f * (float2)ThreadIds.XY / resolution;
        v.X *= aspect;

        float3 org = new float3(0f, -2f, 4f);
        float3 dir = Hlsl.Normalize(new float3(v.X * 1.6f, -v.Y, -1.5f));

        Float4 p = Raymarch(org, dir, time);
        float glow = p.W;

        Float3 colLow = new Float3(1f, 0.5f, 0.1f);   // 橙
        Float3 colHigh = new Float3(0.1f, 0.5f, 1f); // 蓝
        Float3 col = (Float3)(Hlsl.Lerp(colLow, colHigh, p.Y * 0.02f + 0.4f));
        col = (Float3)(Hlsl.Clamp((float3)col, 0f, 1f));

        float alpha = Hlsl.Pow(glow * 2f, 4f);
        return new float4(col.X * alpha, col.Y * alpha, col.Z * alpha, alpha);
    }
}

渲染循环（60fps 独立线程）：

renderThread = new Thread(static args => {
    const long targetFrameTimeInTicksFor60fps = 166666;
    while (!token.IsCancellationRequested)
    {
        if (frameStopwatch.ElapsedTicks >= targetFrameTimeInTicksFor60fps)
        {
            frameStopwatch.Restart();
            app.OnUpdate(startStopwatch.Elapsed);
        }
    }
});

D3D12 资源拷贝与 Present：

// 着色器输出 -> SwapChain 后缓冲
d3D12GraphicsCommandList->ResourceBarrier(...);  // UAV -> COPY_SOURCE, BACK_BUFFER -> COPY_DEST
d3D12GraphicsCommandList->CopyResource(d3D12ResourceBackBuffer, d3D12Resource.Get());
d3D12GraphicsCommandList->ResourceBarrier(...);  // 恢复状态
d3D12CommandQueue->ExecuteCommandLists(...);
dxgiSwapChain1->Present(0, 0);

键盘退出（ESC / Q）：

case WM.WM_KEYUP:
    if (msg.wParam == VK_ESCAPE || msg.wParam == 'Q')
        DestroyWindow(hwnd);

技术栈与依赖

框架 ：.NET 8 + Win32

渲染 ：ComputeSharp GPU 计算着色器 + D3D12（光线步进 + 球体 SDF + 3D 噪声）

透明 ：CreateSwapChainForComposition + DXGI_ALPHA_MODE_PREMULTIPLIED + DirectComposition

穿透 ：Win32 WS_EX_LAYERED | WS_EX_TRANSPARENT

置顶 ：Win32 WS_EX_TOPMOST

依赖 ：ComputeSharp、ComputeSharp.Core、TerraFX.Interop.Windows

参考 ：Shadertoy、Cursor

程序目录如下：

​

真是太漂亮了 ：

​