何虎，陳思

晶體三維模型Web端展示

何虎，陳思

（成都理工大學地球科學學院，成都 610059）

針對晶體三維可視化展示這一《結(jié)晶學與礦物學》課程教學中的問題，為了便于學習者通過直觀觀察晶體三維形態(tài)，掌握晶體特點，通過Web端展示有色交互模型的辦法來實現(xiàn)。采用3DSMAX、JCrystal軟件對47種幾何單形進行三維建模，利用UnityShader對模型進行材質(zhì)處理，以FreeLookCameraRig實現(xiàn)觸屏旋轉(zhuǎn)模型的交互效果，后導(dǎo)成WebGL，利用HTML、CSS、JavaScript等語言進行優(yōu)化，建成晶體三維可視化學習平臺。通過對晶體三維建模、可視化平臺建設(shè)中關(guān)鍵技術(shù)的闡述，提供了一種模型展示方法，采用該方法建成的可視化平臺具有呈現(xiàn)效果佳、互動性強、可擴展性強、用戶端多元的特點。

結(jié)晶學；三維建模；Unity；3DS MAX；WebGL；JCrystal；幾何單形；網(wǎng)頁

《結(jié)晶學與礦物學》是以晶體為研究對象，研究晶體的生成和變化、晶體外部形態(tài)的幾何性質(zhì)、晶體的內(nèi)部結(jié)構(gòu)、化學組成和物理性質(zhì)及其相互關(guān)系的一門自然科學。結(jié)晶學不僅是地球科學及其延伸學科的重要專業(yè)基礎(chǔ)，也是其他關(guān)乎國計民生的理論和技術(shù)科學的重要專業(yè)基礎(chǔ)（趙珊茸，2017）。

由于《結(jié)晶學與礦物學》的學習內(nèi)容，涉及到大量的幾何模型和空間概念，需要較強的抽象思維能力。不少高校教研團隊一直在探索如何利用三維建模、虛擬仿真等現(xiàn)代新興技術(shù)將晶體模型更形象生動地進行社會生產(chǎn)（黃超等，2020）和教學展示，幫助學生更容易理解相關(guān)概念和方法。比如利用3DS MAX建模進行多媒體動畫展示（肖平等，2009）；利用CrystalMaker 和Diamond等建模軟件指導(dǎo)學生上機操作，提高其認知和實踐能力（胡歡等，2018）；利用第三方平臺（比如Second Life）進行晶體三維模型展示、互動，使傳統(tǒng)課堂教學逐步向網(wǎng)絡(luò)化、虛擬化、智能化的教學轉(zhuǎn)變，取得了較好的教學效果（郭艷軍等，2017）。

隨著近年來WebGL等基于HTML5的開源3D展示技術(shù)的興起與完善（陳燕紅等，2018；Alexey Demin等，2014），結(jié)合3DS MAX、JCrystal、Unity等軟件對晶體進行三維模型，并在WebGL端呈現(xiàn)進行了探索，開發(fā)了一個不需加載組件、不受第三方平臺限制的幾何單形三維模型展示平臺。

1 晶體三維模型Web端展示平臺的關(guān)鍵技術(shù)

與Flash 3D、CopperCube、Silverlight等或閉源或商用的需要插件的3D網(wǎng)頁技術(shù)相比，目前基于Unity和3DS MAX等建模軟件的WebGL三維網(wǎng)頁展示更有優(yōu)勢（馬洪石等，2019；聶帥等，2019），由于WebGL基于HTML腳本和利用底層硬件加速的工作原理，WebGL，HTML5等開源技術(shù)適配的瀏覽器和端口更多，目前大部分手機瀏覽器都可以支持基于WebGL項目的網(wǎng)頁呈現(xiàn)，平臺搭建所用技術(shù)如圖1。

圖1 基于UnityWebGL的晶體三維模型Web端展示的工作流程圖

2 晶體幾何單形的建模

結(jié)合《結(jié)晶學與礦物學》的基礎(chǔ)教材和幾何單形的相關(guān)知識（劉釗等，2006；李福堂，1997）。就47種單形建模來說，可分為：面體、柱體、復(fù)方柱、單錐、復(fù)方單錐、雙錐、復(fù)方雙錐、偏面體、四面體、八面體和立方體十一種類型。涉及左形右形的晶體可利用3DS MAX中的鏡像效果制作。模型相關(guān)信息及建模方式與晶體特征信息如表1。

表1 依據(jù)建模特點的單形分類

2.1 3DS MAX

模型基本都可以按表1中的建模方式配合復(fù)制旋轉(zhuǎn)等操作建立出標準的模型。在制作時，可通過將需要變換點位的頂點放在特殊的面上（X軸或Y軸平面上），將三維坐標計算簡化為平面計算，減小計算量與工作量（圖2）。

