Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: revised offscreen rendering page (#26542)
* docs: revised offscreen rendering page * docs: reworked offscreen rendering page according to mentions * docs: minor revision of offscreen rendering * docs: fixed trailing space in offscreen rendering * docs: resolved merge conflict
- Loading branch information
1 parent
9c26be7
commit cf970f3
Showing
1 changed file
with
36 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,59 +1,67 @@ | ||
# 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. | ||
## Overview | ||
|
||
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. | ||
Offscreen rendering lets you obtain the content of a `BrowserWindow` in a | ||
bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene. | ||
The offscreen rendering in Electron uses a similar approach to that of the | ||
[Chromium Embedded Framework](https://bitbucket.org/chromiumembedded/cef) | ||
project. | ||
|
||
**Note:** An offscreen window is always created as a [Frameless Window](../api/frameless-window.md). | ||
*Notes*: | ||
|
||
## Rendering Modes | ||
* There are two rendering modes that can be used (see the section below) and only | ||
the dirty area is passed to the `paint` event to be more efficient. | ||
* You can stop/continue the rendering as well as set the frame rate. | ||
* The maximum frame rate is 60 because greater values bring only performance | ||
losses with no benefits. | ||
* When nothing is happening on a webpage, no frames are generated. | ||
* An offscreen window is always created as a | ||
[Frameless Window](../api/frameless-window.md). | ||
|
||
### GPU accelerated | ||
### 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 | ||
that, the frame has to be copied from the GPU which requires more resources, | ||
thus this mode is slower than the Software output device. The benefit of this | ||
mode is that WebGL and 3D CSS animations are supported. | ||
|
||
### Software output device | ||
#### 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. | ||
generation is much faster. As a result, this mode is preferred over the GPU | ||
accelerated one. | ||
|
||
To enable this mode GPU acceleration has to be disabled by calling the | ||
To enable this mode, GPU acceleration has to be disabled by calling the | ||
[`app.disableHardwareAcceleration()`][disablehardwareacceleration] API. | ||
|
||
## Usage | ||
## Example | ||
|
||
Starting with a working application from the | ||
[Quick Start Guide](quick-start.md), add the following lines to the | ||
`main.js` file: | ||
|
||
```javascript fiddle='docs/fiddles/features/offscreen-rendering' | ||
const { app, BrowserWindow } = require('electron') | ||
const fs = require('fs') | ||
|
||
app.disableHardwareAcceleration() | ||
|
||
let win | ||
|
||
app.whenReady().then(() => { | ||
win = new BrowserWindow({ | ||
webPreferences: { | ||
offscreen: true | ||
} | ||
}) | ||
win = new BrowserWindow({ webPreferences: { offscreen: true } }) | ||
|
||
win.loadURL('http://github.com') | ||
win.loadURL('https://github.com') | ||
win.webContents.on('paint', (event, dirty, image) => { | ||
// updateBitmap(dirty, image.getBitmap()) | ||
fs.writeFileSync('ex.png', image.toPNG()) | ||
}) | ||
win.webContents.setFrameRate(30) | ||
win.webContents.setFrameRate(60) | ||
}) | ||
``` | ||
|
||
After launching the Electron application, navigate to your application's | ||
working folder. | ||
[disablehardwareacceleration]: ../api/app.md#appdisablehardwareacceleration |