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

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

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

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

4、;p>　　書是這眾多適合網絡銷售的產品中的一類。事實上，只從網上購書的顧客有很多。但是，盡管在線書店相對于現(xiàn)實書店在很多方面都很方便，很多時候對于顧客來說在線上書店里尋找一本真正適合自己的書仍然不如在現(xiàn)實書店中那樣簡單。因為在身處現(xiàn)實書店中的情況先，顧客們可以憑書在書架或書桌上的位置輕易的判斷出哪些書是熱銷的或者是店家極力推薦的，因為那些書目都被放置在優(yōu)先的顯眼的位置，通常來講那些銷量很好的書都會被平鋪在靠近過道的桌面的第一線，因

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

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

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

8、-1:2008），它使用的是XML的文件格式。</p><p>　　相似的被各種私人公司開發(fā)出的基于網絡的3D計算機圖形學技術有很多，它們都被共同識別為WEB3D，并應用于網絡產品宣傳，比如汽車，因為通常被渲染的圖片的品質非常的高而且計算機圖形數(shù)據(jù)可以被很好的保護，這意味著數(shù)據(jù)的濫用將會被有效地防止。</p><p>　　然而，上述提及的技術非常遺憾的并不適合我們的系統(tǒng)，因為它們均被分類成

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

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

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

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

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

14、pt語言寫的免稅版的庫的開發(fā)都是因為這個原因。因為很多低端的API都從庫中抽離了出來，先進的計算機圖形學工具可以方便的用很短的程序區(qū)獲得他們。在這些工具庫中我們采用了Three.js【3】—【5】因為它是最流行的庫之一，是西班牙的一位程序員Ricardo Cabello編寫開發(fā)的。</p><p><b>　　3.服務器端技術</b></p><p>　　如果用戶的操

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

16、<p><b>　　--PHP</b></p><p>　　這里，PHP是一種服務器端腳本語言用于網頁開發(fā)，在這篇論文中，我們選擇使用PHP因為它一直被廣泛的使用。</p><p>　　圖1服務器端技術是必要的</p><p><b>　　圖2 系統(tǒng)結構</b></p><p><

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

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

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

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

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

22、<p>　　—拖動左鍵：文件將被轉動。</p><p>　　—拖動滑輪：文件被放大或縮小。</p><p>　　—拖動右鍵：文件平行移動。</p><p>　　在這兩個PHP文件中，涉及到目錄管理的部分將被附上“<?php” and “?>”的標簽，因為他們主要應該在服務器端被執(zhí)行。作為PHP解釋器在服務器端執(zhí)行的結果，以上部分將被一些合適

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

24、；圖形文件需要用來對書本模型進行紋理裝飾。</p><p><b>　　5.4 執(zhí)行</b></p><p>　　當這個網頁被支持WebGL的瀏覽器訪問的時候，頁面就會被下載并顯示在屏幕上。</p><p><b>　　6 實驗結果</b></p><p>　　當一個用戶訪問頁面頂部的時候，頁面將會

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

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

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

28、店。如果你看到少量的書目在桌子上堆疊，應該有以下兩種可能性，1.這本書買的很好，或者說是店家推薦的，所以省的不多。2.這本書銷量不好，于是店家決定吧剩下的快些賣出去。通常客人們都傾向于第一種可能性，而忽略了第二種可能性，這是一個心理學問題值得我們的進一步探究。</p><p><b>　　8 結論</b></p><p>　　為了使顧客可以簡單的像在真實的書店一樣判斷

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

30、項技術方法。</p><p><b>　　參考文獻</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