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

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

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

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

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

1 技術(shù)框架

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

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

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

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

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

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

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

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

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

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

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

在渲染天空盒時,可使用提前深度測試,讓天空盒具有最大深度,并把立方體貼圖作為標準材質(zhì)的反射貼圖使用,設(shè)置反射貼圖的坐標系模式為天空盒模式(SKYBOX_MODE),以實現(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ān)系進而增加場景的真實感。BabylonJS框架采用陰影貼圖技術(shù)來實現(xiàn)動態(tài)陰影效果,生成陰影的步驟:(1)為指定燈光創(chuàng)建陰影生成器;(2)將生成陰影的對象加入生成陰影貼圖隊列;(3)設(shè)置陰影過濾類型。由于在植物的建模過程中需要使用大量的透明貼圖,故在陰影生成器中設(shè)置透明陰影(transparency Shadow)屬性或者自定義著色器來渲染陰影貼圖以得到正確的透明陰影。圖6演示了陰影貼圖分辨率為1 024×1 024,過濾器為百分比近似濾波器(PCF),偏置(Bias)值為0.01,啟用背面渲染與透明陰影屬性的效果圖。

圖6 開啟陰影前后的效果對比

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

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

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

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

植物模型數(shù)據(jù)量通常都非常大,尤其是結(jié)構(gòu)復(fù)雜的莖葉類藥材,要在瀏覽器有限的計算能力上實現(xiàn)PBR渲染,必須對模型進行輕量化處理。本文綜合使用實例化和細節(jié)層次技術(shù)實現(xiàn)模型的輕量化。實例化是一種連續(xù)執(zhí)行多條相同渲染命令的方法,只需發(fā)送給GPU一次模型數(shù)據(jù)就可繪制出多個物體[7]。BabylonJS框架提供了專門的實例化器對象,實現(xiàn)實例化功能,可為網(wǎng)格對象創(chuàng)建任意多個實例,每個實例都和源網(wǎng)格使用同樣的材質(zhì),對實例對象進行仿射變換操作,使用實例化器創(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ù)的基本思想:當對象對渲染的貢獻減少時,使用對象的簡單版本;LOD技術(shù)的算法主要包括生成不同細節(jié)的模型對象,根據(jù)規(guī)則選擇一個級別的細節(jié)模型和實現(xiàn)從一個模型切換到另一個模型[8]。BabylonJS框架對LOD技術(shù)提供了全部支持,并且利用框架提供的自動簡化算法,異步生成模型的簡化版本,不會干擾渲染過程。使用網(wǎng)格對象的簡化(simplify)方法可快速生成模型的多個簡化版本,通過指定簡化質(zhì)量和模型到攝影機的距離實現(xiàn)不同細節(jié)的選擇和切換。

2.5 交互技術(shù)

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

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

(1)

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

圖8 正交投影示意圖

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

3.1 富硒藥用植物模型庫

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

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

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

圖9 鳶尾

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

圖10 華蟹甲

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

圖11 蒲公英

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

圖12 中華獼猴桃

3.2 視圖切換與視角切換

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

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;

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

圖13 攝影機位置示意圖

實現(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 對象交互

為了更好的展示植物各部分單體的結(jié)構(gòu)特點,用戶可通過鼠標對模型進行移動、旋轉(zhuǎn)和縮放操作,利用BabylonJS框架提供的控件管理器(Gizmo Manager)對象可快速實現(xiàn)模型的基本變換功能。采用GLTF(圖形語言傳輸格式)模型加載與實現(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

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

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

3.4 一鍵生成植物效果圖

為演示藥用植物的生長環(huán)境,虛擬展示平臺實現(xiàn)了一鍵生成大片植物的功能,即在生成的地形上創(chuàng)建多種類型的植物。根據(jù)植物生活環(huán)境特點將植物劃分到地形的不同高度上,通過獲取地形在特定點的y坐標,實現(xiàn)將植物模型放置在地形表面。利用實例化技術(shù),先獲取外部模型的渲染網(wǎng)格再使用網(wǎng)格對象的創(chuàng)建實例(createInstance)方法創(chuàng)建多個模型副本,同時利用框架內(nèi)置的LOD技術(shù)進一步優(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株三維模型頂點個數(shù)為36 372的蒲公英和50株三維模型頂點個數(shù)為3 221 556的美麗花枝子植物模型后幀頻沒有明顯下降的效果。

3.5 動畫演示與科普

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

4 結(jié)束語

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