TWI592900B - 藉由網頁高速逼真３ｄ渲染進行物品設計客製化的方法 - Google Patents

Description

藉由網頁高速逼真3D渲染進行物品設計客製化的方法

本發明係關於3D渲染領域，尤係關於一種藉由網頁高速逼真3D渲染進行物品設計客製化的方法。

傳統的電子商務採購或者自主設計商品、批量生產並藉由網際網路平臺銷售給客戶。隨著生活水準的提高，用戶對個性化客製化的商品需求越來越多。在傳統線下，這種需求很難得到滿足，而電子商務的發展也使這種需求成為可能。

當前在網際網路的電子商務實踐中，已經存在多種線上商品客製化方案，允許客戶客製化商品的各個部分的材料，並提供3D顯示功能，客戶可以在收到商品之前從多角度看到商品的最終效果。但是，在客製化商品的各個部分的材料時，由於需要在創建3D模型時指定各個部分的材料，即材料的替換需要在3D建模工具中實現，以保證材料和3D模型之間的比例、角度符合渲染要 求以實現逼真顯示，導致了如果要替換材料並實現逼真顯示，必須採用3D建模工具對模型進行修改，或者創建新模型，使得改變材料並逼真顯示給用戶的時間比較長。

並且，在現有的關於3D渲染的線上商品客製化方案中，原始的3D模型檔包含模型的所有空間幾何資料，傳統的渲染方式需要每次都對這些資料進行分析，重構，效率低下，正常情況下渲染一個引擎需要5分鐘以上，完全無法滿足前臺即時性的要求。

這些方案當中3D渲染效率低下的一個原因在於，為了便於與其他系統交換，3D模型的格式採用通用性較高的OBJ格式，該格式的特點是採用文本方式儲存三維資料，優點是通用性強，缺點是處理速度慢。一個精細度較高，具有100萬個三角形的三維模型OBJ檔一般在150M左右。載入、處理這樣的文字檔案需要消耗大量CPU和I/O時間，根據測算，在一台普通的伺服器上，讀取、載入一個150M的OBJ檔需要10秒鐘以上的時間，這顯然無法滿足線上客製化的需求。因此要做到對用戶客製化請求的快速回應，就必須解決此問題。

公開於該發明先前技術部分的資訊僅僅旨在加深對本發明的一般先前技術的理解，而不應當被視為承認或以任何形式暗示該資訊構成已為本領域具有通常知識者所公知的現有技術。

鑒於現有技術當中存在的上述缺陷，本發 明提供了一種藉由網頁高速逼真3D渲染進行物品設計客製化的方法。

本發明提供一種藉由網頁高速逼真3D渲染進行物品設計客製化的方法，包括：藉由三維建模工具產生物品的3D模型，將該3D模型輸出到3D模型檔中；將3D模型檔載入系統，對3D模型檔進行預處理，產生所述3D模型檔的二進位快照檔；當渲染被觸發時，3D渲染引擎載入所述二進位快照檔，對物品的3D模型的不同的部分進行分色渲染，並將分色渲染的資料保存在遮色片圖片中；根據用戶選擇的目標區域在3D模型上的位置，重新計算材料規格、材料延展；將用戶選擇的目標材料根據材料規格、材料延展顯示在目標區域上並在網頁中顯示渲染後的物品3D模型效果圖。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，藉由如下方式產生二進位快照檔：申請一塊與3D模型檔相同大小的記憶體空間，對3D模型檔中的三維資料進行分析產生可供渲染的可供3D渲染引擎直接使用的二進位格式，並將該二進位格式的資料按照預先設定的順序依次重新拷貝到該空間中並對應修改指標偏移距離。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述二進位快照檔是藉由lzo格式壓縮的二進位流的形式。

如上所述的藉由網頁高速逼真3D渲染進行 物品設計客製化的方法，其中，所述3D模型檔為OBJ格式檔。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述OBJ格式檔中使用的資料格式是16位元無正負號整數。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，能夠藉由網頁觸發3D渲染。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述三維建模工具為3DMAX或MAYA。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，藉由Javascript技術顯示渲染後的物品3D模型效果圖。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述效果圖是物品的3D模型的多個不同角度的多張圖片。

如上所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，在頁面操作時，藉由滑鼠滾輪輪流顯示所述多張圖片以獲得三維展示的效果。

本發明的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，藉由對載入系統的3D模型檔進行預處理，產生3D模型檔的二進位快照檔，使得再次渲染時不需再次對重新載入的3D模型檔進行分析，除非對3D 模型進行了修改，使得渲染時間降低到了2秒。並且藉由根據用戶選擇的目標區域在3D模型上的位置，重新計算材料規格、材料延展，並將用戶選擇的目標材料根據材料規格、材料延展顯示在目標區域上來實現下列效果：用戶替換材料時，只需選定目標區域和目標材料，而採用本發明的方法的系統不需對模型進行修改，或者創建新模型，就可實現材料在商品各部分的逼真顯示，減少了大量工作，減輕了系統的負擔，同時能夠節省用戶的時間。

