メインコンテンツへ飛ぶ

オフスクリーンレンダリング

概要​

Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap or a shared GPU texture, so it can be rendered anywhere, for example, on texture in a 3D scene. Electron のオフスクリーンレンダリングは Chromium 埋め込みフレームワーク プロジェクトと似たアプローチを使用しています。

注意:

  • レンダリングモードは 2 種類使用でき (後述)、変化した部分だけを paint イベントに渡すことでより効率的なレンダリングができます。
  • 描画を停止/続行したり、フレームレートを設定したりできます。
  • 最大フレームレートは 240 です。より大きな値にしてもメリットはなく、性能を損うだけです。
  • ウェブページに何も起きなければ、フレームは生成されません。
  • An offscreen window is always created as a Frameless Window.

レンダリングモード​

GPU アクセラレーション​

GPU アクセラレーションレンダリングとは、GPU が構成に使用されることを意味します。 The benefit of this mode is that WebGL and 3D CSS animations are supported. There are two different approaches depending on the webPreferences.offscreen.useSharedTexture setting.

  1. Use GPU shared texture

    Used when webPreferences.offscreen.useSharedTexture is set to true.

    This is an advanced feature requiring a native node module to work with your own code. The frames are directly copied in GPU textures, thus this mode is very fast because there's no CPU-GPU memory copies overhead, and you can directly import the shared texture to your own rendering program.

  2. Use CPU shared memory bitmap

    Used when webPreferences.offscreen.useSharedTexture is set to false (default behavior).

    The texture is accessible using the NativeImage API at the cost of performance. The frame has to be copied from the GPU to the CPU bitmap which requires more system resources, thus this mode is slower than the Software output device mode. But it supports GPU related functionalities.

ソフトウェア出力デバイス​

This mode uses a software output device for rendering in the CPU, so the frame generation is faster than shared memory bitmap GPU accelerated mode.

このモードを有効にするには、app.disableHardwareAcceleration() API を呼び出して GPU アクセラレーションを無効にする必要があります。

サンプル​

docs/fiddles/features/offscreen-rendering (33.2.1)Open in Fiddle
const { app, BrowserWindow } = require('electron/main')
const fs = require('node:fs')
const path = require('node:path')

app.disableHardwareAcceleration()

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      offscreen: true
    }
  })

  win.loadURL('https://github.com')
  win.webContents.on('paint', (event, dirty, image) => {
    fs.writeFileSync('ex.png', image.toPNG())
  })
  win.webContents.setFrameRate(60)
  console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`)
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

この Electron アプリケーションを起動したら、アプリケーションを開いたフォルダを見てみましょう。描画された画像があるはずです。