ASCII Render

1"use client";
2 
3import type React from "react";
4import { AbsoluteFill, useVideoConfig } from "remotion";
5import {
6  type CanvasFilterProps,
7  makeCanvasFilter,
8  makeFilterShader,
9} from "@/lib/remocn/canvas-presentation";
10 
11export type AsciiRenderProps = {
12  glyphSize?: number;
13  charset?: string;
14  colored?: boolean;
15  ink?: string;
16  intensity?: number;
17};
18 
19const DEFAULTS = {
20  glyphSize: 26,
21  charset: " .:-=+*#%@",
22  colored: false,
23  ink: "#9dff9d",
24  intensity: 1,
25};
26 
27const GLYPH_ASPECT = 0.545;
28const ATLAS_CELL_W = 24;
29const ATLAS_CELL_H = 44;
30const ATLAS_FONT =
31  'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';
32 
33type NormalizedProps = {
34  cellX: number;
35  cellY: number;
36  charset: string;
37  colored: boolean;
38  ink: string;
39  intensity: number;
40};
41 
42const FRAGMENT_SHADER = `#version 300 es
43precision highp float;
44 
45uniform sampler2D u_scene;
46uniform sampler2D u_atlas;
47uniform vec2 u_cell;
48uniform float u_glyph_count;
49uniform float u_colored;
50uniform vec3 u_ink;
51uniform float u_intensity;
52 
53in vec2 v_uv;
54out vec4 outColor;
55 
56const int TAPS = 3;
57 
58vec4 cellAverage(vec2 center, vec2 cell) {
59  vec4 sum = vec4(0.0);
60  for (int y = 0; y < TAPS; y++) {
61    for (int x = 0; x < TAPS; x++) {
62      vec2 offset = (vec2(float(x), float(y)) + 0.5) / float(TAPS) - 0.5;
63      sum += texture(u_scene, center + offset * cell);
64    }
65  }
66  return sum / float(TAPS * TAPS);
67}
68 
69void main() {
70  vec2 cell = max(u_cell, vec2(0.001));
71  vec2 origin = floor(v_uv / cell) * cell;
72  vec4 sampled = cellAverage(origin + cell * 0.5, cell);
73 
74  float luma = dot(sampled.rgb, vec3(0.299, 0.587, 0.114));
75  float index = min(floor(luma * u_glyph_count), u_glyph_count - 1.0);
76 
77  vec2 local = clamp((v_uv - origin) / cell, 0.008, 0.992);
78  float mask =
79    texture(u_atlas, vec2((index + local.x) / u_glyph_count, local.y)).r;
80 
81  vec3 glyph = mix(u_ink, sampled.rgb, u_colored) * mask;
82  vec4 source = texture(u_scene, v_uv);
83  float amount = clamp(u_intensity, 0.0, 1.0);
84 
85  outColor = vec4(
86    mix(source.rgb, glyph, amount),
87    mix(source.a, max(mask, sampled.a), amount)
88  );
89}`;
90 
91type Atlas = { charset: string; texture: WebGLTexture };
92 
93const atlases = new WeakMap<WebGL2RenderingContext, Atlas>();
94 
95function drawAtlas(charset: string): OffscreenCanvas {
96  const canvas = new OffscreenCanvas(
97    ATLAS_CELL_W * charset.length,
98    ATLAS_CELL_H,
99  );
100  const context = canvas.getContext("2d");
101  if (!context) {
102// … truncated