藉由納入本文的附圖以及隨後與附圖一起用於說明本發明的某些原理的具體實施方式，本發明的方法和裝置所具有的其他特徵和優點將變得清楚或更為具體地得以闡明。

101、102、103、104、105‧‧‧步驟

藉由說明書附圖以及隨後與說明書附圖一起用於說明本發明某些原理的具體實施方式，本發明所具有的其他特徵和優點將變得清楚或得以更為具體地闡明。

第1圖為本發明的藉由網頁高速逼真3D渲染進行物品設計客製化的方法的流程圖；第2a、2b、2c、2d、2e、2f、2g圖為將分色渲染的資料保存在遮色片圖片中的示例圖，示例了鞋的不同部分；以及第3a、3b、3c圖為使用本發明的方法對一些物品進行渲染的效果圖。

應當瞭解，說明書附圖並不一定按比例地 顯示本發明的具體結構，並且在說明書附圖中用於說明本發明某些原理的圖示性特徵也會採取略微簡化的畫法。本文所公開的本發明的具體設計特徵包括例如具體尺寸、方向、位置和外形將部分地由具體所要應用和使用的環境來確定。

請參閱第1圖所示，第1圖為本發明的藉由網頁高速逼真3D渲染進行物品設計客製化的方法的流程圖。本發明提供了一種藉由網頁高速逼真3D渲染進行物品設計客製化的方法，由用戶藉由網頁對伺服器中的物品的不同部分進行選擇，以客製化物品。下面詳述該方法的步驟。

步驟101：藉由三維建模工具產生物品的三維模型，將該模型輸出到3D模型檔中。所述3D模型檔包含模型的所有空間幾何資料。在本實施例中，為了便於與其他系統交換，3D模型的格式採用通用性較高的OBJ格式(在下文中，均以OBJ格式為例)，這個格式中包括了該模型的三維幾何資料，這種幾何資料包含了點，線構成的幾萬至幾百萬個三角形。較佳地，所述三維建模工具為3DMAX或MAYA軟體。

現有的OBJ檔中對長度的描述採用的是32位元無正負號整數，可以表達的範圍從0到2³²-1，這足以描述一個4萬公里的邊長的物體。而對於大多數線上商品客製化的需求來說，僅需要描述的物品最大是傢俱家裝 類。因此，本發明對此進行了改進，在本發明的一個實施例中，將該資料減小為16位元無正負號整數。這樣可描述的物體最大到65公尺，足夠滿足大多數線上商品客製化需求。這一舉措減少了磁片檔的大小，經測算大約為40%。

步驟102：將OBJ模型載入系統，對3D模型檔進行預處理，產生3D模型檔的二進位快照檔。

在一個實施例中，產生快照檔的演算法為：申請一塊與原OBJ檔相同大小的記憶體空間，對OBJ檔中的三維資料進行分析，產生可供渲染的可供3D渲染引擎直接使用的二進位格式，並將該二進位格式的資料按照預先設定的順序依次重新拷貝到該空間中並對應修改指標偏移距離。

待OBJ檔完全載入並分析其資料之後，將載入後得到的所有二進位資料保存至磁片檔，即產生二進位快照檔。這一過程僅需執行一次，之後的渲染不再需要OBJ格式的檔，除非對模型本身進行修改。由此可以提高渲染的速度。

為了提高載入速度，本發明沒有採用系統提供的malloc機制，而是自己建立了一個記憶體管理模組，該模組將同一個模型的二進位資料連續存放於一塊記憶體中，在讀取快照時不需要再進行進一步分析，直接將二進位快照檔讀入記憶體指定位置即可，該過程不需對二進位檔進行重新分析，只進行簡單的I/O操作，性能高。

進一步地，考慮到磁片I/O相對於記憶體讀 寫性能慢兩個數量級，本發明還可以採用lzo壓縮機制來保存檔，即二進位快照檔可以是藉由lzo格式壓縮的二進位流的形式。這樣可以進一步減小檔70%以上。採用這種機制後，OBJ檔的大小減少了80%以上，原來150M的OBJ檔被轉換成了20M左右的快照檔，其載入性能也從10秒提高到了1秒以內。

步驟103：當渲染被觸發時，該3D渲染引擎載入所述二進位快照檔，對物品的3D模型的不同部分進行分色渲染，並將分色渲染的資料保存在遮色片圖片中。

分色渲染是使物品的不同部分顯示不同的顏色，具體地，使目標區域顯示為一種顏色，而其他部分為透明色，第2a、2b、2c、2d、2e、2f、2g圖為將分色渲染的資料保存在遮色片圖片中的示例圖，其以鞋為例，示例了鞋的不同部分。

步驟104：根據用戶選擇的目標區域在3D模型上的位置，重新計算材料規格、材料延展。

