張華瑾 張萍 許淑華

摘? 要： 設(shè)計(jì)了一個(gè)擁有3D視覺效果和真實(shí)交互體驗(yàn)的網(wǎng)上購物系統(tǒng)。將增強(qiáng)現(xiàn)實(shí)技術(shù)運(yùn)用到商品瀏覽當(dāng)中，打破了傳統(tǒng)網(wǎng)購單一的圖片瀏覽模式。通過攝像頭對標(biāo)記進(jìn)行識別，將真實(shí)場景采入，并建立三維坐標(biāo)，實(shí)現(xiàn)實(shí)時(shí)跟蹤;對商品進(jìn)行3D建模，將現(xiàn)實(shí)場景與虛擬商品模型相融合，反饋于商品瀏覽頁面。給消費(fèi)者虛擬的商品使用權(quán)，感受到商品出現(xiàn)在家里的真實(shí)狀況。

關(guān)鍵詞： 增強(qiáng)現(xiàn)實(shí); 交互體驗(yàn); 3D建模; 電子商務(wù)

中圖分類號：TP393? ? ? ? ? 文獻(xiàn)標(biāo)志碼：A? ? ?文章編號：1006-8228（2019）09-33-03

The application of augmented reality technology in Internet shopping experience

Zhang Huajin， Zhang Ping， Xu Shuhua

（School of Maths and Physics， Shaoxing College， Shaoxing， Zhejiang 312000， China）

Abstract： An online shopping system with 3D visual effect and real interactive experience is designed. Augmented reality technology is applied to the commodity browsing of online shopping system， breaking the traditional single online shopping picture browsing mode. The tag is identified by the camera， the real scene is collected， and the 3d coordinates are established to realize real-time tracking. The 3D modeling of goods is carried out， and the real scene is integrated with the virtual goods model， which is fed back to the commodity browsing page. Give consumers the right to use virtual goods and feel the real situation of goods at home.

Key words： augmented reality; interaction experience; 3D modeling; electronic commerce

0 引言

1990年，美國波音公司的Caudell與同事在設(shè)計(jì)一個(gè)輔助布線系統(tǒng)時(shí)首次提出了“Augmented Reality”這個(gè)概念即增強(qiáng)現(xiàn)實(shí)。增強(qiáng)現(xiàn)實(shí)是在虛擬現(xiàn)實(shí)基礎(chǔ)上發(fā)展起來的一種新興技術(shù)，是用計(jì)算機(jī)產(chǎn)生的附加信息對真實(shí)世界的景象進(jìn)行信息增強(qiáng)或擴(kuò)張，具有將真實(shí)場景同虛擬物體加以融合的特性[5]。

目前AR技術(shù)已經(jīng)應(yīng)用在工業(yè)、醫(yī)療、軍事等領(lǐng)域，但還未走入普通民眾的日常生活。近年來，電子商務(wù)日漸成熟，網(wǎng)上購物趨于常態(tài)化。但市場上購物平臺以2D（平面）頁面模式居多。對商品的展示，多以照片和文字描述為主，消費(fèi)者對商品缺乏全面的、立體的了解。

因此，本文設(shè)計(jì)了一個(gè)擁有3D視覺效果和真實(shí)交互體驗(yàn)的網(wǎng)上購物系統(tǒng)。將增強(qiáng)現(xiàn)實(shí)技術(shù)運(yùn)用到商品瀏覽中，利用攝像頭掃描真實(shí)場景，對商品進(jìn)行3D建模，讓消費(fèi)者全面地了解商品信息，避免購買商品后由于樣式與預(yù)想不一樣而產(chǎn)生的不滿意。

1 系統(tǒng)開發(fā)技術(shù)

1.1 增強(qiáng)現(xiàn)實(shí)技術(shù)

增強(qiáng)現(xiàn)實(shí)技術(shù)（Augmented Reality，AR）是一個(gè)技術(shù)組合，實(shí)現(xiàn)真實(shí)世界和虛擬內(nèi)容之間的交互，即向真實(shí)視頻顯示中實(shí)時(shí)融入計(jì)算機(jī)生成內(nèi)容的技術(shù)。它有三大特征，即虛實(shí)結(jié)合、三維注冊、實(shí)時(shí)交互。其實(shí)現(xiàn)主要有兩大步，一是采集真實(shí)世界的信息即識別，二是在重現(xiàn)實(shí)時(shí)媒體時(shí)融入虛擬內(nèi)容（本文主要指商品模型）[1]。

1.1.1 基于真實(shí)場景的標(biāo)記識別

