應(yīng)用WebGL構(gòu)建富硒藥用植物虛擬展示平臺(tái)1)

國(guó)桂環(huán) 曾睿 張海霞

(湖北民族大學(xué),湖北·恩施,445000)

硒(Se)是世界衛(wèi)生組織(WHO)、世界健康營(yíng)養(yǎng)組織(WHNO)認(rèn)定的人體必需微量元素,具有抗氧化、延緩衰老、增強(qiáng)免疫力,防止心腦血管疾病、大骨節(jié)病及關(guān)節(jié)炎等作用[1]。中藥材中的硒能被直接吸收利用,可更有效抑制腫瘤細(xì)胞、護(hù)肝保肝、提高免疫能力等。盡管富硒中藥材的藥用價(jià)值在學(xué)術(shù)界得到一致認(rèn)可,但市場(chǎng)上的富硒中藥材卻銷售低迷、有市無(wú)價(jià)[2],其中一個(gè)重要原因就是大眾補(bǔ)硒的意識(shí)不強(qiáng),對(duì)富硒中藥材資源自身的特色性、經(jīng)濟(jì)性、可塑性缺乏足夠充分的認(rèn)識(shí)。

為了提高大眾對(duì)硒元素的重視,加強(qiáng)富硒中藥材的推廣,豐富資源可視化信息量,本文考量三維呈現(xiàn)較二維圖像與文字的特色優(yōu)勢(shì),立足融合計(jì)算機(jī)網(wǎng)絡(luò)與三維圖形技術(shù),應(yīng)用WebGL搭建富硒藥用植物的虛擬展示平臺(tái),達(dá)到利用計(jì)算機(jī)可視化技術(shù)、跨平臺(tái)高性能實(shí)時(shí)渲染技術(shù),以實(shí)現(xiàn)推廣營(yíng)銷富硒中藥材的目的。

當(dāng)前,WebGL基于OpenGL ES2.0及以上功能集的支持,使用GLSL(高級(jí)著色器)著色語(yǔ)言,直接運(yùn)行在HTML5 canvas(畫布)元素上,利用用戶設(shè)備提供的圖形硬件進(jìn)行加速,且已發(fā)展出眾多框架(如BabylonJS、Cesium、CubicVR.js、O3D、Three.js等)[3-4]。其中,BabylonJS是一款功能強(qiáng)大、簡(jiǎn)單易用、免費(fèi)開(kāi)源的JavaScript框架,BabylonJS不僅具有完整的開(kāi)發(fā)技術(shù)文檔與活躍的社區(qū)支持,通過(guò)其官網(wǎng)提供的場(chǎng)景可直接在網(wǎng)頁(yè)上運(yùn)行WebGL程序,而且具有強(qiáng)大的節(jié)點(diǎn)編輯器,可以快速構(gòu)建程序紋理、粒子材質(zhì)和各種后期效果,支持物理渲染(PBR渲染),可模擬光線在具有高級(jí)次表面散射的表面下多次反彈的效果;具有優(yōu)秀的環(huán)境照明,可為透明物體生成正確的軟陰影,可直接在場(chǎng)景中使用HDR(高動(dòng)態(tài)范圍成像)文件進(jìn)行照明[5]。

1 技術(shù)框架

