无头 chrome 中的 Autodesk forge 查看器，CONTEXT_LOST_WEBGL

Question

我正在尝试使用无头 Chrome（Win10 上的 v66，使用 C#）从 Forge Autodesk 查看器中的 3D 模型截取一系列屏幕截图。

我面临的问题是，加载模型后，我将相机设置为第一个位置，截取屏幕截图，然后尝试将相机设置为下一个屏幕截图的下一个位置。一旦我尝试过（稍后在初始加载时设置相机位置），webgl 上下文就会丢失。

我对 WebGL / swiftshaders / 等知之甚少，但令我沮丧的是，当我在加载后直接定位相机时，它确实有效。 （IE，解决方法是为每个摄像头视图生成一个单独的无头会话，但由于几何体的加载需要 20 秒或更长时间，这不是首选）

所以，这个：

viewerApp.myCurrentViewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
function () {
    _viewer = viewerApp.myCurrentViewer;
    SetPerspective();
    SetCamera(cams[0].position, cams[0].target);//no probs here
    document.getElementById('MyViewerDiv').classList.add("geometry-loaded");       
 });

有效（相机已定位），但是当我稍后执行 javascript 函数时（使用 driver.ExecuteScript($"SetCamera({JsonConvert.SerializeObject(target.Value.Position)},{JsonConvert.SerializeObject(target.Value.Target)});"); 或页面本身超时，它会输出 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost。

当我使用较小的模型时，一切正常。因此，我想我理解原因是内存/处理消耗过多，但是为什么它仍然有效呢？

查看资源监视器，我不相信消耗实际上是有问题的，我的笔记本电脑应该能够（i7HQ7700、gtx1050、16gbRam）我尝试摆弄 Chrome 的一些 GPU 和 GL 标志，但无济于事。我怀疑 GPU 没有被使用（我发现一些帖子实际上可以在 headless 中使用......）另外，forge 查看器输出 GPU mem used，但这可能只是日志消息：

Starting ChromeDriver 2.38.552522 (437e6fbedfa8762dec75e2c5b3ddb86763dc9dcb) on port 62676
Only local connections are allowed.
[0517/203535.902:ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context.

DevTools listening on ws://127.0.0.1:12556/devtools/browser/5b66c120-dc64-4211-a207-ac97152ace9a
---some ssl future warnings---
[0517/203540.524:INFO:CONSOLE(2)] "THREE.WebGLRenderer", source: https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js (2)
[0517/203543.074:INFO:CONSOLE(0)] "[.Offscreen-For-WebGL-00000237DECBB270]RENDER WARNING: there is no texture bound to the unit 0", source: http://localhost:8881/Content/Screenshot.html
[0517/203543.074:INFO:CONSOLE(0)] "[.Offscreen-For-WebGL-00000237DECBB270]RENDER WARNING: there is no texture bound to the unit 0", source: http://localhost:8881/Content/Screenshot.html
[0517/203552.280:INFO:CONSOLE(2)] "Total geometry size: 8.434013366699219 MB", source: https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js (2)
[0517/203552.281:INFO:CONSOLE(2)] "Number of meshes: 2909", source: https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js (2)
[0517/203552.281:INFO:CONSOLE(2)] "Num Meshes on GPU: 2908", source: https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js (2)
[0517/203552.281:INFO:CONSOLE(2)] "Net GPU geom memory used: 7494392", source: https://developer.api.autodesk.com/modelderivative/v2/viewers/three.min.js (2)
[0517/203558.143:INFO:CONSOLE(0)] "WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost", source: http://localhost:8881/Content/Screenshot.html

完整地说，在没有--headless 标志的情况下运行相同的程序，工作正常，所以我猜代码本身没问题。

有什么办法可以增加允许的资源之类的吗？

（SetCamera 的代码）

        function SetCamera(newPos, newTarget) {
        nav = nav || viewerApp.myCurrentViewer.navigation;

        nav.setPosition(newPos);
        nav.setTarget(newTarget);
        nav.orientCameraUp();
    }

编辑：测试用例（目前在测试网站上，所以我们会在某个时候删除）

EDIT2：运行以下代码的结果

NodeJS：

try {

    const URN = '';
    const Token = '';

    (async () => {
        const puppeteer = require('puppeteer');
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        console.log('browsing');

        await page.goto('https://rogerintelligentcloud.azurewebsites.net/test?urn=' + URN + '&token=' + Token);
        //replace autodeskURN and token to point to your model

        console.log("waiting");
        await page.mainFrame().waitForSelector(
            '.geometry-loaded', {
                timeout: 60000
            });

        await takescreen(page, 'nodetest1');
        await takescreen(page, 'nodetest2');
        await takescreen(page, 'nodetest3');
        await takescreen(page, 'nodetest4');
        await takescreen(page, 'nodetest5');
        await takescreen(page, 'nodetest6');    

        await page.evaluate("Test();");

        await takescreen(page, 'nodetest11');
        await takescreen(page, 'nodetest12');
        await takescreen(page, 'nodetest13');
        await takescreen(page, 'nodetest14');
        await takescreen(page, 'nodetest15');
        await takescreen(page, 'nodetest16');        

        await browser.close();
    })();
} catch (e) {
    console.log(e);
}

async function takescreen(page, name){
    await page.screenshot({
        path: 'c:\\temp\\'+name+'.png'
    });
}

Answer 1

我没有看到任何与WebGL 相关的错误消息出现在您的 sn-p 和rme_advanced_sample_project.rvt 模型中，我唯一能看到的是page.delay is not defined。这是我从您的代码 sn-p 和 Philippe 的 forge-viewer-headless 演示修改的测试代码。如果我错过了什么，请指出。谢谢~

import puppeteer from 'puppeteer'
import 'babel-polyfill'
import path from 'path'
import os from 'os';

try {
    const URN = 'YOUR_URN';
    const Token = 'YOUR_TOKEN';

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(`https://rogerintelligentcloud.azurewebsites.net/test?urn=${ URN }&token=${ Token }`);
    //replace autodeskURN and token to point to your model

        await page.mainFrame().waitForSelector(
            '.geometry-loaded', {
                timeout: 60000
            });

        await delay(3000);

        await page.screenshot({
          path: path.join( os.tmpdir(), 'nodetest.png' )
        })


        await page.evaluate("Test();");
        await page.evaluate("Test();");
        await page.evaluate("Test();");
        await page.evaluate("Test();");

        await delay(3000);

        const targetTxt = await page.evaluate(() => document.querySelector('body > :last-child').innerText );
        console.log( targetTxt );

        const targetLen = await page.evaluate(() => document.querySelectorAll('body > div:not(.box)').length );
        console.log( targetLen );

        await page.screenshot({
          path: path.join( os.tmpdir(), 'nodetest2.png' )
        })

        await browser.close();
    })();

    function delay(timeout) {
        return new Promise((resolve) => {
            setTimeout(resolve, timeout);
        });
    }
}
catch (e) {
    console.log(e);
}

我的测试结果截图：

1. nodetest.png：

2. nodetest2.png：

编辑 2：

用您的代码测试，它在我的机器上运行良好。

但是有一个更改可以在我的环境中正确运行您的代码。我修改了你的takescreen函数定义：

function takescreen(page, name){
    return page.screenshot({
        path: 'c:\\temp\\'+name+'.png'
    });
}