CN114969869A

CN114969869A - Rendering method, system, device and medium based on online clothing design

Info

Publication number: CN114969869A
Application number: CN202210909536.XA
Authority: CN
Inventors: 姜清奎; 张凡宇
Original assignee: Hangzhou Cailian Technology Co ltd
Current assignee: Hangzhou Cailian Technology Co ltd
Priority date: 2022-07-29
Filing date: 2022-07-29
Publication date: 2022-08-30

Abstract

The application relates to a rendering method, a system, a device and a medium based on online clothing design, wherein the method comprises the following steps: acquiring a custom design template, and performing data analysis on the custom design template to obtain analyzed template data; respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture. Through the application, the problems that the rendering effect is poor, the real-time performance is poor and the accuracy of 3D deformation is not high when the online clothing design is rendered are solved, the reality of the real-time performance and the rendering effect is improved, and the user experience is improved.

Description

Rendering method, system, device and medium based on online clothing design

Technical Field

The present application relates to the field of 3D rendering technologies, and in particular, to a rendering method, system, device, and medium based on online clothing design.

Background

With the rapid development of the flexible supply chain of garments, it becomes possible for users to customize garment designs. Specifically, when performing online garment design, some currently used tools for online garment design provided by pod (print on demand) platforms have problems of poor rendering effect and low accuracy of 3D deformation. For example, a rendering engine renders in a simple mapping manner without performing positioning correction on a picture, so that the rendered picture is too stiff and lacks real texture, rendering effect is not real enough, 3D visual effect cannot be restored, and 3D deformation map of the picture is not accurate enough and has a too large difference from real clothing effect. In addition, the existing rendering and displaying engine usually selects to perform back-end operation due to performance limitation, so that rendering real-time performance is poor, real-time rendering and displaying cannot be achieved, and user experience is poor.

At present, no effective solution is provided for the problems of poor rendering effect, poor real-time performance and low accuracy of 3D deformation in the prior art when online costume design is rendered.

Disclosure of Invention

The embodiment of the application provides a rendering method, a rendering system, a rendering device and a rendering medium based on online clothing design, and aims to at least solve the problems of poor rendering effect, poor real-time performance and low accuracy of 3D deformation when the online clothing design is rendered in the related technology.

In a first aspect, an embodiment of the present application provides a rendering method based on online costume design, where the method includes:

acquiring a custom design template, and performing data analysis on the custom design template to obtain analyzed template data;

respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture.

In some of these embodiments, prior to obtaining the custom design template, the method includes:

presetting template design parameters, and carrying out template design and data processing on clothes on canvas according to the design parameters to obtain the custom design template.

In some embodiments, the obtaining of the 3D visual deformation map corresponding to the template through the bezier surface or the 3D modeling conversion includes:

and carrying out 3D visual deformation through a Bezier curved surface or 3D modeling to obtain a corresponding mesh, carrying out triangular segmentation according to the mesh, and carrying out uv mapping to obtain a corresponding 3D visual deformation diagram.

In some of these embodiments, prior to warp transforming the 2D photograph by bezier surfaces or 3D modeling, the method comprises:

and carrying out positioning correction on the template element through the correction checkerboard.

In some embodiments, the image rendering of the 3D visual deformation map through a custom webGL pipeline comprises:

acquiring a pattern material on the 3D visual deformation graph, and analyzing the material by combining a mask to obtain mask data of the current material;

setting a layer mask according to the mask data, and performing mixed superposition on the original picture and the layer mask picture by setting a positive film bottom-folding mode and a normal mode to obtain a processed picture;

carrying out UV mapping on the current preprocessed picture according to a deformation vertex and a UV mapping vertex in the webGL pipeline;

and adjusting image parameters of the picture subjected to UV mapping, and superposing texture layers in a positive bottom-superposing mode to obtain a final rendered 2D picture.

In some embodiments, after obtaining the final rendered image, the method further comprises:

and local real-time rendering is carried out on the image every time the image is dragged.

In a second aspect, an embodiment of the present application provides an online costume design-based rendering system, including:

the acquisition module is used for acquiring a custom design template and analyzing data of the custom design template to obtain analyzed template data;

