[Feature request] Support for prerendering/SSR/static rendering

[brunobely]

It would be awesome if it was possible to show a placeholder image before the graphics context loads on the client. I'm by no means a WebGL or graphics expert but I think this could be achieved with libraries such as headless-gl?

Another neat feature something like that would unlock would be something like a static prop which would make it it so that the shader is prerendered as an image and doesn't actually use WebGL on the client. I've been playing around with a MeshGradient + Metaballs and it freezes up my GPU process in Chrome after the tab has been open for a while, so a static equivalent, especially if the shader is just used as a cool background, would be amazing.

The static option could also make the prerender simulate the state of a shader after some amount of time had elapsed since it started?

[Clement-coder]

I’m passionate about improving UI performance and user experience. This issue is a great opportunity to work more about WebGL while contributing a practical solution that helps users. I’d love to work on it!

[uuuulala]

Hi Bruno! Just a heads-up on this: thank you, what you're saying makes sense! I think we're going to explore the pre-rendering direction when working on shader docs.

One relevant note: if you set the speed prop to 0, the animation loop stops - this is effectively a static mode for shaders. Each animation also has an additional frame prop, which lets you select the timestamp value for a static image / background