钢笔淡彩,绘制过程(wren 的绘制版)
模块:engine/src/canvas-core/wrenDraw.ts。样张:wren.ts(未改动)。主画面:一只鹪鹩在山楂枝上鸣唱。
媒介的物理形态。 冷压纸上的水彩淡彩,等淡彩干透之后,再用一支蘸深色墨水的软钢笔尖在上面勾线。
笔触,按顺序。 先铺所有的淡彩,再画所有的钢笔线,然后是溅点。
- 淡彩以一道水珠线的方式铺开。 蘸饱颜料的笔碰到形状的顶端,湿颜料聚成的那道水珠线被往下拉,湿边起伏不定,一条颜色更深的颜料线骑在湿边上。
- 颜料沉降。 形状铺满之后,颜料往下滑,沿着底边积聚(渐变色带下沉并加深)。
- 水渍回流(backrun)。 在第二滴更湿的颜料碰到半干色块的地方,一朵浅色的菜花纹向外绽开,它皱巴巴的深色边缘骑在外沿上。
- 淡彩顺序。 背景(横跨整张纸的一道大水珠线),枝,叶,山楂果,再把山楂果的高光洗出来;然后鸟从浅到深:尾巴,身体(带着它的水渍回流),腹部的浅黄褐,红褐色的背,翅膀,洗出眉纹,贯眼纹。
- 钢笔。 先画鸟,因为它是视觉焦点:轮廓(光把它吃掉的地方留开口,腹部下笔重),喙和嘴裂,贯眼纹,眼睛,胸前的挑线,尾巴和尾上的横斑,翅膀,覆羽斑点,体侧,腿和趾。然后是枝:树皮边缘,刺,短促的小勾,叶,山楂果。每根线都通过
g.pen({ progress })沿路径生长,用力的地方粗,提笔的地方细如发丝。 - 溅点。 甩一甩钢笔,墨点一个接一个落下。
精确性。 wren.ts 没有动过,所以它的主画面 md5 不变。过程版把同样的几何重新写成定时的笔触。按钢笔淡彩的顺序,鸟的淡彩先于枝的墨线合成(静帧则是先完整画枝,再画鸟),所以完成的过程版和静帧相差约 240 个重叠像素(PSNR 57.7 dB)。因此最后 30 帧直接就是 drawWren 本身,逐字节一致。这需要 GPU 栅格化(默认值,和 wren 一样):用 raster: "cpu",或者把静帧缓存在离屏画布上时,实测定格画面和 wren 的静帧不一致。