基于WebGL的富硒藥用植物虛擬展示平臺(tái)的整體設(shè)計(jì)思路(見(jiàn)圖1)。通過(guò)查找文獻(xiàn),對(duì)富硒中藥材的聚硒能力進(jìn)行比較匯總,從中選取不同屬、目中具有代表性的高聚硒中藥植物進(jìn)行形態(tài)特征提取,借助多種建模技術(shù)完成植物模型構(gòu)建。將包含幾何數(shù)據(jù)和紋理信息的模型數(shù)據(jù)輸入BabylonJS框架,利用框架提供的圖形接口完成虛擬場(chǎng)景的搭建(包括攝影機(jī)、燈光、材質(zhì)、環(huán)境、動(dòng)畫等)。同時(shí)為了減輕瀏覽器端的渲染壓力,綜合使用實(shí)例化器和LOD(細(xì)節(jié)級(jí)別)技術(shù)對(duì)場(chǎng)景進(jìn)行輕量化處理。最后借助WebGL技術(shù)實(shí)現(xiàn)在瀏覽器中與植物三維模型的交互,主要功能包括:(1)多視圖、多視角與背景切換,用戶可從任意角度對(duì)植物模型進(jìn)行觀察,可切換虛擬展示平臺(tái)的背景與環(huán)境;(2)一鍵生成大量植物模型,用戶可在逼真的環(huán)境中觀察大量中藥植物的形態(tài),對(duì)植物生長(zhǎng)環(huán)境有更直觀的認(rèn)識(shí);(3)對(duì)象交互,用戶可利用鼠標(biāo)、鍵盤在頁(yè)面中直接操控植物進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放與高亮顯示邊緣。

圖1 富硒藥用植物虛擬展示平臺(tái)技術(shù)架構(gòu)

2 關(guān)鍵技術(shù)路線

2.1 三維樹木建模軟件(SpeedTree)與通用三維建模軟件(3ds Max)的建模技術(shù)

富硒藥用植物三維模型是虛擬展示平臺(tái)最重要的資源。為創(chuàng)建逼真的植物模型,采用多種建模技術(shù)與建模工具,為不同單體特點(diǎn)的植物選取適當(dāng)?shù)慕７椒?。?duì)于大多數(shù)木本植物直接采用參數(shù)化建模方法,利用SpeedTree軟件提供的樹干、小枝、葉狀體、葉片等節(jié)點(diǎn),通過(guò)調(diào)整相關(guān)參數(shù)完成模型構(gòu)建。對(duì)于沒(méi)有明顯主干的灌木類植物綜合使用網(wǎng)格建模和參數(shù)建模方法,首先利用3ds Max軟件完成單體結(jié)構(gòu)的網(wǎng)格模型,然后通過(guò)SpeedTree軟件提供的材質(zhì)接口將單體的網(wǎng)格模型導(dǎo)入,最后通過(guò)曲線調(diào)整相應(yīng)屬性完成整個(gè)植物模型構(gòu)建。由于植物一般包含多個(gè)單體,SpeedTree創(chuàng)建的模型會(huì)包含多組材質(zhì)與紋理,需要使用貼圖烘焙技術(shù)將多組紋理壓縮成一組。將SpeedTree構(gòu)建的模型以O(shè)BJ格式輸出到3ds Max中,利用該軟件中的BabylonJS插件將模型以.babylon或.gltf格式輸出。為把模型加載到虛擬展示平臺(tái),需使用BabylonJS框架提供的場(chǎng)景加載器,可采用同步或異步方式將場(chǎng)景以整體或單獨(dú)網(wǎng)格、材質(zhì)形式進(jìn)行加載。

虛擬展示平臺(tái)還需對(duì)藥用植物的生長(zhǎng)地形環(huán)境進(jìn)行模擬,本文使用曲面細(xì)分生成技術(shù),利用僅包含灰度信息的高度圖對(duì)曲面細(xì)分生成的網(wǎng)格進(jìn)行頂點(diǎn)位移操作[6]。使用高度圖和曲面細(xì)分著色器生成地形的渲染管線(見(jiàn)圖2),整個(gè)細(xì)分網(wǎng)格的過(guò)程全部在GPU上實(shí)現(xiàn),渲染幀速率不會(huì)受到顯著影響。圖3顯示了鑲嵌因子為100,添加了材質(zhì)后的地形效果。

圖2 使用曲面細(xì)分著色器生成地形的渲染管線

圖3 采用曲面細(xì)分技術(shù)生成的地形

2.2 天空盒與透明陰影的環(huán)境光照技術(shù)

