陶藝品三維建模及交互式呈現(xiàn)研究

彭榮仙+++李學(xué)孺+++李婭+++徐靜

摘 要：本研究從非物質(zhì)文化遺產(chǎn)數(shù)字化保護(hù)視角，圍繞“湄公河次區(qū)域民族民間文化傳習(xí)館”中的陶藝罐、陶藝碗、陶藝掛飾及藏八寶等陶藝品系列，探討了3D建模技術(shù)及實(shí)現(xiàn)過程，構(gòu)建了陶藝品三維模型，研究了瀏覽器下3D模型的交互式呈現(xiàn)技術(shù)及實(shí)現(xiàn)方法，測試表明，研究所構(gòu)建的3D模型逼真度高，這些模型實(shí)現(xiàn)了在火狐瀏覽器和谷歌瀏覽器下的3D呈現(xiàn)、平移、360度旋轉(zhuǎn)、縮放等交互操作。

關(guān)鍵詞：陶藝品 三維建模 交互

基金項(xiàng)目：本研究受玉溪師范學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目支持，項(xiàng)目名稱“‘傳習(xí)館陶藝品三維建模及數(shù)字呈現(xiàn)”，項(xiàng)目編號“201502”

一、引言

玉溪師范學(xué)院的“湄公河次區(qū)域民族民間文化傳習(xí)館（以下簡稱‘傳習(xí)館）”以傳承和保護(hù)非物質(zhì)文化遺產(chǎn)為宗旨而創(chuàng)建，館內(nèi)引進(jìn)陶藝、木雕、刺繡、蠟染、扎染、說藝坊、藝術(shù)設(shè)計(jì)與云南元素、版畫、絕版木刻、民間舞蹈、民族繪畫、民間手工、瀕危語言等15個傳習(xí)項(xiàng)目[1]。其中，陶藝品作為“傳習(xí)館”保護(hù)地方非物質(zhì)文化遺產(chǎn)的重要組成部分，在堅(jiān)持地方傳統(tǒng)特色的基礎(chǔ)上不斷傳承、創(chuàng)新、發(fā)展，積累了一批優(yōu)秀作品。然而，這些陶藝作品在保護(hù)傳承及推廣上主要為實(shí)物呈現(xiàn)，雖面向全校師生、社會各界來訪人士開放觀摩，但物理時空的局限性使得其推廣和宣傳的力度受限，此外，玉溪師范學(xué)院雖利用校園網(wǎng)絡(luò)對陶藝作品做了一些宣傳，但相關(guān)報(bào)道也僅停留在文字及少量圖片介紹上，傳播效果欠佳，不利于保護(hù)和傳承。因此，本研究擬借助三維建模技術(shù)及網(wǎng)絡(luò)技術(shù)，對“傳習(xí)館”陶藝作品進(jìn)行三維建模、數(shù)字化展示和呈現(xiàn)。

二、 建模方案設(shè)計(jì)

本研究建模過程中綜合使用了圖像處理軟件Adobe PhotoShop以及三維動畫制作軟件3D Studio Max，而在模型交互呈現(xiàn)方面主要采用WebGl技術(shù)實(shí)現(xiàn)。在模型構(gòu)建中，由于每個類別的陶藝品都有自己獨(dú)特的造型，倘若所有模型都采用一樣的方式，可能無法實(shí)現(xiàn)模型繪制、陶藝品曲面難以勾畫、凹凸感模型構(gòu)建困難等諸多問題。因而，制作前需進(jìn)行一定的模型方案設(shè)計(jì)，主要包括模型構(gòu)造的分析，模型框架繪制以及后期的優(yōu)化處理。

模型構(gòu)造分析。通過對陶藝罐、藏八寶系列和精美飾品的分析主要有曲面形狀、立體方形和凹凸形狀。

模型框架繪制。進(jìn)行模型的構(gòu)造分析是模型框架設(shè)計(jì)的第一步，其中對整體模型進(jìn)行局部分隔處理簡化了模型，以此根據(jù)分析可采用二維建模、多邊形建模和復(fù)合建模完成模型的繪制。

后期優(yōu)化處理。后期的特效與渲染工作是為了增添模型的逼真程度、光澤度以及材質(zhì)的仿真度。對模型編輯材質(zhì)和貼圖，進(jìn)一步對模型陶瓷材質(zhì)的表現(xiàn)，圖案凹凸感的設(shè)置。

三、模型制作及后期加工

（一）模型制作

陶藝品屬于不規(guī)則物體，建模過程相對復(fù)雜，下面以陶藝罐及藏八寶系列之寶傘模型構(gòu)建為例進(jìn)行介紹。

1.陶藝罐模型的制作

