楊天化 辛均益 安國防 馬林 朱姬瑩

[摘要] Web 3D技術(shù)是在網(wǎng)頁中實(shí)現(xiàn)虛擬現(xiàn)實(shí)（virtual reality）的一種最新技術(shù)，以其逼真的模擬場景和強(qiáng)大的交互能力在現(xiàn)代醫(yī)學(xué)教育中起著積極的作用，是當(dāng)今計(jì)算機(jī)技術(shù)領(lǐng)域研究的熱點(diǎn)問題。本文介紹了Web 3D技術(shù)的基本概念及關(guān)鍵技術(shù)，并應(yīng)用WebGL（Web-based Graphics Language）在網(wǎng)頁上實(shí)現(xiàn)人體器官模型的可視化交互，并將其應(yīng)用到解剖教學(xué)中，彌補(bǔ)了教學(xué)資源的不足，突破了時(shí)空的限制，實(shí)現(xiàn)資源共享，改進(jìn)教學(xué)質(zhì)量。

[關(guān)鍵詞] Web 3D；WebGL技術(shù)；解剖學(xué)；虛擬現(xiàn)實(shí)

[中圖分類號(hào)] R602；G341 [文獻(xiàn)標(biāo)識(shí)碼] C [文章編號(hào)] 1673-9701（2016）09-0120-04

[Abstract] Web 3D technology is an advanced technology which is used to realize virtual reality on web pages. Being a hot research interest in the current computer science domain， it is playing an active role in modern medical education owing to its vivid scenario simulation and powerful interactivity. This paper aims to introduce the basic concepts and key techniques with relation to Web 3D technology using WebGL（Web-based Graphics Language）， which enables the visual interaction of virtual models of human body parts on web pages. Meanwhile， the application of the technology in the teaching of anatomy has made up for the lack of teaching resources by breaking the limit between time and space， realizing resource sharing and improving teaching quality.

[Key words] Web 3D； WebGL technology； Anatomy； Virtual reality

隨著計(jì)算機(jī)技術(shù)、互聯(lián)網(wǎng)技術(shù)和虛擬現(xiàn)實(shí)技術(shù)的發(fā)展，Web 3D技術(shù)應(yīng)運(yùn)而生，它具有高度的真實(shí)性、交互性、可重塑性，被廣泛應(yīng)用于教育、工業(yè)、醫(yī)學(xué)等諸多領(lǐng)域，以其逼真的模擬場景和強(qiáng)大的交互能力在現(xiàn)代醫(yī)學(xué)教育中起著積極的作用[1，2]?！度梭w解剖學(xué)》是研究正常人體組織器官形態(tài)結(jié)構(gòu)、位置關(guān)系及其相關(guān)功能的一門學(xué)科，在傳統(tǒng)教學(xué)中，解剖圖譜教學(xué)是對人體器官三維結(jié)構(gòu)的二維表達(dá)，制約著學(xué)習(xí)者對解剖學(xué)的學(xué)習(xí)和理解[3-5]；人體標(biāo)本實(shí)驗(yàn)室受到時(shí)間、地點(diǎn)的限制，學(xué)生不能自主安排時(shí)間、地點(diǎn)、內(nèi)容等進(jìn)行學(xué)習(xí)，影響著教學(xué)效果[6-8]。構(gòu)建基于Web的三維人體器官模型的創(chuàng)新教學(xué)模式，可突破時(shí)間和場地的限制，緩解人體標(biāo)本教學(xué)資源的不足，同時(shí)可提高學(xué)生的學(xué)習(xí)興趣，改進(jìn)教學(xué)質(zhì)量。

1 Web 3D技術(shù)概述

1.1 Web 3D技術(shù)

Web 3D技術(shù)是在網(wǎng)頁中實(shí)現(xiàn)虛擬現(xiàn)實(shí)的一種最新技術(shù)，是互聯(lián)網(wǎng)與虛擬現(xiàn)實(shí)技術(shù)相結(jié)合的產(chǎn)物，其目的是在互聯(lián)網(wǎng)上建立三維的虛擬世界，讓人們更加清晰地了解真實(shí)的物體[9]。采用Web 3D技術(shù)構(gòu)建的三維模型能在瀏覽器中進(jìn)行移動(dòng)、縮放、旋轉(zhuǎn)等，360度全方位地展示物體，并能實(shí)現(xiàn)復(fù)雜的人機(jī)交互。Web 3D技術(shù)與傳統(tǒng)的三維動(dòng)畫技術(shù)相比，具有其獨(dú)特的優(yōu)越性：①由渲染引擎對模型進(jìn)行實(shí)時(shí)建模和動(dòng)態(tài)顯示；②在網(wǎng)頁中網(wǎng)絡(luò)傳輸?shù)氖悄Ｐ臀募?，其傳輸量遠(yuǎn)小于視頻圖像；③具有無限的交互性。Web 3D技術(shù)是下一代互聯(lián)網(wǎng)三維展示技術(shù)的核心[10]。

