基于WebGL的卷煙包裝模型三維可視化技術的研究與應用

余葉琦，沈陟彥，沈璐婕

（上海煙草集團有限責任公司，上海 200092）

0 引言

為進一步穩定和提升卷煙銷量，包裝設計需要不斷推陳出新，而設計過程的合理、可控、高效是卷煙包裝設計工作中最重要的因素之一。運用三維模型建模展示比傳統可視化技術更能直觀地、有效地獲取包裝的有關內容。結合三維可視化技術和信息管理技術，利用WebGL渲染出卷煙包裝的整體三維模型場景，該技術呈現簡潔直觀的UI讓用戶能快速搜索、三維查看、平面編輯和對比包裝的相關信息。

1 核心技術簡介

1.1 WebGL技術

WebGL是一個跨平臺、免費、用于Web瀏覽器創建三維圖形的API，它使用著色語言GLSL，提供了類似于標準的OpenGL[1]。WebGL可直接在Canvas中繪制三維動畫并提供硬件三維加速渲染，無需安裝插件。

1.2 HTML5+JavaScript+CSS技術

HTML5具有優秀的2D/3D圖像繪制技術，能利用O3D模型創建3D圖像；離線應用、設備適配、提供豐富的API等優點也是開發人員選擇它的原因[2]。

JavaScript是一種廣泛用于網頁開發的腳本語言，主要用來向HTML頁面添加交互行為，具有跨平臺特性。

CSS是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

2 系統功能簡介

系統支持卷煙包裝設計效果立體示意及720度全視角展示、360度制動旋轉展示，同時支持對設計效果構成元素進行移動、旋轉、縮放、透明度、替換等編輯，且兼容PC端和移動端。

該系統可在向與會人員展示設計產物時，采納品牌評審的修改意見，將調整稿生成效果圖，并支持導出參數明細，作為打樣的參考依據；還能使用平臺模型庫中預定義的盒型模板，在一定范圍內DIY自行建立新的卷煙包裝設計作品。整體功能如表1所示：

表1 整體功能清單

3 系統架構與技術實現

3.1 系統架構

系統主體采用B/S結構，用戶通過Web請求訪問應用服務器，應用服務與數據庫服務器交互數據，然后應用服務器將請求的執行結果以JSON數據方式反饋給終端用戶[3]。系統架構圖如圖1所示：

圖1 系統架構圖

3.2 技術實現

3.2.1 三維立體呈現

系統通過JSON格式配置文件描述模型相關數據信息，前端使用JSON配置文件，同時利用Three.js框架提供的幾何體，基于WebGL將整個三維場景渲染在前端頁面中。

3.2.2 二維平面編輯

Canvas提供了繪制二維圖形的API，通過scale方法實現縮放功能，語法context.scale（x，y）；x：Canvas坐標系水平縮放的比例。支持小數，如果值是-1，表示水平翻轉。y：Canvas坐標系垂直縮放的比例。支持小數，如果值是-1，表示垂直翻轉。

通過transform方法實現移動功能。語法：context.translate（x，y）；x：坐標系水平位移的距離。y：坐標系垂直位移的距離。

通過globalAlpha方法實現圖層透明度調整功能。語法：context.globalAlpha=value;其中value是設置的全局透明度，范圍是0到1。

通過rotate方法實現旋轉功能，順時針方向，單位是弧度，默認旋轉中心點是Canvas的左上角（0，0）坐標點，如果希望改變旋轉中心點，例如以Canvas畫布的中心旋轉，需要先使用translate（）位移旋轉中心點。旋轉的語法:context.rotate（angle）。

4 系統運行實例

4.1 三維立體展示

在系統中選擇設計展示產品后，可以看到基于WebGL渲染的包裝三維場景。

系統左側提供了產品切換功能，界面默認產品360°自旋轉，可根據鼠標轉動實現720°全視角旋轉，在左上角功能區提供的功能包括如下：

①展示角度（前后左右頂底）；②停止自旋；③開盒展示（開合狀態）；④背景切換；⑤關照效果；⑥放大縮小（整體）等，以及產品的導出、批注等功能。

實現產品的精細渲染。系統運行三維立體示例圖如圖2所示：

圖2 系統三維立體運行示例圖

4.2 二維平面編輯

WebGL渲染的包裝三維場景上方，分別有3D立體、平面展示切換功能按鈕。

將WebGL渲染的包裝切換到二維平面狀態。系統默認平鋪展示產品的外包裝設計。進入“編輯”狀態，在左側功能區可選擇包裝的主圖案、標志、輔助元素警局、底紋、其他的選擇和自定義添加，實現相同規格的煙包材料（煙盒、內襯紙、框架紙、接裝紙等）部件材質的置換、編輯、修改。在右側展示的為產品的基本信息、設計圖層信息，以及各個元素的透明度、縮放比例、角度的設置，實現產品二維平面設計的自由性。在設計完成后，可隨時對設計產品3D預覽，查看3D立體展示效果[4]。系統運行二維平面示例圖如圖3所示：

圖3 系統運行二維平面示例圖

4.3 產品比對展示

返回上層可單選或多選設計稿或修改稿的產品，進行外觀和參數的查看及對比。系統界面展示多種產品，默認產品360自旋轉。系統左側功能區選擇產品展示角度（前后左右頂底）、停止自旋、開盒展示（開/合狀態）、背景切換。系統右上交展示各產品的參數對比，進入可查看各產品各設計元素的對比結果，包括：坐標、高寬、旋轉角度、透明度等參數明細。系統產品對比示例圖如圖4所示：

圖4 系統產品對比示例圖

5 結語

本文利用支持WebGL的輕量化JSON數據文件，使用HTML、JavaScript、CSS等技術，通過WebGL原理的研究，實現卷煙包裝模型在Web端的三維呈現、產品對比等操作，滿足卷煙包裝模型三維可視化系統三維交互的要求，達到了預期目標，同時為三維制造業數據可視化的實際應用提供解決方案和示范參考。