陶藝罐是以中線為對稱軸的造型，在中軸線對稱模型構(gòu)建中，常使用車削建模命令，創(chuàng)建過程如下：利用3D Max圖形面板下的“線”命令，不斷單擊或拖動繪制直線或曲線，單擊的地方會出現(xiàn)控制點(diǎn)，在適當(dāng)?shù)奈恢脝螕籼砑狱c(diǎn)或刪除選定點(diǎn)來進(jìn)行模型細(xì)分或精簡，使陶罐造型的輪廓線產(chǎn)生曲面形狀、飽滿的感覺和光滑的效果[2]。在本案例陶藝罐模型構(gòu)建中，首先通過調(diào)整點(diǎn)的位置繪制輪廓線，此外，因陶藝罐有一定的厚度，應(yīng)使用輪廓命令，生成有間距的雙線條。將輪廓線條轉(zhuǎn)換成可編輯樣條線，確定旋轉(zhuǎn)的軸向，調(diào)整旋轉(zhuǎn)角度后使截面曲線沿中心軸旋轉(zhuǎn)360°生成一個對稱的陶藝罐三維模型。陶藝罐模型制作簡易流程如圖一所示：

2.藏八寶系列之寶傘模型的制作

藏八寶系列之寶傘是沿同一方向延伸橫截面形狀不變的三維物體，在這類模型的構(gòu)建當(dāng)中，使用頻率最高的方式是擠壓建模命令。創(chuàng)建方式如下：首先，用3D Max圖形面板下的“線”命令繪制模型的截面曲線；然后，選中曲線轉(zhuǎn)化為可編輯樣條線，由樣條線轉(zhuǎn)化為可編輯面片，最后添加殼修改器，調(diào)整外部量的參數(shù)值增加其厚度。藏八寶系列之寶傘模型制作簡易流程如圖二所示。

（二）模型貼圖

陶藝品屬于不規(guī)則物體，對模型的貼圖主要采用表面凹凸紋理貼圖及UV展開貼圖。以藏八寶系列模型之寶傘為例，由于其模型凹凸立體感明顯，其紋理由凹凸紋理貼圖完成，即通過將帶有深度變化的凹凸材質(zhì)貼圖賦予模型，增加合適的貼圖坐標(biāo)修改器，再進(jìn)行參數(shù)修改完成。經(jīng)過渲染處理后，物體的表面就會呈現(xiàn)出凹凸不平的感覺。效果如圖三所示。

（三）模型導(dǎo)出

在該研究中，由于采用WebGl技術(shù)對3D模型進(jìn)行交互呈現(xiàn)，而以WebGl為基礎(chǔ)的庫Three.js支持用戶由3ds Max等建模工具制作的obj，ply，stl，vtk等三維模型格式，其中.obj是最常用的模型格式，如果只需導(dǎo)入一個3D模型輪廓，那么可直接引用OBJLoader文件，但是如果需要加載一個帶紋理的模型則需引入OBJMTLLoader文件。OBJMTLLoader文件的作用在于加載模型并直接賦予其材質(zhì)。本研究中需導(dǎo)出帶材質(zhì)效果的.obj文件格式，并同時引用MTLLoader以及OBJMTLLoader文件。

四、模型的交互呈現(xiàn)

（一）關(guān)鍵技術(shù)

（1）WebGL。WebGL作為一種當(dāng)下流行的3D繪圖技術(shù)標(biāo)準(zhǔn)，可以為HTML5 Canvas提供硬件3D加速渲染，實(shí)現(xiàn)在瀏覽器里流暢地展示3D場景和模型的功能。

（2）Three.js。Three.js是一個使用JavaScript語言編寫的WebGL三維引擎庫，實(shí)現(xiàn)Web環(huán)境下3D圖形的開發(fā)和運(yùn)行環(huán)境支持，它提供了眾多的三維繪圖方法，可方便地構(gòu)建網(wǎng)絡(luò)三維場景，并且在瀏覽器端顯示時可以較高效地對場景進(jìn)行三維渲染。Three.jS庫中包括了場景、相機(jī)、模型加載器、著色器、材質(zhì)、燈光、動畫、粒子、物理工具等[3]，具有在不需安裝插件情況下瀏覽器原生支持，操作系統(tǒng)、瀏覽器兼容性高，移動平臺支持等優(yōu)勢。

（二） 實(shí)現(xiàn)過程

利用WebGl技術(shù)實(shí)現(xiàn)陶藝品3D模型在瀏覽器中交互呈現(xiàn)需經(jīng)過如下步驟：

1.開發(fā)環(huán)境

