Does anyone knows why my Playcanvas app won’t load on Chromium with Puppeteer?
We created a product configurator and we need to take some photos with a server (for creating PDF) and playcanvas is always stuck on loading screen on 0%.
I did introduce setTimeout function and it works (checked with different websites), but the PC app is always stuck and not loading. I also tried different PC apps from the site, but all of them won’t load.
I tried loading times from 5 seconds up to 5 minutes, and it’s always returning images of loader screen with 0 progress.
Is there some WebGL dependency or what it might be?
My app is developed on Gadget.dev which is a Fastify/Node.js framework. And everything works, just this won’t load
What I am trying to do is to open the playcanvas, load it, wait for event that says it’s loaded, then I send some postMessages to the playcanvas to setup configuration (there is an event listener that does this), then I take 3 screenshots with 3 different camera angles (also have listener for camera change).
And that’s it. Just I can’t move on from loading. And my serverless backend doesn’t have any GPU. Is it possible to run WebGL without a GPU? Or this is the problem?
That’s the version I am using. But I am not using it’s chromium, but the one Gadget team installed for me, so I can use puppetteer-core as well for that matter.
Here is my script:
let browser, page;
try {
// Initialize Puppeteer browser and page
browser = await puppeteer.launch({
headless: true, // Set to false if you want to see the browser UI
executablePath: "/usr/bin/chromium",
arg: ["--no-sandbox", "--headless", "--enable-gpu"],
});
page = await browser.newPage();
// Setup a promise to wait for a specific console message
const waitForConsoleMessage = new Promise((resolve) => {
page.on("console", (msg) => {
if (msg.text().includes("PlayCanvas App Started!")) {
// Adjust the message text as needed
logger.info("Detected PlayCanvas load completion in console.");
resolve();
}
});
});
// Navigate to the page
// await page.goto("https://playcanv.as/p/93709109/", { waitUntil: 'networkidle0' });
await page.goto("https://get.webgl.org/", { waitUntil: "networkidle0" });
// Wait for the specific console message
// await waitForConsoleMessage;
// await new Promise(resolve => setTimeout(resolve, 10000));
// Send SKU details and configurations to PlayCanvas
for (const spec of orderSpecifications) {
const details = {
type: "SKU_details",
sku: spec.sku,
};
if (spec.properties) {
if (spec.properties.font) {
details.font = spec.properties.font;
}
if (spec.properties.engravingText) {
details.engravingText = spec.properties.engravingText;
}
if (spec.properties.printImage) {
details.printImage = spec.properties.printImage;
}
}
// Send the details to PlayCanvas
await page.evaluate((details) => {
window.postMessage(details, "*");
}, details);
}
const screenshots = [];
// Define camera angles and take screenshots from specified angles
const cameraAngles = [7, 5, 8]; // Example camera angles: Front, Side, and Back
for (let index of cameraAngles) {
await page.evaluate((index) => {
window.postMessage({ type: "CameraChange", index }, "*");
}, index);
// Wait a moment for the camera to settle
await new Promise((resolve) => setTimeout(resolve, 1000));
// Take a screenshot and store it
const buffer = await page.screenshot();
screenshots.push(buffer.toString("base64"));
}
// Close the browser once done
await browser.close();
// Return or handle the screenshots as needed
return screenshots;
} catch (error) {
console.error("Error during image generation:", error);
await browser.close();
throw error; // Rethrow or handle error as needed
}
};
I went through them, but didn’t quite understand what I need to do except that proposal for --enable-gpu which I added, but I guess that since I don’t have GPU on server I need a different command.
I didn’t even try, not sure how, as my CLI for Gadget doesn’t pull full app from my understanding, so I can’t run the entire app in localhost.
I will see if I can do it. But on my end, I have a GPU and it will probably work, also I don’t know which chromium they installed for me, so I also guess that the entire setup on my side would not represent the same environment as online.
They say it should work, and they think it’s a problem due to some drivers and installations, which they will provide.
What I would do in this situation is to get it working locally so you can be sure it’s not your Puppeteer or PlayCanvas code that is the issue. Once you have a known working solution, you can use that with Gadget to try to debug their side
I don’t know about gadget.dev, but serverless architectures tend to have heavily constrained runtimes without a graphics API. This may be what you’re likely facing.
It is true, but Chromium should run WebGL without GPU anyway. So there might be solution. As for runtimes, I am pretty sure that Gadget’s team can help with those as they are really receptive and already installed Chromium for me (as I was not able to install it with all the dependencies, due to a size and other limitations)
