Hotdry.

Article

Underdrawing 技术解析:AI 图像中精确文本渲染的工程实现

从底层几何坐标对齐到轮廓曲线转换,详解如何通过确定性渲染层与生成式 AI 的协同解决图像文本渲染难题。

2026-05-04systems

在 AI 图像生成领域,文本渲染一直是一个令开发者头疼的难题。无论是 Midjourney、DALL-E 还是最新的 Gemini 3.0 Pro,在生成包含精确数字、字母或符号的图像时,往往会出现字符变形、顺序错乱甚至完全不可读的情况。Sam Collins 在其博客中提出了一种名为「underdrawing」的工程技术,通过分层处理的思路将这一难题转化为可工程化解决的问题。本文将深入探讨该技术背后的几何原理与实现参数。

问题本质:生成式模型的数学可靠性缺陷

当前主流的多模态图像生成模型在视觉风格渲染方面已经达到了令人惊叹的水平,但在处理精确几何与数学符号时却表现出明显的局限性。这种局限性并非偶发现象,而是由模型内部的概率生成机制所决定的。当模型被要求在图像中生成「50」这个数字时,它实际上是在预测每个像素点的颜色分布,而非真正理解数字的几何结构。因此,在高分辨率图像的细节区域,数字的笔画往往会呈现出随机的断裂、粘连或形态畸变。

传统的解决方案尝试通过改进提示词来引导模型正确渲染文本,例如使用「清晰的孩子字体」「无衬线字体」等描述性词汇,但这类方法的成功率极低且不可预测。模型对文字的「理解」停留在视觉特征层面,缺乏对字符几何构型的显式建模能力。这正是 underdrawing 技术试图根本性解决的核心问题。

Underdrawing 的核心理念:分层解耦与职责专精

Underdrawing 技术的核心思想可以概括为「让擅长的人做擅长的事」。它将图像生成流程拆解为两个独立的处理层:确定性渲染层负责精确的几何与文本排版,生成式渲染层负责风格化与视觉美化。两者的职责边界通过坐标系对齐与图像层叠机制来维护。

第一层被称为「底层绘制」(underdrawing),其输出是一个包含所有需要精确呈现的几何元素的图像。在这个层面,使用 SVG、HTML Canvas 或 Python 的 Pillow 等确定性渲染工具来生成基础图像。关键在于这一层完全不追求视觉美感,而是追求数学上的精确性与可重复性。每个数字、字母的位置都通过明确的坐标参数来定义,字符的轮廓曲线遵循标准的字形规范。

第二层是「绘制层」(painting),利用多模态图像生成模型(如 Gemini 3.0 Pro)接收底层绘制图像与风格提示词,输出最终的视觉呈现。模型的任务从「生成包含正确数字的图像」简化为「在给定图像基础上进行风格迁移」,大大降低了任务难度。实验数据表明,这种分层方法可以将数字渲染的准确率从不足 30% 提升至 95% 以上。

工程实现:坐标系统与轮廓曲线处理

在实际工程实现中,底层绘制层的 SVG 生成需要关注几个关键技术参数。首先是坐标系的选择与对齐,建议使用与目标输出图像分辨率一致的视口坐标系,确保底层绘制图像与最终输出图像之间不存在缩放导致的像素偏差。SVG 的 viewBox 属性应当精确匹配生成模型的输入要求,一般建议不低于 1024x1024 像素以保证足够的基础分辨率。

文本元素的定位采用绝对坐标方式,通过计算每个字符的中心点或基线起点来确定其位置。对于需要旋转的场景(如螺旋路径上的数字),需要将旋转角度转换为 SVG 的 transform 属性,旋转中心应当精确设定在字符的几何中心而非视觉中心,以避免旋转后的位置偏移。路径数据的生成可以使用简单的几何图形(圆形、方形、三角形)作为每个站点的标记,通过改变形状来增加视觉区分度。

在底层绘制图像的输出格式选择上,PNG 是最通用的选项,它能够保留所有的几何边缘信息而不会引入额外的压缩伪影。建议将背景设置为中性的灰色或白色,避免使用纯黑或纯白背景,因为极端对比度可能导致生成模型在边缘处理时产生光晕效应。图像的对比度应当适中,确保字符轮廓清晰可辨。

实践参数与监控要点

基于 Sam Collins 提供的实验案例,可以总结出一套可复用的参数配置。对于螺旋路径布局的场景,路径的起始角度建议设为 0 度(3 点钟方向),每步之间的角度增量根据总步数计算,例如 50 步的螺旋路径每步旋转角度为 360/50 即 7.2 度。半径收缩采用线性或对数衰减策略,确保相邻站点之间保持均匀的间距。

在生成模型的调用层面,提示词的构造需要遵循「约束 + 风格」的双段式结构。第一段明确描述底层绘制图像中的几何关系:「transform this image into... arranged in a spiral path winding counter-clockwise inward from start (1) at the outside to finish (50) at the centre」。第二段描述目标视觉风格:「photographed claymation diorama, studio-lit, candy-bright, soft bokeh background」。这种结构既保留了底层几何的完整性,又为生成模型提供了充分的风格化空间。

需要注意的是,尽管 underdrawing 技术显著提升了渲染可靠性,但它并非万能解决方案。实际应用中仍然存在一定比例的失败案例,主要集中在字符密集区域和复杂曲线边缘。建议在工程实现中加入后置验证环节,通过 OCR 或模板匹配对输出图像中的关键字符进行可读性检测,设定合理的重试阈值(如 3 次)以确保最终交付质量。

技术延伸与工具链建议

将 underdrawing 理念工程化落地需要建立一套完整的自动化工具链。推荐的技术栈包括:使用 Python 的 svgwrite 库进行底层几何的程序化生成,支持参数化的路径计算与批量渲染;使用 Claude Code 或类似工具实现提示词的自动构造与模型调用的 orchestration;输出环节可集成 Pillow 库进行图像的后处理与格式转换。

对于需要批量生成相似模板的场景(如产品序列号标签、认证编码图像等),建议将几何布局参数抽象为配置文件,通过参数化调用实现不同变体的快速生成。这种方式不仅提升了开发效率,还便于后续的维护与迭代。底层绘制层的代码应当版本化管理,确保每次生成的可追溯性与一致性。

资料来源:本文技术细节主要参考 Sam Collins 博客(samcollins.blog/underdrawings)发布的实验结果与实现方法。

systems