余叶琦，沈陟彦，沈璐婕

（上海烟草集团有限责任公司，上海 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端和移动端。

该系统可在向与会人员展示设计产物时，采纳品牌评审的修改意见，将调整稿生成效果图，并支持导出参数明细，作为打样的参考依据；……