薛亞田舒 后程明智劉 龍

(北京印刷學(xué)院新媒體學(xué)院,北京102600)

隨著增強(qiáng)現(xiàn)實(shí)技術(shù)的發(fā)展以及智能手機(jī)的普及,生活中涌現(xiàn)出越來越多的增強(qiáng)現(xiàn)實(shí)應(yīng)用,為人們?nèi)粘５囊率匙⌒刑峁┲鴤鹘y(tǒng)應(yīng)用所無法實(shí)現(xiàn)的便利。除了日常生活外,人們逐漸注意到,想要提升人們對傳統(tǒng)文化的好奇心,增加人們對傳統(tǒng)工藝的新鮮感,就要將新技術(shù)應(yīng)用到傳統(tǒng)文化當(dāng)中。京劇臉譜是中國戲曲獨(dú)有的,是中國傳統(tǒng)文化當(dāng)中不可或缺的一項(xiàng),但是由于當(dāng)前娛樂的多元化,京劇臉譜逐漸邊緣化。

早些年,國內(nèi)對京劇臉譜的研究大多是臉譜的藝術(shù)特征研究,詮釋臉譜色彩及圖案造型與人物性格特征的關(guān)系,揭示這一古老文化蘊(yùn)含的傳統(tǒng)美學(xué)觀念,并對臉譜中所代表的中國傳統(tǒng)文化進(jìn)行分析與研究[1];一部分關(guān)于臉譜的視覺符號系統(tǒng)的研究,表明臉譜具有規(guī)范而統(tǒng)一的視覺符號,能夠向觀眾傳遞出戲曲人物的性格、年齡和忠、奸、善、惡等直觀的信息[2]。而增強(qiáng)現(xiàn)實(shí)在臉譜方面的研究還停留在數(shù)字化信息提取,或是將臉譜進(jìn)行表情包設(shè)計的階段[3],有關(guān)于臉譜的增強(qiáng)現(xiàn)實(shí)繪制應(yīng)用極為少見。

增強(qiáng)現(xiàn)實(shí)技術(shù)近些年在傳統(tǒng)文化應(yīng)用方面展現(xiàn)出巨大的潛力。2002年,由德國學(xué)者Tim Gleue等人發(fā)起的,名為ARCHEOGUIDE(Augmented Reality-based Cultural Heritage On-site GUIDE,縮寫為ARCHEOGUIDE)的研究項(xiàng)目,利用數(shù)字化展示與體驗(yàn)的方式對希臘地區(qū)的赫拉神廟進(jìn)行了實(shí)驗(yàn),以一種新的方式在游客游覽的過程中加入可視化展示和體驗(yàn)[4]。國內(nèi)基于增強(qiáng)現(xiàn)實(shí)技術(shù)的傳統(tǒng)文化應(yīng)用方面的研究比起國外要稍晚一些,而京劇臉譜的繪制方面的更是少之又少。所以本文將結(jié)合前人在傳統(tǒng)文化方面的研究經(jīng)驗(yàn),實(shí)現(xiàn)京劇臉譜的增強(qiáng)現(xiàn)實(shí)繪制。

1 相關(guān)技術(shù)簡介

1.1 增強(qiáng)現(xiàn)實(shí)技術(shù)

在虛擬現(xiàn)實(shí)的研究過程中,學(xué)者們發(fā)現(xiàn)虛擬現(xiàn)實(shí)完全脫離現(xiàn)實(shí)獨(dú)立呈現(xiàn),為了彌補(bǔ)這點(diǎn)不足,增強(qiáng)現(xiàn)實(shí)技術(shù)應(yīng)運(yùn)而生。其與虛擬現(xiàn)實(shí)技術(shù)最大的不同點(diǎn)就是,虛擬現(xiàn)實(shí)中的所有的信息都是由計算機(jī)模擬生成,創(chuàng)造出一個虛擬的環(huán)境,而增強(qiáng)現(xiàn)實(shí)技術(shù)利用攝像機(jī)幫助,將虛擬搭建的信息疊加到真實(shí)的場景當(dāng)中去[5]。增強(qiáng)現(xiàn)實(shí)技術(shù)能夠從虛實(shí)融合的角度,增強(qiáng)人們對真實(shí)事物的理解和感知。

實(shí)現(xiàn)增強(qiáng)現(xiàn)實(shí)的功能主要離不開三大關(guān)鍵技術(shù),跟蹤注冊技術(shù)、虛實(shí)融合顯示技術(shù)、人機(jī)交互技術(shù),其中核心技術(shù)是跟蹤注冊技術(shù)[6]。要想將真實(shí)世界和虛擬物體無縫融合,必須實(shí)現(xiàn)實(shí)時監(jiān)測攝像頭,確定攝像頭相對于真實(shí)場景的位置以及角度等狀態(tài),校準(zhǔn)虛擬信息所要疊加的位置,實(shí)時將虛擬信息呈現(xiàn)在屏幕中,完成三維注冊。增強(qiáng)現(xiàn)實(shí)系統(tǒng)結(jié)構(gòu)如圖1所示。

1.2 著色器原理

Shader,即著色器,其本質(zhì)是渲染管線中的一個環(huán)節(jié)。渲染管線也稱為渲染流水線,是顯示芯片內(nèi)部處理圖形信號相互獨(dú)立的并行處理單元。具體流程如圖2所示。

圖1 增強(qiáng)現(xiàn)實(shí)系統(tǒng)結(jié)構(gòu)

圖2 渲染流水線

