Support for Custom Renderers

[alvarosabu]

Description

As of now, https://github.com/Tresjs/tres/blob/main/src/composables/useRenderer/index.ts#L209 supports the default WebGL 2 renderer.

The idea would be to adapt useRenderer so a custom renderer like https://github.com/mrdoob/three.js/blob/dev/examples/jsm/renderers/webgpu/WebGPURenderer.js can be used.

Suggested solution

Check out R3F and NGT support

https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/core/index.tsx#L108

Alternative

No response

Additional context

No response

Validations

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

[callumacrae]

I've been having a look at this. Depending on the level of support we want, this might be tricky. WebGPURenderer might be fine, but Tres seems to assume that the output element will be a canvas, which in the case of SVGRenderer, CSS2DRenderer, stuff like that, the output element is not a canvas.

Looks like to truly support any renderer, we'd have to take the returned domElement and use that instead of providing our own.

Maybe it would be best to support only canvas-based renderers?

(R3F also only support canvas-based renderers)

Here's the interface for SVGRenderer: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/examples/jsm/renderers/SVGRenderer.d.ts And here's an example of usage: https://github.com/mrdoob/three.js/blob/master/examples/svg_lines.html

[callumacrae]

Another complication - to use a canvas-based renderer, Tres needs to instantiate the renderer (because it has the canvas), but for an example like this, we need access to the renderer itself in the vue component.

I'm giving up for now - if anyone wants to pick it up in the future, here's what I tried so far :) https://github.com/callumacrae/tres/commit/a475a3f814932732883ebc69ac95babaf2cb14b1

[drcmda]

the output element is not a canvas. (R3F also only support canvas-based renderers)

the output doesn't really matter because for various reasons you don't want to output a canvas anyway as the outmost element but a div (or a view on native). the reason for this is you have eco system overlays that rely on being in the same nesting as the canvas element, for instance the addons html or view components.

here's an example of a svg renderer in react https://codesandbox.io/s/zcuqh?file=/src/App.js