跳到正文
网页珍奇柜Web Curio

实时文本模式引擎

textmode.js,humanbydefinition,2025 年

正在布展…

原作直展:这是 humanbydefinition 的原始作品,按 MIT(内置 UrsaFont 字体为 CC0) 许可证收录(版本 319eda2)。收录 npm 0.18.0 原版库(作者只公开构建产物),配一段本柜写的草图:字符波纹背景、渲染进字符网格的三维圆环、逐字旋转的标题,三个图层都直接画在字符格上。移动鼠标可改变光照和角度。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步先把场景画进离屏帧缓冲,再在着色器里按格子采样亮度。
  2. 第 2 步用预先烘焙的字体图集(glyph atlas)把亮度映射到字符贴图。
  3. 第 3 步每格可单独指定前景色、背景色、字符、翻转与旋转。
  4. 第 4 步API 模仿 p5 的 setup/draw 循环,降低上手门槛。

复刻配方

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

Render your scene into an offscreen framebuffer at grid resolution (one texel per character cell). Bake a font atlas texture containing a brightness-sorted list of glyphs. In a fragment shader on the full-size canvas, find which cell the fragment belongs to, sample the low-res buffer for that cell's luminance and color, choose the glyph index from luminance, and sample the atlas at the fragment's position inside the cell. Expose a small immediate-mode API (rect, char, fill, rotate) that writes into the low-res buffer so users can draw directly in cell space.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Docs site loads (HTTP 200, title 'Home | textmode.js'); repo via gh api: MIT, created 2025-07-14.