Серверный рендеринг в Вердж3Д — Софт Эйт Софт
Description: С помощью Вердж3Д вы можете рендерить ваши сцены как на клиенте (в браузере), так и на сервере. Последний подход может использоваться, если у пользователя медленное соединение или слабое железо, либо чтобы продемонстрировать пользователю максимальное качество, при сохранении возможности конфигурирования контента.

# Серверный рендеринг в Вердж3Д

В этом разделе находится информация о том, как делать автономный рендеринг на стороне сервера в «Вердж3Д». Этот подход может использоваться, если у пользователя медленное соединение или слабое железо, либо чтобы продемонстрировать пользователю максимальное качество, при сохранении возможности конфигурирования контента.

- Запуск браузера «Хром» на сервере в автономном режиме
- Использование Node.js и Puppeteer
- Дальнейшие шаги

#

## Запуск браузера «Хром» на сервере в автономном режиме

Вы можете использовать браузер «Гугл Хром» (или «Хромиум») в автономном режиме, т.е. без вывода на экран и отображения пользовательского интерфейса. Для этого его нужно запускать с опцией --headless:

`google-chrome --headless --use-gl=egl https://www.soft8soft.com/webglreport`

Опция --use-gl=egl включает аппаратное ускорение графики в автономном режиме:

Строка "Unmasked Vendor/Renderer" говорит что «Хром» использует реальный GPU на целевой системе

По умолчанию автономный режим малополезен. Чтобы разрешить удалённую отладку запущенной страницы, укажите опцию --remote-debugging-port=9222:

`google-chrome --headless --use-gl=egl --remote-debugging-port=9222 https://www.soft8soft.com/webglreport`

а затем запустите другой «Хром» на десктопе в режиме инспектирования. Укажите настройку Discover network targets затем нажмите inspect:

Другая важная функция автономного режима, возможность создания скриншотов страниц:

`google-chrome --headless --use-gl=egl --screenshot https://www.soft8soft.com/webglreport`

а также генерации PDF-файлов:

`google-chrome --headless --use-gl=egl --print-to-pdf https://www.soft8soft.com/webglreport`

Смотрите официальную документацию (англ.) «Гугл» для получения дополнительной информации об использовании автономного режима браузера «Хром».

#

## Использование Node.js и Puppeteer

В ряде случаев нужно иметь больше контроля над автономном режимом «Хрома». В частности, вам может потребоваться делать скриншоты автоматически, либо использовать некую связку клиент-сервер, чтобы запрашивать скриншоты с сервера. Специально для этого «Гугл» разработал библиотеку Puppeteer, работающую на платформе Node.js.

Для его установки, просто добавьте файл со следующем содержимым в любую папку и назовите его package.json (либо скачайте готовую версию):

`{ "description": "Headless Chrome tests with Puppeteer", "dependencies": { "commander": "*", "puppeteer": "*" } }`

Перейдите в эту папку и запустите:

`npm install`

чтобы установить Puppeteer и все необходимые зависимости (включая сборку браузера «Хромиум»).

Используйте следующий скрипт Node.js чтобы автоматизировать съёмку скриншотов в «Вердж3Д»-приложении (готовая версия):

`#!/usr/bin/node import { program } from 'commander'; import puppeteer from 'puppeteer'; program .option('-u, --url [url]', 'URL to open', 'http://localhost:8668/') .option('-s, --screenshot-path programmers_guide/Server-Side-Rendering', 'A path where to save the screenshot', './screenshot.png') .option('-t, --timeout [ms]', 'Timeout after page loading before taking the screenshot', function(val) { return parseInt(val); }, 2000) .option('-W, --viewport-width [px]', 'The width of the viewport', function(val) { return parseInt(val); }, 1920) .option('-H, --viewport-height [px]', 'The height of the viewport', function(val) { return parseInt(val); }, 1080) .parse(process.argv); async function run() { console.log('Launching headless Chrome...'); const browser = await puppeteer.launch({ args: ['--use-gl=egl'] }); console.log('Opening new page...'); const page = await browser.newPage(); const opts = program.opts(); console.log('Setting viewport size to ' + opts.viewportWidth + 'x' + opts.viewportHeight + '...'); await page.setViewport({ width: opts.viewportWidth, height: opts.viewportHeight }); console.log('Opening ' + opts.url + ' ...'); await page.goto(opts.url); console.log('Waiting for ' + opts.timeout + 'ms ...'); await timeout(opts.timeout); console.log('Taking screenshot...'); await page.screenshot({ path: opts.screenshotPath, type: 'png' }); console.log('Page\'s screenshot saved to ' + opts.screenshotPath); console.log('Closing Chrome...'); await browser.close(); } function timeout(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }; run();`

Разместите этот код в файле screenshot.js в той же папке где был установлен Puppetter и запустите:

`node screenshot.js -u https://cdn.soft8soft.com/demo/blender/spinner/spinner.html`

чтобы сделать скриншот приложения «Спиннер» и сохранить его в виде изображения screenshot.png:

Скрипт скриншотов поддерживает разнообразные настройки. Для получения помощи запустите его с опцией -h:

`node screenshot.js -h`

С помощью Puppeteer вы также можете снимать видео на основе «Вердж3Д»-приложений. Читайте здесь для получения дополнительной информации.

#

## Дальнейшие шаги

В скрипте screenshot.js мы используем параметр timeout, чтобы дожидаться загрузки приложения. При реальном применении вам может понадобиться использовать более сложный метод ожидания (скачать):

`console.log('Ждём загрузки приложения...'); await page.evaluate(() => { return new Promise(resolve => { const interval = setInterval(() => { if (window.v3d.apps !== undefined && window.v3d.apps.length > 0) { clearInterval(interval); resolve(); } }, 0); }); }); await page.evaluate(() => { const app = window.v3d.apps[0]; return new Promise(resolve => { app.addEventListener('afterRender', () => { resolve(); }); }); });`

Также в этом разделе мы не рассмотрели взаимодействие клиент-сервер. Для этого вы можете воспользоваться простым HTTP-сервером или более продвинутым WebSocket-сервером.

## Остались вопросы?

Задавайте их на нашем форуме!