1.2 關(guān)鍵技術(shù)分析

現(xiàn)在Web3D 技術(shù)的研究和應(yīng)用較為主流的解決方案有Java3D、Flash3D、VRML、Cult3D、Viewpoint等，它們各有自己的優(yōu)缺點(diǎn)，但普遍存在兼容性低、開發(fā)效率低、不直接支持硬件加速、需要插件安裝等不同的應(yīng)用問題[11-13]。本文中采用了3ds Max三維建模軟件構(gòu)建人體器官模型，利用WebGL技術(shù)實(shí)現(xiàn)三維模型在瀏覽器端的展示和交互，客戶端無需安裝任何插件，使用非常方便。

WebGL是一種基于OpenGL ES 2.0標(biāo)準(zhǔn)、利用JavaScript API呈現(xiàn)3D計(jì)算機(jī)圖形的技術(shù)，WebGL通過跨平臺(tái)的、標(biāo)準(zhǔn)的、統(tǒng)一的OpenGL接口，為HTML5 Canvas提供硬件3D加速渲染，可以借助系統(tǒng)顯卡在瀏覽器中流暢地展示三維場景和模型，還能夠創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化[14，15]。WebGL技術(shù)完美地解決了現(xiàn)有的Web交互式三維動(dòng)畫兩大問題：難以支持Web端的GPU硬件加速和對瀏覽器插件的依賴[16]。Three.js是JavaScript編寫的WebGL第三方庫，是一款運(yùn)行在瀏覽器中的3D引擎，提供了豐富的3D顯示功能。

2 在網(wǎng)頁中實(shí)現(xiàn)三維模型可視化的方法

①定義場景：場景是所有物體的容器，在程序最開始的時(shí)候進(jìn)行實(shí)例化，然后再將物體模型添加到場景中。

②設(shè)置相機(jī)：把三維場景投影到要顯示的二維圖形，經(jīng)典的解決變換方法有兩種：正交投影變換和透視投影變換，正交投影是將物體以原來大小投影到屏幕上，忽略物體的遠(yuǎn)近造成的大小變換。透視投影變換是一種接近視覺效果的投影，離視點(diǎn)近的物體大，離視點(diǎn)遠(yuǎn)的物體小。

③設(shè)置光源：光和影的利用影響場景渲染的效果。一個(gè)場景中可以設(shè)置多個(gè)光源，如環(huán)境光為場景提供一致的亮度，作為整體光照的基礎(chǔ)，一般采用白色或者灰色；點(diǎn)光源可以看作一個(gè)點(diǎn)發(fā)出的光源，照到不同物體表面的亮度呈線性遞減；平行光用來模仿來自無限遠(yuǎn)處的平行光源；聚光燈投射出類似圓錐形的光線。

⑤渲染設(shè)置：渲染就是將模型數(shù)據(jù)在屏幕上顯示出來的過程。在定義了場景、相機(jī)、光源等，通過調(diào)用渲染器的渲染函數(shù)來渲染整個(gè)場景。

3 Web 3D技術(shù)在解剖學(xué)教學(xué)中的應(yīng)用

采用3ds Max工具進(jìn)行人體器官建模，將模型的相關(guān)數(shù)據(jù)儲(chǔ)存到自行搭建的本地服務(wù)器中，然后利用WebGL技術(shù)實(shí)現(xiàn)在網(wǎng)頁中的三維展示和人機(jī)交互，通過瀏覽器進(jìn)行查看，無需安裝額外插件，方便瀏覽和使用。下面以采用WebGL技術(shù)制作人體泌尿系統(tǒng)三維模型為例說明Web 3D模型的可視化交互的實(shí)現(xiàn)過程，并應(yīng)用于教學(xué)，解決解剖標(biāo)本耗損大、尸體利用率低、尸源短缺、經(jīng)費(fèi)不足等問題[17，18]。

