2025-05-18 09:09:40

分类： Web开发 标签： node.js,WebGPU

WebGPU 是下一代 Web 图形api，用来替代 WebGL。它可以让浏览器上使用 Directx3D / Vulkan / Metal 接口（替换老旧的OpenGL），能够更高效利用 GPU 的硬件性能，让原有游戏和3D画面帧数更高，意味着使用更好的美术资产成为可能。

为什么是 electron

现在使用 web 技术用来开发桌面软件已经非常普遍，在此基础上继续拓展，能发展出更多可能性。比如使用该技术来开发大型游戏，各类画图制作工具、或是地图软件等这些需要复杂图形的地方（用 webGPU 替换 webGL 以获得更好的性能）优化展示体验。

如果你知道如何在浏览器启用 webGPU，其实在 electron 也是非常相似和简单。 以 chrome 为例子，一般需要在 chrome://flags/ 打开 "Unsafe WebGPU Support" 选项。如果要指定图形 api 比如 vulkan 还需要打开 "Vulkan"。

如果在 electron 中，则只需要通过 app.commandLine.appendSwitch 来设置一下即可 #enable-vulkan 和 enable-unsafe-webgpu

app.commandLine.appendSwitch('enable-vulkan')
app.commandLine.appendSwitch('enable-unsafe-webgpu')

主进程 js 代码参考：

const { app,BrowserWindow } = require('electron/main')
app.commandLine.appendSwitch('enable-vulkan')
app.commandLine.appendSwitch('enable-unsafe-webgpu')

app.on('ready',()=>{
    const win = new BrowserWindow({
        width: 1200,
        height: 800,
        webPreferences: {
            preload: path.join(__dirname,'preload.js'),
        }
    })
    win.loadFile(`./static/index.html`)
})

注意：如果是部署在 Linux 系统，最好还要在 electron 主程序启动命令中添加 --enable-features=Vulkan，否则不会起到硬件加速效果。

package.json

"scripts": {
  "play": "electron . --enable-features=Vulkan"
}

以下为测试小 demo，我是以 Linux 平台 + Vulkan，AMD Radeon 880m 核显来测试(性能大概 GTX 1650 左右) 这里我放了一个普通的天空盒并启用了 GI 和平行光，这艘船有十六万个三角面。拉近内饰的话，80~90帧左右，远一点基本能跑满 120 帧，总体性能还不错。

有关 webgpu 的库：https://www.orillusion.com/