基于移动增强现实的京剧脸谱绘制的实现

薛亚田舒 后程明智刘 龙

(北京印刷学院新媒体学院,北京102600)

随着增强现实技术的发展以及智能手机的普及,生活中涌现出越来越多的增强现实应用,为人们日常的衣食住行提供着传统应用所无法实现的便利。除了日常生活外,人们逐渐注意到,想要提升人们对传统文化的好奇心,增加人们对传统工艺的新鲜感,就要将新技术应用到传统文化当中。京剧脸谱是中国戏曲独有的,是中国传统文化当中不可或缺的一项,但是由于当前娱乐的多元化,京剧脸谱逐渐边缘化。

早些年,国内对京剧脸谱的研究大多是脸谱的艺术特征研究,诠释脸谱色彩及图案造型与人物性格特征的关系,揭示这一古老文化蕴含的传统美学观念,并对脸谱中所代表的中国传统文化进行分析与研究[1];一部分关于脸谱的视觉符号系统的研究,表明脸谱具有规范而统一的视觉符号,能够向观众传递出戏曲人物的性格、年龄和忠、奸、善、恶等直观的信息[2]。而增强现实在脸谱方面的研究还停留在数字化信息提取,或是将脸谱进行表情包设计的阶段[3],有关于脸谱的增强现实绘制应用极为少见。

增强现实技术近些年在传统文化应用方面展现出巨大的潜力。2002年,由德国学者Tim Gleue等人发起的,名为ARCHEOGUIDE(Augmented Reality-based Cultural Heritage On-site GUIDE,缩写为ARCHEOGUIDE)的研究项目,利用数字化展示与体验的方式对希腊地区的赫拉神庙进行了实验,以一种新的方式在游客游览的过程中加入可视化展示和体验[4]。国内基于增强现实技术的传统文化应用方面的研究比起国外要稍晚一些,而京剧脸谱的绘制方面的更是少之又少。所以本文将结合前人在传统文化方面的研究经验,实现京剧脸谱的增强现实绘制。

1 相关技术简介

1.1 增强现实技术

在虚拟现实的研究过程中,学者们发现虚拟现实完全脱离现实独立呈现,为了弥补这点不足,增强现实技术应运而生。其与虚拟现实技术最大的不同点就是,虚拟现实中的所有的信息都是由计算机模拟生成,创造出一个虚拟的环境,而增强现实技术利用摄像机帮助,将虚拟搭建的信息叠加到真实的场景当中去[5]。增强现实技术能够从虚实融合的角度,增强人们对真实事物的理解和感知。

实现增强现实的功能主要离不开三大关键技术,跟踪注册技术、虚实融合显示技术、人机交互技术,其中核心技术是跟踪注册技术[6]。要想将真实世界和虚拟物体无缝融合,必须实现实时监测摄像头,确定摄像头相对于真实场景的位置以及角度等状态,校准虚拟信息所要叠加的位置,实时将虚拟信息呈现在屏幕中,完成三维注册。增强现实系统结构如图1所示。

1.2 着色器原理

Shader,即着色器,其本质是渲染管线中的一个环节。渲染管线也称为渲染流水线,是显示芯片内部处理图形信号相互独立的并行处理单元。具体流程如图2所示。

图1 增强现实系统结构

图2 渲染流水线

渲染是将三维场景中的模型,按照定好的环境、灯光、材质及渲染参数,二维投影成数字图像的过程。GPU流水线上一些可高度编程的阶段,由着色器编译出来的最终代码是会在GPU上运行的,有一些特定类型的着色器,如顶点着色器、片元着色器。依靠着色器可以控制流水线中的渲染细节,例如用顶点着色器来进行顶点变换及传递数据,用片元着色器来进行逐像素渲染。

1.3 Unity Shader简介

常见的着色语言有,DirectX的HLSL(High Level Language)、OpenGL的GLSL(OpenGL Shading Language)以及NVIDIA的CG(C for Graphic),这些底层着色语言在使用的过程中增加了开发者的开发难度。为了避免直接控制底层着色器,Unity为开发者提供了高层级的渲染抽象层——Unity Shader,通过这种方式让开发者更加轻松地控制渲染[7]。在Unity Shader中,开发者可以轻易地实现传统Shader所无法满足的功能。例如一些渲染设置,在传统的Shader当中,开发者需要自行设置额外的代码,而在Unity Shader中,可以通过简单一行指令实现。同时,传统的Shader无法在同一个文件中同时编写顶点着色器和片元着色器,但是Unity Shader可以。由此可见,Unity Shader可以大幅度降低实现着色的困难,所以本文当中主要利用了Unity Shader来实现京剧脸谱的绘制。

2 京剧脸谱绘制的实现

2.1 京剧脸谱绘制系统架构

