基于移動增強現實的京劇臉譜繪制的實現

薛亞田舒 后程明智劉 龍

(北京印刷學院新媒體學院,北京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技術,與傳統文化京劇臉譜的繪制結合起來。雖然整個系統的基本技術已經實現,但是目前還有很多不足的地方,比如模型繪制后的真實感情況、穩定性都有待改進。