本文涉及的增強(qiáng)現(xiàn)實(shí)技術(shù)采用特定類型的標(biāo)記識別。通過計(jì)算機(jī)視覺算法識別這些標(biāo)記，根據(jù)這些標(biāo)記在攝像頭視圖中的攝影輪廓形狀來計(jì)算這些標(biāo)記的方位。標(biāo)記識別是對候選標(biāo)記區(qū)域進(jìn)行檢測，確定候選標(biāo)記區(qū)域是否包含了標(biāo)記的ID信息，從而確定候選標(biāo)記區(qū)域是否就是標(biāo)記，接著就可以根據(jù)標(biāo)記的位置信息完成跟蹤注冊，并且加載的相應(yīng)計(jì)算機(jī)虛擬模型?；谡鎸?shí)場景的標(biāo)記識別主要包括以下幾部分[3]。

（1） 標(biāo)記的設(shè)計(jì)

放置在現(xiàn)實(shí)場景中的人工標(biāo)記在被系統(tǒng)識別后，提供了計(jì)算出真實(shí)場景坐標(biāo)系與攝像機(jī)場景坐標(biāo)系轉(zhuǎn)換關(guān)系所需要的基本信息，同時(shí)增強(qiáng)現(xiàn)實(shí)系統(tǒng)還可根據(jù)標(biāo)記中所含的ID信息做出相應(yīng)的反應(yīng)。

（2） 標(biāo)記的檢測

標(biāo)記檢測的目的就是找到視頻圖像中的候選標(biāo)記區(qū)域。候選標(biāo)記區(qū)域就是符合一定條件有可能是標(biāo)記的圖像區(qū)域。只有當(dāng)候選標(biāo)記區(qū)域經(jīng)過標(biāo)記識別這一步驟，并且能夠在候選標(biāo)記區(qū)域中讀出合法的標(biāo)記ID等信息，這樣候選標(biāo)記區(qū)域才會被認(rèn)為是含有合法標(biāo)記，從而完成標(biāo)記識別。

（3） 標(biāo)記的校正

標(biāo)記的校正就是將在成像平面上由于變化而扭曲的不規(guī)則的標(biāo)記校正成正方形的，有著規(guī)則形狀的標(biāo)記，從而使其能夠被識別。根據(jù)仿射原理可知，當(dāng)三維空間中的一個(gè)四方形平面物體投影到另一個(gè)二維的成像半面時(shí)，所形成的圖像一般都不是原來的形狀，而且由于攝像機(jī)的位置和方向在拍攝過程中不斷的變化，因此標(biāo)記在成像平面上總是不規(guī)則的凸多邊形。而在采取圖像匹配、編碼匹配進(jìn)行標(biāo)記識別時(shí)，需要規(guī)則的正方形標(biāo)記才能與標(biāo)記模板庫中的標(biāo)記模板進(jìn)行匹配。

（4） 標(biāo)記ID匹配

在標(biāo)記檢測過程中，增強(qiáng)現(xiàn)實(shí)系統(tǒng)會在視頻圖像中檢測和提取出多個(gè)候選標(biāo)記區(qū)域，為了從這些候選標(biāo)記區(qū)域中識別出真正含有標(biāo)記的區(qū)域，則需要對著候選區(qū)域進(jìn)行ID匹配，通過讀取候選區(qū)域中的信息來判斷它是否是標(biāo)記。

1.1.2 3D虛擬建模

3D虛擬模型是實(shí)物的外觀信息、商務(wù)信息以及與客戶的交互信息的有機(jī)結(jié)合體，是實(shí)物的商務(wù)性，交互性和形象性的體現(xiàn)。在基于這三種信息上，我們了首先利用Blender進(jìn)行商品建模，然后將模型導(dǎo)入Flash Builder中，重現(xiàn)實(shí)時(shí)媒體中融入虛擬內(nèi)容的目的。最后在展示的時(shí)候，通過訪問數(shù)據(jù)庫的方式，找出需要的商務(wù)數(shù)據(jù)到瀏覽器。如圖1所示。

增強(qiáng)現(xiàn)實(shí)技術(shù)可以產(chǎn)生很多非常吸引人的交互體驗(yàn)，例如幫助人們嘗試各種新式發(fā)型、實(shí)時(shí)顯示產(chǎn)品信息、逼真地演示玩具的玩法等。將這種技術(shù)應(yīng)用于購物體驗(yàn)上是一個(gè)大膽的嘗試，也是希望人們在購物時(shí)有一個(gè)更全面立體的體驗(yàn)，做出更好的購買決策。

1.2 JSP網(wǎng)站建設(shè)

JSP（JavaServer Pages）是一種動態(tài)頁面技術(shù)，使用Java編程語言編寫類XML的tags和scriptlets，來封裝產(chǎn)生動態(tài)網(wǎng)頁的處理邏輯。網(wǎng)頁還能通過tags和scriptlets訪問存在于服務(wù)端的資源的應(yīng)用邏輯。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計(jì)的顯示分離，支持可重用的基于組件的設(shè)計(jì)，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易[4]。本文在jsp技術(shù)的基礎(chǔ)上，利用Eclipse設(shè)計(jì)實(shí)現(xiàn)網(wǎng)站的構(gòu)建。

2 系統(tǒng)分析

