CN113704530A

Movatterモバイル変換

Info

Publication number: CN113704530A
Application number: CN202111002522.1A
Authority: CN
Inventors: 董慧凯; 王宇航; 曾鹏轩
Original assignee: Beijing Siming Qichuang Technology Co ltd
Current assignee: Beijing Siming Qichuang Technology Co ltd
Priority date: 2021-08-30
Filing date: 2021-08-30
Publication date: 2021-11-26

Abstract

Translated fromChinese

本申请提供一种图像处理方法、装置、电子设备及计算机可读存储介质。方法包括：将获得的SVG文件中的属性集转换成指定图像处理工具可识别的相应渲染指令；根据渲染指令，通过指定图像处理工具将SVG文件转换成可提取纹理的位图；根据位图生成供Unity引擎处理的纹理图。在本方案中，在Unity引擎对SVG文件渲染过程中，无需将SVG文件转换成三角形网格的方式进行渲染，而是将SVG文件转换成纹理图，从而有利于降低SVG文件渲染处理的运算量，提高渲染处理的实时性。

The present application provides an image processing method, apparatus, electronic device, and computer-readable storage medium. The method includes: converting the attribute set in the obtained SVG file into a corresponding rendering instruction identifiable by a designated image processing tool; according to the rendering instruction, converting the SVG file into a bitmap that can extract textures through the designated image processing tool; generating according to the bitmap Texture map for processing by the Unity engine. In this solution, during the rendering process of the SVG file by the Unity engine, it is not necessary to convert the SVG file into a triangular mesh for rendering, but the SVG file is converted into a texture map, which is beneficial to reduce the calculation amount of the SVG file rendering processing. , to improve the real-time performance of rendering processing.

Description

Image processing method, image processing device, electronic equipment and computer readable storage medium

Technical Field

The present application relates to the field of computer image processing, and in particular, to an image processing method, an image processing apparatus, an electronic device, and a computer-readable storage medium.

Background

The Unity engine is a tool commonly used for image processing in the fields of games, movie animation, and the like. Currently, the Unity engine cannot directly process vector graphics, for example, the Unity engine cannot directly process SVG files textually. When the Unity engine needs to process the texture of an SVG (Scalable Vector Graphics) file, the SVG file is usually rendered by converting the SVG file into a triangular mesh, and the processing method needs to generate more triangular meshes, which results in large computation amount and poor real-time performance for the SVG file.

Disclosure of Invention

An object of the embodiments of the present application is to provide an image processing method, an image processing apparatus, an electronic device, and a computer-readable storage medium, which can solve the problems of large computation amount and poor real-time performance when a Unity engine renders an SVG file.

In order to achieve the above object, embodiments of the present application are implemented as follows:

in a first aspect, an embodiment of the present application provides an image processing method, where the method includes: converting the attribute set in the obtained SVG file into a corresponding rendering instruction which can be identified by a designated image processing tool; converting the SVG file into a bitmap of extractable texture by the designated image processing tool according to the rendering instruction; and generating a texture map for processing by the Unity engine according to the bitmap.

In the above embodiment, the attribute set in the SVG file is converted into the corresponding rendering instruction recognizable by the designated image processing tool, and then the SVG file is converted into the bitmap capable of extracting the texture by the designated image processing tool, and then the texture map is generated.

With reference to the first aspect, in some optional embodiments, converting the obtained set of attributes in the SVG file into corresponding rendering instructions recognizable by a specified image processing tool includes:

and converting the parent node text label and the child node text label in the obtained SVG file attribute set into a first type of rendering instruction which can be recognized by the appointed image processing tool.

In the above embodiment, the parent node text label and the child node text label in the SVG file can be subsequently drawn in the bitmap by using the first type of rendering instruction, so that the problem that the Unity engine does not support the parent node text label and the child node text label in the SVG file can be improved.

and converting the obtained line label in the attribute set of the SVG file into a second type of rendering instruction which can be identified by the appointed image processing tool, wherein the line label comprises at least one of a straight line, a rectangle, a circle, an ellipse, a path, a multi-segment line and a polygon.

and converting the obtained transformation tags in the attribute set of the SVG file into a third type of rendering instructions recognizable by the specified image processing tool, wherein the transformation tags comprise at least one of rotation, translation and scaling.

and converting the filling, contour and opacity in the obtained attribute set of the SVG file into a fourth class of rendering instructions which can be recognized by the specified image processing tool.

