外文翻譯---基于webgl的在線書(shū)店模擬現(xiàn)實(shí)書(shū)店的顯示方法（譯文）

1、<p>　　基于WebGL的在線書(shū)店模擬現(xiàn)實(shí)書(shū)店的顯示方法 </p><p>　　Kazuhisa Yanaka and Terumichi Iizuka</p><p><b>　　摘要</b></p><p>　　得益于互聯(lián)網(wǎng)的迅猛發(fā)展，近年來(lái)使用在線書(shū)店的機(jī)會(huì)比以往多了很多。然而對(duì)于典型顧客來(lái)說(shuō)，憑直覺(jué)去分辨哪些書(shū)銷量好或者說(shuō)哪

2、些書(shū)是書(shū)店極力推薦的仍然是一件難事。因此，我們開(kāi)發(fā)出了一套虛擬書(shū)店展示系統(tǒng)，這套系統(tǒng)可以使用WebGL將在在書(shū)架上擺放好的或者在書(shū)桌上堆積的書(shū)展示在客戶面前。因?yàn)楸欢诜e的書(shū)目的總數(shù)是被服務(wù)器端控制的現(xiàn)狀需要被改變?yōu)橛煽蛻魜?lái)控制，所以我再次介紹一種基于超文本預(yù)處理器（PHP）的服務(wù)器端技術(shù)。</p><p>　　關(guān)鍵詞 網(wǎng)絡(luò)購(gòu)物 在線書(shū)店 WebGL</p><p><b>　　1

3、.引言</b></p><p>　　網(wǎng)絡(luò)購(gòu)物近些年來(lái)逐步完善，而且有潛力在將來(lái)的時(shí)間里取得更加令人矚目的成就。由于商店的租金，員工的工資，店鋪的供暖供電這些消費(fèi)對(duì)于在線書(shū)店來(lái)說(shuō)都是不必要的，所以相對(duì)于現(xiàn)實(shí)中的書(shū)店，創(chuàng)建一個(gè)在線書(shū)店顯得便宜很多。而且，對(duì)于網(wǎng)絡(luò)購(gòu)物來(lái)說(shuō)現(xiàn)貨的供應(yīng)量十分充足，已經(jīng)下了的訂單貨物經(jīng)常會(huì)在一天之內(nèi)送達(dá)。外國(guó)產(chǎn)品也可以輕易地在進(jìn)口或者海外網(wǎng)站上購(gòu)得。</p><

4、;p>　　書(shū)是這眾多適合網(wǎng)絡(luò)銷售的產(chǎn)品中的一類。事實(shí)上，只從網(wǎng)上購(gòu)書(shū)的顧客有很多。但是，盡管在線書(shū)店相對(duì)于現(xiàn)實(shí)書(shū)店在很多方面都很方便，很多時(shí)候?qū)τ陬櫩蛠?lái)說(shuō)在線上書(shū)店里尋找一本真正適合自己的書(shū)仍然不如在現(xiàn)實(shí)書(shū)店中那樣簡(jiǎn)單。因?yàn)樵谏硖幀F(xiàn)實(shí)書(shū)店中的情況先，顧客們可以憑書(shū)在書(shū)架或書(shū)桌上的位置輕易的判斷出哪些書(shū)是熱銷的或者是店家極力推薦的，因?yàn)槟切?shū)目都被放置在優(yōu)先的顯眼的位置，通常來(lái)講那些銷量很好的書(shū)都會(huì)被平鋪在靠近過(guò)道的桌面的第一線，因

5、為這樣這寫(xiě)書(shū)就會(huì)被顧客優(yōu)先輕易地看到并拿起閱讀。相反，那些并不流行的書(shū)目就會(huì)被放置在書(shū)架上不顯眼的位置。</p><p>　　然而在現(xiàn)在的網(wǎng)絡(luò)書(shū)店中，與上述相反，所有統(tǒng)一大小的封面的書(shū)目被擺放成一條線。這樣一來(lái)，顧客就很難挑選出熱銷的以及店家推薦的書(shū)目。我們感覺(jué)，如果我們將網(wǎng)絡(luò)書(shū)店中書(shū)目的擺放方式變成和現(xiàn)實(shí)書(shū)店中的一樣，顧客就會(huì)很輕易的挑選出那些熱銷書(shū)。因此我們開(kāi)發(fā)出了一套滿足一下兩個(gè)條件的試驗(yàn)系統(tǒng)：</p