虛擬展示平臺(tái)對(duì)光照環(huán)境的模擬是還原真實(shí)感非常重要的一步,為了兼顧真實(shí)感與流暢性,采用直接光照+天空盒的方式模擬環(huán)境。通過(guò)創(chuàng)建一盞平行光模擬日光,一盞半球光模擬環(huán)境光,簡(jiǎn)單的兩盞燈光既可以達(dá)到基本的照明需求又能加快后續(xù)渲染速度。對(duì)周圍環(huán)境的模擬采用天空盒技術(shù),在一個(gè)大的立方體表面貼圖實(shí)現(xiàn)自然環(huán)境模擬。在BabylonJS框架中天空盒采用立方體貼圖,即一張紋理圖像包含六個(gè)面的紋理,分別對(duì)應(yīng)立方體的頂部、底部、正面、背面、右面和左面(見(jiàn)圖4)。

圖4 立方體貼圖對(duì)應(yīng)位置示意圖

在渲染天空盒時(shí),可使用提前深度測(cè)試,讓天空盒具有最大深度,并把立方體貼圖作為標(biāo)準(zhǔn)材質(zhì)的反射貼圖使用,設(shè)置反射貼圖的坐標(biāo)系模式為天空盒模式(SKYBOX_MODE),以實(shí)現(xiàn)直接在立方體上繪制貼圖的效果。創(chuàng)建天空盒的代碼如下:

var skybox=BABYLON.MeshBuilder.CreateBox(“skyBox”,{size:2000},scene);

var skyboxMaterial=new BABYLON.StandardMaterial(“skyBox”,scene);

skyboxMaterial.backFaceCulling=false;

skyboxMaterial.disableLighting=true;

skyboxMaterial.reflectionTexture=new BABYLON.CubeTexture(“./textures/cube/box”,scene);

skyboxMaterial.reflectionTexture.coordinatesMode=BABYLON.Texture.SKYBOX_MODE;

效果如圖5。

圖5 天空盒效果圖

通過(guò)陰影可讓觀察者獲得物體之間的空間位置關(guān)系進(jìn)而增加場(chǎng)景的真實(shí)感。BabylonJS框架采用陰影貼圖技術(shù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)陰影效果,生成陰影的步驟:(1)為指定燈光創(chuàng)建陰影生成器;(2)將生成陰影的對(duì)象加入生成陰影貼圖隊(duì)列;(3)設(shè)置陰影過(guò)濾類型。由于在植物的建模過(guò)程中需要使用大量的透明貼圖,故在陰影生成器中設(shè)置透明陰影(transparency Shadow)屬性或者自定義著色器來(lái)渲染陰影貼圖以得到正確的透明陰影。圖6演示了陰影貼圖分辨率為1 024×1 024,過(guò)濾器為百分比近似濾波器(PCF),偏置(Bias)值為0.01,啟用背面渲染與透明陰影屬性的效果圖。

圖6 開(kāi)啟陰影前后的效果對(duì)比

2.3 物理渲染材質(zhì)技術(shù)

應(yīng)用物理渲染材質(zhì)可逼真的還原物體表面與光的作用,使虛擬模型更具真實(shí)感。本文植物模型的材質(zhì)使用BabylonJS框架提供的物理渲染材質(zhì),主要使用的物理渲染材質(zhì)包括:反照紋理(植物表面的顏色信息,主要表示植物表面高光分布的信息)、凹凸紋理(植物表面的法線信息)、環(huán)境紋理(植物的環(huán)境光遮蔽效果)。為了逼真模擬植物葉片的次表面散射效果,需開(kāi)啟材質(zhì)的半透明和散射開(kāi)關(guān)模擬光線穿透葉片在表面多次彈射的效果。圖7展示了蒲公英(Taraxacummongolicum)模型的各種紋理及使用PBR材質(zhì)后的效果圖。

圖7 使用PBR材質(zhì)的蒲公英效果

2.4 實(shí)例化和細(xì)節(jié)層次(LOD)的模型輕量化技術(shù)