With reference to the first aspect, in some optional embodiments, the method further comprises:

and performing image rendering on the texture map through the Unity engine, and displaying and outputting an image representing the rendered SVG file.

With reference to the first aspect, in some optional embodiments, before converting the set of attributes in the obtained SVG file into corresponding rendering instructions recognizable to a specified image processing tool, the method further comprises:

and analyzing the obtained SVG file according to an SAX analysis strategy to obtain the attribute set of the SVG file.

With reference to the first aspect, in some alternative embodiments, the specified image processing tool is a skisharp tool.

In the above embodiment, the skeiasharp tool can be used in different operating systems, so that the skeiasharp tool has a cross-platform function, which is beneficial to expanding applicable scenes.

In a second aspect, an embodiment of the present application further provides an image processing apparatus, including:

an instruction generating unit, which is used for converting the attribute set in the obtained SVG file into a corresponding rendering instruction which can be identified by a specified image processing tool;

an image conversion unit for converting the SVG file into a bitmap of extractable texture by the specified image processing tool according to the rendering instruction;

and the texture processing unit is used for generating a texture map for the Unity engine to process according to the bitmap.

In a third aspect, an embodiment of the present application further provides an electronic device, where the electronic device includes a processor and a memory coupled to each other, and a computer program is stored in the memory, and when the computer program is executed by the processor, the electronic device is caused to perform the method described above.

In a fourth aspect, the present application further provides a computer-readable storage medium, in which a computer program is stored, and when the computer program runs on a computer, the computer is caused to execute the above method.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and that those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.

Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Fig. 2 is a schematic flowchart of an image processing method according to an embodiment of the present application.

Fig. 3 is a second flowchart of an image processing method according to the embodiment of the present application.

Fig. 4 is a block diagram of an image processing apparatus according to an embodiment of the present application.

Icon: 10-an electronic device; 11-a processing module; 12-a storage module; 200-an image processing apparatus; 210-an instruction generation unit; 220-an image conversion unit; 230-texture processing unit.

Detailed Description

The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. It should be noted that the terms "first," "second," and the like are used merely to distinguish one description from another, and are not intended to indicate or imply relative importance. The embodiments described below and the features of the embodiments can be combined with each other without conflict.

Referring to fig. 1, the present application provides anelectronic device 10, which can be used to perform conversion processing on an SVG file, so that a Unity engine can perform image rendering on the converted SVG file. Theelectronic device 10 may be, but is not limited to, a personal computer, a server, or the like.

Theelectronic device 10 may include aprocessing module 11 and astorage module 12. Thememory module 12 stores therein a computer program which, when executed by theprocessing module 11, enables theelectronic device 10 to perform the steps of the method described below.

Theprocessing module 11 and thestorage module 12 are electrically connected directly or indirectly to realize data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines.

Referring to fig. 2, an embodiment of the present application further provides an image processing method, which can be applied to theelectronic device 10, and theelectronic device 10 executes or implements the steps of the method. The method may comprise the steps of:

step S110, converting the attribute set in the obtained SVG file into a corresponding rendering instruction which can be identified by a designated image processing tool;

step S120, converting the SVG file into a bitmap with extractable texture through the designated image processing tool according to the rendering instruction;

step S130, generating a texture map for the Unity engine to process according to the bitmap.

In the above embodiment, the attribute set in the SVG file is converted into the corresponding rendering instruction recognizable by the designated image processing tool, and then the SVG file is converted into the bitmap capable of extracting the texture by the designated image processing tool, and then the bitmap is generated, so that in the process of rendering the SVG file by the Unity engine, the SVG file is converted into the texture map for image rendering, and the SVG file is rendered in a manner of converting the SVG file into the triangular mesh, which is beneficial to reducing the computation amount of the SVG file rendering and improving the real-time performance of the rendering.

The individual steps of the process are explained in detail below, as follows:

understandably, when processing the SVG image file, theelectronic device 10 obtains in advance the SVG file and the attribute set of the SVG file. The way in which the SVG file is obtained by theelectronic device 10 can be flexibly determined according to actual situations. For example, the SVG file may be a file automatically generated by theelectronic device 10, or theelectronic device 10 may obtain the SVG file from another device storing the SVG file, and the way of obtaining the SVG file is not particularly limited herein.

When processing the SVG image file, if the attribute set of the SVG file does not exist in theelectronic device 10, the method includes, before step S110: and analyzing the obtained SVG file according to an SAX analysis strategy to obtain the attribute set of the SVG file.

