基于Unity3D的電子商務(wù)虛擬實(shí)時(shí)漫游關(guān)鍵技術(shù)研究

韋永龍

（廣西經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院信息工程系，南寧530021）

0 引言

實(shí)際生活中的所有常用物品包括服裝、器物、農(nóng)副、小商品等，在大眾與分眾消費(fèi)過程中，“預(yù)覽”環(huán)節(jié)變得越來越重要。當(dāng)下的“預(yù)覽”手段有效果圖、小視頻或是現(xiàn)貨，其作用是滿足消費(fèi)者提前預(yù)知事物的基本屬性，其優(yōu)點(diǎn)是預(yù)覽過程方便快捷，同樣，也正因?yàn)槿绱耍?dāng)商家面對(duì)較大較為笨重或是高價(jià)值商品的推銷時(shí)，上述手段就變得力不從心了。無論是大眾消費(fèi)者或是分眾個(gè)性化消費(fèi)群體，都希望更加真實(shí)的接觸到更深層次的商品及其屬性。那么虛擬實(shí)時(shí)漫游及其相關(guān)功能技術(shù)將會(huì)為廣大商家與各類消費(fèi)者提供最大幅度的便捷與前所未有的臨境體驗(yàn)，也將會(huì)把商品的屬性最大幅度的展現(xiàn)出來。

電子商務(wù)是當(dāng)下最重要的經(jīng)濟(jì)產(chǎn)業(yè)之一，再連接?xùn)|盟國(guó)家的廣西地區(qū)更是為本土農(nóng)林經(jīng)濟(jì)的發(fā)展提供了更加寬廣的前景，而將虛擬實(shí)時(shí)漫游技術(shù)疊加到一起，將為此領(lǐng)域帶來前所未有的新圖景。因此，學(xué)習(xí)和研究如何將兩者巧妙且有機(jī)的結(jié)合到一起，這其中的關(guān)鍵方法是直接影響全局的重要課題之一。

我們已經(jīng)熟知的電子商務(wù)模式最常見的就是通過網(wǎng)絡(luò)營(yíng)銷手段將自己的產(chǎn)品推銷出去，展示的過程不夠人性化，缺乏細(xì)顆粒數(shù)據(jù)的支撐。那么，虛擬實(shí)時(shí)漫游技術(shù)將從用戶的虛擬體驗(yàn)為消費(fèi)者拓展一個(gè)全新的體驗(yàn)方式。首先需要對(duì)相應(yīng)的產(chǎn)品進(jìn)行3D建模，使用建模軟件對(duì)各類商品進(jìn)行逐一的模型制作，這里可以使用拍照式三維掃描儀掃描物體的方式來制作普通產(chǎn)品，人力勞動(dòng)只需要制作不同的外表貼圖即可滿足同一商品不同款式/樣式的表現(xiàn)，通過手動(dòng)建模來完成對(duì)概念性產(chǎn)品的模型的制作，同樣也可以效仿前者的貼圖制作流程，進(jìn)而完成對(duì)商品細(xì)節(jié)的表現(xiàn)。完成建模工序后，把模型導(dǎo)入U(xiǎn)nity3D引擎，工程師構(gòu)建虛擬場(chǎng)景，用戶在場(chǎng)景中盡情欣賞、把玩、端詳實(shí)物模型，更加真切的與各類商品進(jìn)行互動(dòng)。

對(duì)于實(shí)際工作中的建模工作部分由于這門技術(shù)已經(jīng)相當(dāng)成熟，這里將不做太多贅述，需要強(qiáng)調(diào)的只是模型的優(yōu)化，特別是面數(shù)的控制，那么就會(huì)涉及到高/低精度模型的搭配使用。那么，關(guān)鍵就在于Unity3D引擎里，針對(duì)這些模型的動(dòng)態(tài)調(diào)用了。而為了使用戶更便捷、流暢地體驗(yàn)到電子商務(wù)中對(duì)于場(chǎng)景的虛擬實(shí)時(shí)漫游影像，實(shí)時(shí)渲染和動(dòng)態(tài)調(diào)用技術(shù)則是至關(guān)重要的環(huán)節(jié)。

1 實(shí)時(shí)渲染

1.1 描述

