c83f836faf
* docs: add references to app.whenReady() in isReady
* refactor: prefer app.whenReady()
In the docs, specs, and lib, replace instances of `app.once('ready')`
(seen occasionally) and `app.on('ready')` (extremely common) with
`app.whenReady()`.
It's better to encourage users to use whenReady():
1. it handles the edge case of registering for 'ready' after it's fired
2. it avoids the minor wart of leaving an active listener alive for
an event that wll never fire again
59 lines
1.9 KiB
Markdown
59 lines
1.9 KiB
Markdown
# Offscreen Rendering
|
|
|
|
Offscreen rendering lets you obtain the content of a browser window in a bitmap,
|
|
so it can be rendered anywhere, for example on a texture in a 3D scene. The
|
|
offscreen rendering in Electron uses a similar approach than the [Chromium
|
|
Embedded Framework](https://bitbucket.org/chromiumembedded/cef) project.
|
|
|
|
Two modes of rendering can be used and only the dirty area is passed in the
|
|
`'paint'` event to be more efficient. The rendering can be stopped, continued
|
|
and the frame rate can be set. The specified frame rate is a top limit value,
|
|
when there is nothing happening on a webpage, no frames are generated. The
|
|
maximum frame rate is 60, because above that there is no benefit, only
|
|
performance loss.
|
|
|
|
**Note:** An offscreen window is always created as a [Frameless Window](../api/frameless-window.md).
|
|
|
|
## Rendering Modes
|
|
|
|
### GPU accelerated
|
|
|
|
GPU accelerated rendering means that the GPU is used for composition. Because of
|
|
that the frame has to be copied from the GPU which requires more performance,
|
|
thus this mode is quite a bit slower than the other one. The benefit of this
|
|
mode is that WebGL and 3D CSS animations are supported.
|
|
|
|
### Software output device
|
|
|
|
This mode uses a software output device for rendering in the CPU, so the frame
|
|
generation is much faster, thus this mode is preferred over the GPU accelerated
|
|
one.
|
|
|
|
To enable this mode GPU acceleration has to be disabled by calling the
|
|
[`app.disableHardwareAcceleration()`][disablehardwareacceleration] API.
|
|
|
|
## Usage
|
|
|
|
``` javascript
|
|
const { app, BrowserWindow } = require('electron')
|
|
|
|
app.disableHardwareAcceleration()
|
|
|
|
let win
|
|
|
|
app.whenReady().then(() => {
|
|
win = new BrowserWindow({
|
|
webPreferences: {
|
|
offscreen: true
|
|
}
|
|
})
|
|
|
|
win.loadURL('http://github.com')
|
|
win.webContents.on('paint', (event, dirty, image) => {
|
|
// updateBitmap(dirty, image.getBitmap())
|
|
})
|
|
win.webContents.setFrameRate(30)
|
|
})
|
|
```
|
|
|
|
[disablehardwareacceleration]: ../api/app.md#appdisablehardwareacceleration
|