SAX is shorthand for English "Simple API for XML"; XML is shorthand for the English "Extensible Markup Language," which refers to Extensible Markup Language. The SAX parsing strategy is an alternative mode of XML parsing, and can parse SVG files to obtain various attribute information in the SVG files. That is, theelectronic device 10 may rapidly parse the SVG file through the SAX parsing policy, so as to obtain various types of attribute information of the SVG file as an attribute set.

In step S110, theelectronic device 10 has previously obtained the SVG file and the attribute set of the SVG file. In the attribute set of the SVG file, a plurality of attributes of the SVG file are included. For example, the set of attributes includes, but is not limited to, parent text labels, child text labels, line labels, transformation labels, fill, outline, opacity, and the like.

Electronic device 10 may utilize a scripting program to convert different attributes in the SVG file into different rendering instructions for a given image processing tool to convert the SVG file into a bitmap. Wherein, a script program is pre-installed in theelectronic device 10, and the script program can be compiled according to actual situations as long as the attributes in the SVG file can be converted into corresponding rendering instructions.

As an alternative implementation, step S110 may include:

The contents of the attributes in an SVG file are well known to those skilled in the art. For example, a parent text tag refers to a text tag and a child text tag refers to a tspan tag.Electronic device 10 may convert the text tags, tspan tags in the SVG file attribute set into rendering instructions of the first type by specifying an image processing tool. In this manner, the designated image processing tool may subsequently convert the text tags in the SVG file into a new bitmap. When the Unity engine carries out image rendering subsequently, the text label and the tspan label can be supported so as to meet the requirement of corresponding projects with text processing and solve the problem that the Unity engine cannot support the text label and the tspan label.

As an alternative implementation, step S110 may include:

and converting the obtained line label in the attribute set of the SVG file into a second type of rendering instruction which can be recognized by the appointed image processing tool.

Understandably, different attributes in an SVG file may correspond to different rendering instructions. Line labels include, but are not limited to, straight lines, rectangles, circles, ellipses, paths, polylines, polygons, and the like. By converting the line labels into the second type rendering instructions, the specified image processing tool can convert the line labels such as straight lines, rectangles, circles, ellipses, paths, multi-segment lines, polygons and the like in the SVG file into a new bitmap, and the line characteristics such as straight lines, rectangles, circles, ellipses, paths, multi-segment lines, polygons and the like are prevented from being omitted in the converted bitmap.

As an alternative implementation, step S110 may include:

and converting the obtained transformation tags in the attribute set of the SVG file into a third type of rendering instruction which can be recognized by the specified image processing tool. Wherein the transformation tags include, but are not limited to, rotation, translation, scaling, and the like.

In this embodiment, by converting the transformation tag of the SVG file into the third type rendering instruction, the omission of transformation attributes such as rotation, translation, scaling, and the like in the converted bitmap can be avoided.

As an alternative implementation, step S110 may include:

In the embodiment, filling, outline and opacity in the SVG file are converted into the fourth type of rendering instructions, so that the attributes such as filling, outline and opacity in the SVG file can be converted into a bitmap, and the converted bitmap is prevented from omitting the attribute information such as filling, outline and opacity in the SVG file.

In this embodiment, theelectronic device 10 may also convert other attributes in the SVG file into corresponding rendering instructions. For example, image tags in the attribute set of the SVG file are converted into rendering instructions of a fifth type, and attributes such as linear fading, radial fading and the like in the attribute set of the SVG file are converted into rendering instructions of a sixth type.

In the process of converting the SVG file into a new bitmap, a designated image processing tool cannot directly convert or draw the attribute set of the SVG file into the bitmap, and each attribute in the SVG file needs to be converted into a rendering instruction which can be recognized by the designated image processing tool, and then the attribute set of the SVG file is converted or drawn into the bitmap through the rendering instruction.

In step S120, after the rendering instruction corresponding to each type of attribute of the SVG file is obtained, the SVG file can be converted into a corresponding bitmap by using the rendering instruction through a designated image processing tool. Wherein, the bitmap obtained by conversion can extract texture resources.

The designated image processing tool can be a software tool capable of converting the SVG file into a bitmap capable of extracting textures, and can be flexibly determined according to actual conditions. For example, the designated image tool may be a SkiaSharp tool, or other tool having similar functionality as the SkiaSharp tool.

