一种基于WebGL的卷烟包装3D渲染方法、装置及电子设备与流程

一种基于webgl的卷烟包装3d渲染方法、装置及电子设备
技术领域
1.本技术涉及3d渲染技术领域，具体而言，涉及一种基于webgl的卷烟包装3d渲染方法、装置及电子设备。


背景技术：

2.3d渲染可用于包装印刷行业的视觉化表达应用。卷烟包装的印刷工艺非常复杂，单盒片的包装，往往由多道印刷工艺，分不同区域叠加而成，为了同时强调真实展示与视觉体验，对渲染质量要求极高。现有的基于webgl来提高渲染质量的做法中，为了模拟出多层印刷工艺的叠加效果，需要制作能模拟出真实印刷效果的高分辨率贴图材质文件，并以此替换烟盒模型的表面贴图材质。由于这类文件制作繁琐，且数据量较大，在实际应用中会存在几方面的缺点，一方面是高分辨率贴图制作困难，还会导致数据量过大，使得前端高负载，容易出现设备崩溃。另一方面是高分辨率贴图会导致cpu运算量过大，在设备能力较弱时，只能在极低的帧数下运行，卡顿明显。此外，高分辨率贴图需要额外的图形处理软件，例如photoshop进行制作，一旦原始设计稿发生变更，便需要重新制作高分辨率贴图，效率低下。


技术实现要素：

