@threlte/extras

useFBO

useFBO (Framebuffer Object) is a hook that creates a THREE.WebGLRenderTarget. This is a port of drei’s useFBO hook.

Framebuffer objects are useful for cases where you want to render a scene but not display it. For example, rendering a scene to a framebuffer then passing that to a fragment shader as a uniform. You can read more about WebGLRenderTarget’s here.

<script lang="ts">
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<div>
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
  }
</style>

<script lang="ts">
  import { T, useTask, useThrelte } from '@threlte/core'

  import { interactivity, OrbitControls, Sky, useFBO } from '@threlte/extras'

  import { Mesh, PerspectiveCamera, Vector2 } from 'three'

  interactivity()

  const { camera, renderer, scene, size } = useThrelte()

  // render scene at a lower resolution
  const renderTarget = useFBO($size.width * 0.5, $size.height * 0.5, {
    samples: 4
  })

  // change aspect ratio of the texture because we are putting it on a circle so w and h are the same
  const aspect = new Vector2($size.height / $size.width, 1).normalize()
  renderTarget.texture.repeat.set(aspect.x, aspect.y)
  renderTarget.texture.offset.x = -0.5 * (aspect.x - 1)
  renderTarget.texture.offset.y = -0.5 * (aspect.y - 1)

  let fboPreviewMesh: Mesh

  let knotRotation = 0

  useTask((delta) => {
    knotRotation += delta
    if (!fboPreviewMesh) return
    const cam = $camera as PerspectiveCamera

    fboPreviewMesh.visible = false
    renderer.setRenderTarget(renderTarget)
    renderer.render(scene, cam)

    fboPreviewMesh.visible = true
    renderer.setRenderTarget(null)
  })
</script>

<T.PerspectiveCamera
  makeDefault
  position={[5, 1, 5]}
>
  <OrbitControls />
</T.PerspectiveCamera>

<Sky />

<T.Mesh
  rotation.x={knotRotation}
  rotation.z={knotRotation}
>
  <T.TorusKnotGeometry />
  <T.MeshStandardMaterial />
</T.Mesh>

<T.Mesh
  position.z={-5}
  position.x={-0.1}
  bind:ref={fboPreviewMesh}
>
  <T.PlaneGeometry args={[5, 5]} />
  <T.MeshBasicMaterial
    map={renderTarget.texture}
    color="#CCFFCC"
  />
</T.Mesh>

Options

type UseFBOOptions = {
  /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 */
  samples?: number
  /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
  depth?: boolean
} & THREE.WebGLRenderTargetOptions

export function useFBO(
  /** Width in pixels, or options (will render fullscreen by default) */
  width?: number | UseFBOOptions,
  /** Height in pixels */
  height?: number,
  /**Options */
  options?: UseFBOOptions
): THREE.WebGLRenderTarget

Previous Page layers

Next Page Peformance