3.1建模

3ds Max制作的模型具有準(zhǔn)確、真實(shí)等特征，利用3ds Max對人體器官建?？沙浞终故救梭w器官結(jié)構(gòu)的大小、形態(tài)、空間位置及其毗鄰關(guān)系，使教師及學(xué)生對人體器官的形態(tài)結(jié)構(gòu)、位置、血供、神經(jīng)支配等有準(zhǔn)確的了解。筆者按照人體泌尿系統(tǒng)的解剖結(jié)構(gòu)，將泌尿系統(tǒng)部位的器官分為腎臟、輸尿管、膀胱等，使用3ds Max的多邊形建模方式建立腎臟、輸尿管、膀胱等器官模型的過程為：首先在視圖中創(chuàng)建基本體，再將其轉(zhuǎn)變?yōu)榭删庉嫷亩噙呅危凑崭髌鞴俚慕馄式Y(jié)構(gòu)和形狀特點(diǎn)進(jìn)行編輯，調(diào)整到想要的模型。然后參照解剖學(xué)圖譜選用各器官的材質(zhì)，通過反復(fù)對比、改進(jìn)，選擇比較理想的組合。最后導(dǎo)出WebGL所支持的.obj格式，將模型的相關(guān)數(shù)據(jù)儲(chǔ)存到自行搭建的本地服務(wù)器中。圖3為通過3ds Max建立的泌尿系統(tǒng)模型，將泌尿系統(tǒng)部位的器官分為腎臟、輸尿管、膀胱及尿道等結(jié)構(gòu)。

3.2 泌尿系統(tǒng)模型在WEB中的可視化展示

總的設(shè)計(jì)思路是在瀏覽器中使用JavaScript語言編程來獲取泌尿系統(tǒng)各個(gè)器官的模型參數(shù)，并通過鼠標(biāo)事件控制模型的旋轉(zhuǎn)、縮放、移動(dòng)、觸發(fā)熱點(diǎn)等可視化屬性，實(shí)現(xiàn)與之進(jìn)行實(shí)時(shí)的交互式操作。

泌尿系統(tǒng)模型可視化展示的實(shí)現(xiàn)過程，首先利用在Three.js庫中的Scene（）函數(shù)建立三維虛擬場景；然后在場景中添加攝像機(jī)、光源和泌尿系統(tǒng)模型等，為了更接近人眼的觀察效果，我們創(chuàng)建了透視攝像機(jī)，并設(shè)置透視相機(jī)的角度、橫縱比、視錐的最近和最遠(yuǎn)距離、相機(jī)的位置，創(chuàng)建和設(shè)置了環(huán)境光亮度、平行光的亮度和位置光源，經(jīng)過反復(fù)調(diào)整、改進(jìn)，使模型展示達(dá)到較為真實(shí)的效果，而泌尿系統(tǒng)模型是從本地服務(wù)器上進(jìn)行加載；最后結(jié)合場景和相機(jī)對畫面進(jìn)行實(shí)時(shí)渲染，得到泌尿系統(tǒng)三維模型在網(wǎng)頁中的展示，如圖4所示。實(shí)現(xiàn)的主要代碼如下：

3.3 基于Web 的泌尿系統(tǒng)模型的交互操作

使用OrbitControls.js API來支持鼠標(biāo)交互，通過一個(gè)軌跡球controls的控制，改變相應(yīng)變量的值或場景中模型視圖矩陣的值，從而實(shí)現(xiàn)與模型的交互?？梢酝ㄟ^軌跡球controls的屬性調(diào)整模型旋轉(zhuǎn)、變焦、平移、慣性、靈敏度、縮放等效果。泌尿系統(tǒng)的旋轉(zhuǎn)、縮放等效果如圖5所示。①鼠標(biāo)左擊不放，移動(dòng)鼠標(biāo)模型旋轉(zhuǎn)效果；②鼠標(biāo)右擊不放，移動(dòng)鼠標(biāo)模型移動(dòng)效果；③鼠標(biāo)滾動(dòng)，模型縮放效果。以下是實(shí)現(xiàn)軌跡球控制的主要代碼：

