纯前端线稿局部烫金与金属箔上色引擎：基于法线高度图与 Phong 光照反射模拟

在古典书籍装帧、高端插画手账以及复古明信片的制作工艺中，有一种极其迷人的视觉技艺——烫金（Gold Foil Stamping）。

在一幅素雅清隽的黑白植物线稿中，当一根纤细的银杏叶脉、一滴欲落未落的晨露、或是一行手写法语小诗被压印上薄如蝉翼的金属金箔时，整个画面便瞬间拥有了画龙点睛般的生命力。当光线从不同角度掠过纸面，金箔区域会反射出流转的香槟金微光与细腻的金属拉丝倒影，既克制内敛，又流光溢彩。

在数字插画上色辅助工具中，绝大多数现存方案只能通过平铺一张带有金色噪点的静态图片来糊弄视觉。这种方式在静态观察时显得极其死板，更无法还原当读者转动手机或移动鼠标时，金属表面那种光斑随视线流转的生动光感。

为了将这种典雅的装帧工艺搬进浏览器，“秋日手账杂货铺”构建了一套纯前端线稿局部烫金与金属箔智能上色引擎。系统允许读者使用“烫金胶水笔刷”在线稿任意局部自由涂抹，底层通过高度图（Height Map）实时计算微表面法线向量（Normal Vector），并结合经典Phong 光照反射模型，以 60FPS 丝滑渲染出随鼠标流转的香槟金、玫瑰金与青古铜流光。

---

一、物理本质：金属光泽与经典 Phong 光照反射模型

为什么我们能一眼认出某种材质是“金属”，而不是塑料或纸张？

在光学物理中，非金属材质（绝缘体）的漫反射占据主导，光线进入介质微表面内部发生多次散射再折射出来；而金属（导体）拥有大量自由电子，几乎没有次表面散射，光线会在入射表面发生极其强烈的镜面反射（Specular Reflection），并且其反射光会被金属本身的电子吸收特性染上独特的金属色（例如金的反射光为暖金黄，铜的反射光为玫瑰赤红）。

为了在纯前端以最高能效模拟这一光学特性，我们引入了经典计算机图形学中的Phong 光照反射模型：

$$I_{\text{total}} = I_{\text{ambient}} + I_{\text{diffuse}} + I_{\text{specular}}$$

其中各分量针对烫金工艺进行了专门的参数调校：

1. 环境光（Ambient）：模拟暗室内的漫射弱光，确保未直接对准光源的金属区域呈现出深沉饱满的暗金底色：
   $$I_{\text{ambient}} = k_a \cdot C_{\text{gold_base}}$$

2. 漫反射（Diffuse）：根据微表面法线 $\vec{N}$ 与虚拟光源方向 $\vec{L}$ 的点积，呈现基本的明暗过渡：
   $$I_{\text{diffuse}} = k_d \cdot \max(0, \vec{N} \cdot \vec{L}) \cdot C_{\text{gold_mid}}$$

3. 高光镜面反射（Specular）：金属箔的灵魂所在！光线经表面反射向量 $\vec{R}$ 与视线观察方向 $\vec{V}$ 的夹角决定了极度聚拢的高亮白金光斑：
   $$I_{\text{specular}} = k_s \cdot (\max(0, \vec{R} \cdot \vec{V}))^{\alpha} \cdot C_{\text{specular_highlight}}$$
   其中 $\alpha$ 为高光粗糙度指数（Shininess）。烫金箔表面致密平整，$\alpha$ 取值通常在 $32 \sim 64$ 之间，能够形成如丝绸般锐利而柔和的光斑带。

---

二、从手绘蒙版到 3D 浮雕：法线高度图（Height-to-Normal）实时推导

真正的压印烫金（Embossed Foil）在纸张表面是有微小的物理高度差的。金属模具以数吨压力将金箔冲压进纸浆纤维中，使得烫金区域的边缘存在一个微微倾斜的“斜坡倒角（Bevel Edge）”。

当读者在 Canvas 上用画笔涂抹出一块烫金区域时，我们记录的是一张二值化的高度灰度图（Height Map）$H(x, y)$。为了获得计算光照所需的表面法线向量 $\vec{N} = (N_x, N_y, N_z)$，我们在像素级应用经典的Sobel 离散差分算子：

$$N_x = - \frac{\partial H}{\partial x} \approx - \left( H(x+1, y) - H(x-1, y) \right)$$
$$N_y = - \frac{\partial H}{\partial y} \approx - \left( H(x, y+1) - H(x, y-1) \right)$$
$$N_z = \frac{1}{\text{bumpScale}}$$

随后将向量归一化为单位法线向量：
$$\vec{N} = \frac{(N_x, N_y, N_z)}{\sqrt{N_x^2 + N_y^2 + N_z^2}}$$

这样一来，原本完全平面的手绘笔刷涂抹区域，其四周边缘立刻拥有了朝向各个维度的斜面法线。在光照扫过时，边缘会自然泛出立体金边，呈现出与实体冲压完全一致的凹凸浮雕质感。

---

三、纯前端核心工程实战代码

下面是完整的烫金上色引擎单文件工程实现。代码基于原生 HTML5 Canvas 构建，自带一幅精美的秋日银杏线稿，支持鼠标实时交互与高品质流光渲染：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>纯前端线稿局部烫金与金属箔上色引擎</title> <style> :root { --bg-atelier: #1e1b18; --card-bg: rgba(38, 33, 29, 0.92); --gold-primary: #d4af37; --text-muted: #a6988d; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; background: radial-gradient(circle at center, #2e2823 0%, var(--bg-atelier) 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #f7f3ee; overflow: hidden; user-select: none; } .tools-sidebar { width: 320px; padding: 32px 24px; background: var(--card-bg); backdrop-filter: blur(16px); border-right: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 24px; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4); } .atelier-title { font-size: 15px; letter-spacing: 2px; color: var(--gold-primary); text-transform: uppercase; margin: 0; } .panel-section { display: flex; flex-direction: column; gap: 10px; } label { font-size: 13px; color: var(--text-muted); letter-spacing: 1px; } .foil-palette { display: flex; gap: 12px; } .foil-swatch { flex: 1; height: 38px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; color: #1a1614; transition: transform 0.2s, border-color 0.2s; } .foil-swatch.active { transform: scale(1.05); border-color: #ffffff; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); } .btn-group { display: flex; gap: 10px; } button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: #ffffff; font-size: 13px; cursor: pointer; transition: all 0.2s; } button:hover { background: rgba(212, 175, 55, 0.2); border-color: var(--gold-primary); } .canvas-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } /* 纸张容器 */ .paper-sheet { position: relative; width: 520px; height: 520px; background: #faf7f2; border-radius: 12px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(180, 160, 140, 0.2); cursor: crosshair; overflow: hidden; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hint-bar { margin-top: 16px; font-size: 13px; color: var(--text-muted); letter-spacing: 1px; } </style> </head> <body> <aside class="tools-sidebar"> <div> <h1 class="atelier-title">局部烫金工坊 · 澹锦汐</h1> <div style="font-size: 12px; color: #827367; margin-top: 4px;">GOLD FOIL ATELIER · 1019</div> </div> <!-- 金属金箔材质选择 --> <div class="panel-section"> <label>金箔合金预设 (Foil Alloy)</label> <div class="foil-palette" id="foilPalette"> <div class="foil-swatch active" style="background: linear-gradient(135deg, #fce89e, #c69214);">