Hey team,
When exporting a ~20mb splat to viewer using the supersplat app I’ve run into a problem where the resulting viewer html (or zip) file won’t work on Safari or mobile Safari.
The issue is related to the web components lifecycle in Safari. The viewer script tries to access the app attribute on the pc-app web component before it’s ready. I fixed it pretty jankily by adding a few Safari specific ready state checks that I’ve included below.
Your app has enabled me to revisit and complete a project that wasn’t possible/practical two years ago, so thank you very much!
To reproduce the problem, export any splat to viewer (size doesn’t matter) and try to open the html file in Safari.
const loadContent = (appElement) => {
if (!appElement) return;
customElements.whenDefined("pc-app").then(() => {
if (!appElement.isConnected || !appElement.app || !appElement.app.assets) {
setTimeout(() => loadContent(appElement), 100);
return;
}
const { app } = appElement;
const { contentUrl } = window.sse;
const asset = new Asset("scene.compressed.ply", "gsplat", {
url: contentUrl,
filename: "scene.compressed.ply",
});
asset.on("load", () => {
const entity = asset.resource.instantiate();
app.root.addChild(entity);
});
asset.on("error", (err) => {
console.log(err);
});
app.assets.add(asset);
app.assets.load(asset);
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
const appElement = document.querySelector('pc-app');
loadContent(appElement);
});
} else {
const appElement = document.querySelector('pc-app');
loadContent(appElement);
}
document.addEventListener('DOMContentLoaded', async () => {
const appElement = document.querySelector('pc-app');
const app = (await appElement.ready()).app;
// ..rest of code