植物模型數(shù)據(jù)量通常都非常大,尤其是結(jié)構(gòu)復(fù)雜的莖葉類藥材,要在瀏覽器有限的計(jì)算能力上實(shí)現(xiàn)PBR渲染,必須對(duì)模型進(jìn)行輕量化處理。本文綜合使用實(shí)例化和細(xì)節(jié)層次技術(shù)實(shí)現(xiàn)模型的輕量化。實(shí)例化是一種連續(xù)執(zhí)行多條相同渲染命令的方法,只需發(fā)送給GPU一次模型數(shù)據(jù)就可繪制出多個(gè)物體[7]。BabylonJS框架提供了專門的實(shí)例化器對(duì)象,實(shí)現(xiàn)實(shí)例化功能,可為網(wǎng)格對(duì)象創(chuàng)建任意多個(gè)實(shí)例,每個(gè)實(shí)例都和源網(wǎng)格使用同樣的材質(zhì),對(duì)實(shí)例對(duì)象進(jìn)行仿射變換操作,使用實(shí)例化器創(chuàng)建大量副本的代碼如下:

count=1000;

for (var index=0;index

var newInstance=mesh.createInstance(“i”+index);

//Here you could change the properties of your individual instance,

}

LOD技術(shù)的基本思想:當(dāng)對(duì)象對(duì)渲染的貢獻(xiàn)減少時(shí),使用對(duì)象的簡(jiǎn)單版本;LOD技術(shù)的算法主要包括生成不同細(xì)節(jié)的模型對(duì)象,根據(jù)規(guī)則選擇一個(gè)級(jí)別的細(xì)節(jié)模型和實(shí)現(xiàn)從一個(gè)模型切換到另一個(gè)模型[8]。BabylonJS框架對(duì)LOD技術(shù)提供了全部支持,并且利用框架提供的自動(dòng)簡(jiǎn)化算法,異步生成模型的簡(jiǎn)化版本,不會(huì)干擾渲染過(guò)程。使用網(wǎng)格對(duì)象的簡(jiǎn)化(simplify)方法可快速生成模型的多個(gè)簡(jiǎn)化版本,通過(guò)指定簡(jiǎn)化質(zhì)量和模型到攝影機(jī)的距離實(shí)現(xiàn)不同細(xì)節(jié)的選擇和切換。

2.5 交互技術(shù)

富硒藥用植物虛擬展示平臺(tái)使用到的交互技術(shù)包括BabylonJS框架提供的2D GUI(圖形用戶界面)對(duì)象及事件對(duì)象和應(yīng)用HTML DOM(超文本文檔對(duì)象模型)的事件。Babylon 2D GUI可與三維場(chǎng)景緊密結(jié)合,將用戶界面與網(wǎng)格聯(lián)系起來(lái),易于編輯和后期處理。使用Babylon 2D GUI的一般流程分為:(1)使用高級(jí)動(dòng)態(tài)紋理生成用戶界面;(2)添加容器和控件;(3)定義控件的偵測(cè)(Observables)事件。虛擬平臺(tái)使用GPU加速的全屏高級(jí)動(dòng)態(tài)紋理生成用戶界面,通過(guò)添加矩形容器管理多組按鈕控件、顏色拾取控件等,使用的偵測(cè)事件主要包括指針進(jìn)入事件、指針移出事件、指針單擊事件、鍵盤事件、數(shù)值改變事件等。BabylonJS框架的事件對(duì)象還包括動(dòng)作,通過(guò)對(duì)場(chǎng)景中的網(wǎng)格對(duì)象關(guān)聯(lián)動(dòng)作管理器即可注冊(cè)各種動(dòng)作,如使用指針按下觸發(fā)器完成用戶單擊場(chǎng)景中網(wǎng)格對(duì)象的動(dòng)作設(shè)置。虛擬平臺(tái)中與植物模型的交互功能大量采用了動(dòng)作事件來(lái)實(shí)現(xiàn)模型的仿射變換,邊緣高亮顯示等。

