跳到正文
网页珍奇柜Web Curio

GPU 字符画后处理

ASCII (THREE.js ASCII Effect on the GPU)，Emil Widlund，2023 年

源码（在新窗口打开）和其他藏品比较

正在布展…

原作直展：这是 Emil Widlund 的原始作品，按 MIT（仓库无 LICENSE 文件，仅 package.json 声明 MIT）；附带 three.js 为 MIT、postprocessing 为 Zlib 许可证收录（版本 e0ef82c）。仓库只有这个效果类本身，没有演示页；本柜写了一个旋转的环面结场景，原样调用它的 ASCIIEffect 后处理。可拖动旋转，左下角可换字符集、格子大小、颜色和反相。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步把字符集按亮度顺序画到一张横向图集纹理
  2. 第 2 步后处理中把屏幕划成格子，每格取中心像素亮度
  3. 第 3 步按亮度选出字符在图集中的偏移，用格内局部 UV 采样
  4. 第 4 步可调字符集、格子大小、颜色、反相

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Draw your character ramp (e.g. ' .:-=+*#%@') into a single-row canvas atlas texture at a fixed font size. In a full-screen post-processing pass, quantise gl_FragCoord into cells of N pixels, sample the scene color at each cell's center and compute luminance. Map luminance to a character index, then sample the atlas at that character's slot using the pixel's local position within the cell. Multiply by a tint or the original color, and expose cell size and ramp as uniforms.

定制成完整的实现提示词

档案

能不能拿来用

原作以 MIT (package.json; no LICENSE file) 许可开源：可以阅读源码学习，按许可证条款使用；在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Repo exists with README and source; licence from package.json (MIT); no public live demo found.