另外，通過Three.js中的RayCaster類，將光線投射到3D場景中，并確定光線與場景中指定的3D對象集合相交來拾取對象，通過鼠標(biāo)點(diǎn)擊觸發(fā)，彈出相應(yīng)的二維圖片、文字說明等介紹。

3.4 基于Web 的人體器官數(shù)字模型在解剖教學(xué)中的應(yīng)用

我們將基于Web 的人體器官數(shù)字模型在本校2014級(jí)影像技術(shù)專業(yè)1401-1403班的系統(tǒng)解剖學(xué)教學(xué)中進(jìn)行了初步應(yīng)用。課后采用問卷的方式對學(xué)習(xí)情況進(jìn)行了調(diào)查，80%的學(xué)生表示器官數(shù)字模型比較有意思，吸引了注意力，提高了學(xué)習(xí)的興趣；83.3%的同學(xué)表示數(shù)字模型能立體直觀，可以更清楚地理解到局部解剖結(jié)構(gòu)的相互關(guān)系，知識(shí)更容易接受；73.3%的同學(xué)認(rèn)為學(xué)習(xí)的時(shí)間更自由，提高了學(xué)習(xí)的主動(dòng)性。

利用WebGL技術(shù)構(gòu)建的基于Web的虛擬人體器官數(shù)字模型，無需安裝任何插件，只要在瀏覽器上輸入服務(wù)器的地址就可以直接瀏覽，能顯示一些難以立體展示的細(xì)微結(jié)構(gòu)，還可以用不同的顏色表示出不同的結(jié)構(gòu)，可任意旋轉(zhuǎn)、縮放、移動(dòng)結(jié)構(gòu)模型，有助于在三維空間中觀察人體器官結(jié)構(gòu)的形態(tài)和位置關(guān)系，解決以往解剖學(xué)教學(xué)中的難點(diǎn)問題[19]。例如人體的循環(huán)系統(tǒng)，一般的教學(xué)圖譜圖像只能顯示平面結(jié)構(gòu)，而利用三維技術(shù)可以形象地、生動(dòng)地展示血管的外形及構(gòu)造，以使學(xué)生對循環(huán)系統(tǒng)的構(gòu)造形成立體的、系統(tǒng)的概念，還可以用三維動(dòng)畫演示血液在心腔中的流動(dòng)情況及血液在動(dòng)脈、靜脈、毛細(xì)血管中的循環(huán)情況，克服以往傳統(tǒng)解剖學(xué)教材和圖譜的缺點(diǎn)。同時(shí)基于Web 的人體器官數(shù)字模型徹底突破時(shí)間與空間的限制，可隨時(shí)、隨地的通過互聯(lián)網(wǎng)獲取學(xué)習(xí)資源，讓學(xué)生真正成為學(xué)習(xí)的主體，有利于培養(yǎng)學(xué)生的自學(xué)能力，有效地提高學(xué)生的綜合能力和教學(xué)質(zhì)量[20]。

4 展望

以網(wǎng)頁為載體，結(jié)合WebGL、3Dmax、JavaScript等技術(shù)，構(gòu)建在線的三維人體器官模型應(yīng)用于教學(xué)，可以很好地解決教學(xué)中的重點(diǎn)和難點(diǎn)問題，突破解剖教學(xué)受時(shí)間和空間的限制，有助于醫(yī)學(xué)生的自主學(xué)習(xí)，拓寬解剖學(xué)的教學(xué)模式，提高教學(xué)質(zhì)量。作者將通過對人體三維模型進(jìn)一步完善和開發(fā)，建立解剖教學(xué)數(shù)字化資料和系列計(jì)算機(jī)三維模型，輔助解剖學(xué)的理論課和實(shí)訓(xùn)課教學(xué)，提高教學(xué)水平。隨著信息技術(shù)的發(fā)展，Web 3D技術(shù)作為一種新型的教育教學(xué)媒體和手段，將在醫(yī)學(xué)教學(xué)資源開發(fā)、教育領(lǐng)域應(yīng)用中發(fā)揮更加重要的作用，對醫(yī)療教育事業(yè)的發(fā)展產(chǎn)生積極而深遠(yuǎn)的影響。

[參考文獻(xiàn)]

[1] 李琨，董西廣. Web3D技術(shù)在醫(yī)學(xué)教育中的應(yīng)用研究[J].河南職工醫(yī)學(xué)院學(xué)報(bào)，2011，23（4）：490-491.

