Web3D技術及其在解剖學教學中的應用研究

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

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

[關鍵詞] Web 3D；WebGL技術；解剖學；虛擬現實

[中圖分類號] R602；G341 [文獻標識碼] C [文章編號] 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

隨著計算機技術、互聯網技術和虛擬現實技術的發展，Web 3D技術應運而生，它具有高度的真實性、交互性、可重塑性，被廣泛應用于教育、工業、醫學等諸多領域，以其逼真的模擬場景和強大的交互能力在現代醫學教育中起著積極的作用[1，2]。《人體解剖學》是研究正常人體組織器官形態結構、位置關系及其相關功能的一門學科，在傳統教學中，解剖圖譜教學是對人體器官三維結構的二維表達，制約著學習者對解剖學的學習和理解[3-5]；人體標本實驗室受到時間、地點的限制，學生不能自主安排時間、地點、內容等進行學習，影響著教學效果[6-8]。構建基于Web的三維人體器官模型的創新教學模式，可突破時間和場地的限制，緩解人體標本教學資源的不足，同時可提高學生的學習興趣，改進教學質量。

1 Web 3D技術概述

1.1 Web 3D技術

Web 3D技術是在網頁中實現虛擬現實的一種最新技術，是互聯網與虛擬現實技術相結合的產物，其目的是在互聯網上建立三維的虛擬世界，讓人們更加清晰地了解真實的物體[9]。采用Web 3D技術構建的三維模型能在瀏覽器中進行移動、縮放、旋轉等，360度全方位地展示物體，并能實現復雜的人機交互。Web 3D技術與傳統的三維動畫技術相比，具有其獨特的優越性：①由渲染引擎對模型進行實時建模和動態顯示；②在網頁中網絡傳輸的是模型文件，其傳輸量遠小于視頻圖像；③具有無限的交互性。Web 3D技術是下一代互聯網三維展示技術的核心[10]。

1.2 關鍵技術分析

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

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

2 在網頁中實現三維模型可視化的方法

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

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

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

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

3 Web 3D技術在解剖學教學中的應用

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

3.1建模

3ds Max制作的模型具有準確、真實等特征，利用3ds Max對人體器官建模可充分展示人體器官結構的大小、形態、空間位置及其毗鄰關系，使教師及學生對人體器官的形態結構、位置、血供、神經支配等有準確的了解。筆者按照人體泌尿系統的解剖結構，將泌尿系統部位的器官分為腎臟、輸尿管、膀胱等，使用3ds Max的多邊形建模方式建立腎臟、輸尿管、膀胱等器官模型的過程為：首先在視圖中創建基本體，再將其轉變為可編輯的多邊形，按照各器官的解剖結構和形狀特點進行編輯，調整到想要的模型。然后參照解剖學圖譜選用各器官的材質，通過反復對比、改進，選擇比較理想的組合。最后導出WebGL所支持的.obj格式，將模型的相關數據儲存到自行搭建的本地服務器中。圖3為通過3ds Max建立的泌尿系統模型，將泌尿系統部位的器官分為腎臟、輸尿管、膀胱及尿道等結構。

3.2 泌尿系統模型在WEB中的可視化展示

總的設計思路是在瀏覽器中使用JavaScript語言編程來獲取泌尿系統各個器官的模型參數，并通過鼠標事件控制模型的旋轉、縮放、移動、觸發熱點等可視化屬性，實現與之進行實時的交互式操作。

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

3.3 基于Web 的泌尿系統模型的交互操作

使用OrbitControls.js API來支持鼠標交互，通過一個軌跡球controls的控制，改變相應變量的值或場景中模型視圖矩陣的值，從而實現與模型的交互。可以通過軌跡球controls的屬性調整模型旋轉、變焦、平移、慣性、靈敏度、縮放等效果。泌尿系統的旋轉、縮放等效果如圖5所示。①鼠標左擊不放，移動鼠標模型旋轉效果；②鼠標右擊不放，移動鼠標模型移動效果；③鼠標滾動，模型縮放效果。以下是實現軌跡球控制的主要代碼：

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

3.4 基于Web 的人體器官數字模型在解剖教學中的應用

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

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

4 展望

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

[參考文獻]

[1] 李琨，董西廣. Web3D技術在醫學教育中的應用研究[J].河南職工醫學院學報，2011，23（4）：490-491.

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

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

[4] 韓中保，周羽韓，扣蘭. 基于二維與三維相結合的《人體解剖學》學習平臺的構建與應用[J]. 解剖學雜志，2013， 36（2）：257.

[5] 侯振江，王鳳玲，李紅巖. 虛擬現實技術在醫學教育中的應用價值[J]. 中國醫學裝備，2014，11（8）：70-72.

[6] Mathias， Kaspar，Fred，et al. Web-based stereoscopic visualization for the global anatomy classroom[J]. Studies in Health Technology and Informatics，2011，163：264-270.

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

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

[9] 艾達，喬明明，李敏. Web 3D技術綜述[J]. 微型機與應用，2014，33（2）：4-7.

[10] 卞敏捷，高玨，高洪皓，等. Web 3D可視化技術的研究與應用[J]. 計算機技術與發展，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的交互平臺設計與實現[J]. 電子測量技術，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與可視化工具包的醫學影像三維重建及交互方法研究[J]. 生物醫學工程學雜志，2015，32（2）：336-342.

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

[17] 張慶金，陳金緒，李桂成，等. 數字人解剖系統在人體解剖學實驗教學中的應用體會[J]. 右江民族醫學院學報，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] 李娟，張寶昌，胡凡剛. 醫學教育虛擬學習社區個性化服務的實現[J]. 中華醫學圖書情報雜志，2015，24（3）：14-17.

[20] 李文明，田志逢. 數碼互動技術在人體解剖學實驗教學中的應用[J]. 中國繼續醫學教育，2015，7（20）：22-23.

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