圖2 各類晶形3DS MAX建模方式界面截圖

建模中結(jié)合晶體實際特點與美觀情況，適當調(diào)整3DS MAX中各種參數(shù)的值來獲得更好的模型效果，讓發(fā)育不等的兩類晶面看起來有明顯差別,更直觀地讓人理解這類模型的特點。

2.2 JCrystal

在建立如偏方復(fù)十二面體這類面與點比較多的晶體模型時，可采用JCrystal來建立模型。用其建立起VRML文件格式的模型導(dǎo)入到3DS MAX中進行進一步處理（圖3）。

基于JAVA語言開發(fā)的JCrystal，可簡單理解其工作方式為將各頂點的坐標，各面的傾斜角度等值用固定算法完成（相當于在3DS MAX建模中計算各頂點坐標）。故可以利用其設(shè)計出幾種單形合成的復(fù)雜聚形。本次工作僅針對基礎(chǔ)的47種幾何單形，后續(xù)會加深對聚形與實際礦物晶體模型的展開。

3 Unity中模型渲染與UI展示界面的搭建

將3DS MAX中處理好的模型以FBX文件格式導(dǎo)入Unity，在Unity中進行模型的渲染與邏輯搭建，最終導(dǎo)出WebGL端，獲得網(wǎng)頁工程的源文件。通過Unity的渲染與處理，模型本身的可視化性更好，搭建起的WebGL網(wǎng)頁也可以支持PC和手機等多個端口，實用性更強。也是本次工作中的關(guān)鍵環(huán)節(jié)。

圖3 JCrystal的應(yīng)用界面

3.1 UnityShader與渲染

晶體顏色處理的方式前人研究較少，通常采用默認材質(zhì)進行配色，其視覺效果較為單一，不能較好反映出晶體外部和內(nèi)部結(jié)構(gòu)。對于晶體理論模型，將模型半透明化并依據(jù)其晶體特點進行染色。

UnityShader是一個基于Cg語法的一個Unity中的程序，其計算著在Unity的虛擬環(huán)境中，其他環(huán)境對Shader（著色器）所控制的物體的影響應(yīng)該如何反映。其需要有光強、顏色、影子等等和計算機圖形學有關(guān)的知識，想要做到合適晶體的透明效果就需要用到這個程序。本次工作中涉及有透明度測試和雙面渲染等知識點，以下為其核心代碼片段：

代碼片段1：

兩個代碼為一個Pass塊的兩個部分，雙面渲染有兩個Pass塊，代碼片段1中，Cull Front改為Cull Back（表示正面、背面兩個渲染層次）。

代碼片段2中：

代碼片段2：

