Skip to main content

오프스크린 렌더링

개요​

오프스크린 렌더링을 사용하면 BrowserWindow의 내용을 비트맵이나 공유 GPU 텍스처로 얻을 수 있다. 이를 통해 3D 장면의 텍스처와 같은 곳에 렌더링할 수 있다. Electron의 오프스크린 렌더링은 Chromium Embedded Framework 프로젝트와 유사한 방식을 사용한다.

참고 사항:

  • 두 가지 렌더링 모드를 사용할 수 있으며(아래 섹션 참조), 더 효율적으로 하기 위해 변경된 영역만 paint 이벤트로 전달된다.
  • 렌더링을 중지하거나 계속할 수 있으며, 프레임 속도를 설정할 수도 있다.
  • 최대 프레임 속도는 240으로 제한된다. 이보다 높은 값은 성능 저하만 초래할 뿐 이점이 없다.
  • 웹페이지에서 아무런 변화가 없을 때는 프레임이 생성되지 않는다.
  • 오프스크린 윈도우는 항상 프레임리스 윈도우로 생성된다.

렌더링 모드​

GPU 가속 렌더링​

GPU 가속 렌더링은 GPU를 사용해 화면을 구성하는 방식을 의미한다. 이 모드의 장점은 WebGL과 3D CSS 애니메이션을 지원한다는 점이다. webPreferences.offscreen.useSharedTexture 설정에 따라 두 가지 접근 방식이 존재한다.

  1. GPU 공유 텍스처 사용

    webPreferences.offscreen.useSharedTexture가 true로 설정된 경우 사용한다.

    이는 고급 기능으로, 네이티브 노드 모듈이 필요하며 직접 작성한 코드와 연동해야 한다. 프레임이 GPU 텍스처에 직접 복사되므로 CPU-GPU 간 메모리 복사 오버헤드가 없어 매우 빠르다. 또한 공유 텍스처를 직접 렌더링 프로그램으로 가져올 수 있다.

  2. CPU 공유 메모리 비트맵 사용

    webPreferences.offscreen.useSharedTexture가 false로 설정된 경우 사용한다. (기본 동작)

    이 방식은 NativeImage API를 통해 텍스처에 접근할 수 있지만 성능이 저하된다. 프레임을 GPU에서 CPU 비트맵으로 복사해야 하므로 시스템 리소스를 더 많이 사용한다. 따라서 소프트웨어 출력 장치 모드보다 느리지만, GPU 관련 기능을 지원한다.

소프트웨어 출력 장치​

이 모드는 CPU에서 렌더링을 위해 소프트웨어 출력 장치를 사용한다. 따라서 프레임 생성 속도가 공유 메모리 비트맵 GPU 가속 모드보다 빠르다.

이 모드를 활성화하려면 app.disableHardwareAcceleration() API를 호출해 GPU 가속을 비활성화해야 한다.

예제​

docs/fiddles/features/offscreen-rendering (34.1.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 애플리케이션을 실행한 후, 애플리케이션의 작업 폴더로 이동하면 렌더링된 이미지를 확인할 수 있다.