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 
47Math.map = function (n, start, stop, start2, stop2) {
48  return ((n - start) / (stop - start)) * (stop2 - start2) + start2;
49};
50 
51const PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
52 
53class AsciiFilter {
54  constructor(renderer, { fontSize, fontFamily, charset, invert } = {}) {
55    this.renderer = renderer;
56    this.domElement = document.createElement('div');
57    this.domElement.style.position = 'absolute';
58    this.domElement.style.top = '0';
59    this.domElement.style.left = '0';
60    this.domElement.style.width = '100%';
61    this.domElement.style.height = '100%';
62 
63    this.pre = document.createElement('pre');
64    this.domElement.appendChild(this.pre);
65 
66    this.canvas = document.createElement('canvas');
67    this.context = this.canvas.getContext('2d');
68    this.domElement.appendChild(this.canvas);
69 
70    this.deg = 0;
71    this.invert = invert ?? true;
72    this.fontSize = fontSize ?? 12;
73    this.fontFamily = fontFamily ?? "'Courier New', monospace";
74    this.charset = charset ?? ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';
75 
76    this.context.webkitImageSmoothingEnabled = false;
77    this.context.mozImageSmoothingEnabled = false;
78    this.context.msImageSmoothingEnabled = false;
79// … truncated