WebGL & Shader: GPU로 텍스트 렌더링하기

텍스트 입력 → Canvas 2D 텍스처 생성 → Three.js 씬 렌더링 (GPU)
  → Shader 효과 적용 (GPU) → Canvas로 캡처 (CPU) → 밝기→ASCII 변환 (CPU) → 화면 출력

// 최소한의 Three.js 씬
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.z = 30; // 카메라를 z축 30 위치에 배치

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(width, height);

// 매 프레임 렌더링
renderer.render(scene, camera);

new THREE.PerspectiveCamera(fov, aspect, near, far);

// 평면 도형: 너비 × 높이, 36×36 세그먼트로 분할
const geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);

// 커스텀 셰이더 재질
const material = new THREE.ShaderMaterial({
  vertexShader,       // 정점 위치 변환 (파도 효과)
  fragmentShader,     // 픽셀 색상 계산 (색수차 효과)
  transparent: true,
  uniforms: {         // JavaScript → Shader로 전달할 데이터
    uTime: { value: 0 },
    uTexture: { value: texture },
    uEnableWaves: { value: 1.0 }
  }
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

varying vec2 vUv;
uniform float uTime;
uniform float uEnableWaves; // 0.0(off) 또는 1.0(on)

void main() {
    vUv = uv;                    // UV 좌표를 Fragment로 전달
    float time = uTime * 5.;    // 시간 5배 증폭

    float waveFactor = uEnableWaves;

    vec3 transformed = position; // 원본 정점 위치

    // 3축에 sin/cos 파동 적용
    transformed.x += sin(time + position.y) * 0.5 * waveFactor;
    transformed.y += cos(time + position.z) * 0.15 * waveFactor;
    transformed.z += sin(time + position.x) * waveFactor;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
}

varying vec2 vUv;
uniform float uTime;
uniform sampler2D uTexture; // 텍스트 텍스처

void main() {
    float time = uTime;
    vec2 pos = vUv;

    // RGB 각 채널을 서로 다른 오프셋으로 샘플링
    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;
    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;
    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;
    float a = texture2D(uTexture, pos).a;

    gl_FragColor = vec4(r, g, b, a);
}

R 채널: pos + cos(time * 2 - time + pos.x) * 0.01  ← 원본보다 약간 오른쪽
G 채널: pos + tan(time * 0.5 + pos.x - time) * 0.01 ← 다른 방향으로 이동
B 채널: pos - cos(time * 2 + time + pos.y) * 0.01  ← 또 다른 방향으로 이동

CanvasTxt (텍스트→Canvas 텍스처)
    ↓
CanvAscii (Three.js 씬 + ShaderMaterial)
    ↓ GPU 렌더링
AsciiFilter (WebGL→Canvas 캡처 → 밝기→ASCII)
    ↓
<pre> 태그에 ASCII 문자열 출력
    ↓
React 컴포넌트 (useEffect 생명주기 관리)

class CanvasTxt {
  canvas: HTMLCanvasElement;
  context: CanvasRenderingContext2D | null;
  font: string;

  constructor(txt: string, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' } = {}) {
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    this.font = `600 ${this.fontSize}px ${this.fontFamily}`;
  }

  // 텍스트 크기를 측정하여 캔버스를 딱 맞는 크기로 설정
  resize() {
    this.context.font = this.font;
    const metrics = this.context.measureText(this.txt);
    this.canvas.width = Math.ceil(metrics.width) + 20;
    this.canvas.height = Math.ceil(
      metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
    ) + 20;
  }

  // 캔버스에 텍스트 렌더링
  render() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.fillStyle = this.color;
    this.context.font = this.font;
    this.context.fillText(this.txt, 10, yPos);
  }

  get texture() { return this.canvas; } // Three.js CanvasTexture의 소스
}

class CanvAscii {
  // 초기화 순서: 폰트 로딩 → 메시 생성 → 렌더러 설정
  async init() {
    await document.fonts.load('600 200px "IBM Plex Mono"');
    await document.fonts.ready;
    this.setMesh();
    this.setRenderer();
  }

  setMesh() {
    // 1. CanvasTxt로 텍스트 텍스처 생성
    this.textCanvas = new CanvasTxt(this.textString, { fontSize: this.textFontSize });
    this.textCanvas.resize();
    this.textCanvas.render();

    // 2. Canvas → Three.js 텍스처
    this.texture = new THREE.CanvasTexture(this.textCanvas.texture);
    this.texture.minFilter = THREE.NearestFilter; // 픽셀 보간 없이 선명하게

    // 3. 텍스트 비율에 맞는 PlaneGeometry
    const textAspect = this.textCanvas.width / this.textCanvas.height;
    this.geometry = new THREE.PlaneGeometry(baseH * textAspect, baseH, 36, 36);

    // 4. 커스텀 ShaderMaterial
    this.material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uTime: { value: 0 },
        uTexture: { value: this.texture },
        uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }
      }
    });

    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.scene.add(this.mesh);
  }
}

CanvasTxt.canvas → THREE.CanvasTexture → ShaderMaterial.uniforms.uTexture
  → Fragment Shader에서 texture2D()로 읽기

render() {
  const time = new Date().getTime() * 0.001;

  this.textCanvas.render();          // 텍스트 재렌더링
  this.texture.needsUpdate = true;   // Three.js에 텍스처 변경 알림

  // 시간 uniform 업데이트 — Shader에서 파도와 색수차에 사용
  (this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time);

  this.updateRotation();             // 마우스 기반 회전
  this.filter.render(this.scene, this.camera); // ASCII 필터 렌더
}

updateRotation() {
  // 마우스 위치를 -0.5 ~ 0.5 범위로 변환
  const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);
  const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);

  // 현재 회전값과 목표값의 5% 차이만 적용 → 부드러운 추종
  this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;
  this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;
}