我們的系統(tǒng)旨在讓客戶在購買商品時(shí)，能夠使用增強(qiáng)現(xiàn)實(shí)功能，通過3D模型，全面立體的了解商品的信息。同時(shí)，真實(shí)的場景讓客戶體驗(yàn)身臨其境的現(xiàn)實(shí)感覺，更直觀地分析商品與自身或周邊環(huán)境的匹配度，做出正確的購買決策。系統(tǒng)按照功能的性質(zhì)分為前臺服務(wù)和后臺管理系系統(tǒng)。

⑴ 前臺服務(wù)系統(tǒng)

前臺服務(wù)系統(tǒng)主要提供商品的三維立體展示以及購物過程中的一系列服務(wù)，并考慮了會員功能和游客功能。系統(tǒng)前臺具有用戶注冊、用戶登錄、商品瀏覽、資料管理，訂單管理等功能。在系統(tǒng)前臺客戶可根據(jù)自身需求選擇相應(yīng)的服務(wù)功能，如圖2。

⑵ 后臺管理系統(tǒng)

后臺系統(tǒng)主要是為管理者提供一個(gè)可視的數(shù)據(jù)庫操作界面[2]，方便對相關(guān)信息進(jìn)行及時(shí)有效的更新、維護(hù)、整理等操作。包括用戶管理、商品管理、商品類別管理、訂單管理等，如圖3所示。

3 主要模塊分析和設(shè)計(jì)

3.1 用戶登錄注冊模塊

用戶可以在網(wǎng)站首頁的登錄框中輸入用戶名和密碼進(jìn)行登錄，當(dāng)輸入的用戶名和密碼正確后才會成功登錄，否則將提示失敗。

3.2 會員信息管理模塊

游客進(jìn)入網(wǎng)站首頁登錄后，點(diǎn)擊“會員中心”，即可進(jìn)入“會員中心”頁面，這里為用戶提供了用戶注冊信息的查看和修改。

3.3 商品體驗(yàn)?zāi)K

本網(wǎng)站使用AR技術(shù)為商品提供體驗(yàn)為用戶提供更真實(shí)、直觀的體驗(yàn)，用戶可根據(jù)需求，打印標(biāo)記，用攝像頭掃描標(biāo)記，便可出現(xiàn)商品的3D模型，結(jié)合攝像頭掃描入的真實(shí)場景與之結(jié)合，可以給用戶一個(gè)真實(shí)的消費(fèi)體驗(yàn)。

3.4 在線支付模塊

在網(wǎng)上支付模塊，本網(wǎng)站采取間接接入的方式： ①選擇支付方式。②進(jìn)行支付。③返回支付結(jié)果。

3.5 增強(qiáng)現(xiàn)實(shí)應(yīng)用

（1） 3D商品展示

本系統(tǒng)將為人們展示設(shè)計(jì)商品的3D模型，讓顧客可以多角度進(jìn)行觀看。如圖4所示。

（2） 基于瀏覽器的AR商品展示

本系統(tǒng)提供虛擬商品與真實(shí)環(huán)境融合的3D商品展示，看其是否適合自己，是否適合真實(shí)環(huán)境。如圖5所示。

4 結(jié)束語

本文設(shè)計(jì)了一個(gè)擁有3D視覺和真實(shí)交互體驗(yàn)的網(wǎng)上購物系統(tǒng)，打破了傳統(tǒng)網(wǎng)購的瀏覽方式，尤其是為大型家具在線購買帶來了極大的便利。消費(fèi)者可以利用攝像頭，體驗(yàn)虛擬商品與真實(shí)環(huán)境的結(jié)合。此項(xiàng)應(yīng)用能夠很好的提高消費(fèi)者滿意度，降低退貨率，擴(kuò)大家具在線銷售平臺。下一步，我們將繼續(xù)優(yōu)化，解決動態(tài)模型不正常抖動問題，簡化系統(tǒng)操作。

參考文獻(xiàn)（References）：

[1] Tnoy Mullen著，徐學(xué)磊譯.增強(qiáng)現(xiàn)實(shí)：必知必會的工具與方法[M]. 機(jī)械工業(yè)出版社，2013.

[2] 謝忠. SP中表單數(shù)據(jù)存儲的一種通用方法[A]. 計(jì)算機(jī)與信息技術(shù)，2007.9：91-95

[3] 盛君.基于標(biāo)識的增強(qiáng)現(xiàn)實(shí)系統(tǒng)的研究[D]. 杭州電子科技大學(xué)碩士學(xué)位論文，2009.

[4] 吳晨清，榮震華.用JSP/Servle技術(shù)構(gòu)建Web應(yīng)用[J]. 計(jì)算機(jī)工程，2001.

[5] 王璞.移動增強(qiáng)現(xiàn)實(shí)技術(shù)在圖書館中的應(yīng)用研究[A]. 上海海事大學(xué)圖書館，2013.6.