feat(fbo): add autoRender flag as an option to useFBO (#458)

This PR adds an `autoRender` flag to `FBOOptions`.

This flag allows consumers of `useFBO` who want to take control of when
and where to render the render target instead of always rendering it
with the default scene and camera.

Co-authored-by: Alvaro Saburido <[email protected]>

docs/guide/abstractions/fbo.md

@@ -20,3 +20,4 @@ Cientos provides an `<Fbo />` component make it easy to use FBOs in your applica
 | **`height`**   | `number` - the height of the FBO                                                                                                                                       | Height of the canvas |
 | **`depth`**    | `boolean` - Whether or not the FBO should render the depth to a [`depthTexture`](https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture). | `false`              |
 | **`settings`** | `WebGLRenderTargetOptions` - Every other configuration property for the [`WebGLRenderTarget` class](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget)      | `{}`                 |
+| **`autoRender`** | `boolean` - Whether to automatically render the FBO on the default scene. | `true`               |

playground/src/pages/abstractions/fbo/FBODemo.vue

@@ -11,6 +11,7 @@ const capsuleRef = shallowRef(null)
 const { onBeforeRender, resume } = useLoop()
 
 const state = shallowReactive({
+  autoRender: true,
   depth: false,
   settings: {
     samples: 1,

src/core/abstractions/useFBO/component.vue

@@ -5,6 +5,7 @@ import { useFBO } from '.'
 const props = withDefaults(defineProps<FboOptions>(), {
   depth: false,
   settings: undefined,
+  autoRender: true,
 })
 
 const target = useFBO(props)

src/core/abstractions/useFBO/index.ts

@@ -39,12 +39,21 @@ export interface FboOptions {
    * @memberof FboProps
    */
   settings?: RenderTargetOptions
+
+  /**
+   * Whether to automatically render the FBO on the default scene.
+   *
+   *  @default true
+   *  @type {boolean}
+   *  @memberof FboProps
+   */
+  autoRender?: boolean
 }
 
 export function useFBO(options: FboOptions) {
   const target: Ref<WebGLRenderTarget | null> = ref(null)
 
-  const { height, width, settings, depth } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
+  const { height, width, settings, depth, autoRender = ref(true) } = isReactive(options) ? toRefs(options) : toRefs(reactive(options))
 
   const { onBeforeRender } = useLoop()
   const { camera, renderer, scene, sizes, invalidate } = useTresContext()
@@ -71,11 +80,13 @@ export function useFBO(options: FboOptions) {
   }, { immediate: true })
 
   onBeforeRender(() => {
-    renderer.value.setRenderTarget(target.value)
-    renderer.value.clear()
-    renderer.value.render(scene.value, camera.value as Camera)
+    if (autoRender.value) {
+      renderer.value.setRenderTarget(target.value)
+      renderer.value.clear()
+      renderer.value.render(scene.value, camera.value as Camera)
 
-    renderer.value.setRenderTarget(null)
+      renderer.value.setRenderTarget(null)
+    }
   }, Number.POSITIVE_INFINITY)
 
   onBeforeUnmount(() => {

vite.config.ts

@@ -5,6 +5,7 @@ import banner from 'vite-plugin-banner'
 import dts from 'vite-plugin-dts'
 /* import analyze from 'rollup-plugin-analyzer' */
 
+
 /* import { visualizer } from 'rollup-plugin-visualizer' */
 import { templateCompilerOptions } from '@tresjs/core'