Add support for OffscreenCanvas

[vincesp]

Description

As a TresJS developer, I want to be able to render a three scene into an OffscreenCanvas so that I can generate screenshots for downloading without having to add the scene to the DOM.

This is particularly interesting when using a library like h264-mp4-encoder to render several frames into a movie for downloading.

Suggested solution

three's WebGLRenderer which is used in useRendererManager.ts has support for both HTMLCanvasElement and OffscreenCanvas, see WebGLRenderer.js#L3424.

Suggested solution:

• Implement a new TresOffscreenCanvas component that creates an OffscreenCanvas instead of a <canvas> element
• Expose its instance methods so that developers can access the rendered image with convertToBlob(), getContext('2d').getImageData(), or transferToImageBitmap()
• If an OffscreenCanvas is used, disable features related to auto-resizing or event handling throughout Tres that are not available nor meaningful for a canvas that is not part of the DOM

Alternative

No response

Additional context

We use three in Vue for our project to render image data. The tool has a screenshot feature that can either export the current frame as PNG or all frames (with the current view's settings) as MP4. This currently works well with three and an OffscreenCanvas. However, as complexity grows, our code would benefit from a transition to a declarative approach using Tres. But without support for an OffscreenCanvas, implementing the screenshot features will become cumbersome.

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alvarosabu]

Hi @vincesp, this sounds quite interesting, since it's a feature request, I will convert it into a discussion so we can take it further