adds tutorial

docs/tutorial/offscreen-rendering.md

@@ -0,0 +1,58 @@
+# 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, just
+performance loss.
+
+## Two modes of rendering
+
+### 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 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 like this:
+``` javascript
+const {app} = require('electron');
+
+app.commandLine.appendSwitch('disable-gpu');
+app.commandLine.appendSwitch('disable-gpu-compositing');
+```
+
+## Usage
+
+``` javascript
+const {app, BrowserWindow} = require('electron');
+
+app.commandLine.appendSwitch('disable-gpu');
+app.commandLine.appendSwitch('disable-gpu-compositing');
+
+let win = new BrowserWindow({
+  width: 800,
+  height: 1500,
+  webPreferences: {
+    offscreen: true
+  }
+});
+win.loadURL('http://github.com');
+
+win.webContents.setFrameRate(30);
+
+win.webContents.on('paint', (event, dirty, data) => {
+  updateBitmap(dirty, data);
+});
+```