the rendering module is used for respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture.

In some of these embodiments, the system further comprises a design module that, prior to obtaining the custom design template,

the design module is used for presetting template design parameters, and performing template design and data processing on clothes on canvas according to the design parameters to obtain the custom design template.

In a third aspect, an embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and when the processor executes the computer program, the processor implements the rendering method based on online costume design as described in the first aspect.

In a fourth aspect, the present application provides a storage medium, on which a computer program is stored, which when executed by a processor, implements the rendering method based on online clothing design as described in the first aspect above.

Compared with the related art, the rendering method based on the online clothing design, provided by the embodiment of the application, is used for obtaining the custom design template, and performing data analysis on the custom design template to obtain the analyzed template data; respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture.

In the application, a whole set of self-defined design template is designed through off-line software, and is linked and analyzed to the on-line customized rendering engine to perform corresponding clothes rendering, so that an on-line design display platform capable of rendering in real time is formed, and the problems of poor rendering effect, poor real-time performance and low accuracy of 3D deformation in the prior art when on-line clothes design is rendered are solved. In addition, the beneficial effect of this application still includes: 1. through the design of multiple layers, the requirement that both a dark color system and a light color system have good rendering effect can be met; 2. the three-dimensional effect and the authenticity of a rendered picture are ensured through 3D visual deformation; 3. and the authenticity of the material graph to the effect graph is further improved through image parameter adjustment.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a schematic application environment diagram of a rendering method based on online clothing design according to an embodiment of the application;

FIG. 2 is a flow chart of a rendering method based on online apparel design according to an embodiment of the application;

FIG. 3 is a block diagram of a custom design template according to an embodiment of the present application;

FIG. 4 is a checkerboard plot of material correction according to an embodiment of the present application;

FIG. 5 is a rendering effect diagram according to an embodiment of the present application;

FIG. 6 is a flow diagram of an online rendering according to an embodiment of the present application;

FIG. 7 is a schematic diagram illustrating a process of warping picture deformation according to an embodiment of the present application;

FIG. 8 is a block diagram of a rendering system based on online garment design according to an embodiment of the application;

FIG. 9 is a block diagram of another rendering system based on online apparel design according to an embodiment of the present application;

fig. 10 is an internal structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments provided in the present application without any inventive step are within the scope of protection of the present application. Moreover, it should be appreciated that in the development of any such actual implementation, as in any engineering or design project, numerous implementation-specific decisions must be made to achieve the developers' specific goals, such as compliance with system-related and business-related constraints, which may vary from one implementation to another.

Reference in the specification to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the specification. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of ordinary skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments without conflict.

Unless defined otherwise, technical or scientific terms referred to herein shall have the ordinary meaning as understood by those of ordinary skill in the art to which this application belongs. Reference to "a," "an," "the," and similar words throughout this application are not to be construed as limiting in number, and may refer to the singular or the plural. The use of the terms "including," "comprising," "having," and any variations thereof herein, is meant to cover a non-exclusive inclusion; for example, a process, method, system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or elements, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus. Reference to "connected," "coupled," and the like in this application is not intended to be limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. Reference herein to "a plurality" means greater than or equal to two. "and/or" describes an association relationship of associated objects, meaning that three relationships may exist, for example, "A and/or B" may mean: a exists alone, A and B exist simultaneously, and B exists alone. Reference herein to the terms "first," "second," "third," and the like, are merely to distinguish similar objects and do not denote a particular ordering for the objects.

The rendering method based on online clothing design provided by the application can be applied to an application environment shown in fig. 1, and fig. 1 is an application environment schematic diagram of the rendering method based on online clothing design according to the embodiment of the application, as shown in fig. 1. The terminal 11 and the server 10 communicate with each other via a network. The server 10 acquires a custom design template, and performs data analysis on the custom design template to obtain analyzed template data; acquiring a custom design template, and performing data analysis on the custom design template to obtain analyzed template data; respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally, the rendered 3D model and 2D picture are obtained and displayed on the terminal 11. The terminal 11 may be, but not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices, and the server 10 may be implemented by an independent server or a server cluster formed by a plurality of servers.