For example, the designated image tool may be a tool such as CoreGraphics under the iOS platform, com. Among them, the tools such as CoreGraphics, com. android. graphics, and system. drawing have functions similar to the skisharp tool, and are well known to those skilled in the art.

Where SkiaSharp is a CSharp language wrapper to the Skia engine, the tool can be used in the Unity engine for image processing. The SkiaSharp can be used in a cross-platform manner, for example, in different operating systems such as a Windows system and an Android system. The Skia engine and CSharp languages are well known to those skilled in the art and will not be described in detail herein.

In step S130, theelectronic device 10 may generate a texture map for Unity by reading the pixel values of the bitmap obtained by conversion. The way of generating the texture map is well known to those skilled in the art and will not be described herein.

Referring to fig. 3, the image processing method provided in this embodiment may further include step S140. And step S140, performing image rendering on the texture map through the Unity engine, and displaying and outputting an image representing the rendered SVG file.

In this embodiment, an SVG file may be quickly converted by theelectronic device 10 into a texture map for use by the Unity engine. After the texture map is obtained, the Unity engine can quickly perform texture rendering based on the texture map, so as to obtain a rendered image, wherein the rendered image is an image obtained by rendering the SVG file by the Unity engine.

Assuming that the image processing tool is designated as a SkiaSharp tool and the converted bitmap of the SVG file is a bitmap, the implementation flow of the method will be described as follows:

firstly, when converting each attribute in the SVG file into a corresponding rendering instruction, theelectronic device 10 may convert an image tag in the SVG file into an SKBitmap instruction (referred to as a fifth type rendering instruction), so that when performing bitmap conversion, the image tag in the SVG file may be drawn into a bitmap by using a DrawBitmap instruction of SKCanvas, which is a module in a skisharp tool and is well known to those skilled in the art;

and converting a text tag and a tspan tag in the SVG file into a DrawText instruction (referring to a first class rendering instruction), so that when bitmap conversion is carried out, the DrawText instruction of SKCanvas can be used for drawing the text in the SVG file into a bitmap.

Line labels such as line, rectangle, circle, ellipse, path, polyline and polygon in the SVG file are converted into SKPath instructions (referring to a second type rendering instruction), so that the line labels in the SVG file can be drawn into bitmaps by using the DrawPath instructions of SKCanvas when bitmap conversion is carried out.

The transform attribute in the SVG file is converted into an SKMatrix instruction (referring to a third type rendering instruction), the transform attribute refers to a transformation tag and may include attributes of rotation, translation, scaling and the like of an image, and thus, the transform attribute in the SVG file may be added through the SKMatrix instruction when a bitmap is drawn.

And converting the attributes such as fill, stroke and opacity in the SVG file into an SKPaint instruction (referring to a fourth type rendering instruction), so that the attributes such as fill, stroke and opacity in the SVG file can be added through the SKPaint instruction when the bitmap is drawn.

The attributes such as linear gradient and radial gradient in the SVG file are converted into SKShader instruction (referring to the sixth type of rendering instruction), so that the attributes such as linear gradient and radial gradient in the SVG file can be added through the SKShader instruction when the bitmap is rendered.

In addition, theelectronic device 10 can push and pop the drawing states of the container class or the reference class tags such as g, a, use, defs, etc. in the SVG file to ensure that the SVG file can be normally converted into a bitmap. Wherein g, a, use, defs are container class or reference class labels in the SVG file, which are well known to those skilled in the art. Attributes such as viewport and viewbox in the SVG file may be used for control of the Canvas.

When the text is drawn, that is, when a DrawText instruction is called, the text can be cut into a normal text and an expressive text, wherein the normal text is drawn by using a text font, and the expressive text is drawn by using an expressive character font. The common text is a font text, such as english letters, numbers, chinese characters, and the like. The expression text is character text, such as ^ A _, so that characters can be more comprehensively drawn.

And secondly, after various rendering instructions of attributes in the SVG file are obtained, converting the SVG file into a bitmap 'SKBitmap' by using SkiaSharp according to the various rendering instructions, and finally reading a pixel value in the SKBitmap to generate a Texture resource 'Texture 2D' used by the Unity engine. When the subsequent Unity engine carries out Texture rendering, image rendering can be realized based on Texture 2D.

