https://github.com/emilwidlund/ascii

THREE.js ASCII Effect on the GPU
https://github.com/emilwidlund/ascii

Last synced: 19 days ago
JSON representation

THREE.js ASCII Effect on the GPU

• Host: GitHub
• URL: https://github.com/emilwidlund/ascii
• Owner: emilwidlund
• Created: 2023-04-29T15:52:28.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-19T12:58:56.000Z (3 months ago)
• Last Synced: 2024-10-18T22:33:33.847Z (27 days ago)
• Language: TypeScript
• Size: 9.77 KB
• Stars: 145
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ASCII

An ASCII effect for THREE.js - which runs as a fragment shader on the GPU. Inspired by https://github.com/darkroomengineering/aniso.

### Supported Props

```typescript

interface IASCIIEffectProps {

    characters?: string; // The ASCII characters to use in brightness order dark -> light

    fontSize?: number; // Font Size of the characters drawn to the texture

    cellSize?: number; // Size of each cell in the grid

    color?: string; // Color of the characters

    invert?: boolean; // Flag which inverts the effect

}

```

### Example with @react-three/fiber

```jsx

import React from 'react';

import { Canvas } from '@react-three/fiber';

import { EffectComposer } from '@react-three/postprocessing';

const Scene = () => {

    const asciiEffect = React.useMemo(() => new ASCIIEffect(), []);

    return (

        

            

                

                

            

            

            

                

            

        

    );

};

```