The embodiment provides a rendering method based on online costume design, fig. 2 is a flowchart of the rendering method based on online costume design according to the embodiment of the application, and as shown in fig. 2, the flowchart includes the following steps:

step S201, obtaining a custom design template, and performing data analysis on the custom design template to obtain analyzed template data;

preferably, before the custom design template is obtained, template design parameters are preset, and the off-line software, such as image processing software like ps, is used for performing template design and data processing on the garment on the software canvas according to the design parameters to obtain the custom design template. Fig. 3 is a structural diagram of a custom design template according to an embodiment of the present application, and as shown in fig. 3, the custom design template of this example mainly includes a design layer and design parameters, where the design layer of the template includes a texture layer and a mask layer, and the design parameters include an image enhancement parameter and a 3D deformation parameter. The image enhancement parameters are used for adjusting image parameters such as brightness, saturation, hue and the like during subsequent online rendering; the 3D deformation parameters are triangle vertex data used for subsequent 3D model and 2D photo deformation. In addition, the customized design template in this embodiment further includes design content, tailoring logic of the garment, printing logic, and the like preset by the designer.

And after the custom design template is obtained on the offline image processing software, packaging the custom design template, and putting the custom design template into an online customized rendering engine, wherein the rendering engine corresponds to the offline image processing software, and performing data analysis on the custom design template through the rendering engine to obtain the analyzed template data for subsequent image rendering.

Step S202, respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture.

Fig. 4 is a diagram of a material correction chessboard according to an embodiment of the present application, fig. 5 is a rendering effect diagram according to an embodiment of the present application, fig. 6 is a flowchart of an online rendering according to an embodiment of the present application, and fig. 7 is a schematic diagram of a flow of a picture deformation warping according to an embodiment of the present application, as shown in fig. 4-7. Respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise:

3D rendering process: as shown in fig. 6, the parsed 3D model data is rendered on a 3D engine. Specifically, a 3D model is obtained first, then a material of a custom design template is split into a plurality of small triangles through cut-part modeling, then points on a template plane are mapped into the 3D model through uv mapping, and real-time rendering of a web end is performed through a rendering engine, for example, Babylon. Thus, a rendered 3D model is obtained, as shown in fig. 5, the 3D model can be rotated by 360 degrees to assist the 2D photo, and the style and the look of the garment can be more comprehensively shown.

2D rendering process: as shown in fig. 6, the parsed 2D custom template data is sent to the webGL engine of the front-end platform, and 2D rendering is performed on the template data. Since the 2D picture is a real shot picture of the model, before the picture is rendered, positioning correction is firstly needed, as shown in fig. 4, the template material is placed on a correction chessboard, and the template material is positioned and corrected through the correction chessboard, so that an accurate clothing pattern picture on the model body is obtained. Then, the corrected 2D photo is subjected to distortion conversion through a bezier surface or 3D modeling, so as to obtain a 3D visual distortion map corresponding to the 2D photo, as shown in fig. 7, specifically including: respectively obtaining a photo of a model wearing white clothes and a photo of a model wearing colored chessboard clothes, then adding template material pictures to the white mold, setting grids n x m, then carrying out Bessel deformation setting on the white mold added with the materials by contrasting the colored mold so as to make the materials between the white mold and the colored mold consistent, and finally analyzing the original grid and the deformed grid to obtain a corresponding 3D visual deformation graph. The deformation and distortion of the step can really show the wrinkle of clothes worn on the model in the picture. The accuracy of 3D deformation is improved as a whole.

After the distortion deformation is finished, the image rendering is performed on the picture subjected to the 3D visual deformation through the customized webGL pipeline in the embodiment, specifically:

s1, obtaining pattern materials on the 3D visual deformation graph, and analyzing the materials by combining masks to obtain mask data of the current materials;

and S2, setting a layer mask according to the mask data, and performing mixed superposition on the original picture and the layer mask picture by setting a positive film bottom-overlapping mode and a normal mode to obtain a processed picture. The positive film bottom-overlapping mode and the normal mode are mixing functions and are used for mixing and overlapping calculation of the pictures, and therefore redundant parts in the pictures are removed.

