晶體三維模型Web端展示

何虎，陳思

晶體三維模型Web端展示

何虎，陳思

（成都理工大學(xué)地球科學(xué)學(xué)院，成都 610059）

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

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

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

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

隨著近年來WebGL等基于HTML5的開源3D展示技術(shù)的興起與完善（陳燕紅等，2018；Alexey Demin等，2014），結(jié)合3DS MAX、JCrystal、Unity等軟件對晶體進(jìn)行三維模型，并在WebGL端呈現(xiàn)進(jì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ù)適配的瀏覽器和端口更多，目前大部分手機(jī)瀏覽器都可以支持基于WebGL項(xiàng)目的網(wǎng)頁呈現(xiàn)，平臺搭建所用技術(shù)如圖1。

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

2 晶體幾何單形的建模

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

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

2.1 3DS MAX

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

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

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

2.2 JCrystal

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

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

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

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

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

3.1 UnityShader與渲染

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

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

代碼片段1：

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

代碼片段2中：

代碼片段2：

max(0.1,dot(worldNormal,worldLightDir)。

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

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

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

圖4 Unity中Material制作

圖5 Shader效果對比圖

3.2 FreeLookCameraRig及UI邏輯界面的制作

晶體三維模型的虛擬環(huán)境展示，可以通過旋轉(zhuǎn)展示模型各個方位的畫面的方式實(shí)現(xiàn)。利用Unity Asset Store中的FreeLookCameraRig相機(jī)插件包，可以實(shí)現(xiàn)手觸手機(jī)屏或鼠標(biāo)滑過電腦屏幕（網(wǎng)頁）時，鏡頭繞著某個點(diǎn)（物體）進(jìn)行旋轉(zhuǎn)并實(shí)時呈現(xiàn)相機(jī)所拍到的畫面。即在Unity的虛擬環(huán)境中，物體絕對位置不動，相機(jī)繞著物體在旋轉(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)頁項(xiàng)目的源碼文件。

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

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

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

對網(wǎng)頁源碼進(jìn)行優(yōu)化處理，用HTML、CSS等語言結(jié)合服務(wù)器搭建網(wǎng)頁平臺（dizhischool.cn）和微信平臺。設(shè)計出好看實(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的學(xué)習(xí)效果強(qiáng)于2D，綜合考慮來看，結(jié)合2D的展現(xiàn)更加幫助學(xué)習(xí)者了解（Deborah Richards,Meredith Taylor ,2015）。網(wǎng)頁首頁展示出幾何單形的靜態(tài)圖，并依據(jù)其晶系將縮略圖呈現(xiàn)不同顏色。將晶體單形相關(guān)信息放在圖片之后，當(dāng)鼠標(biāo)放在圖片上，即可看到其信息（圖7a）。

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

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

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

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

4.2 微信小程序的擴(kuò)展

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

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

5 結(jié)語

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

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

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

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

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

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

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

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

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

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

劉釗，秦善，2006．三維晶體形態(tài)繪制軟件——xPlane[J]．北京大學(xué)學(xué)報(自然科學(xué)版)(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.

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

楊乃，李洋，2019．微信小程序與公眾號在野外地質(zhì)實(shí)習(xí)中的應(yīng)用[J]．實(shí)驗(yàn)技術(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

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

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