由于框架未提供鼠標(biāo)滾輪相關(guān)的動(dòng)作事件,虛擬平臺(tái)使用文檔對(duì)象模型(DOM)中的滾輪(WheelEvent)事件實(shí)現(xiàn)鼠標(biāo)滾輪縮放正交視圖的功能。公式1表示的正交投影矩陣,表明視圖的顯示范圍與攝影機(jī)的z軸位置無(wú)關(guān),因此正交視圖不能通過(guò)調(diào)整攝影機(jī)的z軸位置改變。

(1)

若要改變場(chǎng)景中對(duì)象在正交視圖中的顯示大小,需要調(diào)整公式中的參數(shù)r、l、t和b,即近裁剪面的右、左、上、下邊(見(jiàn)圖8)。因此,通過(guò)將鼠標(biāo)滾輪中的橫軸位移(deltaX)和縱軸位移(deltaY)屬性與參數(shù)r、l、t和b關(guān)聯(lián),可實(shí)現(xiàn)使用鼠標(biāo)滾輪縮放視圖的功能。

圖8 正交投影示意圖

3 試驗(yàn)效果與應(yīng)用

3.1 富硒藥用植物模型庫(kù)

通過(guò)收集富硒中藥材聚硒能力資料,對(duì)其進(jìn)行比較匯總,并根據(jù)聚硒能力選取了10種具有代表性的藥用植物,提取特征數(shù)據(jù),利用多種建模方法和建模工具完成10種代表植物的三維模型構(gòu)建。

下面簡(jiǎn)述部分富硒藥用植物形態(tài)特征和模型效果。

根莖類藥材:鳶尾(IristectorumMaxim.),草本,根狀莖粗壯,二歧分枝,葉基生,黃綠色,寬劍形,無(wú)明顯中脈,花藍(lán)紫色,直徑約10 cm,蒴果長(zhǎng)橢圓形或倒卵圓形,長(zhǎng)5～6 cm(見(jiàn)圖9)。

圖9 鳶尾

莖葉類藥材:華蟹甲(Sinacaliatangutica(Maxim.) B. Nord.),中部葉卵形或卵狀心形,長(zhǎng)10～16 cm,羽狀深裂,總苞圓柱狀,長(zhǎng)0.8～1.0 cm,總苞片5,線狀長(zhǎng)圓形,長(zhǎng)約8 mm,被微毛,邊緣窄干膜質(zhì);黃色舌狀花2～3,瘦果圓柱形,長(zhǎng)約3 mm(見(jiàn)圖10)。

圖10 華蟹甲

全草類藥材:蒲公英(Taraxacummongolicum),草本,葉倒卵狀披針形、倒披針形或長(zhǎng)圓狀披針形,長(zhǎng)4～20 cm,花葶1至數(shù)個(gè),高10～25 cm,上部紫紅色,密被總苞鐘狀,淡綠色,總苞片2～3層(見(jiàn)圖11)。

圖11 蒲公英

果實(shí)類藥材:中華獼猴桃(ActinidiachinensisPlanch.),藤本植物,幼枝被灰白色絨毛,后脫落無(wú)毛;葉紙質(zhì),營(yíng)養(yǎng)枝之葉寬卵圓形或橢圓形,先端短漸尖或驟尖,聚傘花序1～3花,花序梗長(zhǎng)0.70～1.5 cm;果黃褐色,近球形,長(zhǎng)4～6 cm(見(jiàn)圖12)。

圖12 中華獼猴桃

3.2 視圖切換與視角切換

虛擬展示平臺(tái)最基本的功能就是對(duì)藥用植物模型從不同視角進(jìn)行觀察,利用BabylonJS框架的弧形旋轉(zhuǎn)攝影機(jī),用戶可以通過(guò)鼠標(biāo)和鍵盤更改攝影機(jī)的位置和半徑,從而實(shí)現(xiàn)視角切換,創(chuàng)建透視攝影機(jī)的代碼如下:

let camera=new BABYLON.ArcRotateCamera(‘camera’,-Math.PI/4,

Math.PI/2,15,new BABYLON.Vector3(0,0,0),scene);

camera.attachControl(true,true,0);

camera.lowerRadiusLimit=0.2;

camera.upperRadiusLimit=20;

camera.upperBetaLimit=(Math.PI/2)*0.99;

camera.useBouncingBehavior=true;

相比于透視圖,正交視圖可更準(zhǔn)確表示對(duì)象間的空間位置和大小比例。虛擬展示平臺(tái)實(shí)現(xiàn)了利用用戶界面從頂視圖、前視圖和側(cè)視圖三個(gè)正交視圖分別觀察場(chǎng)景的功能。將弧形旋轉(zhuǎn)相機(jī)視為一個(gè)圍繞其目標(biāo)(target)點(diǎn)進(jìn)行觀察的攝影機(jī),以目標(biāo)對(duì)象為球坐標(biāo)系的原點(diǎn),半徑(radius)表示其到目標(biāo)點(diǎn)的距離,阿爾法(alpha)表示其與原點(diǎn)的連線與X軸正方向的方位角(縱向旋轉(zhuǎn)的弧度),貝塔(beta)表示其與原點(diǎn)的連線與Y軸正方向的夾角(橫向旋轉(zhuǎn)的弧度)。貝塔沿順時(shí)針?lè)较蛟黾?而阿爾法沿逆時(shí)針?lè)较蛟黾印Ｍㄟ^(guò)將攝影機(jī)模式設(shè)置為正交投影,將位置設(shè)置為如圖13所示的坐標(biāo)阿爾法和貝塔值,并為畫布注冊(cè)相應(yīng)的事件函數(shù),用戶可利用鼠標(biāo)滾輪和鍵盤控制正交視圖的縮放。

圖13 攝影機(jī)位置示意圖

實(shí)現(xiàn)正交視圖切換與控制的部分代碼如下:

camera.mode=BABYLON.Camera.ORTHOGRAPHIC_CAMERA;

camera.alpha=-Math.PI/2;

camera.beta=Math.PI/2;

camera.detachControl();

setOrthCamera(radio,radioscale,camera);

function setOrthCamera(radio:number,scale:number,camera:BABYLON.ArcRotateCamera){

camera.orthoLeft=radio;

camera.orthoRight=-radio;

camera.orthoTop=radio*scale;

camera.orthoBottom=-radio*scale;

}

3.3 對(duì)象交互

為了更好的展示植物各部分單體的結(jié)構(gòu)特點(diǎn),用戶可通過(guò)鼠標(biāo)對(duì)模型進(jìn)行移動(dòng)、旋轉(zhuǎn)和縮放操作,利用BabylonJS框架提供的控件管理器(Gizmo Manager)對(duì)象可快速實(shí)現(xiàn)模型的基本變換功能。采用GLTF(圖形語(yǔ)言傳輸格式)模型加載與實(shí)現(xiàn)基本變換功能的代碼如下:

var assetsManager=new BABYLON.AssetsManager(scene);

var meshTask=assetsManager.addMeshTask(“Dandelion”,“”,“./model/”,“Dandelion1.babylon”);

meshTask.onSuccess = function (task) {

task.loadedMeshes[0].scaling=new BABYLON.Vector3(3,3,3);

task.loadedMeshes[0].position=new BABYLON.Vector3(-0.001,0,-0.001);

}

assetsManager.load();

var gizmoManager=new BABYLON.GizmoManager(scene)

gizmoManager.boundingBoxGizmoEnabled=true

//Restrict gizmos to model assets

gizmoManager.attachableMeshes=meshTask