S3, performing UV mapping on the processed picture according to deformation vertex data of each triangle in the webGL pipeline and UV mapping coordinate data corresponding to each triangle;

and S4, adjusting image parameters of the picture subjected to the UV mapping. Because the cloth is inconsistent with the environment of the shot model, the environmental parameters need to be adjusted and unified, thereby achieving better rendering effect. Therefore, in this step, image parameter adjustment needs to be performed on the mapped image, where the image parameters that need to be adjusted generally include: brightness, saturation, hue, curve, color filter, etc. Thereby further ensuring the quality of the rendering effect graph.

S5, superimposing the texture layer through the front-to-back mode to obtain the final rendered 2D picture, as shown in fig. 5. In the step, the rendering of the deep color material can be optimized and the texture of the clothes can be kept through the mode of superposing the texture on the top layer and superposing the texture on the front piece. Effectively restores the relatively real clothing effect of the image.

It should be noted that the above steps S4 and S5 may be reversed, and the result is not affected.

In conclusion, the online 3D and 2D rendering in the steps can render 3D and 2D images in real time, so that the working efficiency is improved; the wrinkle sense of clothes worn on the model in the image can be really displayed, and the problems that the rendered image is too stiff and lacks real texture sense in the prior art are solved, so that the rendering effect is more real, the 3D visual effect is restored, and the experience sense of a user is improved.

Through the steps S201 to S202, in this embodiment, a whole set of custom design templates is designed through offline software, and is linked and analyzed to an online customized rendering engine to perform corresponding garment rendering, so as to form an online design display platform capable of performing online and offline design linkage and real-time rendering, and solve the problems of poor rendering effect, poor real-time performance and low accuracy of 3D deformation during rendering of online garment design in the related art. The real-time performance and the reality of the rendering effect are improved, and the user experience is improved.

In some embodiments, after the final rendered image is obtained, each time the user drags the image, the server performs local real-time rendering on the image, so as to ensure a real-time rendering effect.

It should be noted that the steps illustrated in the above-described flow diagrams or in the flow diagrams of the figures may be performed in a computer system, such as a set of computer-executable instructions, and that, although a logical order is illustrated in the flow diagrams, in some cases, the steps illustrated or described may be performed in an order different than here.

The embodiment also provides a rendering system based on online costume design, which is used for implementing the above embodiments and preferred embodiments, and the description of the system is omitted. As used hereinafter, the terms "module," "unit," "subunit," and the like may implement a combination of software and/or hardware for a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware or a combination of software and hardware is also possible and contemplated.

Fig. 8 is a block diagram of a rendering system based on online clothing design according to an embodiment of the present application, and as shown in fig. 8, the system includes an obtaining module 81 and a rendering module 82:

the obtaining module 81 is configured to obtain a custom design template, and perform data analysis on the custom design template to obtain analyzed template data; the rendering module 82 is configured to perform online 3D and 2D rendering on the garment according to the parsed template data, and includes the specific steps of: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining the rendered 3D model and 2D picture.

Through the system, a whole set of custom design template is designed through offline software in the embodiment, the acquisition module 81 acquires the custom design template, the custom design template is in linkage analysis to an online customized rendering engine, corresponding clothing rendering is performed through the rendering module 82, an online design display platform which is in online-offline design linkage and can be rendered in real time is formed, and the problems that the rendering effect is poor, the real-time performance is poor and the accuracy of 3D deformation is not high when online clothing design is rendered in the related technology are solved. The real-time performance and the reality of the rendering effect are improved, and the user experience is improved.

In some embodiments, the system further includes a design module, and fig. 9 is a block diagram of a rendering system based on online clothing design according to an embodiment of the present application, and as shown in fig. 9, the system includes an obtaining module 81, a rendering module 82, and a design module 91. Before obtaining the custom design template, the design module 91 is configured to preset template design parameters, and perform template design and data processing on a software canvas through the design parameters by using offline software, such as image processing software like ps, to obtain the custom design template. The custom design template comprises design content preset by a designer, sewing logic of clothes, printing logic and the like.

