基于计算机虚拟交互的现代数字绘画技术研究

吴娅妮, 王玉

(1.西安欧亚学院,艾德艺术设计学院,陕西,西安 710065;2.西安机电信息技术研究所,陕西,西安 710065)

0 引言

计算机技术与互联网技术支持下的数字绘画属于新兴交叉学科,为传统手绘增添了新元素,以动态数字化表现形式、虚拟交互特性重新展现了绘画的魅力,在动漫设计、影视特效制作、3D游戏开发等领域被广泛运用[1],为当代社会经济发展创造了不可替代的价值。本研究立足于数字绘画的线条优化与图形渲染角度,在直线曲线识别方面采用了梯度方向差分法与LSD算法相结合的直线检测方式,以“梯度”这一像素参数为依据精确地提取线条直线特征,对于识别出的直线设置较大的光滑度值,对于曲线基于最小二乘法进行拟合并计算设置准确的光滑度值。在数字绘画图形渲染方面使用Web GL绘图标准,Web GL直接调用计算机图形处理器,对CPU依赖程度低,在释放了计算机负担的同时提升其运行速度,从而降低数字绘画方法的整体时间复杂度。最后,在测试环节验证本文方法在数字绘画中的性能优势。

1 计算机虚拟交互下数字绘画线条优化与图形渲染研究

1.1 数字绘画的虚拟线条识别与优化

基于直线检测算法判断设计者输入的线条是否为直线:如果检测结果为直线,则设置较大的光滑度值[2];如果检测结果为曲线,则利用最小二乘法拟合曲线,并获得精准的曲线参数计算光滑度,优化曲线弧度。

(1) 基于梯度方向差分与LSD算法的直线线条检测

基于投票策略提取线条中的直线特征[3],将输入线条划分为八邻域,梯度方向差分的对象即为分组后的像素点。已知(x,y)为输入线条上的一个像素点,该点的梯度向量为▽f(x,y),用α(x,y)描述该像素点灰度增长最快速的方向,即梯度方向[4]。直线线条像素点的梯度方向基本一致,因为像素点边缘方向与梯度方向为垂直关系,可以通过梯度方向这一信息找到不是直线边缘的信息完成直线线条的定位[5]。不足的是,梯度方向精度不理想会导致直线确定不精准,ε1表示梯度方向误差,相同直线线条内的像素点梯度方向的最大差值较大为2ε1。针对误差较大的情况需对梯度方向进行差分。

定义Q{xi,yi}表示随机的数字绘画线条,i表示线条分组中像素点的编号,取值为1,2,3,…,m,最大像素数量为m。由此得到相邻2个像素点的梯度方向差分,如式(1):

Δαi=α(xi+1,yi+1)-α(xi,yi)

(1)

式中,i取值为1,2,3,…,m-1。

假设λβ表示差分阈值,计算得到边缘组,λmax表示累计的阈值,基于以下步骤执行直线线条检测算法:还原累加器数值为0;以分组后的线条为基础,求取线条分组Qn,计算边缘分组中相邻像素点梯度方向差分Δβi;并且将梯度方向转化至无符号区域,梯度方向如式(2):

(2)

对比Δβi与λβ,当前者小于后者时,在累加器中加1。当各分组中线条累加器值不小于累计阈值上限时,表明此线条分组存在直线;如果是相反的情况,则表明此线条分组中不包含直线特征,归零线条分组的像素点。

基于LSD算法精确提取直线线条[6],求取像素水平方向与垂直方向的计算方法如下:

(3)

(4)

以划分梯度值为1024个等级为目标对梯度值进行升序排序,以最大梯度值点为基准向下搜索遍历。线条中梯度较小值不参与后续直线检测。定义以1个种子节点像素开始区域性搜索,扩展出1个像素,该像素被标记为已使用状态,获得直线线条区域时终止扩散[7]。

(2) 最小二乘法拟合曲线

基于最小二乘法对曲线轮廓中数量不低于6个的拟合点进行椭圆拟合,如式(5):

ax2+bxy+cy2+dx+ey+f=0

(5)

(xi,yi)表示提取的曲线轮廓点,构建{xi,yi}和期望椭圆曲线的函数F(a,b,c,d,e,f)表示代数距离,但是拟合的轮廓容易变为双曲线或者抛物线,为避免这种情况,使用表达式4ac-b2=1对函数进行约束,以获取正规的椭圆曲线拟合结果。

基于最小二乘法拟合曲线后,获得输入曲线线条的椭圆长半轴h1与短半轴h2,据此计算输入绘画线条光滑系数[8],如式(6):

(6)

式中,椭圆长轴与短轴的比率为h1/h2,曲线线条的光滑度与比率值成正比,较大光滑度呈现的线条弯度较小,m、t分别表示数字绘画界面已经存在的线条数量、用户输入的手绘线条数量,γ和θ表示平衡系数,通过自定义来平衡手绘线条在当前绘画中的作用。设置光滑度后,曲线与用户意图相近,直线与曲线连接形成完整的数字绘画图形。

1.2 基于Web GL的跨平台图形可视化渲染

