Thanks for your advice @sharp.
The case is that I can’t have it working, I’m already tried and checked several ways, but It refuses to work.
In my (static) HTML I have a JS object (Singleton) with the BJS functionality that renders the scene in a canvas fulfilling the whole page. The render is shown OK, and I fire the custom “sceneReady” event from scene.executeWhenReady as you state:
(Excerpt from com.vortice3d.bjs.js, called from render.html)
//2
_scene = new BABYLON.Scene(_engine);
_scene.clearColor = BABYLON.Color4.FromHexString('#00000000');
//
_scene.executeWhenReady(function () {
_engine.runRenderLoop(function () {
_scene.render();
});
//
window.dispatchEvent(new Event("sceneReady"));
console.log(_TAG+"sceneReady Dispatched!");
});
On the other side, my NodeJS module, using Puppeteer, is the classic for taking screenshots and for implementing custom-event listening:
var puppeteer = require('puppeteer');
var _TAG = "com.vortice3d.screenshot\t";
var _DEFAULT_VIEWPORT = {
width: 1920,
height: 1080,
deviceScaleFactor: 1,
};
async function takeScreenshot(params) {
//1
var browser = await puppeteer.launch({
defaultViewport: _DEFAULT_VIEWPORT,
headless: false
});
//2
var page = await browser.newPage();
//enable "console.log" inside "page.evaluate"
page.on('console', function (consoleObj) {
console.log(_TAG+consoleObj.text());
});
await page.exposeFunction('onCustomEvent', function(evt){
console.log(`${evt.type} fired`, evt.detail || '');
});
await page.evaluateOnNewDocument(function () {
document.addEventListener("sceneReady", function (evt) {
window.onCustomEvent({
type: "sceneReady",
detail: evt.detail
});
});
});
var result = await page.goto(params.url, {
/*waitUntil: "domcontentloaded"*/
/*waitUntil: 'networkidle0'*/
});
console.log(_TAG + "Result: " + result.status());
await page.waitForTimeout(2000);
var canvas = await page.$('canvas');
await canvas.screenshot({
omitBackground: true,
path: params.path
});
//await page.close();
await browser.close();
}
module.exports = takeScreenshot;
With this I can get my screenshots with the BJS scene completely rendered, but only thanks to the addition of the await page.waitForTimeout(2000), that is not the desired way, as the exposed custom event handler (onCustomEvent) is never called. Timeover delay is a “magic number” and so the correct way is to go with the custom event instead.
Any tip with this?
Thanks for your time.
P.S:
Of course, in the case onCustomEvent is fired, the screenshot functionality would have to be moved there.
“Dispatched!” effectively is shown in my console, proving dispathEvent is called.
Using document.dispatchEvent(new Event(“sceneReady”)); doesn’t make the trick.