It should be noted that, for specific examples in this embodiment, reference may be made to examples described in the foregoing embodiments and optional implementations, and details of this embodiment are not described herein again.

Note that each of the modules may be a functional module or a program module, and may be implemented by software or hardware. For a module implemented by hardware, the modules may be located in the same processor; or the modules can be respectively positioned in different processors in any combination.

The present embodiment also provides an electronic device comprising a memory having a computer program stored therein and a processor configured to execute the computer program to perform the steps of any of the above method embodiments.

Optionally, the electronic apparatus may further include a transmission device and an input/output device, wherein the transmission device is connected to the processor, and the input/output device is connected to the processor.

In addition, in combination with the rendering method based on online costume design in the above embodiments, the embodiments of the present application may provide a storage medium to implement. The storage medium having stored thereon a computer program; the computer program, when executed by a processor, implements any one of the rendering methods in the above embodiments based on online apparel design.

In one embodiment, a computer device is provided, which may be a terminal. The computer device comprises a processor, a memory, a network interface, a display screen and an input device which are connected through a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement an online apparel design based rendering method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.

In one embodiment, fig. 10 is a schematic diagram of an internal structure of an electronic device according to an embodiment of the present application, and as shown in fig. 10, there is provided an electronic device, which may be a server, and its internal structure diagram may be as shown in fig. 10. The electronic device comprises a processor, a network interface, an internal memory and a non-volatile memory connected by an internal bus, wherein the non-volatile memory stores an operating system, a computer program and a database. The processor is used for providing calculation and control capability, the network interface is used for communicating with an external terminal through network connection, the internal memory is used for providing an environment for an operating system and running of a computer program, the computer program is executed by the processor to realize a rendering method based on-line clothing design, and the database is used for storing data.

Those skilled in the art will appreciate that the architecture shown in fig. 10 is merely a block diagram of some of the structures associated with the present solution and does not constitute a limitation on the electronic devices to which the present solution applies, and that a particular electronic device may include more or less components than those shown, or combine certain components, or have a different arrangement of components.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

It should be understood by those skilled in the art that various technical features of the above-described embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above-described embodiments are not described, however, so long as there is no contradiction between the combinations of the technical features, they should be considered as being within the scope of the present description.

The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims

1. A rendering method based on online costume design is characterized by comprising the following steps:

2. The method of claim 1, wherein prior to obtaining the custom design template, the method comprises:

3. The method of claim 1, wherein the rendering the 3D model through 3D modeling comprises:

and splitting the custom design template into a plurality of small triangles through cut-part modeling, mapping points on a template plane into the 3D model through uv mapping, and performing real-time rendering of a web end through a rendering engine.

4. The method of claim 1, wherein prior to warping the 2D photograph by bezier surfaces or 3D modeling, the method comprises:

5. The method of claim 1, wherein the image rendering of the 3D visual deformation map via a custom webGL pipeline comprises:

carrying out UV mapping on the picture after current processing according to the deformation vertex and the UV mapping vertex in the webGL pipeline;

and adjusting image parameters of the picture subjected to UV mapping, and superposing texture layers in a positive bottom-superposing mode to obtain a finally rendered 2D picture.

6. The method of claim 1, wherein after obtaining the final rendered image, the method further comprises:

7. An online apparel design based rendering system, the system comprising:

the rendering module is used for respectively performing online 3D and 2D rendering on the clothes according to the analyzed template data, and the specific steps comprise: rendering the 3D model through 3D modeling; or performing distortion conversion on the 2D photo through a Bessel curved surface or 3D modeling to obtain a 3D visual deformation diagram corresponding to the 2D photo, and performing image rendering on the 3D visual deformation diagram through a self-defined webGL pipeline; and finally obtaining a rendered 3D model and a rendered 2D picture.

8. The system of claim 7, further comprising a design module that, prior to obtaining a custom design template,

9. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the computer program to perform the online costume design based rendering method of any of claims 1 to 6.

10. A storage medium having a computer program stored thereon, wherein the computer program is configured to execute the rendering method based on online clothing design according to any one of claims 1 to 6 when running.