CN113506361A - Three-dimensional mask display system and method based on small program - Google Patents
Three-dimensional mask display system and method based on small program Download PDFInfo
- Publication number
- CN113506361A CN113506361A CN202111056343.6A CN202111056343A CN113506361A CN 113506361 A CN113506361 A CN 113506361A CN 202111056343 A CN202111056343 A CN 202111056343A CN 113506361 A CN113506361 A CN 113506361A
- Authority
- CN
- China
- Prior art keywords
- dimensional
- mask
- dimensional model
- model
- sub
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
- G06T13/40—3D [Three Dimensional] animation of characters, e.g. humans, animals or virtual beings
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating 3D models or images for computer graphics
- G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Computer Graphics (AREA)
- Architecture (AREA)
- Computer Hardware Design (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
The application is suitable for the technical field of medical treatment, provides three-dimensional gauze mask display system based on little procedure, including little procedure end and backend server: the small program end comprises a logic layer and a view layer, the logic layer is used for registering and managing a three-dimensional display page, monitoring events and interacting data of the three-dimensional display page, and the view layer is used for generating a three-dimensional scene graph object, rendering and displaying a three-dimensional mask try-on effect; the three-dimensional mask try-on effect is obtained based on the human face three-dimensional model and the mask three-dimensional model; the background server comprises an interface interaction module and a data storage module, the interface interaction module is used for carrying out request communication and data communication with the small program terminal, the data storage module is used for storing and managing related files of the three-dimensional model of the human face and the three-dimensional model of the mask, online display and visual interaction operation of the three-dimensional mask model are achieved, the three-dimensional model is quickly established and real-time interactive rendering is completed, and development cost, deployment and implementation processes related to the small program development of the three-dimensional model are reduced.
Description
Technical Field
The application belongs to the technical field of medical treatment, and particularly relates to a three-dimensional mask display system and method based on a small program.
Background
The mask is the last line of defense of personal hygiene protection, and plays a vital role in blocking outside bacteria and viruses and preventing and protecting respiratory tracts. In life, people mainly show the mask related protection knowledge by means of propagandizing posters, propagandizing manuals and other plane two-dimensional pictures, however, the three-dimensional mask information model can show different mask characteristics and using methods more truly, intuitively and vividly, and has distinct advantages in promoting mask protection knowledge and correctly using masks.
Applets have been widely used due to their installation-free and easy-to-use nature. The carrier which depends on the small program and is used as the three-dimensional mask for display has excellent user experience, and meanwhile, the carrier can be conveniently obtained and transmitted by a user. However, the existing three-dimensional model display approach of the applet mainly adopts a video playing or dynamic image (GIF) mode, and cannot realize visual interaction and real-time rendering.
Disclosure of Invention
The embodiment of the application provides a three-dimensional mask display system and method based on an applet, and the problem that visual interaction and real-time rendering cannot be achieved in three-dimensional model display of the existing applet is effectively solved.
In a first aspect, an embodiment of the present application provides a three-dimensional mask display system based on an applet, including an applet terminal and a background server:
the small program end comprises a logic layer and a view layer, the logic layer is used for registering and managing a three-dimensional display page, monitoring an event of the three-dimensional display page and interacting data, and the view layer is used for generating a three-dimensional scene graph object, rendering and displaying a three-dimensional mask try-on effect; the three-dimensional mask try-on effect is obtained based on the human face three-dimensional model and the mask three-dimensional model;
the background server comprises an interface interaction module and a data storage module, wherein the interface interaction module is used for carrying out request communication and data communication with the small program terminal, and the data storage module is used for storing and managing related files of the three-dimensional model of the face and the three-dimensional model of the mask.
In one implementation of the first aspect, the logic layer provides a running environment of the JavaScript script by using a JsCore thread.
In an implementation manner of the first aspect, the view layer constructs a three-dimensional display page by using a tag language, and completes a display effect of a page component by using a style language.
In one implementation of the first aspect, the scene graph object includes a camera sub-object, a mesh model sub-object, and a light source sub-object; the mesh model sub-object includes a geometry sub-object and a material sub-object.
In one implementation form of the first aspect, the attributes of the camera sub-object include a camera position, a gaze direction and a projection mode; the attributes of the light source sub-object comprise light source position, light source intensity and light source type, the attributes of the geometric sub-object comprise shape and size, and the attributes of the material sub-object comprise color, map and transparency.
In an implementation manner of the first aspect, the view layer is further configured to invoke a renderer to perform effect rendering on the scene graph object.
In one implementation of the first aspect, the rendering effect includes adding a shadow effect, adding a frame animation, adding a ray collision detection, adding a voice.
In a second aspect, an embodiment of the present application provides a three-dimensional mask display method, including:
acquiring a human face three-dimensional model and a mask three-dimensional model;
calling a mask matching algorithm to obtain the fitting effect of the mask three-dimensional model and the face three-dimensional model;
rendering the animation according to the try-on effect;
and displaying the rendering result.
In an implementation manner of the second aspect, before obtaining the three-dimensional model of the face and the three-dimensional model of the mask, the method further includes:
importing a three-dimensional engine module and creating a three-dimensional engine object;
creating a canvas and binding a three-dimensional engine object.
In a third aspect, an embodiment of the present application provides a terminal device, where the terminal device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, and the processor, when executing the computer program, implements the method according to the second aspect or any optional manner of the second aspect.
In a fourth aspect, embodiments of the present application provide a computer-readable storage medium storing a computer program which, when executed by a processor, implements a method according to the second aspect or any alternative of the second aspect.
In a fifth aspect, embodiments of the present application provide a computer program product, which, when run on a terminal device, causes the terminal device to execute the method of the second aspect or any alternative form of the second aspect.
Compared with the prior art, the embodiment of the application has the advantages that:
the three-dimensional mask display system and method based on the small program, the terminal device and the computer program product have the following beneficial effects: the three-dimensional display page and the three-dimensional scene graph object are established through the small program end, the related file of the three-dimensional model in the background server is called to quickly generate the three-dimensional mask try-on effect, the rendering and the display are carried out at the small program end, and the visual interaction and the real-time rendering of the three-dimensional model display of the small program can be realized.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive exercise.
Fig. 1 is a schematic structural diagram of a three-dimensional mask display system based on a small program according to the present application;
fig. 2 is a schematic implementation flowchart of a three-dimensional mask display method provided in an embodiment of the present application;
fig. 3 is a schematic effect diagram of a three-dimensional mask display method according to an embodiment of the present disclosure;
fig. 4 is a schematic implementation flowchart of a three-dimensional mask display method according to another embodiment of the present disclosure;
fig. 5 is a schematic structural diagram of a terminal device according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present application.
Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth, such as particular system structures, techniques, etc. in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
It should be understood that the term "and/or" as used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items. Furthermore, in the description of the present application and the appended claims, the terms "first," "second," "third," and the like are used for distinguishing between descriptions and not necessarily for describing or implying relative importance.
It should also be appreciated that reference throughout this specification to "one embodiment" or "some embodiments," or the like, means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the present application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," or the like, in various places throughout this specification are not necessarily all referring to the same embodiment, but rather "one or more but not all embodiments" unless specifically stated otherwise. The terms "comprising," "including," "having," and variations thereof mean "including, but not limited to," unless expressly specified otherwise.
An applet is an application that can be used without installation, and is widely used due to its installation-free and easy-to-use characteristics. The three-dimensional mask display system provided by the embodiment of the application is developed and realized based on small programs. A three-dimensional mask display system based on a small program provided in the embodiments of the present application will be described in detail below:
referring to fig. 1, fig. 1 is a schematic diagram illustrating a frame of a three-dimensional mask display system based on a small program according to an embodiment of the present disclosure. As shown in fig. 1, the three-dimensional mask display system based on an applet provided in the embodiment of the present application includes an applet terminal 100 and a backend server 200.
The applet end 100 includes a logic layer 110 and a viewing layer 120.
The logic layer 110 is used for registration and management of three-dimensional display pages, event monitoring and data interaction of the three-dimensional display pages. The data interaction comprises data interaction with a user and data interaction with a background server.
The viewing layer 120 is used for generating a three-dimensional scene graph object, rendering and displaying a three-dimensional mask fitting effect.
Wherein, the three-dimensional mask try-on effect is obtained based on the human face three-dimensional model and the mask three-dimensional model.
In this embodiment of the application, the logic layer 110 provides a running environment of the JavaScript script by using a JsCore thread.
The view layer 120 constructs a three-dimensional display page by using a tag language, and completes the display effect of the page components by using a style language.
Illustratively, the above-mentioned tag language may use a WXML template, and the style language may use a WXSS template.
Wherein, the WXML template: elements responsible for generating the interface framework structure: view containers, base containers (pictures, text, and progress bars), forms, operational interaction feedback, navigation, multimedia, maps, and canvas.
WXSS template: and the display of the elements is responsible, and the setting of the attributes such as size, position, font, color and the like is included.
The applet terminal may transmit data (data returned by the background server, such as a three-dimensional fitting effect) acquired by the logic layer 110 to the view layer 120, and the view layer 120 performs difference comparison and scene rendering, thereby displaying a fitting effect of the three-dimensional mask.
In this embodiment of the application, the view layer 120 may use a WebView thread to perform page rendering, create a canvas (which is a module for generating a scene graph object, that is, a display space of a three-dimensional model) through a browser of a terminal device, and bind a three-dimensional engine module (three.
In the embodiment of the present application, the scene graph object includes a camera sub-object, a mesh model sub-object, and a light source sub-object; the mesh model sub-object includes a geometry sub-object and a material sub-object.
The attributes of the camera sub-object comprise a camera position, a sight line direction and a projection mode; the attributes of the light source sub-object comprise light source position, light source intensity and light source type, the attributes of the geometry sub-object comprise shape and size, and the attributes of the material sub-object comprise color, map and transparency.
For example, the projection modes can be divided into a transmission projection mode and an orthographic projection mode, and the light source types can include ambient light, a point light source, parallel light and a light gathering source.
In this embodiment of the application, the view layer 120 may further invoke a renderer to perform effect rendering on the scene graph object.
Rendering effects include, but are not limited to, adding shadow effects, adding frame animations, adding ray collision detection, adding speech, and the like.
the interface interaction module 210 is used for request communication and data communication with the applet terminal. In the interface interaction module 210, all network requests (HTTPS requests) of the logic layer are executed and called by a network library in the applet terminal, and the backend server 200 establishes a communication channel with the applet terminal through a full duplex communication protocol (WebSocket) to implement data communication.
The data storage module 220 is used for storing and managing related files of the three-dimensional model of the face and the three-dimensional model of the mask.
The data storage module 220 is responsible for storing and managing related files of three-dimensional models (including a human face three-dimensional model and a mask three-dimensional model), and the data storage module 220 may further include creation and editing of a user information list, and performs associated storage on original pictures and three-dimensional model files in user test records.
Therefore, the three-dimensional mask display system based on the small program provided by the embodiment of the application establishes the three-dimensional display page and the three-dimensional scene graph object through the small program end, calls the related files of the three-dimensional model in the background server to quickly generate the three-dimensional mask try-on effect, carries out rendering and display on the small program end, and can realize the visual interaction and real-time rendering of the three-dimensional model display of the small program.
Based on the three-dimensional mask display system shown in fig. 1, the embodiment of the application also provides a three-dimensional mask display method. Referring to fig. 2, fig. 2 is a schematic flow chart of a three-dimensional mask display method according to an embodiment of the present disclosure. It should be noted that the main execution body of the three-dimensional mask display method provided in the embodiment of the present application is a terminal device including an applet, and the terminal device may be a mobile terminal such as a smart phone, a tablet computer, or a wearable device, or may be a device such as a computer in various application scenarios.
As shown in fig. 2, the three-dimensional mask display method provided in the embodiment of the present application may include steps S11 to S14, which are detailed as follows:
s11: and acquiring a human face three-dimensional model and a mask three-dimensional model.
In the embodiment of the application, a user can select the mask type and the face three-dimensional model which want to check the try-on effect through the small program end, and the small program calls the corresponding face three-dimensional model and the corresponding mask three-dimensional model from the background server based on the selection of the user after obtaining the selection of the user.
Specifically, the applet terminal may issue a network Request (HTTPS Request) to obtain a three-dimensional model of a human face and a three-dimensional model of a mask.
S12: and calling a mask matching algorithm to obtain the fitting effect of the mask three-dimensional model and the face three-dimensional model.
In the embodiment of the application, the acquired three-dimensional model of the face and the three-dimensional model of the mask can be subjected to geometric transformation to obtain the three-dimensional models with the normalized standard sizes (the three-dimensional model of the face with the standard size and the three-dimensional model of the mask with the standard size), and then the mask matching algorithm is called to generate the fitting effect of the mask and the three-dimensional model of the face.
The mask matching algorithm can be a trained neural network algorithm obtained after training through a large amount of historical data, and can process an input standard-size human face three-dimensional model and a standard-size mask three-dimensional model to generate a corresponding fitting effect.
S13: and rendering the animation according to the try-on effect.
In a specific application, a requestAnimationFrame command of three is called at a logic layer to update page rendering, and a try-on effect is rendered into a view layer.
Here, the animation rendering according to the try-on effect may further include: and updating the controller module and the camera sub-object of the page scene graph object, and calling a renderer to perform rendering updating.
In a specific application, an update controller (OrbitControls module), a camera (camera module) and a renderer (render module) respond to real-time interaction operation of a user and an interface and complete real-time rendering update of a page.
Illustratively, when the camera in the scene graph object changes an angle to browse the model and drags the model to another position, the renderer is called to update the attribute parameters to realize page refreshing
S14: and displaying the rendering result.
In the embodiment of the application, the rendering effect is displayed through the small program end, namely the three-dimensional mask try-on effect is displayed.
As shown in fig. 3, when the rendering effect is displayed, a three-dimensional mask try-on effect corresponding to the three-dimensional model of the face and the three-dimensional model of the mask may be displayed.
Referring to fig. 4, fig. 4 is a flowchart illustrating an implementation of a three-dimensional mask display method according to another embodiment of the present application. As shown in fig. 4, unlike the three-dimensional mask display method shown in fig. 2, the three-dimensional mask display method provided in the embodiment of the present application further includes S15 to S17:
s15: and importing a three-dimensional engine module and creating a three-dimensional engine object.
In the embodiment of the application, a mask try-on applet project can be created at the applet end, the project name, the storage directory, the AppID and the like are set, and an applet development process is started. The three-dimensional engine module (such as a three. js module) is installed in the terminal equipment by means of npm by using a command "npm install-save threejs-miniprogam", and then the configuration of the environment is completed by clicking "build npm" in a developer tool, so that the import of the three-dimensional engine module and the creation of the three-dimensional engine object are realized.
S16: creating a canvas and binding a three-dimensional engine object.
Creating canvas (canvas) in a corresponding area of the browser, specifying the height and width of the canvas, and setting the type of the off-screen canvas as a default value Web Graphics Library (WebGL) type. And bind the canvas with three.js object, realize showing and visual interactive operation on line to three-dimensional gauze mask model, have advantages such as expansibility is strong, rendering speed is fast and user experience height.
Therefore, the panoramic three-dimensional scene can be rendered based on the web graphic library, the utilization rate of a browser page is improved, the three-dimensional model can be quickly created, and real-time interactive rendering is completed, so that the development cost, the deployment and the implementation process related to the program development of the three-dimensional model are reduced
S17: and initializing the three-dimensional engine module.
The initialization of the three-dimensional engine module (three. js module) includes respectively creating a three-dimensional model Loader (Loader module), creating a Light source (Light module), a scene module (scene module), a controller (orbitControls module), a Mesh (Mesh module) and a camera (camera module).
It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.
As can be seen from the above, the three-dimensional mask display method provided by the embodiment of the application realizes the on-line display and the visual interactive operation of the three-dimensional mask model by creating the canvas on the mobile browser page and associating the three.js object, has the advantages of strong expansibility, high rendering speed and high user experience, renders any page block of the mobile browser page into a panoramic three-dimensional scene, and improves the utilization rate of the browser page. The mask three-dimensional model display method has the advantages that the three-dimensional model can be rapidly established and real-time interactive rendering can be completed, development cost related to small program development of the three-dimensional model is reduced, deployment and implementation processes can be achieved, the mask try-on effect and the protection effect can be displayed more visually, vividly and clearly, science popularization mask knowledge is convenient and rapid, and the blank of online mask three-dimensional model display is made up.
Fig. 5 is a schematic structural diagram of a terminal device according to another embodiment of the present application. As shown in fig. 5, the terminal device 5 provided in this embodiment includes: a processor 50, a memory 51 and a computer program 52, such as an image segmentation program, stored in said memory 51 and executable on said processor 50. The processor 50 executes the computer program 52 to implement the steps of the above-described embodiments of the three-dimensional mask display method. Alternatively, the processor 50 implements the functions of the modules/units in the above-described three-dimensional mask display system embodiments based on applets when executing the computer program 52.
Illustratively, the computer program 52 may be partitioned into one or more modules/units, which are stored in the memory 51 and executed by the processor 50 to accomplish the present application. The one or more modules/units may be a series of computer program instruction segments capable of performing specific functions, which are used to describe the execution process of the computer program 52 in the terminal device 5.
The terminal device may include, but is not limited to, a processor 50, a memory 51. Those skilled in the art will appreciate that fig. 5 is merely an example of a terminal device 5 and does not constitute a limitation of terminal device 5 and may include more or fewer components than shown, or some components may be combined, or different components, e.g., the terminal device may also include input-output devices, network access devices, buses, etc.
The Processor 50 may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic, discrete hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 51 may be an internal storage unit of the terminal device 5, such as a hard disk or a memory of the terminal device 5. The memory 51 may also be an external storage device of the terminal device 5, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the terminal device 5. Further, the memory 51 may also include both an internal storage unit and an external storage device of the terminal device 5. The memory 51 is used for storing the computer program and other programs and data required by the terminal device. The memory 51 may also be used to temporarily store data that has been output or is to be output.
The embodiment of the application also provides a computer readable storage medium. Referring to fig. 6, fig. 6 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present disclosure, as shown in fig. 6, a computer code program 61 is stored in the computer-readable storage medium 60, and when executed by a processor, the computer code program 61 can implement the three-dimensional mask display method.
The embodiment of the application provides a computer program product, and when the computer program product runs on a terminal device, the terminal device is executed to realize the three-dimensional mask display method.
It is obvious to those skilled in the art that, for convenience and simplicity of description, the foregoing division of the functional units and modules is merely used as an example, and in practical applications, the foregoing function distribution may be performed by different functional units and modules as needed, that is, the internal structure of the terminal device is divided into different functional units or modules to perform all or part of the above-described functions. Each functional unit and module in the embodiments may be integrated in one processing unit, or each unit may exist alone physically, or two or more units are integrated in one unit, and the integrated unit may be implemented in a form of hardware, or in a form of software functional unit. In addition, specific names of the functional units and modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working processes of the units and modules in the system may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In the above embodiments, the description of each embodiment has its own emphasis, and parts that are not described or illustrated in a certain embodiment may refer to the description of other embodiments.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
The above-mentioned embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; such modifications and substitutions do not substantially depart from the spirit and scope of the embodiments of the present application and are intended to be included within the scope of the present application.
Claims (10)
1. The utility model provides a three-dimensional gauze mask display system based on applet which characterized in that, includes applet end and backend server:
the small program end comprises a logic layer and a view layer, the logic layer is used for registering and managing a three-dimensional display page, monitoring an event of the three-dimensional display page and interacting data, and the view layer is used for generating a three-dimensional scene graph object, rendering and displaying a three-dimensional mask try-on effect; the three-dimensional mask try-on effect is obtained based on the human face three-dimensional model and the mask three-dimensional model;
the background server comprises an interface interaction module and a data storage module, wherein the interface interaction module is used for carrying out request communication and data communication with the small program terminal, and the data storage module is used for storing and managing related files of the three-dimensional model of the face and the three-dimensional model of the mask.
2. The applet-based three-dimensional mask display system according to claim 1, wherein the logic layer provides a running environment for JavaScript scripts using a JsCore thread.
3. The three-dimensional mask display system based on the small program according to claim 1, wherein the view layer adopts a tag language to construct a three-dimensional display page, and the display effect of the page components is completed through a style language.
4. The three-dimensional mask program-based display system according to claim 1, wherein the scene graph objects comprise a camera sub-object, a mesh model sub-object and a light source sub-object; the mesh model sub-object includes a geometry sub-object and a material sub-object.
5. The three-dimensional mask program display system according to claim 4, wherein the attributes of the camera sub-object include camera position, gaze direction and projection mode; the attributes of the light source sub-object comprise light source position, light source intensity and light source type, the attributes of the geometric sub-object comprise shape and size, and the attributes of the material sub-object comprise color, map and transparency.
6. The applet-based three-dimensional mask display system according to claim 1, wherein the view layer is further adapted to invoke a renderer for effect rendering of scene graph objects.
7. The applet-based three-dimensional mask display system according to claim 6, wherein the rendering effects include adding shadow effects, adding frame animation, adding ray collision detection, adding speech.
8. A three-dimensional mask display method applied to the three-dimensional mask display system according to any one of claims 1 to 7, the three-dimensional mask display method comprising:
acquiring a human face three-dimensional model and a mask three-dimensional model;
calling a mask matching algorithm to obtain the fitting effect of the mask three-dimensional model and the face three-dimensional model;
rendering the animation according to the try-on effect;
and displaying the rendering result.
9. The three-dimensional mask display method according to claim 8, further comprising, before the obtaining of the three-dimensional model of the face and the three-dimensional model of the mask:
importing a three-dimensional engine module and creating a three-dimensional engine object;
creating a canvas and binding a three-dimensional engine object.
10. The three-dimensional mask display method according to claim 9, further comprising, after creating the canvas and binding the three-dimensional engine object:
and initializing the three-dimensional engine module.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111056343.6A CN113506361A (en) | 2021-09-09 | 2021-09-09 | Three-dimensional mask display system and method based on small program |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111056343.6A CN113506361A (en) | 2021-09-09 | 2021-09-09 | Three-dimensional mask display system and method based on small program |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113506361A true CN113506361A (en) | 2021-10-15 |
Family
ID=78017030
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111056343.6A Pending CN113506361A (en) | 2021-09-09 | 2021-09-09 | Three-dimensional mask display system and method based on small program |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113506361A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109753334A (en) * | 2019-01-14 | 2019-05-14 | 长沙眸瑞网络科技有限公司 | A kind of threedimensional model display methods based on WebGL |
| CN110211213A (en) * | 2019-06-11 | 2019-09-06 | 深圳市瑞云科技有限公司 | Display systems and method are tried in electric business dress ornament simulation based on CG real-time rendering on |
| CN110675214A (en) * | 2019-08-27 | 2020-01-10 | 杭州海飘科技有限公司 | Virtual fitting somatosensory simulation method and system |
| CN111508079A (en) * | 2020-04-22 | 2020-08-07 | 深圳追一科技有限公司 | Virtual clothing fitting method and device, terminal equipment and storage medium |
-
2021
- 2021-09-09 CN CN202111056343.6A patent/CN113506361A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109753334A (en) * | 2019-01-14 | 2019-05-14 | 长沙眸瑞网络科技有限公司 | A kind of threedimensional model display methods based on WebGL |
| CN110211213A (en) * | 2019-06-11 | 2019-09-06 | 深圳市瑞云科技有限公司 | Display systems and method are tried in electric business dress ornament simulation based on CG real-time rendering on |
| CN110675214A (en) * | 2019-08-27 | 2020-01-10 | 杭州海飘科技有限公司 | Virtual fitting somatosensory simulation method and system |
| CN111508079A (en) * | 2020-04-22 | 2020-08-07 | 深圳追一科技有限公司 | Virtual clothing fitting method and device, terminal equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 朱雯曦等: "基于WebGL、百度AI技术的智能服装平台关键技术研究――以衣维网为例", 《电子商务》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110766777B (en) | Method and device for generating virtual image, electronic equipment and storage medium | |
| US11538229B2 (en) | Image processing method and apparatus, electronic device, and computer-readable storage medium | |
| CN108010112B (en) | Animation processing method, device and storage medium | |
| CN107832108A (en) | Rendering intent, device and the electronic equipment of 3D canvas web page elements | |
| JP2024505995A (en) | Special effects exhibition methods, devices, equipment and media | |
| US20220277481A1 (en) | Panoramic video processing method and apparatus, and storage medium | |
| CN107908608B (en) | Method, storage medium and device for converting and displaying manuscript in three-dimensional space | |
| CN113806306B (en) | Media file processing method, device, equipment, readable storage medium and product | |
| WO2020077913A1 (en) | Image processing method and device, and hardware device | |
| US20190340726A1 (en) | Projection image construction method and device | |
| CN113050941A (en) | Front-end page generation method, device, equipment and computer readable storage medium | |
| WO2023193642A1 (en) | Video processing method and apparatus, device and storage medium | |
| CN112162672A (en) | Information flow display processing method and device, electronic equipment and storage medium | |
| CN115080886A (en) | Three-dimensional medical model GLB file analysis and display method based on mobile terminal | |
| CN107943805A (en) | A kind of animation renders and dissemination method, device | |
| Kelly et al. | Basic introduction to pygame | |
| CN112686939A (en) | Depth image rendering method, device and equipment and computer readable storage medium | |
| CN117151973A (en) | Special effect template generation method and device, electronic equipment and storage medium | |
| CN113506361A (en) | Three-dimensional mask display system and method based on small program | |
| CN114428573B (en) | Special effect image processing method and device, electronic equipment and storage medium | |
| CN110209861A (en) | Image processing method, device, electronic equipment and computer readable storage medium | |
| CN113192173B (en) | Image processing method and device of three-dimensional scene and electronic equipment | |
| CN115170695A (en) | Method and device for generating chart picture, electronic equipment and storage medium | |
| CN110930499B (en) | 3D data processing method and device | |
| CN114693780A (en) | Image processing method, device, equipment, storage medium and program product |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211015 |
|
| RJ01 | Rejection of invention patent application after publication |