实时留言如何在 Electron 上启用 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 核显来测试(性能大概 GTX1050Ti ~ 1650 左右) 这里我放了一个普通的天空盒并启用了 GI 和平行光，这艘船有十六万个三角面。拉近内饰的话，80~90帧左右，远一点基本能跑满 120 帧，总体性能还不错。
有关 webgpu 的库：https://www.orillusion.com/