我們都知道一個(gè)3D影像作品中“渲染”是作品的心臟，它不停地向生命體源源不斷地輸送的血液。那么傳統(tǒng)的渲染，像V-Ray渲染、序列幀渲染等手段，雖然最終肯定能夠?qū)⒊善蜂秩境鰜?，但是要耗費(fèi)大量的時(shí)間，更可怕的是當(dāng)創(chuàng)作人員在對(duì)作品進(jìn)行修改，哪怕是小幅度的修改之后，耗時(shí)良久的渲染工序依然得從頭進(jìn)行，這樣的工序會(huì)使得作品本身的效益與當(dāng)下快節(jié)奏的生產(chǎn)生活方式顯得格格不入。那么這就需要?jiǎng)討B(tài)渲染，Unity3D無疑是一款相當(dāng)不錯(cuò)的動(dòng)態(tài)渲染工具，并且自身就相當(dāng)于一個(gè)模擬機(jī)，除了提供實(shí)時(shí)渲染的特效的同時(shí)還不會(huì)對(duì)開發(fā)者或者是使用者的終端機(jī)造成例如死循環(huán)、僵尸進(jìn)程等之類的不良影響。而Unity3D對(duì)表面著色器，即Shader，提供了良好的圖形用戶接口。便面著色器本身由于又提供了開放式圖形庫(kù)的接口，所以它的功能是非常強(qiáng)大的。例如，一面飄揚(yáng)的旗幟，如果使用建模軟件進(jìn)行3D模型的制作的話，當(dāng)這面旗幟是平整的狀態(tài)的時(shí)候，這個(gè)3D模型所占用的面數(shù)僅僅為1個(gè)或者2個(gè)面，但當(dāng)這面旗幟處于迎風(fēng)飄揚(yáng)的狀態(tài)的時(shí)候，由于褶皺的出現(xiàn)，這個(gè)3D模型所占用的面數(shù)將會(huì)被無限放大到驚人的數(shù)量，這時(shí)，程序?qū)τ?jì)算機(jī)資源的消耗也是驚人的。而表面著色器能夠很好地解決這類問題，它所提供的頂點(diǎn)飄揚(yáng)算法能夠使這面處于飄揚(yáng)中的3D模型旗幟的面數(shù)始終保持1個(gè)或者2個(gè)面，從而大大降低了程序運(yùn)行時(shí)對(duì)計(jì)算機(jī)資源的消耗。

1.2 實(shí)現(xiàn)代碼

RGBA 通道：（1，1，1，1，1）為黑色不透明；（0，0，0，0）為白色透明

頂點(diǎn)：確定一個(gè)點(diǎn)，該點(diǎn)位的色值不變，不接受全局變量的賦值，初始值恒定，視覺效果為不參與“飄揚(yáng)”特效

Shader"Custom/Wavepoint"{//此著色器腳本為外部腳本，非自帶功能

Properties{

_Color（"Color"，Color）=（1，1，1，1）//新建一個(gè)顏色對(duì)象

_MainTex（"Albedo（RGB）"，2D）="white"{}//白色的底色，采用二維材質(zhì)

_Glossiness（"Smoothness"，Range（0，1））=0.5//光滑度去隨機(jī)值

_Metallic（"Metallic"，Range（0，1））=0.0

_MainTex（"Base（RGB）"，2D）="white"{}//主要貼圖

_tintAmount（"Tint Amount"，Range（0，1））=0.5

_ColorA（"Color A"，Color）=（1，1，1，1）

_ColorB（"Color B"，Color）=（1，1，1，1）

_Speed（"Wave Speed"，Range（0.1，80））=5//波峰經(jīng)過的速度

_Frequency（"Wave Frequency"，Range（0，5））=2//頻率

_Amplitude（"Wave Amplitude"，Range（-1，1））=1//振幅

}

SubShader{

Tags{"RenderType"="Opaque"}

LOD 200//細(xì)節(jié)層次

CGPROGRAM

//基于物理的標(biāo)準(zhǔn)照明模型，并在所有燈光類型上啟用陰影

#pragma surface surf Lambert vertex：vert

//使用shader model 3.0 target，獲得更好的照明效果

#pragma target 3.0

sampler2D_MainTex;

float4_ColorA;

float4_ColorB;

float_tintAmount;

float_Speed;

float_Frequency;

float_Amplitude;

float_OffsetVal;

//主要材質(zhì)的紋理和顏色

struct Input{

float2 uv_MainTex;

float3 vertColor;

};

void vert（inout appdata_full v，out Input o）

{

float time=_Time*_Speed;//持續(xù)時(shí)間將形成飄揚(yáng)的過程

float waveValueA=sin（time+v.vertex.x*_Frequency）*_Amplitude;

//矢量化飄揚(yáng)過程中涉及到的參數(shù)

v.vertex.xyz=float3（v.vertex.x，v.vertex.y+waveValueA，v.vertex.z）;

v.normal=normalize（float3（v.normal.x+waveValueA，v.normal.y，v.normal.z））;

o.vertColor=float3（waveValueA，waveValueA，waveVal?ueA）;

o.uv_MainTex=v.vertex;

}

half_Glossiness;

half_Metallic;

fixed4_Color;

void surf（Input IN，inout SurfaceOutput o）{

//反照率來自一種被顏色著色的紋理

fixed4 c=tex2D（_MainTex，IN.uv_MainTex）;

float3 tintColor=lerp（_ColorA，_ColorB，IN.vertColor）.rgb;

o.Albedo=c.rgb*（tintColor*_tintAmount）;//自我更迭

//金屬和平滑度來自滑塊變量

o.Metallic=_Metallic;

o.Smoothness=_Glossiness;

o.Alpha=c.a;

}

ENDCG

}

FallBack"Diffuse"

}