map(n, start, stop, start2, stop2)
= ((n - start) / (stop - start)) * (stop2 - start2) + start2

예: map(150, 0, 300, 0.5, -0.5)
  = ((150 - 0) / (300 - 0)) * (-0.5 - 0.5) + 0.5
  = 0.5 * (-1.0) + 0.5
  = 0.0  (정중앙에서 회전 없음)

reset() {
  this.context.font = `${this.fontSize}px ${this.fontFamily}`;
  const charWidth = this.context.measureText('A').width;

  // 화면 너비를 문자 폭으로 나누어 열 수 계산
  this.cols = Math.floor(this.width / (this.fontSize * (charWidth / this.fontSize)));
  this.rows = Math.floor(this.height / this.fontSize);

  // 캔버스를 격자 크기로 축소 → 1픽셀 = 1문자
  this.canvas.width = this.cols;
  this.canvas.height = this.rows;
}

render(scene: THREE.Scene, camera: THREE.Camera) {
  this.renderer.render(scene, camera);  // Three.js GPU 렌더링

  // GPU 결과를 축소 캔버스로 복사 (다운샘플링)
  this.context.drawImage(this.renderer.domElement, 0, 0, this.cols, this.rows);

  this.asciify(this.context, this.cols, this.rows); // 밝기→ASCII 변환
  this.hue();  // 색상 회전
}

asciify(ctx, w, h) {
  const imgData = ctx.getImageData(0, 0, w, h).data;
  let str = '';

  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const i = x * 4 + y * 4 * w; // RGBA → 4바이트씩
      const [r, g, b, a] = [imgData[i], imgData[i+1], imgData[i+2], imgData[i+3]];

      if (a === 0) { str += ' '; continue; } // 투명 = 공백

      // 가중 평균 밝기: 인간 시각은 녹색에 가장 민감
      let gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;

      // 밝기를 charset 인덱스로 변환
      let idx = Math.floor((1 - gray) * (this.charset.length - 1));
      if (this.invert) idx = this.charset.length - idx - 1;

      str += this.charset[idx];
    }
    str += '\n';
  }
  this.pre.textContent = str;
}

gray = (0.3 × 200 + 0.6 × 150 + 0.1 × 100) / 255
     = (60 + 90 + 10) / 255
     = 160 / 255
     = 0.627

idx = floor((1 - 0.627) × 69) = floor(0.373 × 69) = floor(25.7) = 25
invert가 true이면: idx = 70 - 25 - 1 = 44

hue() {
  // 마우스와 중심 사이의 각도 계산 (라디안 → 도)
  const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;
  // 현재 각도에서 목표 각도로 7.5%씩 보간
  this.deg += (deg - this.deg) * 0.075;
  this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;
}

export default function ASCIIText({ text, asciiFontSize, ... }: ASCIITextProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const asciiRef = useRef<CanvAscii | null>(null);

  useEffect(() => {
    let cancelled = false;
    let observer: IntersectionObserver | null = null;
    let ro: ResizeObserver | null = null;

    const setup = async () => {
      const { width, height } = containerRef.current!.getBoundingClientRect();

      // 크기가 0이면 IntersectionObserver로 가시성 대기
      if (width === 0 || height === 0) {
        observer = new IntersectionObserver(async ([entry]) => {
          if (entry.isIntersecting && !cancelled) {
            observer?.disconnect();
            asciiRef.current = await createAndInit(...);
            asciiRef.current.load();
          }
        }, { threshold: 0.1 });
        observer.observe(containerRef.current!);
        return;
      }

      asciiRef.current = await createAndInit(...);
      asciiRef.current.load();

      // ResizeObserver로 반응형 대응
      ro = new ResizeObserver(entries => {
        const { width: w, height: h } = entries[0].contentRect;
        if (w > 0 && h > 0) asciiRef.current.setSize(w, h);
      });
      ro.observe(containerRef.current!);
    };

    setup();

    // cleanup: 모든 리소스 해제
    return () => {
      cancelled = true;
      observer?.disconnect();
      ro?.disconnect();
      asciiRef.current?.dispose();
      asciiRef.current = null;
    };
  }, [text, asciiFontSize, textFontSize, textColor, planeBaseHeight, enableWaves]);

  return <div ref={containerRef} style={{ position: 'absolute', width: '100%', height: '100%' }} />;
}

dispose() {
  cancelAnimationFrame(this.animationFrameId); // 애니메이션 루프 중단
  this.filter.dispose();                        // 이벤트 리스너 제거
  this.container.removeChild(this.filter.domElement); // DOM에서 제거

  // Three.js 리소스 해제
  this.scene.traverse(object => {
    const obj = object as THREE.Mesh;
    if (!obj.isMesh) return;
    obj.geometry.dispose();        // 정점 데이터 해제
    [obj.material].flat().forEach(mat => {
      mat.dispose();               // 셰이더 프로그램 해제
      // material 내부의 텍스처도 순회하며 해제
      Object.keys(mat).forEach(key => {
        const prop = mat[key];
        if (prop?.dispose) prop.dispose();
      });
    });
  });
  this.scene.clear();
  this.renderer.dispose();         // WebGL 컨텍스트 해제
}

async init() {
  try {
    await document.fonts.load('600 200px "IBM Plex Mono"');
  } catch (e) {}
  await document.fonts.ready; // 모든 폰트 로딩 완료까지 대기
  this.setMesh(); // 이제 안전하게 텍스트 측정 가능
}

ro = new ResizeObserver(entries => {
  const { width: w, height: h } = entries[0].contentRect;
  if (w > 0 && h > 0) {
    asciiRef.current.setSize(w, h); // camera.aspect + filter.setSize + 격자 재계산
  }
});