1、基础环境这次测试使用的是天启的RK3576开发板开发板使用debian根文件系统和xfce4的桌面软件内部chromium浏览器浏览器的版本是132.0.6843.83。打开浏览器运行chrom://gpu显示如下以上说明整个系统的GPU功能是正常同时打开一个GPU的测试网站https://webglsamples.org/aquarium/aquarium.html 测试在500个fish情况下fps:50左右。2、electron的功能测试在rk3576上面安装了electron nodejs, 编写一个测试程序显示chrom//gpu的消息正常的默认的electron配置的是不会调用ARM上的GPU的使用软件来进行图像显示合成无法实现加速.由于系统中带有的chrome是具有GPU加速功能那就分析系统的chrome是怎么设置主要参考了/usr/lib/chromium/chromium-wrapper文件的启动设置。fireflyfirefly:/usr/lib/chromium$ cat chromium-wrapper #!/bin/bash # # Copyright 2011 The Chromium Authors # Use of this source code is governed by a BSD-style license that can be # found in the LICENSE file. # Let the wrapped binary know that it has been run through the wrapper. export CHROME_WRAPPERreadlink -f $0 HEREdirname $CHROME_WRAPPER # We include some xdg utilities next to the binary, and we want to prefer them # over the system versions when we know the system versions are very old. We # detect whether the system xdg utilities are sufficiently new to be likely to # work for us by looking for xdg-settings. If we find it, we leave $PATH alone, # so that the system xdg utilities (including any distro patches) will be used. if ! command -v xdg-settings /dev/null; then # Old xdg utilities. Prepend $HERE to $PATH to use ours instead. export PATH$HERE:$PATH else # Use system xdg utilities. But first create mimeapps.list if it doesnt # exist; some systems have bugs in xdg-mime that make it fail without it. xdg_app_dir${XDG_DATA_HOME:-$HOME/.local/share/applications} mkdir -p $xdg_app_dir [ -f $xdg_app_dir/mimeapps.list ] || touch $xdg_app_dir/mimeapps.list fi export CHROME_VERSION_EXTRAstable # We dont want bug-buddy intercepting our crashes. http://crbug.com/24120 export GNOME_DISABLE_CRASH_DIALOGSET_BY_GOOGLE_CHROME # for Chromium 132 export LD_LIBRARY_PATH$HERE:$LD_LIBRARY_PATH # Sanitize std{in,out,err} because theyll be shared with untrusted child # processes (http://crbug.com/376567). exec /dev/null exec (exec cat) exec 2 (exec cat 2) CHROME_EXTRA_ARGS --use-anglegles-egl --use-glangle --use-cmd-decoderpassthrough --no-sandbox --gpu-sandbox-start-early --ignore-gpu-blacklist --ignore-gpu-blocklist --enable-remote-extensions --enable-webgpu-developer-features --enable-unsafe-webgpu --show-component-extension-options --enable-gpu-rasterization --no-default-browser-check --disable-pings --media-router0 --enable-accelerated-video-decode --enable-featuresAcceleratedVideoEncoder,AcceleratedVideoDecoder,AcceleratedVideoDecodeLinuxGL,AcceleratedVideoDecodeLinuxZeroCopyGL # Note: exec -a below is a bashism. exec -a $0 $HERE/chromium-bin ${CHROME_EXTRA_ARGS} $最后分析出来chrome的启动参数如下exec -a /usr/bin/chromium \ /usr/lib/chromium/chromium-bin \ --use-anglegles-egl \ --use-glangle \ --use-cmd-decoderpassthrough \ --no-sandbox \ --gpu-sandbox-start-early \ --ignore-gpu-blacklist \ --ignore-gpu-blocklist \ --enable-remote-extensions \ --enable-webgpu-developer-features \ --enable-unsafe-webgpu \ --show-component-extension-options \ --enable-gpu-rasterization \ --no-default-browser-check \ --disable-pings \ --media-router0 \ --enable-accelerated-video-decode \ --enable-featuresAcceleratedVideoEncoder,AcceleratedVideoDecoder,AcceleratedVideoDecodeLinuxGL,AcceleratedVideoDecodeLinuxZeroCopyGL \ $3. electron调用GPU根据上面的分析修改测试程序中的对chrom浏览器的设置最后成功的设置如下fireflyfirefly:~/electron-test$ cat main.js const { app, BrowserWindow, ipcMain } require(electron); /* * GPU 强制配置最关键 * */ // 强制 ANGLE 使用 EGL/GLES app.commandLine.appendSwitch(use-angle, gles-egl); // 强制 Chromium 使用 ANGLE app.commandLine.appendSwitch(use-gl, angle); app.commandLine.appendSwitch(use-cmd-decoder, passthrough); app.commandLine.appendSwitch(enable-unsafe-webgpu); app.commandLine.appendSwitch(enable-webgpu-developer-features); // 忽略 GPU 黑名单 app.commandLine.appendSwitch(ignore-gpu-blocklist); // 开启 GPU Raster app.commandLine.appendSwitch(enable-gpu-rasterization); // 开启零拷贝 app.commandLine.appendSwitch(enable-zero-copy); // 开启原生 GPU memory buffer app.commandLine.appendSwitch(enable-native-gpu-memory-buffers); // 视频硬解 app.commandLine.appendSwitch( enable-features, [ AcceleratedVideoDecoder, AcceleratedVideoEncoder, VaapiVideoDecoder, VaapiVideoEncoder, AcceleratedVideoDecodeLinuxGL, AcceleratedVideoDecodeLinuxZeroCopyGL ].join(,) ); // 禁用 Vulkan非常关键 app.commandLine.appendSwitch(disable-vulkan); // 禁用软件渲染 fallback app.commandLine.appendSwitch(disable-software-rasterizer); const path require(path); let mainWindow; let browserWindow; function createMainWindow() { mainWindow new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, preload.js), // 使用预加载脚本 contextIsolation: true, // 启用上下文隔离安全最佳实践 nodeIntegration: false // 禁用 nodeIntegration } }); mainWindow.loadFile(index.html); // 直接加载 chrome://gpu //mainWindow.loadURL(chrome://gpu); } function createBrowserWindow() { browserWindow new BrowserWindow({ width: 1280, height: 720, webPreferences: { // 注意webviewTag 在较新版本 Electron 中已弃用建议使用 iframe 或单独窗口 // 这里为了简单演示“输入网址加载”我们使用一个简单的 input iframe 方案 // 如果必须加载任意外部网站且需要完整功能通常建议直接 loadURL 到主窗口 // 但为了符合“新窗口地址栏”的需求我们在 HTML 中实现逻辑 contextIsolation: true, nodeIntegration: false } }); browserWindow.loadFile(browser.html); } app.whenReady().then(() { // 输出 GPU 信息 console.log(app.getGPUFeatureStatus()); createMainWindow(); createBrowserWindow(); app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createMainWindow(); createBrowserWindow(); } }); }); app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); } }); // 监听渲染进程请求版本信息的消息 ipcMain.handle(get-versions, () { return { electron: process.versions.electron, node: process.versions.node, chrome: process.versions.chrome }; });通过以上的程序设置在electron中显示GPU消息如下可以看到GPU加速功能已经启用但是性能受限的使用https://webglsamples.org/aquarium/aquarium.html来测试GPU的性能 fps:46比本机的上的chrom性能稍差。4、GPU性能差异分析系统上自带的chromium浏览器是rockchip原厂移植的对GPU调用流程进行优化而electron内的chromium是一个官方发布的通用版本未针对RK3576芯片进行优化所以GPU性能还是受限总之是GPU能调用起来。如果要达到同样的性能需要下载electron的源码针对GPU部分把rockchip的补丁打上才行这个任务的工作量很大。
RK3576上electron调用GPU的功能设置方法
1、基础环境这次测试使用的是天启的RK3576开发板开发板使用debian根文件系统和xfce4的桌面软件内部chromium浏览器浏览器的版本是132.0.6843.83。打开浏览器运行chrom://gpu显示如下以上说明整个系统的GPU功能是正常同时打开一个GPU的测试网站https://webglsamples.org/aquarium/aquarium.html 测试在500个fish情况下fps:50左右。2、electron的功能测试在rk3576上面安装了electron nodejs, 编写一个测试程序显示chrom//gpu的消息正常的默认的electron配置的是不会调用ARM上的GPU的使用软件来进行图像显示合成无法实现加速.由于系统中带有的chrome是具有GPU加速功能那就分析系统的chrome是怎么设置主要参考了/usr/lib/chromium/chromium-wrapper文件的启动设置。fireflyfirefly:/usr/lib/chromium$ cat chromium-wrapper #!/bin/bash # # Copyright 2011 The Chromium Authors # Use of this source code is governed by a BSD-style license that can be # found in the LICENSE file. # Let the wrapped binary know that it has been run through the wrapper. export CHROME_WRAPPERreadlink -f $0 HEREdirname $CHROME_WRAPPER # We include some xdg utilities next to the binary, and we want to prefer them # over the system versions when we know the system versions are very old. We # detect whether the system xdg utilities are sufficiently new to be likely to # work for us by looking for xdg-settings. If we find it, we leave $PATH alone, # so that the system xdg utilities (including any distro patches) will be used. if ! command -v xdg-settings /dev/null; then # Old xdg utilities. Prepend $HERE to $PATH to use ours instead. export PATH$HERE:$PATH else # Use system xdg utilities. But first create mimeapps.list if it doesnt # exist; some systems have bugs in xdg-mime that make it fail without it. xdg_app_dir${XDG_DATA_HOME:-$HOME/.local/share/applications} mkdir -p $xdg_app_dir [ -f $xdg_app_dir/mimeapps.list ] || touch $xdg_app_dir/mimeapps.list fi export CHROME_VERSION_EXTRAstable # We dont want bug-buddy intercepting our crashes. http://crbug.com/24120 export GNOME_DISABLE_CRASH_DIALOGSET_BY_GOOGLE_CHROME # for Chromium 132 export LD_LIBRARY_PATH$HERE:$LD_LIBRARY_PATH # Sanitize std{in,out,err} because theyll be shared with untrusted child # processes (http://crbug.com/376567). exec /dev/null exec (exec cat) exec 2 (exec cat 2) CHROME_EXTRA_ARGS --use-anglegles-egl --use-glangle --use-cmd-decoderpassthrough --no-sandbox --gpu-sandbox-start-early --ignore-gpu-blacklist --ignore-gpu-blocklist --enable-remote-extensions --enable-webgpu-developer-features --enable-unsafe-webgpu --show-component-extension-options --enable-gpu-rasterization --no-default-browser-check --disable-pings --media-router0 --enable-accelerated-video-decode --enable-featuresAcceleratedVideoEncoder,AcceleratedVideoDecoder,AcceleratedVideoDecodeLinuxGL,AcceleratedVideoDecodeLinuxZeroCopyGL # Note: exec -a below is a bashism. exec -a $0 $HERE/chromium-bin ${CHROME_EXTRA_ARGS} $最后分析出来chrome的启动参数如下exec -a /usr/bin/chromium \ /usr/lib/chromium/chromium-bin \ --use-anglegles-egl \ --use-glangle \ --use-cmd-decoderpassthrough \ --no-sandbox \ --gpu-sandbox-start-early \ --ignore-gpu-blacklist \ --ignore-gpu-blocklist \ --enable-remote-extensions \ --enable-webgpu-developer-features \ --enable-unsafe-webgpu \ --show-component-extension-options \ --enable-gpu-rasterization \ --no-default-browser-check \ --disable-pings \ --media-router0 \ --enable-accelerated-video-decode \ --enable-featuresAcceleratedVideoEncoder,AcceleratedVideoDecoder,AcceleratedVideoDecodeLinuxGL,AcceleratedVideoDecodeLinuxZeroCopyGL \ $3. electron调用GPU根据上面的分析修改测试程序中的对chrom浏览器的设置最后成功的设置如下fireflyfirefly:~/electron-test$ cat main.js const { app, BrowserWindow, ipcMain } require(electron); /* * GPU 强制配置最关键 * */ // 强制 ANGLE 使用 EGL/GLES app.commandLine.appendSwitch(use-angle, gles-egl); // 强制 Chromium 使用 ANGLE app.commandLine.appendSwitch(use-gl, angle); app.commandLine.appendSwitch(use-cmd-decoder, passthrough); app.commandLine.appendSwitch(enable-unsafe-webgpu); app.commandLine.appendSwitch(enable-webgpu-developer-features); // 忽略 GPU 黑名单 app.commandLine.appendSwitch(ignore-gpu-blocklist); // 开启 GPU Raster app.commandLine.appendSwitch(enable-gpu-rasterization); // 开启零拷贝 app.commandLine.appendSwitch(enable-zero-copy); // 开启原生 GPU memory buffer app.commandLine.appendSwitch(enable-native-gpu-memory-buffers); // 视频硬解 app.commandLine.appendSwitch( enable-features, [ AcceleratedVideoDecoder, AcceleratedVideoEncoder, VaapiVideoDecoder, VaapiVideoEncoder, AcceleratedVideoDecodeLinuxGL, AcceleratedVideoDecodeLinuxZeroCopyGL ].join(,) ); // 禁用 Vulkan非常关键 app.commandLine.appendSwitch(disable-vulkan); // 禁用软件渲染 fallback app.commandLine.appendSwitch(disable-software-rasterizer); const path require(path); let mainWindow; let browserWindow; function createMainWindow() { mainWindow new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, preload.js), // 使用预加载脚本 contextIsolation: true, // 启用上下文隔离安全最佳实践 nodeIntegration: false // 禁用 nodeIntegration } }); mainWindow.loadFile(index.html); // 直接加载 chrome://gpu //mainWindow.loadURL(chrome://gpu); } function createBrowserWindow() { browserWindow new BrowserWindow({ width: 1280, height: 720, webPreferences: { // 注意webviewTag 在较新版本 Electron 中已弃用建议使用 iframe 或单独窗口 // 这里为了简单演示“输入网址加载”我们使用一个简单的 input iframe 方案 // 如果必须加载任意外部网站且需要完整功能通常建议直接 loadURL 到主窗口 // 但为了符合“新窗口地址栏”的需求我们在 HTML 中实现逻辑 contextIsolation: true, nodeIntegration: false } }); browserWindow.loadFile(browser.html); } app.whenReady().then(() { // 输出 GPU 信息 console.log(app.getGPUFeatureStatus()); createMainWindow(); createBrowserWindow(); app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createMainWindow(); createBrowserWindow(); } }); }); app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); } }); // 监听渲染进程请求版本信息的消息 ipcMain.handle(get-versions, () { return { electron: process.versions.electron, node: process.versions.node, chrome: process.versions.chrome }; });通过以上的程序设置在electron中显示GPU消息如下可以看到GPU加速功能已经启用但是性能受限的使用https://webglsamples.org/aquarium/aquarium.html来测试GPU的性能 fps:46比本机的上的chrom性能稍差。4、GPU性能差异分析系统上自带的chromium浏览器是rockchip原厂移植的对GPU调用流程进行优化而electron内的chromium是一个官方发布的通用版本未针对RK3576芯片进行优化所以GPU性能还是受限总之是GPU能调用起来。如果要达到同样的性能需要下载electron的源码针对GPU部分把rockchip的补丁打上才行这个任务的工作量很大。