6、><p>　　在現(xiàn)實(shí)書(shū)店中展示的書(shū)目將通過(guò)計(jì)算機(jī)圖形學(xué)在網(wǎng)絡(luò)上再現(xiàn)出來(lái)。</p><p>　　書(shū)目的庫(kù)存體現(xiàn)在基于計(jì)算機(jī)圖形學(xué)的網(wǎng)絡(luò)在線展示中。</p><p>　　在這篇論文中，我們提出了一種實(shí)現(xiàn)以上兩個(gè)條件的方案，這個(gè)方案用到了超文本預(yù)處理器（PHP）【1】與網(wǎng)絡(luò)圖形庫(kù)（WebGL）【2】—【4】等互聯(lián)網(wǎng)技術(shù)。</p><p>　　2.基于W

7、ebGL的展示方法</p><p>　　2.1基于網(wǎng)絡(luò)的3D計(jì)算機(jī)圖形學(xué)技術(shù)</p><p>　　第一個(gè)在網(wǎng)絡(luò)上描述3D物體和場(chǎng)景的技術(shù)是虛擬現(xiàn)實(shí)模型語(yǔ)言（VRML），它是在二十世紀(jì)九十年代中期被提出的。它在1997年被ISO標(biāo)準(zhǔn)化為VRML97(ISO/IEC 14772-1:1997)。這個(gè)技術(shù)的主要目標(biāo)是在互聯(lián)網(wǎng)空間中創(chuàng)造虛擬世界。VRML的繼承者是X3D（ISO/IEC 19775

8、-1:2008），它使用的是XML的文件格式。</p><p>　　相似的被各種私人公司開(kāi)發(fā)出的基于網(wǎng)絡(luò)的3D計(jì)算機(jī)圖形學(xué)技術(shù)有很多，它們都被共同識(shí)別為WEB3D，并應(yīng)用于網(wǎng)絡(luò)產(chǎn)品宣傳，比如汽車，因?yàn)橥ǔ１讳秩镜膱D片的品質(zhì)非常的高而且計(jì)算機(jī)圖形數(shù)據(jù)可以被很好的保護(hù)，這意味著數(shù)據(jù)的濫用將會(huì)被有效地防止。</p><p>　　然而，上述提及的技術(shù)非常遺憾的并不適合我們的系統(tǒng)，因?yàn)樗鼈兙环诸惓?/p>

9、為文件格式或者數(shù)據(jù)描述語(yǔ)言而不是用于編程語(yǔ)言的應(yīng)用程序接口（API），這意味著我們的目標(biāo)文件需要被提前進(jìn)行模式化處理。換句話來(lái)說(shuō)，這項(xiàng)技術(shù)并不是特別是和動(dòng)態(tài)地交互地創(chuàng)造圖形文件，盡管JAVA在VRML和X3D中一定程度上可以控制物體的運(yùn)動(dòng)。而且，瀏覽器提供額特定系統(tǒng)的支持是必須的，或者說(shuō)一些插件需要被運(yùn)用在當(dāng)下的一些瀏覽器中。另外在現(xiàn)在的一些WEB3D系統(tǒng)中，常規(guī)的程序員并不能自己創(chuàng)造出計(jì)算機(jī)圖形數(shù)據(jù)文件因?yàn)檫@些文件格式并不是開(kāi)源。&l

10、t;/p><p><b>　　2.2 WebGL</b></p><p>　　WebGL，是由一個(gè)非營(yíng)利性組織Khronos Group【2】開(kāi)發(fā)的，它是相對(duì)來(lái)說(shuō)比較新的技術(shù),它的發(fā)展開(kāi)始于2006年左右，并在2011年發(fā)行了1.0版本。WebGL看起來(lái)和現(xiàn)有的很多技術(shù)很相似，用視口的方式在瀏覽器中展示3D物品，但是它和之前的VRML不同因?yàn)閃ebGL是夸平臺(tái)的javas

11、cript API 基于OpenGL ES 2.0通過(guò)HTML5的canvas標(biāo)簽引入，總的來(lái)說(shuō)它有以下5個(gè)特點(diǎn)：</p><p>　　和VRML，X3D一樣，網(wǎng)頁(yè)可以通過(guò)文本編輯器創(chuàng)建。沒(méi)有特別的需要的開(kāi)發(fā)工具。</p><p>　　創(chuàng)建網(wǎng)頁(yè)的發(fā)行非常簡(jiǎn)單。不需要特別的網(wǎng)頁(yè)服務(wù)器，常規(guī)的HTTP服務(wù)器Apache就可以完成任務(wù)。</p><p>　　WebGL被近