用戶可以藉由滑鼠在3D模型上的滑動來選擇目標區域。使用本發明的方法的系統將根據滑鼠在3D模型上的滑動選取的位置的座標來判斷與該座標對應的遮色片圖片，以將該遮色片圖片覆蓋在3D模型上，從而對目標區域進行顯示，給用戶顯示以選擇好目標區域。

步驟105：將用戶選擇的目標材料根據材料規格、材料延展顯示在目標區域上並在網頁中顯示渲染後的物品3D模型效果圖。

可以藉由網頁出觸發3D渲染。可採用現有的渲染引擎對物品進行分色渲染。渲染過程是這樣的，首先前端將渲染請求藉由網路發送給渲染引擎。渲染引擎根據渲染請求讀取並載入所需要渲染的二進位快照檔。同時還會載入渲染所需要的材料圖片檔等。載入完畢之後，引擎首先設定一個相機位置，然後對三維模型中的每個點分析其光線反射後產生的圖像，並根據用戶選擇的目標區域在3D模型上的位置重新計算材料規格、材料延展，最終組合成一個渲染結果圖。第3a、3b、3c圖為使用本發明的方法對一些物品進行渲染的效果圖。第3a、3b、3c圖中顯示的物品包括眼鏡、鞋和床。

在本實施例中，可藉由Javascript技術在網頁中顯示物品模型的效果圖，所述效果圖是物品模型的多個不同角度的多張圖片，例如八個角度的八張圖片，用戶在頁面操作時可以藉由滑鼠滾輪輪流顯示這八張圖片，達到三維展示的效果。

本發明中，3D模型檔被載入之後的二進位格式資料，藉由連續記憶體分配技術，直接保存在檔鏡像內，再次載入不需要進行分析，直接使用。這種格式最大限度的保存了渲染的中間資料，避免了每次渲染都需要在記憶體重構模型的過程。

同時，本發明的方法藉由根據用戶選擇的目標區域在3D模型上的位置，重新計算材料規格、材料延展，並將用戶選擇的目標材料根據材料規格、材料延展 顯示在目標區域上來實現下列效果：用戶替換材料時，只需選定目標區域和目標材料，而採用本發明的3D渲染方法的系統不需對模型進行修改，或者創建新模型，就可實現材料在商品各部分的逼真顯示，減少了大量工作，減輕了系統的負擔，同時能夠節省用戶的時間。

上述實施例是用於例示性說明本發明的原理及其功效，但是本發明並不限於上述實施方式。本領域具有通常知識者均可在不違背本發明的精神及範疇下，在申請專利範圍保護範圍內，對上述實施例進行修改。因此本發明的保護範圍，應如本發明的申請專利範圍覆蓋。

101、102、103、104、105‧‧‧步驟

Claims (10)

1. 一種藉由網頁高速逼真3D渲染進行物品設計客製化的方法，係包括下列步驟：藉由三維建模工具產生物品的3D模型，將該3D模型輸出到3D模型檔中；將該3D模型檔載入系統，對該3D模型檔進行預處理，產生所述3D模型檔的二進位快照檔；當渲染被觸發時，3D渲染引擎載入所述二進位快照檔，對該物品的3D模型的不同的部分進行分色渲染，使得3D模型的用戶選擇的目標區域對該用戶顯示為特定的顏色而其他區域對該用戶顯示為透明色，並將分色渲染的資料保存在遮色片圖片中；根據該目標區域在該3D模型上的位置，重新計算材料規格、材料延展；將該用戶選擇的目標材料根據該材料規格、該材料延展顯示在該目標區域上並在網頁中顯示渲染後的物品3D模型效果圖。
2. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，藉由如下方式產生該二進位快照檔：申請一塊與該3D模型檔相同大小的記憶體空間，對該3D模型檔中的三維資料進行分析產生可供渲染的可供該3D渲染引擎直接使用的二進位格式，並將該二進位格式的資料按照預先設定的順序依次重新拷貝到該空間中並對應修改指標偏移距 離。
3. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述二進位快照檔是藉由lzo格式壓縮的二進位流的形式。
4. 如申請專利範圍第1、2或3項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述3D模型檔為OBJ格式檔。
5. 如申請專利範圍第4項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述OBJ格式檔中使用的資料格式是16位元無正負號整數。
6. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，能夠藉由網頁觸發3D渲染。
7. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述三維建模工具為3DMAX或MAYA。
8. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，藉由Javascript技術顯示渲染後的該物品3D模型效果圖。
9. 如申請專利範圍第1項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，所述效果圖是該物品的3D模型的多個不同角度的多張圖片。
10. 如申請專利範圍第9項所述的藉由網頁高速逼真3D渲染進行物品設計客製化的方法，其中，在頁面操作時， 藉由滑鼠滾輪輪流顯示所述多張圖片以獲得三維展示的效果。