Referring to fig. 4, animage processing apparatus 200 is further provided in an embodiment of the present application, which can be applied to theelectronic device 10 for executing steps of the method. Theimage processing apparatus 200 includes at least one software functional module which can be stored in the form of software or Firmware (Firmware) in thestorage module 12 or solidified in an Operating System (OS) of theelectronic device 10. Theprocessing module 11 is used for executing executable modules stored in thestorage module 12, such as software functional modules and computer programs included in theimage processing apparatus 200.

Theimage processing apparatus 200 may include aninstruction generating unit 210, animage converting unit 220, and atexture processing unit 230, and may perform the following operation steps:

aninstruction generating unit 210 for converting the attribute set in the obtained SVG file into a corresponding rendering instruction recognizable by a specified image processing tool;

animage conversion unit 220 for converting the SVG file into a bitmap of extractable texture by the specified image processing tool according to the rendering instruction;

and thetexture processing unit 230 is configured to generate a texture map for the Unity engine to process according to the bitmap.

Optionally, theimage processing apparatus 200 may further include a parsing unit. The parsing unit is configured to parse the obtained SVG file according to the SAX parsing policy to obtain the attribute set of the SVG file before theinstruction generating unit 210 executes step S110

Optionally, theinstruction generating unit 210 may be further configured to: and converting the parent node text label and the child node text label in the obtained SVG file attribute set into a first type of rendering instruction which can be recognized by the appointed image processing tool.

Optionally, theinstruction generating unit 210 may be further configured to: and converting the obtained line label in the attribute set of the SVG file into a second type of rendering instruction which can be identified by the appointed image processing tool, wherein the line label comprises at least one of a straight line, a rectangle, a circle, an ellipse, a path, a multi-segment line and a polygon.

Optionally, theinstruction generating unit 210 may be further configured to: and converting the obtained transformation tags in the attribute set of the SVG file into a third type of rendering instructions recognizable by the specified image processing tool, wherein the transformation tags comprise at least one of rotation, translation and scaling.

Optionally, theinstruction generating unit 210 may be further configured to: and converting the filling, contour and opacity in the obtained attribute set of the SVG file into a fourth class of rendering instructions which can be recognized by the specified image processing tool.

Optionally, theimage processing apparatus 200 may further include a rendering display unit, configured to perform image rendering on the texture map through the Unity engine, and display and output an image representing the rendered SVG file.

In this embodiment, theprocessing module 11 may be an integrated circuit chip having signal processing capability. Theprocessing module 11 may be a general-purpose processor. For example, the processor may be a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), a Network Processor (NP), or the like; the method, the steps and the logic block diagram disclosed in the embodiments of the present Application can also be implemented or executed by a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other Programmable logic device, a discrete Gate or transistor logic device, or a discrete hardware component.

Thememory module 12 may be, but is not limited to, a random access memory, a read only memory, a programmable read only memory, an erasable programmable read only memory, an electrically erasable programmable read only memory, and the like. In this embodiment, thestorage module 12 may be used to store SVG files, texture resources, and the like. Of course, thestorage module 12 may also be used to store a program, and theprocessing module 11 executes the program after receiving the execution instruction.

It is understood that the configuration shown in fig. 1 is only a schematic configuration of theelectronic device 10, and that theelectronic device 10 may further include more components than those shown in fig. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination thereof.

It should be noted that, as will be clear to those skilled in the art, for convenience and brevity of description, the specific working process of theelectronic device 10 described above may refer to the corresponding process of each step in the foregoing method, and will not be described in too much detail herein.

The embodiment of the application also provides a computer readable storage medium. The computer-readable storage medium has stored therein a computer program which, when run on a computer, causes the computer to execute the image processing method as described in the above embodiments.

From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by hardware, or by software plus a necessary general hardware platform, and based on such understanding, the technical solution of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a usb disk, a removable hard disk, etc.), and includes several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the method described in the embodiments of the present application.

In summary, in the scheme, the attribute set in the SVG file is converted into the corresponding rendering instruction recognizable by the designated image processing tool, then the SVG file is converted into the bitmap capable of extracting the texture by the designated image processing tool, and the texture map is generated, so that the SVG file does not need to be converted into the triangular mesh for rendering in the process of rendering the SVG file by the Unity engine, thereby being beneficial to reducing the computation amount of the SVG file rendering processing and improving the real-time performance of the rendering processing.

In the embodiments provided in the present application, it should be understood that the disclosed apparatus, system, and method may be implemented in other ways. The apparatus, system, and method embodiments described above are illustrative only, as the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions. In addition, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

The above description is only an example of the present application and is not intended to limit the scope of the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.