12、期更新的瀏覽器所支持，比如google chrome，firefox，opera和safari，并不需要插件。</p><p>　　HTML的原有功能可以和3D現(xiàn)實(shí)進(jìn)行同步的實(shí)現(xiàn)，因?yàn)?D現(xiàn)實(shí)的部分由canvas標(biāo)簽實(shí)現(xiàn)，它只是網(wǎng)頁(yè)的一部分。</p><p>　　WebGL的說(shuō)明書(shū)，其實(shí)和OpenGL2.0一樣都是開(kāi)源的，這里OpenGL也是由Khronos Group經(jīng)營(yíng)的，它是用來(lái)繪制

13、3D圖形的的API，這意味著程序員可以隨意自己創(chuàng)造3D圖形，甚至在服務(wù)器端如果使用PHP的話。</p><p>　　所以基于以上的特點(diǎn)，我們選用WebGL去創(chuàng)造3D物品，比如我們的書(shū)和書(shū)架。</p><p>　　2.3 Three.js</p><p>　　因?yàn)閃ebGL包含了相對(duì)比較低等級(jí)API，所以并不是所有的程序員都可以很好地掌握它，所以很多的Javascri

14、pt語(yǔ)言寫(xiě)的免稅版的庫(kù)的開(kāi)發(fā)都是因?yàn)檫@個(gè)原因。因?yàn)楹芏嗟投说腁PI都從庫(kù)中抽離了出來(lái)，先進(jìn)的計(jì)算機(jī)圖形學(xué)工具可以方便的用很短的程序區(qū)獲得他們。在這些工具庫(kù)中我們采用了Three.js【3】—【5】因?yàn)樗亲盍餍械膸?kù)之一，是西班牙的一位程序員Ricardo Cabello編寫(xiě)開(kāi)發(fā)的。</p><p><b>　　3.服務(wù)器端技術(shù)</b></p><p>　　如果用戶的操

15、作并不影響存在服務(wù)器中的信息，這個(gè)操作將會(huì)在用戶端被執(zhí)行。然而，書(shū)目的總數(shù)實(shí)在服務(wù)器端被控制的并不是之和用戶有關(guān)，如圖1展示。這類程序并不能只在用戶端進(jìn)行操作，也需要服務(wù)器端的支持。</p><p>　　典型的服務(wù)器端技術(shù)包括：</p><p>　　--服務(wù)器端Java</p><p><b>　　--APS.NET</b></p>

16、<p><b>　　--PHP</b></p><p>　　這里，PHP是一種服務(wù)器端腳本語(yǔ)言用于網(wǎng)頁(yè)開(kāi)發(fā)，在這篇論文中，我們選擇使用PHP因?yàn)樗恢北粡V泛的使用。</p><p>　　圖1服務(wù)器端技術(shù)是必要的</p><p><b>　　圖2 系統(tǒng)結(jié)構(gòu)</b></p><p><

17、;b>　　4.系統(tǒng)結(jié)構(gòu)</b></p><p>　　我們假定的網(wǎng)絡(luò)系統(tǒng)的結(jié)構(gòu)在圖2中展示。這個(gè)網(wǎng)絡(luò)系統(tǒng)結(jié)構(gòu)基于用戶服務(wù)器模型并用到了HTTP這個(gè)用戶與服務(wù)器相互交流的基本方式。</p><p>　　需要注意的是PHP中寫(xiě)的腳本，嵌入在瀏覽器頁(yè)面中，這個(gè)過(guò)程是被PHP解釋程序執(zhí)行的,然后被改進(jìn)的網(wǎng)頁(yè)就會(huì)被傳遞到客戶端。因此客戶端根本不會(huì)感覺(jué)到PHP解釋程序的存在。</

18、p><p><b>　　5.實(shí)驗(yàn)</b></p><p>　　在這個(gè)實(shí)驗(yàn)中，我們基于3D計(jì)算機(jī)圖形創(chuàng)建了一個(gè)可以在線現(xiàn)實(shí)圖書(shū)的網(wǎng)頁(yè)，用戶可以輕易的分辨出書(shū)的多少和種類，就像身臨真實(shí)的書(shū)店一樣，用戶也可以通過(guò)拖動(dòng)鼠標(biāo)，從隨機(jī)方向觀看圖書(shū)，這個(gè)實(shí)驗(yàn)的程序如圖3所示。</p><p>　　圖3. 實(shí)驗(yàn)的程序流程圖</p><p>