[2] 杜趙康，楊開明，王勇，等. 人體解剖學(xué)實(shí)驗(yàn)教學(xué)中的實(shí)踐與思考[J]. 解剖學(xué)研究，2015，37（1）：72-73.

[3] 王勇，杜趙康，張秀君. 三維數(shù)字化虛擬人體在解剖學(xué)教學(xué)中的初探[J]. 四川解剖學(xué)雜志，2015，23（1）：54，58.

[4] 韓中保，周羽韓，扣蘭. 基于二維與三維相結(jié)合的《人體解剖學(xué)》學(xué)習(xí)平臺(tái)的構(gòu)建與應(yīng)用[J]. 解剖學(xué)雜志，2013， 36（2）：257.

[5] 侯振江，王鳳玲，李紅巖. 虛擬現(xiàn)實(shí)技術(shù)在醫(yī)學(xué)教育中的應(yīng)用價(jià)值[J]. 中國醫(yī)學(xué)裝備，2014，11（8）：70-72.

[6] Mathias， Kaspar，F(xiàn)red，et al. Web-based stereoscopic visualization for the global anatomy classroom[J]. Studies in Health Technology and Informatics，2011，163：264-270.

[7] 方杰，晏廷亮，何文淵. 虛擬仿真技術(shù)在解剖學(xué)教學(xué)中的應(yīng)用探討[J]. 中國保健營養(yǎng)，2015，25（13）：301-302.

[8] 李一帆，楊茂有，尚云龍，等. 三維虛擬數(shù)字化可視人體在解剖教學(xué)中的應(yīng)用[J]. 解剖學(xué)研究，2012，34（5）：393-394.

[9] 艾達(dá)，喬明明，李敏. Web 3D技術(shù)綜述[J]. 微型機(jī)與應(yīng)用，2014，33（2）：4-7.

[10] 卞敏捷，高玨，高洪皓，等. Web 3D可視化技術(shù)的研究與應(yīng)用[J]. 計(jì)算機(jī)技術(shù)與發(fā)展，2015，（6）：141-144.

[11] Guan T，Ren BY，Zhong DH. The method of Unity3D based 3D dynamic interactive，2015query of high arch dam construction information[J]. Applied Mechanics and Materials， 2013，256（1）：2918-2922.

[12] Danchilla B. Beginning WebGL for HTML5[M]. New York：Apress，2012：112-120.

[13] 汪浩，田豐，張文俊. 基于WebGL的交互平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[J]. 電子測量技術(shù)，2015，38（8）：119-122.

[14] JIN Ping，ZHENG Wen，CAO Ming，et al. Flower opening simulation based on key lines using WebGL[J]. Wuhan University Journal of Natural Sciences，2015，20（3）：235-239.

[15] 高鵬，劉鵬，蘇紅森，等. 基于HTML5與可視化工具包的醫(yī)學(xué)影像三維重建及交互方法研究[J]. 生物醫(yī)學(xué)工程學(xué)雜志，2015，32（2）：336-342.

[16] Parisi T. WebGL up and running[M]. Sebastopol：O Reilly，2012：58-83.

[17] 張慶金，陳金緒，李桂成，等. 數(shù)字人解剖系統(tǒng)在人體解剖學(xué)實(shí)驗(yàn)教學(xué)中的應(yīng)用體會(huì)[J]. 右江民族醫(yī)學(xué)院學(xué)報(bào)，2015，37（4）：649.

[18] Pablo，De Heras Ciechomski，Mihai，et al. Development and implementation of a web-enabled 3D consultation tool for breast augmentation surgery based on 3D-image reconstruction of 2D pictures[J]. Journal of Medical Internet Research，2012，14（1）：e21

[19] 李娟，張寶昌，胡凡剛. 醫(yī)學(xué)教育虛擬學(xué)習(xí)社區(qū)個(gè)性化服務(wù)的實(shí)現(xiàn)[J]. 中華醫(yī)學(xué)圖書情報(bào)雜志，2015，24（3）：14-17.

[20] 李文明，田志逢. 數(shù)碼互動(dòng)技術(shù)在人體解剖學(xué)實(shí)驗(yàn)教學(xué)中的應(yīng)用[J]. 中國繼續(xù)醫(yī)學(xué)教育，2015，7（20）：22-23.

（收稿日期：2015-12-05）