3.为了解决上述问题，本技术实施例提供了一种基于webgl的卷烟包装3d渲染方法、装置及电子设备。
4.第一方面，本技术实施例提供了一种基于webgl的卷烟包装3d渲染方法，所述方法包括：接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层；解析各分层设计结构，基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质；加载所述平面设计文件对应的3d模型，按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质。
5.优选的，所述接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层，包括：接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息拆分所述平面设计文件中的设计结构，用以使相同的所述印刷工艺步骤信息对应的各所述设计结构划分为同一分层组。
6.优选的，所述解析各分层设计结构，包括：逐层扫描各分层设计结构，确定各所述分层设计结构的矢量结构；基于所述矢量结构构建各所述分层设计结构的有效区域灰度图；
基于各所述分层设计结构对应的所述印刷工艺步骤信息获取工艺图片资源，并根据所述工艺图片资源在所述有效区域灰度图对应的裁剪区域中重新构建贴图素材；结合所述贴图素材与所述分层设计结构对应的颜色信息，生成配置信息。
7.优选的，所述基于所述矢量结构构建各所述分层设计结构的有效区域灰度图，包括：确定所述矢量结构对应的有效区域，在所述有效区域中填充第一颜色，并在除所述有效区域外的无效区域中填充第二颜色，得到各所述分层设计结构的有效区域灰度图。
8.优选的，所述基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质，包括：创建基础3d材质，并获取所述印刷工艺步骤信息对应的所述配置信息；基于所述配置信息修改所述基础3d材质的基础颜色，为所述基础3d材质叠加所述贴图素材；基于所述有效区域灰度图为所述基础3d材质创建透明通道后，得到3d材质。
9.优选的，所述按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质，包括：按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射形成所述透明通道对应的裁剪区域，并在各裁剪区域内映射渲染各所述3d材质。
10.第二方面，本技术实施例提供了一种基于webgl的卷烟包装3d渲染装置，所述装置包括：接收模块，用于接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层；解析模块，用于解析各分层设计结构，基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质；加载模块，用于加载所述平面设计文件对应的3d模型，按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质。
11.第三方面，本技术实施例提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面或第一方面的任意一种可能的实现方式提供的方法的步骤。
12.第四方面，本技术实施例提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面或第一方面的任意一种可能的实现方式提供的方法。
13.本发明的有益效果为：使用多层几何结构逐层依次映射的方式，使每一个图层对应一层几何结构，以此来模拟真实的分层印刷工艺，在保证高质量的渲染结果的同时，由于过程中所需的贴图数据直接来自于原始平面设计文件，无需额外制作高分辨的贴图，消除了前端崩溃的隐患，提高了整体工作效率。
附图说明
14.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例中所需使用的附
图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
15.图1为本技术实施例提供的一种基于webgl的卷烟包装3d渲染方法的流程示意图；图2为本技术实施例提供的一种基于webgl的卷烟包装3d渲染装置的结构示意图；图3为本技术实施例提供的一种电子设备的结构示意图。
具体实施方式
16.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述。
17.在下述介绍中，术语“第一”、“第二”仅为用于描述的目的，而不能理解为指示或暗示相对重要性。下述介绍提供了本技术的多个实施例，不同实施例之间可以替换或者合并组合，因此本技术也可认为包含所记载的相同和/或不同实施例的所有可能组合。因而，如果一个实施例包含特征a、b、c，另一个实施例包含特征b、d，那么本技术也应视为包括含有a、b、c、d的一个或多个所有其他可能的组合的实施例，尽管该实施例可能并未在以下内容中有明确的文字记载。
18.下面的描述提供了示例，并且不对权利要求书中阐述的范围、适用性或示例进行限制。可以在不脱离本技术内容的范围的情况下，对描述的元素的功能和布置做出改变。各个示例可以适当省略、替代或添加各种过程或组件。例如所描述的方法可以以所描述的顺序不同的顺序来执行，并且可以添加、省略或组合各种步骤。此外，可以将关于一些示例描述的特征组合到其他示例中。
19.参见图1，图1是本技术实施例提供的一种基于webgl的卷烟包装3d渲染方法的流程示意图。在本技术实施例中，所述方法包括：s101、接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层。
20.本技术的执行主体可以是 webgl的云端服务器。
21.在本技术实施例中，不同的卷烟包装盒在实际生产过程中的印刷工艺是不同的。因此，为了能够高质量的渲染出经过多道工艺处理后的卷烟包装盒的效果，云端服务器首先将会接收设计人员所发送的平面设计文件，即此次计划进行3d渲染的卷烟包装盒的平面设计相关文件信息。通过平面设计文件，能够确定出其在实际生产过程中需要进行哪些工艺步骤，并在预设的印刷工艺数据库中查询到对应的印刷工艺步骤信息。云端服务器会基于印刷工艺步骤信息来对整个平面设计文件中的设计结构进行拆分分层，以便于后续能够按照工艺顺序分别独立渲染叠加。
22.在一种可实施方式中，步骤s101包括：接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息拆分所述平面设计文件中的设计结构，用以使相同的所述印刷工艺步骤信息对应的各所述设计结构划分为同一分层组。
23.在本技术实施例中，由于在正常的工艺生产过程中，卷烟包装盒是根据印刷工艺来一道道进行印刷，故为了保证最终的渲染效果，云端服务器也会根据印刷工艺步骤信息
来进行分层，将相同工艺步骤的设计结构划分为同一个分层组。
24.s102、解析各分层设计结构，基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质。
25.所述分层设计结构在本技术实施例中可以理解为经过分层后的某一层设计结构。
26.在本技术实施例中，按照工艺步骤划分好了各个分层设计结构后，通过对分层设计结构的解析，便会根据每个分层设计结构所对应的印刷工艺步骤信息来为其构建生成对应的3d材质，生成的3d材质既可以表征对应的印刷工艺步骤在实际印刷时的材质效果。
27.在一种可实施方式中，所述解析各分层设计结构，包括：逐层扫描各分层设计结构，确定各所述分层设计结构的矢量结构；基于所述矢量结构构建各所述分层设计结构的有效区域灰度图；基于各所述分层设计结构对应的所述印刷工艺步骤信息获取工艺图片资源，并根据所述工艺图片资源在所述有效区域灰度图对应的裁剪区域中重新构建贴图素材；结合所述贴图素材与所述分层设计结构对应的颜色信息，生成配置信息。
28.在本技术实施例中，对于设计好的ai平面设计文件，可以将其转换成svg兼容格式，使其更便于后续处理。云端服务器根据分层，会逐层扫描各个分层设计结构，以此来确定各个分层设计结构分组的组下矢量结构。由于从平面设计文件所划分的各个分层在初始状态下是会具有很多平面内的无效区域的，故云端服务器需要根据矢量结构来构建出有效区域灰度图。此外，还将根据不同的印刷工艺步骤信息来获取不同的工艺图片资源，以此确定出在该工艺的作用下，包装盒应该展现出什么样的效果，进而在裁剪区域内重新绘制构建该3d材质的贴图素材。接着，还会将贴图素材与该层对应的颜色信息，即3d材质的基础颜色相结合，来保存各个分层的文件，生成配置信息便于后续调用。
29.在一种可实施方式中，所述基于所述矢量结构构建各所述分层设计结构的有效区域灰度图，包括：确定所述矢量结构对应的有效区域，在所述有效区域中填充第一颜色，并在除所述有效区域外的无效区域中填充第二颜色，得到各所述分层设计结构的有效区域灰度图。
30.在本技术实施例中，为了得到有效区域灰度图，对于矢量结构所在的区域，将其认作为有效区域，并向有效区域填充或设置第一颜色（例如白色）。而对于其他的无效区域，将会填充第二颜色（例如黑色），以此得出各个分层设计结构的有效区域灰度图。
31.在一种可实施方式中，所述基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质，包括：创建基础3d材质，并获取所述印刷工艺步骤信息对应的所述配置信息；基于所述配置信息修改所述基础3d材质的基础颜色，为所述基础3d材质叠加所述贴图素材；基于所述有效区域灰度图为所述基础3d材质创建透明通道后，得到3d材质。
32.在本技术实施例中，云端服务器首先会创建基础3d材质，并根据各个分层设计结构对应的各个印刷工艺步骤信息来获取相应的配置信息。接着将根据配置信息中的颜色信息以及贴图素材等来对基础3d材质的基础颜色进行颜色的修改以及贴图素材的叠加。在完成配置后，还会根据有效区域灰度图来创建透明通道，使得最终得到的3d材质是有裁剪区域的工艺材质。
33.s103、加载所述平面设计文件对应的3d模型，按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质。
34.在本技术实施例中，对于平面设计文件处理完成得到各个分层对应的材质之后，便能能够开始构建卷烟3d模型。具体而言，将按照印刷工艺步骤信息之间的工艺步骤相对顺序排序，以此来一层一层的获取每一个步骤所对应的3d材质，并基于3d模型的基础几何结构复制出与材质相同数量的几何层结构，最终根据材质与渲染设置的映射关系来一层层的将各个3d材质渲染至3d模型上，最终得到所需的卷烟包装盒模型。
35.在一种可实施方式中，所述按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质，包括：按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射形成所述透明通道对应的裁剪区域，并在各裁剪区域内映射渲染各所述3d材质。
36.在本技术实施例中，由于3d材质还带有透明通道相关的贴图信息，通过以此确定出裁剪区域，再在各个裁剪区域内映射渲染的方式，能够实现区域渲染的效果，以此进一步的模拟出真实的分层印刷工艺。
37.下面将结合附图2，对本技术实施例提供的基于webgl的卷烟包装3d渲染装置进行详细介绍。需要说明的是，附图2所示的基于webgl的卷烟包装3d渲染装置，用于执行本技术图1所示实施例的方法，为了便于说明，仅示出了与本技术实施例相关的部分，具体技术细节未揭示的，请参照本技术图1所示的实施例。
38.请参见图2，图2是本技术实施例提供的一种基于webgl的卷烟包装3d渲染装置的结构示意图。如图2所示，所述装置包括：接收模块201，用于接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层；解析模块202，用于解析各分层设计结构，基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质；加载模块203，用于加载所述平面设计文件对应的3d模型，按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质。
39.在一种可实施方式中，接收模块201包括：接收单元，用于接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息拆分所述平面设计文件中的设计结构，用以使相同的所述印刷工艺步骤信息对应的各所述设计结构划分为同一分层组。
40.在一种可实施方式中，解析模块202包括：扫描单元，用于逐层扫描各分层设计结构，确定各所述分层设计结构的矢量结构；第一构建单元，用于基于所述矢量结构构建各所述分层设计结构的有效区域灰度图；第二构建单元，用于基于各所述分层设计结构对应的所述印刷工艺步骤信息获取工艺图片资源，并根据所述工艺图片资源在所述有效区域灰度图对应的裁剪区域中重新构建贴图素材；结合单元，用于结合所述贴图素材与所述分层设计结构对应的颜色信息，生成配
置信息。
41.在一种可实施方式中，第一构建单元包括：填充元件，用于确定所述矢量结构对应的有效区域，在所述有效区域中填充第一颜色，并在除所述有效区域外的无效区域中填充第二颜色，得到各所述分层设计结构的有效区域灰度图。
42.在一种可实施方式中，解析模块202包括：创建单元，用于创建基础3d材质，并获取所述印刷工艺步骤信息对应的所述配置信息；修改单元，用于基于所述配置信息修改所述基础3d材质的基础颜色，为所述基础3d材质叠加所述贴图素材；第三构建单元，用于基于所述有效区域灰度图为所述基础3d材质创建透明通道后，得到3d材质。
43.在一种可实施方式中，加载模块203包括：渲染单元，用于按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射形成所述透明通道对应的裁剪区域，并在各裁剪区域内映射渲染各所述3d材质。
44.本领域的技术人员可以清楚地了解到本技术实施例的技术方案可借助软件和/或硬件来实现。本说明书中的“单元”和“模块”是指能够独立完成或与其他部件配合完成特定功能的软件和/或硬件，其中硬件例如可以是现场可编程门阵列（field－programmable gate array，fpga）、集成电路（integrated circuit，ic）等。
45.本技术实施例的各处理单元和/或模块，可通过实现本技术实施例所述的功能的模拟电路而实现，也可以通过执行本技术实施例所述的功能的软件而实现。
46.参见图3，其示出了本技术实施例所涉及的一种电子设备的结构示意图，该电子设备可以用于实施图1所示实施例中的方法。如图3所示，电子设备300可以包括：至少一个中央处理器301，至少一个网络接口304，用户接口303，存储器305，至少一个通信总线302。
47.其中，通信总线302用于实现这些组件之间的连接通信。
48.其中，用户接口303可以包括显示屏（display）、摄像头（camera），可选用户接口303还可以包括标准的有线接口、无线接口。
49.其中，网络接口304可选的可以包括标准的有线接口、无线接口（如wi-fi接口）。
50.其中，中央处理器301可以包括一个或者多个处理核心。中央处理器301利用各种接口和线路连接整个电子设备300内的各个部分，通过运行或执行存储在存储器305内的指令、程序、代码集或指令集，以及调用存储在存储器305内的数据，执行终端300的各种功能和处理数据。可选的，中央处理器301可以采用数字信号处理（digital signal processing，dsp）、现场可编程门阵列（field-programmable gate array，fpga）、可编程逻辑阵列（programmable logic array，pla）中的至少一种硬件形式来实现。中央处理器301可集成中央中央处理器（central processing unit，cpu）、图像中央处理器（graphics processing unit，gpu）和调制解调器等中的一种或几种的组合。其中，cpu主要处理操作系统、用户界面和应用程序等；gpu用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到中央处理器301中，单独通过一块芯片进行实现。
51.其中，存储器305可以包括随机存储器（random access memory，ram），也可以包括只读存储器（read-only memory）。可选的，该存储器305包括非瞬时性计算机可读介质（non-transitory computer-readable storage medium）。存储器305可用于存储指令、程序、代码、代码集或指令集。存储器305可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令（比如触控功能、声音播放功能、图像播放功能等）、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器305可选的还可以是至少一个位于远离前述中央处理器301的存储装置。如图3所示，作为一种计算机存储介质的存储器305中可以包括操作系统、网络通信模块、用户接口模块以及程序指令。
52.在图3所示的电子设备300中，用户接口303主要用于为用户提供输入的接口，获取用户输入的数据；而中央处理器301可以用于调用存储器305中存储的基于webgl的卷烟包装3d渲染应用程序，并具体执行以下操作：接收平面设计文件，基于印刷工艺数据库中的印刷工艺步骤信息处理所述平面设计文件，用以按照所述印刷工艺步骤信息对所述平面设计文件中的设计结构进行分层；解析各分层设计结构，基于所述印刷工艺步骤信息分别为各所述分层设计结构生成3d材质；加载所述平面设计文件对应的3d模型，按照所述印刷工艺步骤信息之间的工艺步骤顺序在所述3d模型上逐层映射渲染各所述3d材质。
53.本技术还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述方法的步骤。其中，计算机可读存储介质可以包括但不限于任何类型的盘，包括软盘、光盘、dvd、cd-rom、微型驱动器以及磁光盘、rom、ram、eprom、eeprom、dram、vram、闪速存储器设备、磁卡或光卡、纳米系统（包括分子存储器ic），或适合于存储指令和/或数据的任何类型的媒介或设备。
54.需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本技术所必须的。
55.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
56.在本技术所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些服务接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。
57.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目
的。
58.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
59.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备（可为个人计算机、服务器或者网络设备等）执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储器包括：u盘、只读存储器（read-only memory， rom）、随机存取存储器（random access memory，ram）、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
60.本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通进程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储器中，存储器可以包括：闪存盘、只读存储器（read-only memory， rom）、随机存取器（random access memory，ram）、磁盘或光盘等。
61.以上所述者，仅为本公开的示例性实施例，不能以此限定本公开的范围。即但凡依本公开教导所作的等效变化与修饰，皆仍属本公开涵盖的范围内。本领域技术人员在考虑说明书及实践这里的公开后，将容易想到本公开的其实施方案。本技术旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未记载的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的范围和精神由权利要求限定。