max(0.1,dot(worldNormal,worldLightDir)。

其中的0.1可以在0到1的值域里修改，其數(shù)值大小影響亮暗程度。兩個Pass塊代碼中，對此數(shù)值適當修改以得到合適的透明化效果。

制作好UnityShader代碼后，將其套用進Material（材質(zhì)）中，再將這個Material以不同的半透明顏色塊套用到每個面中，以此獲得合適的透明形式（圖4）。圖5中可以看出，在未加入Shader前的默認材質(zhì)（圖5a）顏色過于單一，部分區(qū)域太暗（圖5b），且無法顯示晶體模型結(jié)構(gòu)，展示效果不佳。

采用擠出方式進行晶體的內(nèi)部與外部邊框勾勒處理后，極大地增強模型外部及內(nèi)部結(jié)構(gòu)的立體效果。圖5c中的四六面體，其模型可以認為是四面體的每個面中心點外凸，原本的一個面變成四個面。給每個面添加顏色材質(zhì)時，將突出的四個面弄成同種顏色，而不同方向的面弄成不同顏色。這樣，模型更直觀，讓易讓人理解。圖5d中的復(fù)四方單錐，建模時合理設(shè)置好圓角值，加上顏色后，兩類發(fā)育不同的面就可直觀的展示，更容易理解復(fù)面體類晶體模型的特點，同時還可根據(jù)模型特點進行不同顏色的透明化處理，獲得最佳的視覺效果。

圖4 Unity中Material制作

圖5 Shader效果對比圖

3.2 FreeLookCameraRig及UI邏輯界面的制作

晶體三維模型的虛擬環(huán)境展示，可以通過旋轉(zhuǎn)展示模型各個方位的畫面的方式實現(xiàn)。利用Unity Asset Store中的FreeLookCameraRig相機插件包，可以實現(xiàn)手觸手機屏或鼠標滑過電腦屏幕（網(wǎng)頁）時，鏡頭繞著某個點（物體）進行旋轉(zhuǎn)并實時呈現(xiàn)相機所拍到的畫面。即在Unity的虛擬環(huán)境中，物體絕對位置不動，相機繞著物體在旋轉(zhuǎn)，依次呈現(xiàn)三維物體的畫面（圖6）。

調(diào)節(jié)其中的Position來改變鏡頭的絕對空間三維位置，調(diào)節(jié)Turn Speed的數(shù)值設(shè)定旋轉(zhuǎn)畫面的快慢程度，調(diào)節(jié)Tilt Max和Tilt Min的值設(shè)定旋轉(zhuǎn)角度的大小。最后，通過File→Building Setting→選擇WebGL端、添加Scene（場景）的順序操作，導(dǎo)出網(wǎng)頁項目的源碼文件。

圖6 利用FreeLookCameraRig實現(xiàn)晶體模型三維旋轉(zhuǎn)呈現(xiàn)效果

相比Second Life平臺以第三人稱視角觀察晶體的方式，就晶體的三維呈現(xiàn)效果來說，這種方式導(dǎo)出的網(wǎng)頁界面互動性更好、沉浸感更強。與直接在JCrystal等軟件上觀看模型對比，Unity的呈現(xiàn)功能拓展空間更大，比如可以將晶體生成的動畫與控制按鈕加入界面，還可以制作出如JCrystal等軟件0中的吳氏網(wǎng)、晶面符號、聚形制作的功能加入UI控制界面。

4 網(wǎng)頁平臺搭建與展示

對網(wǎng)頁源碼進行優(yōu)化處理，用HTML、CSS等語言結(jié)合服務(wù)器搭建網(wǎng)頁平臺（dizhischool.cn）和微信平臺。設(shè)計出好看實用的網(wǎng)頁界面，讓大家可以輕松的從多種端口的瀏覽器及微信上了解到晶形的相關(guān)知識。

4.1 WebGL與HTML

利用HTML5與CSS3等網(wǎng)頁語言搭建起自適應(yīng)的互動性良好的網(wǎng)頁，利用Javascript和Jquery設(shè)計出網(wǎng)頁的動效邏輯，并依據(jù)三斜晶系、單斜晶系、斜方晶系、三方晶系、四方晶系、六方晶系、等軸晶系分類設(shè)計出七種相應(yīng)的頁面（圖7）。

圖7 網(wǎng)頁結(jié)構(gòu)概覽

根據(jù)Deborah Richards等人的研究來看，并不一定3D的學習效果強于2D，綜合考慮來看，結(jié)合2D的展現(xiàn)更加幫助學習者了解（Deborah Richards,Meredith Taylor ,2015）。網(wǎng)頁首頁展示出幾何單形的靜態(tài)圖，并依據(jù)其晶系將縮略圖呈現(xiàn)不同顏色。將晶體單形相關(guān)信息放在圖片之后，當鼠標放在圖片上，即可看到其信息（圖7a）。

圖7b-h則展示了七種基于晶系分類的網(wǎng)頁，并在網(wǎng)頁中對相應(yīng)晶系進行總體介紹（圖7g），同時對各類各類晶形單獨介紹（圖7e）。對各晶形的模型進行展示（圖7i），便于對各類晶體深入學習。

目前現(xiàn)有的晶體知識展示平臺，展示類型主要是以多媒體動畫、電腦軟件、網(wǎng)頁平臺第三方軟件平臺為主（表2），而基于WebGL開發(fā)的網(wǎng)頁平臺基本可以攬括以上平臺類型的優(yōu)點，后期功能擴展空間大。

表2 相關(guān)展示平臺對比

注：除參考文獻中的項目，表格中還涉及到北大新一代GIS研究室晶體光學部分平臺（早期網(wǎng)頁平臺）

4.2 微信小程序的擴展

可利用網(wǎng)頁嵌套的方式將基于WebGL開發(fā)的晶體展示網(wǎng)頁進一步拓展，制作成學習晶體知識的微信小程序（圖8），可以更好地方便用戶利用碎片化時間學習，增強教學資源及時更新共享的功能。后期還可以在現(xiàn)有基礎(chǔ)上，增加各種地質(zhì)技能的學習等功能（楊乃，李洋，2019），或者是對接國家?guī)r礦化石標本等資源共享平臺內(nèi)的地質(zhì)數(shù)據(jù)庫，提供數(shù)據(jù)查詢等功能。

（a）小程序首頁（b）小程序模型頁（c）其他內(nèi)容

5 結(jié)語