渲染是將三維場景中的模型,按照定好的環(huán)境、燈光、材質(zhì)及渲染參數(shù),二維投影成數(shù)字圖像的過程。GPU流水線上一些可高度編程的階段,由著色器編譯出來的最終代碼是會在GPU上運(yùn)行的,有一些特定類型的著色器,如頂點(diǎn)著色器、片元著色器。依靠著色器可以控制流水線中的渲染細(xì)節(jié),例如用頂點(diǎn)著色器來進(jìn)行頂點(diǎn)變換及傳遞數(shù)據(jù),用片元著色器來進(jìn)行逐像素渲染。

1.3 Unity Shader簡介

常見的著色語言有,DirectX的HLSL(High Level Language)、OpenGL的GLSL(OpenGL Shading Language)以及NVIDIA的CG(C for Graphic),這些底層著色語言在使用的過程中增加了開發(fā)者的開發(fā)難度。為了避免直接控制底層著色器,Unity為開發(fā)者提供了高層級的渲染抽象層——Unity Shader,通過這種方式讓開發(fā)者更加輕松地控制渲染[7]。在Unity Shader中,開發(fā)者可以輕易地實(shí)現(xiàn)傳統(tǒng)Shader所無法滿足的功能。例如一些渲染設(shè)置,在傳統(tǒng)的Shader當(dāng)中,開發(fā)者需要自行設(shè)置額外的代碼,而在Unity Shader中,可以通過簡單一行指令實(shí)現(xiàn)。同時,傳統(tǒng)的Shader無法在同一個文件中同時編寫頂點(diǎn)著色器和片元著色器,但是Unity Shader可以。由此可見,Unity Shader可以大幅度降低實(shí)現(xiàn)著色的困難,所以本文當(dāng)中主要利用了Unity Shader來實(shí)現(xiàn)京劇臉譜的繪制。

2 京劇臉譜繪制的實(shí)現(xiàn)

2.1 京劇臉譜繪制系統(tǒng)架構(gòu)

京劇臉譜繪制系統(tǒng),主要包含了京劇臉譜簡介,色畫方法,臉譜分類,AR臉譜繪制,經(jīng)典臉譜賞析五個模塊,如圖3所示。其中色畫方法中又分成了揉臉、抹臉、勾臉三個部分,是勾畫臉譜的三種畫法。臉譜分類中分成了整臉,三塊瓦臉,碎花臉與歪臉,僧臉與太監(jiān)臉等八種不同的類型。AR臉譜制作模塊,用戶可以在紙上繪制臉譜的顏色樣式,利用著色技術(shù)將其繪制到系統(tǒng)中生成三維的著色臉譜。經(jīng)典臉譜賞析模塊中主要介紹喜神、劉天君、馬天君、李天王、曹操、張飛等經(jīng)典京劇臉譜,通過這種方法科普臉譜知識。

2.2 功能實(shí)現(xiàn)

2.2.1 識別功能的實(shí)現(xiàn)

繪制功能需要實(shí)現(xiàn)攝像頭讀取以及識別圖片,本系統(tǒng)采用EasyAR插件,在unity平臺上實(shí)現(xiàn)該功能。編寫代碼,讀取紋理圖片,使得AR臉譜繪制功能該模塊能夠獲取到現(xiàn)實(shí)繪制的彩色紋理。

2.2.2 著色器的實(shí)現(xiàn)

應(yīng)用3D max制作臉譜面具模型,并將其導(dǎo)入到Unity當(dāng)中,為京劇臉譜模型編寫著色器,實(shí)現(xiàn)將讀取到的紋理繪制到模型上這一功能。新建一個材質(zhì)球,將其賦予到導(dǎo)入的臉譜模型上,修改著色器類型為寫好的著色器。

頂點(diǎn)著色器代碼如下:

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 坐標(biāo)空間轉(zhuǎn)換

在渲染流水線中,一個頂點(diǎn)要經(jīng)過多個坐標(biāo)空間的變換才能最終被畫在屏幕上。一個頂點(diǎn)最開始是在模型空間定義的,最終它會變換到屏幕空間中,得到真正的屏幕像素坐標(biāo)。利用Unity Shader可以實(shí)現(xiàn)將模型從模型空間—世界空間—觀察空間—裁剪空間—屏幕空間的轉(zhuǎn)換,得到真實(shí)的坐標(biāo)。

實(shí)現(xiàn)空間換算用到的部分代碼如下:

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 實(shí)驗(yàn)效果展示

將以上制作的內(nèi)容發(fā)布為apk格式,到測試系統(tǒng)當(dāng)中驗(yàn)證,測試系統(tǒng)為Android 10版本。在測試時,先將臉譜繪制功能打開,利用攝像頭讀取空白臉譜,能夠生成臉譜模型,如圖4(a)所示。實(shí)現(xiàn)虛實(shí)配準(zhǔn)以后,在臉譜上隨意繪制圖樣,發(fā)現(xiàn)在現(xiàn)實(shí)臉譜上繪制的色彩能夠著色到虛擬的模型上,繪制效果圖如圖4(b)所示。在實(shí)驗(yàn)過程中,虛擬的臉譜模型在繪制過程中不穩(wěn)定,還有待改進(jìn)。

圖4 京劇臉譜繪制效果圖

3 結(jié)語

本文主要實(shí)現(xiàn)京劇臉譜繪制,能夠?qū)崟r獲取相機(jī)拍攝到的紋理信息,將其換算并著色到模型上這一核心功能,靈活應(yīng)用Unity強(qiáng)大的Shader技術(shù),與傳統(tǒng)文化京劇臉譜的繪制結(jié)合起來。雖然整個系統(tǒng)的基本技術(shù)已經(jīng)實(shí)現(xiàn),但是目前還有很多不足的地方,比如模型繪制后的真實(shí)感情況、穩(wěn)定性都有待改進(jìn)。