1.3 小結(jié)

（1）使用表面著色器：模型始終保持1-2個(gè)面的面數(shù)。

（2）不使用表面著色器：模型面數(shù)與光滑程度成正比。

表面著色器是為了提供更優(yōu)秀的材質(zhì)表現(xiàn)，突出模型的光鮮亮麗的特效，而在此工程中其功能則是為了減少模型因動(dòng)態(tài)加載而造成面數(shù)的大幅增加。

2 動(dòng)態(tài)調(diào)用

2.1 描述

我們希望讓用戶在體驗(yàn)的過程中，運(yùn)行的漫游程序本身能夠在保證流暢的情況下，依然保持著令人滿意的視覺美感特效。這不僅僅需要建模的時(shí)候?qū)?D模型面數(shù)的控制，更需要工程人員在制作工程項(xiàng)目的時(shí)候懂得使用動(dòng)態(tài)調(diào)用成千上萬(wàn)的模型。例如，在游戲《上古卷軸》中，大量的開闊場(chǎng)景，景致唯美奇幻，但我們會(huì)發(fā)現(xiàn)只有在里玩家很近的景致才是非常優(yōu)美的，而很遠(yuǎn)的景物似乎只是一副圖片；同樣在游戲《星際爭(zhēng)霸》，當(dāng)我們的視角處于兩軍交戰(zhàn)的畫面的時(shí)候，特別是雙方都是200補(bǔ)給上限兵力對(duì)攻的現(xiàn)場(chǎng)，這時(shí)候我們的屏幕就會(huì)略微卡頓，可是如果這時(shí)候我們將攝影級(jí)畫面切換至非戰(zhàn)斗現(xiàn)場(chǎng)畫面的時(shí)候，程序運(yùn)行又會(huì)恢復(fù)到非常流暢，當(dāng)然這首先得要求計(jì)算機(jī)本身的配置不能太低，但不可否認(rèn)的是，動(dòng)態(tài)調(diào)用在其中也起了決定性的作用。

同樣的道理，在我們的虛擬實(shí)時(shí)漫游臨境體驗(yàn)程序中，我們也可以同樣采用以上兩種方式對(duì)程序本身進(jìn)行優(yōu)化。①使用者在程序中的虛擬三維位置到某個(gè)物體模型之間的距離大于某一個(gè)數(shù)值的時(shí)候，該物體或者以圖片的形式呈現(xiàn)，或者直接不顯示在程序中；②使用者在程序中的虛擬視角的視線夾角最大值的兩端各有一條射線，當(dāng)使用者轉(zhuǎn)動(dòng)視角的時(shí)候，形成夾角的射線將會(huì)掃過所有的物體所在的位置，當(dāng)物體位置進(jìn)入視線夾角的時(shí)候，物體模型的預(yù)制克隆體才被從對(duì)象池中調(diào)用到場(chǎng)景中，這時(shí)候物體模型對(duì)使用者可見，當(dāng)物體的位置不處于使用者視線的射線夾角范圍內(nèi)的時(shí)候，物體模型的預(yù)制克隆體將從場(chǎng)景中刪除，減少對(duì)程序運(yùn)行流暢程度的負(fù)面影響。

2.2 實(shí)現(xiàn)代碼

關(guān)鍵代碼：

（1）判斷距離

//定義 dist變量

