ASCIIText

1// Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE
2 
3import { useEffect, useRef } from 'react';
4import * as THREE from 'three';
5 
6const vertexShader = `
7varying vec2 vUv;
8uniform float uTime;
9uniform float mouse;
10uniform float uEnableWaves;
11 
12void main() {
13    vUv = uv;
14    float time = uTime * 5.;
15 
16    float waveFactor = uEnableWaves;
17 
18    vec3 transformed = position;
19 
20    transformed.x += sin(time + position.y) * 0.5 * waveFactor;
21    transformed.y += cos(time + position.z) * 0.15 * waveFactor;
22    transformed.z += sin(time + position.x) * waveFactor;
23 
24    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
25}
26`;
27 
28const fragmentShader = `
29varying vec2 vUv;
30uniform float mouse;
31uniform float uTime;
32uniform sampler2D uTexture;
33 
34void main() {
35    float time = uTime;
36    vec2 pos = vUv;
37    
38    float move = sin(time + mouse) * 0.01;
39    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;
40    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;
41    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;
42    float a = texture2D(uTexture, pos).a;
43    gl_FragColor = vec4(r, g, b, a);
44}
45`;
46 
47function map(n: number, start: number, stop: number, start2: number, stop2: number) {
48  return ((n - start) / (stop - start)) * (stop2 - start2) + start2;
49}
50 
51const PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
52 
53interface AsciiFilterOptions {
54  fontSize?: number;
55  fontFamily?: string;
56  charset?: string;
57  invert?: boolean;
58}
59 
60class AsciiFilter {
61  renderer!: THREE.WebGLRenderer;
62  domElement: HTMLDivElement;
63  pre: HTMLPreElement;
64  canvas: HTMLCanvasElement;
65  context: CanvasRenderingContext2D | null;
66  deg: number;
67  invert: boolean;
68  fontSize: number;
69  fontFamily: string;
70  charset: string;
71  width: number = 0;
72  height: number = 0;
73  center: { x: number; y: number } = { x: 0, y: 0 };
74  mouse: { x: number; y: number } = { x: 0, y: 0 };
75  cols: number = 0;
76  rows: number = 0;
77 
78  constructor(renderer: THREE.WebGLRenderer, { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}) {
79    this.renderer = renderer;
80    this.domElement = document.createElement('div');
81    this.domElement.style.position = 'absolute';
82    this.domElement.style.top = '0';
83    this.domElement.style.left = '0';
84    this.domElement.style.width = '100%';
85    this.domElement.style.height = '100%';
86 
87    this.pre = document.createElement('pre');
88// … truncated