京剧脸谱绘制系统,主要包含了京剧脸谱简介,色画方法,脸谱分类,AR脸谱绘制,经典脸谱赏析五个模块,如图3所示。其中色画方法中又分成了揉脸、抹脸、勾脸三个部分,是勾画脸谱的三种画法。脸谱分类中分成了整脸,三块瓦脸,碎花脸与歪脸,僧脸与太监脸等八种不同的类型。AR脸谱制作模块,用户可以在纸上绘制脸谱的颜色样式,利用着色技术将其绘制到系统中生成三维的着色脸谱。经典脸谱赏析模块中主要介绍喜神、刘天君、马天君、李天王、曹操、张飞等经典京剧脸谱,通过这种方法科普脸谱知识。

2.2 功能实现

2.2.1 识别功能的实现

绘制功能需要实现摄像头读取以及识别图片,本系统采用EasyAR插件,在unity平台上实现该功能。编写代码,读取纹理图片,使得AR脸谱绘制功能该模块能够获取到现实绘制的彩色纹理。

2.2.2 着色器的实现

应用3D max制作脸谱面具模型,并将其导入到Unity当中,为京剧脸谱模型编写着色器,实现将读取到的纹理绘制到模型上这一功能。新建一个材质球,将其赋予到导入的脸谱模型上,修改着色器类型为写好的着色器。

顶点着色器代码如下:

v2f vert(appdata_base v)

{v2f o;

o.pos=UnityObjectToClipPos(v.vertex);

o.uv=TRANSFORM_TEX(v.texcoord,_MainTex);

float4 top=lerp(_UvPints[0],_UvPints[2],o.uv.x);

float4 bottom=lerp(_UvPints[1],_UvPints[3],o.uv.x);

float4 fixedPos=lerp(bottom,top,o.uv.y);

float4x4 Rendering_Matrix_VP=mul(_RenderingProject-Matrix,_RenderingViewMatrix);

o.fixedPos=ComputeGrabScreenPos(mul(Rendering_Matrix_VP,fixedPos));

return o;}

片元着色器代码如下:

float4 frag(v2f i):COLOR

{float2 coord=i.fixedPos.xy/i.fixedPos.w;

#if SHADER_API_METAL

#if UNITY_UV_STARTS_AT_TOP

if(_MainTex_TexelSize.y＜0.0)

coord.y=1.0-coord.y;

#endif

coord.x=1.0-coord.x;

#else

#if UNITY_UV_STARTS_AT_TOP

coord.y=1.0-coord.y;

#endif

#endif

return tex2D(_MainTex,coord);}

2.2.3 坐标空间转换

在渲染流水线中,一个顶点要经过多个坐标空间的变换才能最终被画在屏幕上。一个顶点最开始是在模型空间定义的,最终它会变换到屏幕空间中,得到真正的屏幕像素坐标。利用Unity Shader可以实现将模型从模型空间—世界空间—观察空间—裁剪空间—屏幕空间的转换,得到真实的坐标。

实现空间换算用到的部分代码如下:

points.SetRow(0,new Vector4(targetAnglePoints1.x,targetAnglePoints1.y,targetAnglePoints1.z,1f));

points.SetRow(1,new Vector4(targetAnglePoints2.x,targetAnglePoints2.y,targetAnglePoints2.z,1f));

points.SetRow(2,new Vector4(targetAnglePoints3.x,targetAnglePoints3.y,targetAnglePoints3.z,1f));

points.SetRow(3,new Vector4(targetAnglePoints4.x,targetAnglePoints4.y,targetAnglePoints4.z,1f));

material.SetMatrix("_UvPints",points);

material.SetMatrix("_RenderingViewMatrix",Camera.main.worldToCameraMatrix);

material.SetMatrix("_RenderingProjectMatrix",GL.Get-GPUProjectionMatrix(Camera.main.projectionMatrix,false);

2.2.4 实验效果展示

将以上制作的内容发布为apk格式,到测试系统当中验证,测试系统为Android 10版本。在测试时,先将脸谱绘制功能打开,利用摄像头读取空白脸谱,能够生成脸谱模型,如图4(a)所示。实现虚实配准以后,在脸谱上随意绘制图样,发现在现实脸谱上绘制的色彩能够着色到虚拟的模型上,绘制效果图如图4(b)所示。在实验过程中,虚拟的脸谱模型在绘制过程中不稳定,还有待改进。

图4 京剧脸谱绘制效果图

3 结语

本文主要实现京剧脸谱绘制,能够实时获取相机拍摄到的纹理信息,将其换算并着色到模型上这一核心功能,灵活应用Unity强大的Shader技术,与传统文化京剧脸谱的绘制结合起来。虽然整个系统的基本技术已经实现,但是目前还有很多不足的地方,比如模型绘制后的真实感情况、稳定性都有待改进。