使用Web GL技术作为绘图标准,构建HTML 5与Web GL的交互前端[9],在不安装插件的前提下借助系统显卡在浏览器界面展示三维场景信息与三维模型[10]。

基于Three.js类库对绘制的图形进行三维信息渲染:首先,定义类库渲染器与摄像机,设置画布规格,导入渲染对象、三维元素追加等信息;其次,定义一个场景构建图形渲染的三维空间,为数字绘图渲染创造空间;最后,设置光源信息,如平行光、光源追加至场景等内容。

基于图1步骤对数字绘画进行虚拟可视化处理,首先创建一个三维渲染场景空间,同时对用户通过数位板输入的线条进行识别。基于梯度方向差分算法检测到线条中的直线特征,识别线条曲线特征,基于最小二乘法拟合曲线计算曲线光滑系数,作为参数对用户输入的绘画曲线进行平滑优化。其次,基于Web GL图像标准执行图形渲染指令,实现三维场景中图像的数字化创作。

图1 数字绘画图形的虚拟可视化处理

2 测试与分析

构建计算机虚拟交互的数字绘画测试环境,将WACOM CTL-472数位板连接至计算机,创建交互式绘图环境,使用PTH660型号数位笔进行绘图控制。计算机硬件为 Intel(R)Core(TM) i7-7700U@3.6 GHz,RAM 8 GB。使用Web GL技术作为绘图标准,构建HTML 5与Web GL的交互前端,准备Three.js封装完成的接口,Photoshop绘图软件,由此数字绘画场景基本搭建完成。直线检测算法累计的阈值定义为65,差分阈值设置为0.07。实验选取5名用户作为线条输入的执行者,以获得多样且丰富的线条样本。

另外,为突出本文数字绘画方法的优越性,将基于Hough算法的数字绘画方法(方法1)、基于边缘提取的数字绘画方法(方法2)与本文方法进行比较,测试条件、环境、对象与本文方法一致。

2.1 数字绘画线条优化性能分析

图2为数字绘画输入前与本文优化后的线条对比结果。

(a) 原始输入线条

由图2可知,用户直接输入的线条虽然具有一定的弧度,但是线条细节之处存在细小的锯齿与波动,曲线的平滑度较差,尤其是下方曲线中下弧度与上弧度过渡区域较为生硬。经过本文方法识别优化后的绘画曲线明显变得平滑,锯齿基本消失,上下弧度连接处较为自然,也能够表达出用户想要呈现的曲线趋势。

选取5名用户在计算机界面中分别输入100条曲线线条,长度越长线条弯曲度越复杂。统计各方法处理曲线的平均时间开销如表1所示。

表1 各方法处理曲线线条的时间开销 单位:s

由表1数据可知,本文方法处理不同长度的曲线线条的用时基本一致,时间复杂度没有随着线条弯曲度与复杂度的提升而显著增加,并且时间开销均值最低。相比之下,方法1时间复杂度较高,每个线条的用时更加趋近于1 s,方法2效率次之。

2.2 图形可视化渲染的资源占用量分析

为明确各方法在数字绘画渲染中对GPU(计算机图形处理器)和CPU(计算机中央处理器)的占用情况,以100幅待渲染的数字绘画手绘稿作为对象进行三维渲染。100幅手绘稿包括动物图像、植物叶片图像、书籍图像、卡通人脸图像各25幅,考察数字绘图方法的光线、纹理、场景方面的渲染能力。3种数字绘画方法渲染过程中计算机GPU和CPU的占用情况如图3、图4所示。

图3 GPU占用量

图4 CPU占用量

结合图3、图4可知,本文方法渲染数字绘图的GPU占用量较为平稳,前期渲染图形时GPU用量缓慢上升、中后期GPU趋于平稳,同时CPU占用量相比对比方法显著降低,中后期本文方法CPU占用量保持在15%～20%。另2种方法对计算机图形处理器占用量没有显著减少,并且保持较高的计算机中央处理器资源占用量。这是因为本文方法将Web GL技术作为绘图标准,构建HTML 5与Web GL的交互前端,Web GL具有直接调用计算机GPU的权限,较少依赖计算机中央处理器而展开图形渲染处理,只开展一部分原本CPU工作,较大程度减少了CPU负担,数字绘图处理效率显著提升。2种对比方法基于传统 B/S 模式进行图像图形处理,必须安装对应插件或软件才能实现跨平台使用,约束性较大、灵活性较差,而本文方法的跨平台使用特性得到凸显。

3 总结

为基于计算机平台更加高效、精准、低负担的实现数字绘画,提升用户创作体验感,本文提出了一种新的数字绘画线条优化与图形渲染方案。一方面,利用梯度方向差分与LSD直线检测法分两步骤精确提取用户输入的线条特征,判断其为直线或是曲线分别赋予不同数值的光滑度,实现绘画线条光滑度的优化。另一方面,在Web GL交互前端支撑下进行图形渲染,减少了绘画过程对计算机中央处理器的负担,同时降低了时间复杂度。此方法最终实现了快速、简便地个性化绘图创作效果。