基于Unity3D的電子商務虛擬實時漫游關鍵技術研究

韋永龍

（廣西經貿職業技術學院信息工程系，南寧530021）

0 引言

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

電子商務是當下最重要的經濟產業之一，再連接東盟國家的廣西地區更是為本土農林經濟的發展提供了更加寬廣的前景，而將虛擬實時漫游技術疊加到一起，將為此領域帶來前所未有的新圖景。因此，學習和研究如何將兩者巧妙且有機的結合到一起，這其中的關鍵方法是直接影響全局的重要課題之一。

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

對于實際工作中的建模工作部分由于這門技術已經相當成熟，這里將不做太多贅述，需要強調的只是模型的優化，特別是面數的控制，那么就會涉及到高/低精度模型的搭配使用。那么，關鍵就在于Unity3D引擎里，針對這些模型的動態調用了。而為了使用戶更便捷、流暢地體驗到電子商務中對于場景的虛擬實時漫游影像，實時渲染和動態調用技術則是至關重要的環節。

1 實時渲染

1.1 描述

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

1.2 實現代碼

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

頂點：確定一個點，該點位的色值不變，不接受全局變量的賦值，初始值恒定，視覺效果為不參與“飄揚”特效

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

Properties{

_Color（"Color"，Color）=（1，1，1，1）//新建一個顏色對象

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

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

_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//波峰經過的速度

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

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

}

SubShader{

Tags{"RenderType"="Opaque"}

LOD 200//細節層次

CGPROGRAM

//基于物理的標準照明模型，并在所有燈光類型上啟用陰影

#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;

//主要材質的紋理和顏色

struct Input{

float2 uv_MainTex;

float3 vertColor;

};

void vert（inout appdata_full v，out Input o）

{

float time=_Time*_Speed;//持續時間將形成飄揚的過程

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

//矢量化飄揚過程中涉及到的參數

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 小結

（1）使用表面著色器：模型始終保持1-2個面的面數。

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

表面著色器是為了提供更優秀的材質表現，突出模型的光鮮亮麗的特效，而在此工程中其功能則是為了減少模型因動態加載而造成面數的大幅增加。

2 動態調用

2.1 描述

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

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

2.2 實現代碼

關鍵代碼：

（1）判斷距離

//定義 dist變量

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

//判斷

if（dist＜=固定數值）{

圖片.SetActive（false）;

模型.SetActive（true）;

}else{

圖片.SetActive（true）;

模型.SetActive（false）;

}

（2）判斷射線碰撞

//定義射線

RaycastHit hit;

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

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

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

//把物體從對象池中提出，放到場景中制定好的位置和呈現的轉角

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

}

}

2.3 小結

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

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

通過物理射線碰撞的方式也可以確定可視的距離，但如果沒有實際三維空間距離的判斷的話，就會導致一個尷尬的后果，就是當我的主視角的那一條射線與物體碰撞接觸的時候，物體才顯示，而明明物體就在離我很近，只不過是因為我的視角的那一條射線沒有碰撞到該物體，則導致物體不顯示的話，那么就會與我們希望看到的實際情況相違背。因此，需要同時使用以上這兩種判斷方法來進行程序的優化。

3 虛擬實時漫游程式運行畫面

3.1 Unity3D引擎發布的測試程序實機演示畫面

這個場景是結合農旅電商專業制作的一個園林風格的漫游，如圖1、2所示。

圖1 園林虛擬實時漫游臨境體驗

圖2 園林虛擬實時漫游臨境體驗

3.2 小結

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

4 結語

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