glodrei/docs/misc/use-depth-buffer.mdx

useful add-ons for react-three-fiber

---
title: useDepthBuffer
sourcecode: src/core/useDepthBuffer.ts
---

<Grid cols={4}>
  <li>
    <Codesandbox id="tx1pq" />
  </li>
</Grid>

Renders the scene into a depth-buffer. Often effects depend on it and this allows you to render a single buffer and share it, which minimizes the performance impact. It returns the buffer's `depthTexture`.

Since this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once by setting `frames: 1`.

```jsx
const depthBuffer = useDepthBuffer({
  size: 256, // Size of the FBO, 256 by default
  frames: Infinity, // How many frames it renders, Infinity by default
})
return <SomethingThatNeedsADepthBuffer depthBuffer={depthBuffer} />
```