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

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

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

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

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

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