用3DS MAX制作模型，通過JCrystal簡化復(fù)雜晶體模型的制作，用Unity將模型渲染，呈現(xiàn)出互動性強，展示效果良好的三維模型。利用WebGL技術(shù)實現(xiàn)的網(wǎng)頁平臺延伸到微信平臺上，實現(xiàn)多平臺，多渠道的教學資源共享。將建模、渲染、呈現(xiàn)三步分隔開，令新模型呈現(xiàn)變得簡單且可行，可以用瀏覽器的設(shè)備皆可覆蓋到。不難想到，將來這樣的方法可以應(yīng)用于其他學科各種立體模型展示平臺的建設(shè)。

趙珊茸，2017．結(jié)晶學與礦物學[M]．北京．高等教育出版社．

黃超，姜楷，李亮，李宸，曾方侶，何青，2020．礦山三維地質(zhì)建模研究進展[J]．四川地質(zhì)學報，(02)：323-326．

肖平，邊秋娟，2009．“結(jié)晶學”教學中三維動畫的制作與應(yīng)用[J]．中國地質(zhì)教育，18(02)：148-151．

胡歡，董少春，王汝成等，2018．晶體三維可視化軟件在結(jié)晶學教學與實驗中的應(yīng)用[J]．實驗室研究與探索，37(06)：203-206．

郭艷軍，陳斌，秦善等，2017．結(jié)晶學與礦物學虛擬仿真實驗教學探索[J]．實驗室研究與探索，36(08)：161-165．

陳燕紅，古麗米拉·克孜爾別克等，2018．Web頁面三維動態(tài)展示技術(shù)研究與應(yīng)用[J]．現(xiàn)代電子技術(shù)，41(20)：24-27．

Alexey Demin,代沅興，李新等，2014．基于HTML5與WebGL的機器人3D環(huán)境下的運動學仿真[J]．東北大學學報(自然科學版)，35(04)：564-568．

馬洪石，王行風，薛磊，劉晨，2019．Web端室內(nèi)三維交互系統(tǒng)的快速構(gòu)建與優(yōu)化[J]．中國科技論文，14(05)：518-523．

聶帥，秦爽，麥文，2019．基于WebGL技術(shù)三維模型呈現(xiàn)研究[J]．計算機產(chǎn)品與流通(07)：87-89．

劉釗，秦善，2006．三維晶體形態(tài)繪制軟件——xPlane[J]．北京大學學報(自然科學版)(06)：735-739．

李福堂，1997．14種礦物晶形圖的改正[J]．山東地質(zhì)(02)：84-97．

Deborah Richards,Meredith Taylor,2015. A Comparison of learning gains when using a 2D simulation tool versus a 3D virtual world: An experiment to find the right representation involving the Marginal Value Theorem[J]. Computers & Education,86.

董晉琨，楊眉，吳志遠等，2019．系統(tǒng)礦物學數(shù)據(jù)特征分析及數(shù)據(jù)庫建設(shè)[J]．吉林大學學報(地球科學版)，49(03)：728-737．

楊乃，李洋，2019．微信小程序與公眾號在野外地質(zhì)實習中的應(yīng)用[J]．實驗技術(shù)與管理，36(02)：246-251． [1]111

Web-side Display of Three-Dimensional Model of Crystal

HE Hu CHEN Si

(College of Earth Sciences, Chengdu University of Technology, Chengdu 610059)

3D visualization display of a mineral crystal is of great importance tothe teaching of crystallography and mineralogy. It enables students to visualize the morphology of mineral crystals and understand the crystallographic characteristics of minerals intuitively. This may be achieved by presenting the color interaction model on the Web side. 3DSMAX and JCrystal softwares are used for 3D modeling of 47 kinds of geometric unit form. UnityShader is used for processing the material of the model. Interactive effect of touch-screen rotation model is achieved with FreeLookCameraRig, and then exported to the WebGL side and optimized by use of HTML, CSS, JavaScript and other languages in order to build 3D visual learning platform a crystal.

crystallography; 3D modeling; 3DS MAX; WebGL; JCrystal; geometric unit form; Web

P572

A

1006-0995（2021）04-0670-08

10.3969/j.issn.1006-0995.2021.04.025

2021-03-08

成都理工大學2019年度中青年骨干教師發(fā)展資助計劃（編號：10912-2019SJGG00165）；成都理工大學2018-2020年高等教育人才培養(yǎng)和教學改革項目（編號：JG183061）；四川省“地質(zhì)礦產(chǎn)資源三維立體勘探開發(fā)虛擬仿真實驗教學中心”教學質(zhì)量工程項目（編號：11100-18Z0530）資助

何虎（1998— ），男，四川南充人，研究生，專業(yè)：巖石學