本研究選用WebStorm作為JavaScript編輯器，它具有代碼補(bǔ)全、自動部署、直接在編輯器里調(diào)試JavaScript等功能優(yōu)勢。

2.創(chuàng)建場景

場景（Scene）好比一個舞臺，所有的演員（對象）、燈光、攝影（相機(jī)）都在這里，如果沒有場景我們將無法繼續(xù)操作。通過創(chuàng)建場景我們將需要的對象添加到場景中進(jìn)行設(shè)置才能顯示出來。代碼如下：

Var Scene=new Three.Scene（）；//創(chuàng)建場景

3.Three.js庫文件引入

當(dāng)three.js文件和html文件處于同級目錄時，可在HTML的標(biāo)簽中加入如下代碼：，即可將three.js庫文件引入。

4.引入模型加載器

本研究中需加載3dsMaxs導(dǎo)出的obj模型以及mtl的材質(zhì)庫文件，對應(yīng)的模型加載器為OBJMTLLoader，加載路徑為相對路徑。代碼如下：

Var Loader=new THREE.OBJMTLoader（）；//引入OBJMTLLoader加載器

loader.load（'…/….obj'， '…/….mtl'， function（Object）{

Object.scale.set（0.1， 0.1， 0.1）；//設(shè)置對象的大小

Object.position.y=50；//設(shè)置對象的Y坐標(biāo)位置

Object.position.x=30； //設(shè)置對象的X坐標(biāo)位置

scene.add（Object）； //將對象添加至場景中}）；

5.添加燈光

光源使得場景中的3D渲染模型得以被呈現(xiàn)。該研究中引用了點(diǎn)光源（PointLight）和環(huán)境光（AmbientLight），通過點(diǎn)光源從所有方向照射到3D模型，同時使用環(huán)境光來為場景添加基本光照效果。

6.設(shè)置相機(jī)

設(shè)置相機(jī)的目的是使Three.js創(chuàng)建的場景能在二維的顯示屏下顯示出三維效果，可根據(jù)顯示需要設(shè)置相機(jī)的近距點(diǎn)和遠(yuǎn)距點(diǎn)，從而決定場景中哪些角度的物體被顯示。Three.js庫中的相機(jī)有正投影和透視兩種，[4]該研究中主要采用透視相機(jī)（THREE.PerspectiveCamera），通過透視相機(jī)產(chǎn)生物體“近大遠(yuǎn)小”的視覺感受，相機(jī)創(chuàng)建關(guān)鍵代碼如下：

Var camera=new three.PerspectiveCamera（）；

7.創(chuàng)建渲染器并渲染

3D模型呈現(xiàn)的最后環(huán)節(jié)是創(chuàng)建渲染器并實(shí)施渲染，渲染器對象負(fù)責(zé)計(jì)算指定相機(jī)角度下瀏覽器中場景的樣子，通過創(chuàng)建WebGLRenderer對象，使計(jì)算機(jī)顯卡渲染場景，從而在屏幕上繪制出3D模型。

五、結(jié)語

在計(jì)算機(jī)虛擬現(xiàn)實(shí)技術(shù)廣泛滲透于社會各領(lǐng)域的今天，網(wǎng)絡(luò)環(huán)境下“虛”、“實(shí)”結(jié)合保護(hù)及傳播非物質(zhì)文化遺產(chǎn)是極其有效和被推崇的途徑之一。本研究立足實(shí)際，借助三維建模及網(wǎng)絡(luò)技術(shù)對“傳習(xí)館”陶藝品進(jìn)行了數(shù)字化展示和交互呈現(xiàn)，實(shí)現(xiàn)了將3D模型在火狐、谷歌等瀏覽器下的呈現(xiàn)、平移、360度旋轉(zhuǎn)、縮放等系列操作，對非物質(zhì)文化遺產(chǎn)中的“陶藝品”的保護(hù)具有一定的意義。

參考文獻(xiàn)

[1] 王鵬.開創(chuàng)本土化教育與非遺保護(hù)新模式——記玉溪師范學(xué)院湄公河次區(qū)域民族民間文化傳習(xí)館[DB/OL].http：//www.yuxinews.com 2012-12-31

[2] 余勇，周靈云.論3DMAX建模元素在陶瓷造型設(shè)計(jì)中的應(yīng)用[J].景德鎮(zhèn)陶瓷，2006，16（2）：18.

[3] 王騰飛，劉俊男，周更新.基于Three.js 3D引擎的三維網(wǎng)頁實(shí)現(xiàn)與加密[J].企業(yè)技術(shù)開發(fā)，2014-1. 33（2）：79.

[4] Jos Dirksen. Three.js開發(fā)指南北京[M].機(jī)械工業(yè)出版社，2015：37.