float dist=Vector3.Distance（playerTr.position ，Object.posi?tion）;

//判斷

if（dist＜=固定數(shù)值）{

圖片.SetActive（false）;

模型.SetActive（true）;

}else{

圖片.SetActive（true）;

模型.SetActive（false）;

}

（2）判斷射線碰撞

//定義射線

RaycastHit hit;

//射線從眼睛的位置，朝眼睛的直視方向射出，50個(gè)空間單位的距離

if（Physics.Raycast（eyepos.position，eyepos.forward，out hit，50.0f））{

if（射線碰撞到物體所在的位置）{

//把物體從對(duì)象池中提出，放到場(chǎng)景中制定好的位置和呈現(xiàn)的轉(zhuǎn)角

Instantiate （obj_bullet，obj_transform.position，obj_trans?form.rotation）;

}

}

2.3 小結(jié)

（1）判斷距離，采用圖片與模型不同的呈現(xiàn)方式

（2）判斷視線范圍，采用模型預(yù)制克隆體與空位置不同的呈現(xiàn)方式

通過物理射線碰撞的方式也可以確定可視的距離，但如果沒有實(shí)際三維空間距離的判斷的話，就會(huì)導(dǎo)致一個(gè)尷尬的后果，就是當(dāng)我的主視角的那一條射線與物體碰撞接觸的時(shí)候，物體才顯示，而明明物體就在離我很近，只不過是因?yàn)槲业囊暯堑哪且粭l射線沒有碰撞到該物體，則導(dǎo)致物體不顯示的話，那么就會(huì)與我們希望看到的實(shí)際情況相違背。因此，需要同時(shí)使用以上這兩種判斷方法來進(jìn)行程序的優(yōu)化。

3 虛擬實(shí)時(shí)漫游程式運(yùn)行畫面

3.1 Unity3D引擎發(fā)布的測(cè)試程序?qū)崣C(jī)演示畫面

這個(gè)場(chǎng)景是結(jié)合農(nóng)旅電商專業(yè)制作的一個(gè)園林風(fēng)格的漫游，如圖1、2所示。

圖1 園林虛擬實(shí)時(shí)漫游臨境體驗(yàn)

圖2 園林虛擬實(shí)時(shí)漫游臨境體驗(yàn)

3.2 小結(jié)

在這個(gè)虛擬實(shí)時(shí)漫游臨境體驗(yàn)方程式中，蒲公英和飄落的樹葉用的是粒子效果，粒子不占用太多的計(jì)算機(jī)資源。樹上的樹葉用的是面片，貼圖用的是PNG通道貼圖，遠(yuǎn)處的山景是貼圖，近處的景物則是模型，在攝影機(jī)視角的后方則是一片空的空間，這就符合了第2部分中我們所提到的兩種優(yōu)化的方式，場(chǎng)景很大，但是運(yùn)行很流暢，粒子效果和流水效果都很好，當(dāng)使用者走到離自己很近的植物的時(shí)候，所看到的模型的精美程度也是栩栩如生的。

4 結(jié)語(yǔ)

本文給出了兩個(gè)觀點(diǎn)和兩項(xiàng)重要技術(shù)，第一，電子商務(wù)在IT領(lǐng)域的完美展現(xiàn)以及農(nóng)旅電商IT體驗(yàn)的廣闊前景；第二，虛擬現(xiàn)實(shí)技術(shù)的實(shí)時(shí)渲染與動(dòng)態(tài)調(diào)用對(duì)制作大場(chǎng)景的重要技術(shù)貢獻(xiàn)。首先虛擬實(shí)時(shí)漫游技術(shù)對(duì)于農(nóng)旅電商的意義在于使用者可以更加沉浸的體驗(yàn)鄉(xiāng)村生活和旅行探索，可以滿足分眾消費(fèi)的習(xí)慣，可以滿足人們購(gòu)物是一飽眼福的欲望，這種體驗(yàn)必將是電子商務(wù)、旅游行業(yè)、服務(wù)行業(yè)甚至是高位產(chǎn)業(yè)的必由之路。其次，在工程方程式對(duì)于資源消耗的優(yōu)化方面，實(shí)時(shí)渲染解決了用戶要花長(zhǎng)時(shí)間等待效果圖的被動(dòng)局面，動(dòng)態(tài)調(diào)用則是滿足了用戶提供了更為自由的與場(chǎng)景中的內(nèi)容發(fā)生交互的各項(xiàng)功能。