“蚯蚓涌动” 的屏保： DirectX 12 + ComputeSharp + Win32

实现原理

核心流程

核心技术点

技术栈与依赖

下载

我本来想做漂亮的蝴蝶飞舞，但是用着色器不知道如何表现蝴蝶的精致，画出来之后，反而像水里的一群蚯蚓。有密集恐惧症的朋友赶紧溜走。

实现原理

基于 Win32 透明分层窗口 + DirectComposition + ComputeSharp GPU 计算着色器，实现全屏置顶、鼠标穿透的蝴蝶屏保效果。

效果：

窗口铺满屏幕，背景完全透明，可看到桌面、始终在最前层、点击、移动等操作直接作用于下层窗口、200 只蝴蝶缓慢、柔和、随机飞行，带翅膀扇动效果、多彩渐变配色（粉、黄、天蓝、淡紫、薄荷绿等）

关闭方式：ESC 或 Q

核心流程

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

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

**3. **绘制**：**ComputeSharp GPU 计算着色器（TransparentButterflies）在纹理上并行计算每像素颜色，再 CopyResource 到 SwapChain 后缓冲

**4. **动画**：**独立渲染线程约 60fps 驱动 OnUpdate，传入 TimeSpan 给着色器，着色器内基于时间计算蝴蝶位置、翅膀扇动、生命周期

核心技术点

窗口控制（Win32TransparentApplicationRunner）：

cs 复制代码

// 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）：

cs 复制代码

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 着色器（TransparentButterflies）：

cs 复制代码

[ThreadGroupSize(DefaultThreadGroupSizes.XY)]
[GeneratedComputeShaderDescriptor]
internal readonly partial struct TransparentButterflies(float time) : IComputeShader<float4>
{
    private const int ButterflyCount = 200;

    public float4 Execute()
    {
        // 每线程对应一像素，遍历 200 只蝴蝶累加颜色
        for (int i = 0; i < ButterflyCount; i++)
        {
            // 生命周期：0-4s 渐显，4-22s 存在，22-28s 渐隐
            // 位置：多频率正弦组合，全屏随机漂移
            // 翅膀扇动：wingAngle = Sin(time * 4 + fi * 1.3) * 0.5
            // 形状：身体 + 左右翅膀（2D 椭圆），边缘 SmoothStep 平滑
            // 颜色：GetGradientColor 多彩渐变（粉/黄/天蓝/淡紫/薄荷绿等）
            col += butterflyColor * intensity * 0.95f;
            alpha += intensity * 0.92f;
        }
        // 预乘 Alpha 输出，供 DXGI_ALPHA_MODE_PREMULTIPLIED 使用
        return new float4(col.X * alpha, col.Y * alpha, col.Z * alpha, alpha);
    }
}

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

cs 复制代码

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

D3D12 资源拷贝与 Present：

cs 复制代码

// 着色器输出 -> 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）：

cs 复制代码

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

技术栈与依赖

框架：.NET 8 + Win32

渲染：ComputeSharp GPU 计算着色器 + D3D12

**透明：**CreateSwapChainForComposition + DXGI_ALPHA_MODE_PREMULTIPLIED + DirectComposition

穿透：Win32 WS_EX_LAYERED | WS_EX_TRANSPARENT

置顶：Win32 WS_EX_TOPMOST

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

下载

程序下载： https://pan.baidu.com/s/1uJTE2iDi1YtuhavzIzjbIg 提取码: late

程序目录如下：

不同数量的渲染效果如下：