19、　　5.1圖像文件的準(zhǔn)備</p><p>　　在這個(gè)實(shí)驗(yàn)中，書(shū)本被用6個(gè)矩形組成的立方體展示出來(lái)，因此這6個(gè)矩形圖形的紋理外表應(yīng)該通過(guò)對(duì)真實(shí)書(shū)本的掃描或者拍照取得。圖4展示了這六個(gè)用于展示書(shū)本紋理的矩形。</p><p>　　圖4.用于展示書(shū)本外表紋理的6幅圖像</p><p>　　5.2 PHP文件的創(chuàng)建</p><p>　　在這個(gè)實(shí)驗(yàn)中我

20、們創(chuàng)建了兩個(gè)PHP文件。</p><p>　　第一個(gè)PHP文件相當(dāng)于一個(gè)獲取用戶訂單的網(wǎng)頁(yè)。一段代碼生成一個(gè)文本框讓用戶去列舉出包含的所有書(shū)目。它的另一個(gè)重要作用在于管理庫(kù)存書(shū)本的總數(shù)。其實(shí)通常情況下，我們更樂(lè)意用一個(gè)數(shù)據(jù)管理系統(tǒng)（DBMS）去進(jìn)行數(shù)據(jù)管理比如MYSQL。然而，我們選擇簡(jiǎn)單的文本框去取代DBMS的原因是，在此我們并不是要建立一個(gè)實(shí)用的用戶系統(tǒng)，而是要去檢驗(yàn)用WebGL去實(shí)現(xiàn)一個(gè)用戶界面的可能性。&

21、lt;/p><p>　　第二個(gè)PHP文件相當(dāng)于一個(gè)展示庫(kù)存書(shū)目的網(wǎng)頁(yè)，如果在桌面上的書(shū)目減少了就說(shuō)明那些書(shū)目已經(jīng)被售出了一部分，在這個(gè)頁(yè)面中用戶同樣可以拖動(dòng)鼠標(biāo)來(lái)選擇觀察書(shū)目的任意視角。</p><p>　　在Three.js中控制相機(jī)的位置是一件容易的事，如果使用THREE.TrackballControls來(lái)創(chuàng)建目標(biāo)文件和相機(jī)來(lái)作為一個(gè)參數(shù)。鼠標(biāo)上的操作將產(chǎn)生如下效果：</p>

22、<p>　　—拖動(dòng)左鍵：文件將被轉(zhuǎn)動(dòng)。</p><p>　　—拖動(dòng)滑輪：文件被放大或縮小。</p><p>　　—拖動(dòng)右鍵：文件平行移動(dòng)。</p><p>　　在這兩個(gè)PHP文件中，涉及到目錄管理的部分將被附上“<?php” and “?>”的標(biāo)簽，因?yàn)樗麄冎饕獞?yīng)該在服務(wù)器端被執(zhí)行。作為PHP解釋器在服務(wù)器端執(zhí)行的結(jié)果，以上部分將被一些合適

23、的代碼代替掉。在瀏覽器上創(chuàng)建圖形文件的過(guò)程將由WebGL和Javascript來(lái)完成并在客戶端被執(zhí)行。</p><p>　　5.3個(gè)人網(wǎng)頁(yè)和圖形文件的上傳</p><p>　　本實(shí)驗(yàn)中將會(huì)用到一個(gè)市場(chǎng)上可買到的包括PHP支持的租賃服務(wù)器，所以所有我們用到的文件將被上傳到這個(gè)服務(wù)器的文件根目錄下。有一個(gè)文件叫做three.js，它的主體部分都是用Javascript語(yǔ)言編寫(xiě)的，也要被傳送上去

24、；圖形文件需要用來(lái)對(duì)書(shū)本模型進(jìn)行紋理裝飾。</p><p><b>　　5.4 執(zhí)行</b></p><p>　　當(dāng)這個(gè)網(wǎng)頁(yè)被支持WebGL的瀏覽器訪問(wèn)的時(shí)候，頁(yè)面就會(huì)被下載并顯示在屏幕上。</p><p><b>　　6 實(shí)驗(yàn)結(jié)果</b></p><p>　　當(dāng)一個(gè)用戶訪問(wèn)頁(yè)面頂部的時(shí)候，頁(yè)面將會(huì)

