Force render update prior to toBlob Poster generation?

[milesgreen]

Description

Is it possible to force a render update prior to using toBlob Poster generation?

When updating certain properties (EG Camera orbit, or the size of Model Viewer itself) and immediately calling toBlob to generate a Poster image, the generated image is of the previous state, not the freshly updated state. Presumably, this is due to a frame update cycle delay? One workaround is to set a timeout to delay the image capture. But is there a more elegant and immediate way to force the renderer to update and redraw with the latest properties?

[elalish]

Yes, the natural way to achieve this in general on a browser is to call requestAnimationFrame(); you'll see many examples of us doing this in our tests for the same reason. We have a little helper you can copy that resolves its promise inside the callback, so you can easily await it.

[milesgreen]

Amazing. Thanks. Like this?

model-viewer/packages/modelviewer.dev/src/tester.ts

Lines 97 to 108 in bb82a5b

	export async function createPoster() {
	const orbit = viewer.getCameraOrbit();
	orbitString.textContent = `${orbit.theta}rad ${orbit.phi}rad auto`;
	viewer.fieldOfView = 'auto';
	viewer.jumpCameraToGoal();
	await new Promise(resolve => requestAnimationFrame(() => resolve()));
	URL.revokeObjectURL(posterUrl);
	const blob = await viewer.toBlob({mimeType: 'image/png', idealAspect: true});
	posterUrl = URL.createObjectURL(blob);
	downloadButton.disabled = false;
	displayButton.disabled = false;
	}