同時(shí)虛擬平臺(tái)還提供了高亮顯示模型邊緣的功能,當(dāng)用戶使用鼠標(biāo)選中模型時(shí),模型的邊緣會(huì)高亮顯示,清晰地區(qū)別模型與背景。此功能的實(shí)現(xiàn)使用了框架提供的高亮顯示層(HighlightLayer)對(duì)象,通過(guò)將需要高亮顯示的模型添加到高亮顯示列表中,然后設(shè)置邊緣顏色,最后開(kāi)啟渲染管線的模版測(cè)試。對(duì)象交互的基本變換功能和高亮顯示邊緣功能如圖14所示。

圖14 對(duì)象基本變換功能與高亮顯示邊緣效果圖

3.4 一鍵生成植物效果圖

為演示藥用植物的生長(zhǎng)環(huán)境,虛擬展示平臺(tái)實(shí)現(xiàn)了一鍵生成大片植物的功能,即在生成的地形上創(chuàng)建多種類型的植物。根據(jù)植物生活環(huán)境特點(diǎn)將植物劃分到地形的不同高度上,通過(guò)獲取地形在特定點(diǎn)的y坐標(biāo),實(shí)現(xiàn)將植物模型放置在地形表面。利用實(shí)例化技術(shù),先獲取外部模型的渲染網(wǎng)格再使用網(wǎng)格對(duì)象的創(chuàng)建實(shí)例(createInstance)方法創(chuàng)建多個(gè)模型副本,同時(shí)利用框架內(nèi)置的LOD技術(shù)進(jìn)一步優(yōu)化模型,部分代碼如下:

BABYLON.SceneLoader.ImportMesh(“”,“./model/”,“Dandelion1.babylon”, scene, function (newMeshes){

var mesh=newMeshes[0].subMeshes[0].getRenderingMesh();//get renderingMesh

const tree=ground.getHeightAtCoordinates(0,0);

mesh.position.y=tree;//Getting height from ground object

//use auto LOD to simplify models

mesh.simplify([{quality:0.9,distance:25},{quality:0.4,distance:50},],

false, BABYLON.SimplificationType.QUADRATIC)。

圖15顯示了創(chuàng)建500株三維模型頂點(diǎn)個(gè)數(shù)為36 372的蒲公英和50株三維模型頂點(diǎn)個(gè)數(shù)為3 221 556的美麗花枝子植物模型后幀頻沒(méi)有明顯下降的效果。

3.5 動(dòng)畫演示與科普

虛擬展示平臺(tái)不但提供了基于WebGL的交互功能,同時(shí)將多媒體技術(shù)引入進(jìn)來(lái),通過(guò)文字、圖片和動(dòng)畫的形式呈現(xiàn)有關(guān)硒元素的科普知識(shí)。為了直觀演示硒元素對(duì)人體的作用,利用三維動(dòng)畫技術(shù)制作完成了硒元素對(duì)人體功效以及如何科學(xué)補(bǔ)硒的動(dòng)畫。應(yīng)用HTML5中的視頻技術(shù)將動(dòng)畫嵌入到虛擬平臺(tái),用戶可輕松實(shí)現(xiàn)對(duì)視頻的播放控制。

4 結(jié)束語(yǔ)

本文應(yīng)用WebGL構(gòu)建富硒藥用植物虛擬展示的平臺(tái),重點(diǎn)介紹了虛擬展示平臺(tái)使用到的建模技術(shù)、地形生成技術(shù)、光照環(huán)境技術(shù)、PBR渲染技術(shù)、實(shí)例化與LOD技術(shù)和交互技術(shù),綜合運(yùn)用技術(shù)完成了數(shù)十種富硒藥用植物的模型構(gòu)建和虛擬展示平臺(tái)的交互功能。通過(guò)該平臺(tái)的應(yīng)用,可提高大眾對(duì)硒元素的重視,促進(jìn)富硒中藥材的推廣。目前僅有10種富硒藥用植物,模型庫(kù)需進(jìn)一步豐富,同時(shí)大型木本植物的面數(shù)較高,給瀏覽器的渲染造成沉重負(fù)擔(dān),因此對(duì)植物模型的輕量化處理是本文下一步的工作重點(diǎn)。