25、如圖5顯示，這里顯示的書(shū)目都是實(shí)際數(shù)量，在本實(shí)驗(yàn)中，原始書(shū)本數(shù)量為：書(shū)A30本，書(shū)B(niǎo)10本，書(shū)C10本，書(shū)D5本，書(shū)E5本。</p><p><b>　　圖5.書(shū)目存儲(chǔ)圖示</b></p><p>　　圖6.用戶選擇后圖像的轉(zhuǎn)變</p><p>　　這將使得用戶可以輕易地分辨出哪些書(shū)是熱銷的或者店家推薦的。用戶可以憑借書(shū)的書(shū)目去選擇要買的書(shū)目，

26、然后再文本框里寫(xiě)上數(shù)量點(diǎn)擊按鈕就可以購(gòu)買如圖6所示。</p><p>　　當(dāng)用戶在購(gòu)買界面輸入購(gòu)買數(shù)目并且按下BUY這個(gè)按鈕時(shí)，書(shū)目展示將發(fā)生同步的變化如圖6所示，用戶購(gòu)買6本后，就剩下了24本，用戶也可以拖動(dòng)鼠標(biāo)進(jìn)行各個(gè)角度的觀察，就像在真實(shí)的書(shū)店一樣。</p><p>　　圖7.當(dāng)相機(jī)移動(dòng)時(shí)顯示變化情況（a）中為上下變化（b）中為左右變化</p><p>　　當(dāng)

27、用戶點(diǎn)擊檢查按鈕時(shí)，就可以在任一方向上移動(dòng)鼠標(biāo)，控制相機(jī)位置的變化，因此，可以造成用戶真的在書(shū)架旁的感覺(jué)，用戶也可以點(diǎn)擊返回按鈕來(lái)到初始書(shū)架位置。</p><p>　　圖7展示了當(dāng)相機(jī)位置發(fā)生變化垂直或水平變化，其實(shí)還可以對(duì)角線變化，盡管圖中沒(méi)有給出。</p><p><b>　　7 討論</b></p><p>　　一下討論同樣適用于真實(shí)的書(shū)

28、店。如果你看到少量的書(shū)目在桌子上堆疊，應(yīng)該有以下兩種可能性，1.這本書(shū)買的很好，或者說(shuō)是店家推薦的，所以省的不多。2.這本書(shū)銷量不好，于是店家決定吧剩下的快些賣出去。通?？腿藗兌純A向于第一種可能性，而忽略了第二種可能性，這是一個(gè)心理學(xué)問(wèn)題值得我們的進(jìn)一步探究。</p><p><b>　　8 結(jié)論</b></p><p>　　為了使顧客可以簡(jiǎn)單的像在真實(shí)的書(shū)店一樣判斷

29、出一些熱銷書(shū)目，我們開(kāi)發(fā)出了一種基于計(jì)算機(jī)圖形學(xué)的在線展示書(shū)目的方法，然后我們基于WebGL和PHP建立了一套試驗(yàn)系統(tǒng)。實(shí)驗(yàn)表明，與傳統(tǒng)的網(wǎng)頁(yè)相比，我們的方法更方便顧客挑選出合適熱銷的書(shū)目。</p><p>　　盡管WebGL是一項(xiàng)正在發(fā)展中的技術(shù)，并沒(méi)有被大多數(shù)瀏覽器所支持，但是它正在廣泛的傳播中，因此我們認(rèn)為這篇文章中所提到的這項(xiàng)技術(shù)將會(huì)廣泛的被運(yùn)用，并不單單是書(shū)店的銷售，任何在線訂單類型的頁(yè)面都可以使用到這

30、項(xiàng)技術(shù)方法。</p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1] PHP: Hypertext Preprocessor. [Online]. Available:</p><p>　　http://php.net/</p><p>　　[2] OpenGL ES 2.0 for the Web.

31、[Online]. Available:</p><p>　　http://www.khronos.org/Webgl/</p><p>　　[3] B. Danchilla, Beginning WebGL for HTML5, New York:</p><p>　　Apress, 2012, ch. 7, pp. 173–203.</p><

32、;p>　　[4] T. Parisi, WebGL Up and Running, Sebastopol: O’Reilly,</p><p>　　2012, ch. 2, pp. 17–30.</p><p>　　[5] Three.js. [Online]. Available: http://threejs.org/</p><p>　　[6] Mr.d