mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 2

docs: revised offscreen rendering page (#26542)

Browse source 
* 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
This commit is contained in:
Antonio 2020-12-01 03:47:09 +02:00 • committed by GitHub
parent 9c26be7b43
commit cf970f31a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

64
docs/tutorial/offscreen-rendering.md
View file

@ -1,59 +1,67 @@
# Offscreen Rendering # Offscreen Rendering
Offscreen rendering lets you obtain the content of a browser window in a bitmap, ## Overview
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 Offscreen rendering lets you obtain the content of a `BrowserWindow` in a
`'paint'` event to be more efficient. The rendering can be stopped, continued bitmap, so it can be rendered anywhere, for example, on texture in a 3D scene.
and the frame rate can be set. The specified frame rate is a top limit value, The offscreen rendering in Electron uses a similar approach to that of the
when there is nothing happening on a webpage, no frames are generated. The [Chromium Embedded Framework](https://bitbucket.org/chromiumembedded/cef)
maximum frame rate is 60, because above that there is no benefit, only project.
performance loss.
**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 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, that, the frame has to be copied from the GPU which requires more resources,
thus this mode is quite a bit slower than the other one. The benefit of this thus this mode is slower than the Software output device. The benefit of this
mode is that WebGL and 3D CSS animations are supported. 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 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 generation is much faster. As a result, this mode is preferred over the GPU
one. 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. [`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' ```javascript fiddle='docs/fiddles/features/offscreen-rendering'
const { app, BrowserWindow } = require('electron') const { app, BrowserWindow } = require('electron')
const fs = require('fs')
app.disableHardwareAcceleration() app.disableHardwareAcceleration()
let win let win
app.whenReady().then(() => { app.whenReady().then(() => {
win = new BrowserWindow({ win = new BrowserWindow({ webPreferences: { offscreen: true } })
webPreferences: {
offscreen: true
}
})
win.loadURL('http://github.com') win.loadURL('https://github.com')
win.webContents.on('paint', (event, dirty, image) => { 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 [disablehardwareacceleration]: ../api/app.md#appdisablehardwareacceleration