glodrei/docs/abstractions/ascii-renderer.mdx

useful add-ons for react-three-fiber

---
title: AsciiRenderer
sourcecode: src/core/AsciiRenderer.tsx
---

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

Abstraction of three's [AsciiEffect](https://threejs.org/examples/?q=as#webgl_effects_ascii). It creates a DOM layer on top of the canvas and renders the scene as ascii characters.

```tsx
type AsciiRendererProps = {
  /** Render index, default: 1 */
  renderIndex?: number
  /** CSS background color (can be "transparent"), default: black */
  bgColor?: string
  /** CSS character color, default: white */
  fgColor?: string
  /** Characters, default: ' .:-+*=%@#' */
  characters?: string
  /** Invert character, default: true */
  invert?: boolean
  /** Colorize output (very expensive!), default: false */
  color?: boolean
  /** Level of detail, default: 0.15 */
  resolution?: number
}
```

```jsx
<Canvas>
  <AsciiRenderer />
```