Method for generating three-dimensional wind chime model based on two-dimensional image, electronic equipment and storage medium

Abstract

The invention mainly aims to provide a method for generating a three-dimensional wind chime model based on a two-dimensional image, an electronic device and a storage medium, and the method can achieve the three-dimensional wind chime model through the steps of automatic image analysis, AABB extraction, central slice zooming, marching algorithm edge extraction, triangulation, UV mapping, three-dimensional rendering and the like. The full-process automation from two-dimensional image input to three-dimensional model display is realized, and the generation efficiency of e-commerce display materials and the three-dimensional visual effect are remarkably improved.

Description

Technical Field

[0001] This invention belongs to the field of computer graphics and 3D modeling technology, and specifically refers to a method, electronic device and storage medium for generating 3D wind chime models based on 2D images, which is applicable to e-commerce display, online rendering and 3D content generation and other technical scenarios. Background Technology

[0002] With the popularization of online shopping and visualization technology, 3D display has gradually become an important means of e-commerce presentation. The 3D models of traditional wind chime products are mainly created manually using professional modeling software (such as Maya, Blender, etc.), which has drawbacks such as complex modeling and low efficiency, making it difficult to meet the needs of merchants for rapid product listing and diverse product display.

[0003] Most existing automatic modeling technologies rely on fixed geometric templates or regular meshes, and can only generate simple shapes, such as circular, square or spherical objects. They cannot generate custom 3D structures based on arbitrary centrally symmetric images. At the same time, traditional image stretching or mapping methods cannot achieve the wind chime-like multi-layer slicing effect, lacking a sense of layering and rotation, and the display effect is not realistic enough.

[0004] Therefore, there is an urgent need for a technical solution that can automatically generate a 3D wind chime model by simply inputting a 2D image, thereby realizing the automated 3D generation and rendering of any centrally symmetric graphic. Summary of the Invention

[0005] The main objective of this invention is to provide a method, electronic device, and storage medium for generating a three-dimensional wind chime model based on a two-dimensional image, which solves the problems existing in the prior art. It can achieve full automation from two-dimensional input image to three-dimensional model display through steps such as automatic image analysis, AABB extraction, center slice scaling, moving edge extraction algorithm, triangulation, UV mapping, and three-dimensional rendering, significantly improving the efficiency of e-commerce display material generation and three-dimensional visual effects.

[0006] To achieve the above objectives, one solution of the present invention is: A method for generating a 3D wind chime model based on a 2D image includes: Step 1. Input model image A and texture image B, wherein model image A is a centrally symmetric structure graphic; use Canvas2D to load model image A and extract pixel information to obtain the width, height and pixel transparency matrix of model image A; Step 2. Scan the pixel transparency matrix of model image A line by line and calculate the minimum bounding rectangle AABB of non-transparent pixels. Then record the coordinates of the top left and bottom right corners of AABB. Based on the coordinate data of AABB, use Canvas2D to perform a cropping operation and remove the blank background area to generate a new model image A' and output its width, height and pixel transparency matrix. Step 3. Based on the user-preset number of times n, perform slicing, scaling and image layering on the new model image A' several times to obtain several sets of scaling pairs; Step 4. For each scaling pair, use the second image as a mask for the first image to perform a mask overlay operation, resulting in a list of original wind chime images; Step 5. Select one image from the original list of wind chime images as the wind chime, identify and quantize the outline boundary of the wind chime, and obtain the edge path point set; Step 6. For the set of edge path points, construct a set of edge point triangles; Step 7. Based on the width and height of the model image A, normalize the coordinates of the edge points in the edge path point set to the [0,1] interval to obtain the UV coordinates of each triangle vertex in the edge point triangle set, and use them as the vertex coordinates in 3D. Step 8. Input the edge path point set, the edge point triangle set and their UV coordinates, input the texture image B, and generate a 3D wind chime model.

[0007] Step 3 includes: Step 3.1: Perform a clip operation with the center of the new model image A' as the reference, expanding the width outward by 5% from the center to form a separable region; Step 3.2: Cut the expanded image into two parts from top to bottom, forming two sets of images; Step 3.3: Perform n center scaling operations on the left and right sets of images, where n is an even number, and each two scaling operations form a scaling pair; Step 3.4: Store the scaling results sequentially into the image array to form a set of slice groups.

[0008] Step 5 includes: Step 5.1: Select one image from the list of original wind chime images and use the straddle algorithm to extract edges; Step 5.2: Starting from the top left corner of the selected image, scan line by line to find the first pixel with non-zero transparency and set it as the edge start point; Step 5.3: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left, with 0 for transparency and 1 for non-transparency, to form a four-bit binary code; Step 5.4: Convert the binary code into a decimal index and determine the direction of travel by looking up a predefined direction table; Step 5.5: Move to the next edge pixel in the specified direction, and repeat steps 5.3 to 5.4 until you return to the starting point or close the loop; Step 5.6: Obtain the complete set of edge path points.

[0009] Step 6 includes: Step 6.1: Sort the edge path point set in a clockwise direction; Step 6.2: Take three consecutive edge points P1(x1,y1), P2(x2,y2), and P3(x3,y3), and calculate Δ. The formula is Δ=(x2-x1)×(y3-y1)-(y2-y1)×(x3-x1); Step 6.3: When Δ > 0, the three points form a valid triangle in a clockwise direction; when Δ < 0, the three points form a valid triangle in a counterclockwise direction; when Δ = 0, the three points are collinear and do not form a valid triangle. Step 6.4 If the triangle formed by the three points P1, P2, and P3 does not contain any other edge path points, then the triangle is determined to be a valid partitioning unit; save the indices of the three points of the valid partitioning unit to the index array. Step 6.5: Repeat steps 6.2 to 6.4 until all points form a complete triangle set.

[0010] Step 8 includes: Step 8.1: Input the edge path point set, edge point triangle set, and their UV coordinates into the Three.js rendering pipeline; Step 8.2: Rotate the left half of the model by +25° around the Z-axis, and rotate the right half of the model around the Z-axis. At 25°, a natural wind chime structure is created; Step 8.3: Use the remaining area of ​​the clip to form the central axis part, and repeat the triangulation and UV mapping to generate the central structure; Step 8.4: Input texture image B as a PBR material texture into Three.js and combine it with ambient light and parallel light; Step 8.5: Output a complete 3D wind chime model to enable online display and real-time interaction.

[0011] The second solution of the present invention is: A computer-readable storage medium storing a computer program; when executed in the computer, the computer program causes the computer to perform the method for generating a three-dimensional wind chime model based on a two-dimensional image.

[0012] The third solution of the present invention is: An electronic device includes an image input module, a data initialization module, an AABB calculation module, an edge cropping module, a slice scaling module, a mask compositing module, an edge extraction module, a triangulation module, a UV mapping module, a rendering module, and a display module. The image input module is used to input model image A and texture image B; The data initialization module uses Canvas2D to load the model image and extract pixel information to obtain the width, height, and pixel transparency matrix of model image A. The AABB calculation module scans the pixel transparency matrix of the model image A line by line and calculates the minimum bounding rectangle AABB of the non-transparent pixels, and then records the coordinates of the upper left and lower right corners of the AABB. The edge clipping module uses Canvas2D to perform clipping operations and remove blank background areas, generating a new model image A' and outputting its width, height, and pixel transparency matrix; The slice scaling module performs several slices, scaling and image layering on the new model image A' to obtain several sets of scaling pairs; For each scaling pair, the mask synthesis module uses the second image as a mask for the first image to perform a mask overlay operation, thereby obtaining a list of original wind chime images. The edge extraction module automatically identifies and quantifies the outline boundary of the wind chime to obtain the edge path point set; The triangulation module constructs a set of edge point triangles for the edge path point set; The UV mapping module normalizes the edge points of the edge path point set and maps them to UV coordinates; The rendering module generates a 3D wind chime model based on the edge path point set, the edge point triangle set and its UVs, and the texture image B, and outputs it to the display module for display.

[0013] After adopting the above technical solution, the present invention has the following technical effects: (1) Only two images need to be input to automatically generate a displayable 3D wind chime model.

[0014] (2) Supports customizable slice quantity, scaling ratio and rotation angle to meet different styling needs.

[0015] (3) The traversal algorithm and triangulation are used to ensure that the wind chime model has smooth edges and accurate structure.

[0016] (4) Combining Canvas2D with the WebGL rendering capabilities of Three.js, high-fidelity visual effects are generated in real time.

[0017] (5) Applicable to e-commerce, visualization, advertising display, virtual space and other scenarios. Attached Figure Description

[0018] Figure 1 This is a schematic diagram of the generation result of the present invention. Figure 1 .

[0019] Figure 2 This is a schematic diagram of the generation result of the present invention. Figure 2 .

[0020] Figure 3 This is a schematic diagram of the generation result of the present invention. Figure 3 . Detailed Implementation

[0021] To further explain the technical solution of the present invention, the present invention will be described in detail below through specific embodiments.

[0022] This invention discloses a method for generating a three-dimensional wind chime model based on a two-dimensional image, comprising: Step 1. Input and Initialization Input model image A (modelImage) and texture image B (textureImage), where model image A is a centrally symmetric structure, such as a heart, star, or snowflake. Use Canvas2D to load model image A and extract pixel information to obtain the width, height, and pixel transparency matrix of model image A, providing basic data for subsequent AABB calculation and edge extraction.

[0023] This step is completed jointly by the image input module and the data initialization module. The former is used to load the input image, and the latter is used to parse and store the image data.

[0024] Step 2. AABB Extraction and Edge Trimming The pixel transparency matrix of model image A is scanned line by line, and the minimum bounding rectangle AABB of non-transparent pixels is calculated. Then, the coordinates of the upper left and lower right corners of AABB are recorded to determine the effective area of ​​model image A. Based on the coordinate data of AABB, Canvas2D is used to perform a cropping operation and remove the blank background area to generate a new model image A' (newModelImage), and its width, height and pixel transparency matrix are output.

[0025] This step corresponds to the AABB calculation module and the edge cropping module, and is used to automatically identify and extract the effective area of ​​the image.

[0026] Step 3. Slicing and scaling Based on the user-preset number of times n, the new model image A' is sliced, scaled, and layered several times to obtain several sets of scaling pairs.

[0027] This step is performed by the slice scaling module. Specifically, step 3 includes: Step 3.1: Perform a clip operation with the center of the new model image A' as the reference, expanding the width outward by 5% from the center to form a separable region; Step 3.2: Cut the expanded image into two parts from top to bottom, forming two sets of images; Step 3.3: Perform n center scaling operations (n ​​is an even number) on the left and right sets of images, with each two scaling operations forming a scaling pair; Step 3.4: Store the scaling results sequentially into the image array to form a set of slice groups.

[0028] Step 4. Masking and Image Group Generation For each scaling pair, the second image is used as a mask for the first image to perform a mask overlay operation, resulting in a raw image list, which serves as data for subsequent edge detection.

[0029] This step is performed by the mask compositing module.

[0030] Step 5. Edge extraction using the moving algorithm Select one image from the original list of wind chime images as the wind chime, identify and quantize the outline boundary of the wind chime, and obtain the edge path point set.

[0031] This step is performed by the edge extraction module. Specifically, step 5 includes: Step 5.1: Select one image from the list of original wind chime images and extract the edges using the Marching Algorithm; Step 5.2: Starting from the top left corner of the selected image, scan line by line to find the first pixel with non-zero transparency and set it as the edge start point; Step 5.3: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left, with 0 for transparency and 1 for non-transparency, to form a four-bit binary code; Step 5.4: Convert the binary code into a decimal index and determine the direction of travel by looking up a predefined direction table; Step 5.5: Move to the next edge pixel in the specified direction, and repeat steps 5.3 to 5.4 until you return to the starting point or close the loop; Step 5.6: Obtain the complete edge path point set (rawImagePath).

[0032] Step 6. Generating the triangulation index For the set of edge path points, construct a set of edge point triangles as a vertex index data structure to provide the geometric basis for rendering.

[0033] This step is performed by the triangulation module. Specifically, step 6 includes: Step 6.1: Sort the edge path point set in a clockwise direction; Step 6.2: Take three consecutive edge points P1(x1,y1), P2(x2,y2), and P3(x3,y3), and calculate Δ. The formula is Δ=(x2-x1)×(y3-y1)-(y2-y1)×(x3-x1); Step 6.3: When Δ > 0, the three points form a valid triangle in a clockwise direction; when Δ < 0, the three points form a valid triangle in a counterclockwise direction; when Δ = 0, the three points are collinear and do not form a valid triangle. Step 6.4 If the triangle formed by the three points P1, P2, and P3 does not contain any other edge path points, then the triangle is determined to be a valid partitioning unit; save the indices of the three points of the valid partitioning unit to the index array. Step 6.5: Repeat steps 6.2 to 6.4 until all points form a complete triangle set.

[0034] Step 7. UV Mapping and Normalization Based on the width and height of the model image A, the coordinates of the edge points in the edge path point set are normalized to the interval [0,1], and the UV coordinates of each triangle vertex in the edge point triangle set are obtained, which are then used as the vertex coordinates in 3D.

[0035] This step is performed by the UV mapping module to achieve a precise correspondence between two-dimensional textures and three-dimensional vertices.

[0036] Step 8. Rendering and Display Output Input the edge path point set, the edge point triangle set and their UV coordinates, input the texture image B, generate a 3D wind chime model, and display the result as follows. Figures 1 to 3 As shown.

[0037] This step is performed by the rendering module and the presentation module. Specifically, step 8 includes: Step 8.1: Input the edge path point set, edge point triangle set, and their UV coordinates into the Three.js rendering pipeline; Step 8.2: Rotate the left half of the model by +25° around the Z-axis, and rotate the right half of the model around the Z-axis. At 25°, a natural wind chime structure is created; Step 8.3: Use the remaining area of ​​the clip to form the central axis part, and repeat the triangulation and UV mapping to generate the central structure; Step 8.4: Input texture image B as PBR material texture into Three.js, and combine ambient light and parallel light to enhance the metallic texture and reflection effect; Step 8.5: Output a complete 3D wind chime model to enable online display and real-time interaction.

[0038] Compared with the prior art, the present invention has the following advantages through the above solution: (1) Fully automatic generation - Only two images need to be input to automatically generate a displayable 3D wind chime model.

[0039] (2) Controllable shape - supports customizable number of slices, scaling ratio and rotation angle to meet different styling needs.

[0040] (3) Natural effect - The use of a walking algorithm and triangulation ensures that the wind chime model has smooth edges and accurate structure.

[0041] (4) High-efficiency rendering - Combining the WebGL rendering capabilities of Canvas2D and Three.js, high-fidelity visual effects are generated in real time.

[0042] (5) Wide applicability - applicable to e-commerce, visualization, advertising display, virtual space and other scenarios.

[0043] The present invention also discloses an electronic device, including an image input module, a data initialization module, an AABB calculation module, an edge cropping module, a slice scaling module, a mask compositing module, an edge extraction module, a triangulation module, a UV mapping module, a rendering module, and a display module; The image input module is used to input model image A and texture image B; The data initialization module uses Canvas2D to load the model image and extract pixel information to obtain the width, height, and pixel transparency matrix of model image A; The AABB calculation module scans the pixel transparency matrix of model image A line by line and calculates the minimum bounding rectangle AABB of non-transparent pixels. Then, it records the coordinates of the upper left and lower right corners of AABB to determine the effective area of ​​model image A. The edge clipping module uses Canvas2D to perform clipping operations and remove blank background areas, generating a new model image A' and outputting its width, height, and pixel transparency matrix; The slice scaling module performs several slices, scaling and image layering on the new model image A' to obtain several sets of scaling pairs; For each scaling pair, the mask compositing module uses the second image as a mask for the first image to perform a mask overlay operation, resulting in a list of original wind chime images. The edge extraction module automatically identifies and quantizes the outline boundary of the wind chime to obtain the edge path point set; The triangulation module constructs a set of edge point triangles for the edge path point set; The UV mapping module normalizes the edge points of the edge path point set and maps them to UV coordinates; The rendering module generates a 3D wind chime model based on the edge path point set, the edge point triangle set and its UVs, and the texture image B, and outputs it to the display module for display.

[0044] The present invention also discloses a computer-readable storage medium storing a computer program; when the computer program is executed in a computer, it causes the computer to perform the above-described method. The storage medium may include various media capable of storing program code, such as a USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0045] The above embodiments and figures are not intended to limit the product form and style of the present invention. Any appropriate changes or modifications made by those skilled in the art should be considered as not departing from the patent scope of the present invention.

Claims

1. A method of generating a three-dimensional wind chime model based on two-dimensional images, the method comprising: include: Step 1. Input model image A and texture image B, wherein model image A is a centrally symmetric structure graphic; Use Canvas2D to load model image A and extract pixel information to obtain the width, height and pixel transparency matrix of model image A; Step 2. Scan the pixel transparency matrix of model image A line by line and calculate the minimum bounding rectangle AABB of non-transparent pixels. Then record the coordinates of the top left and bottom right corners of AABB. Based on the coordinate data of AABB, use Canvas2D to perform a cropping operation and remove the blank background area to generate a new model image A' and output its width, height and pixel transparency matrix. Step 3. Based on the user-preset number of times n, perform slicing, scaling and image layering on the new model image A' several times to obtain several sets of scaling pairs; Step 4. For each scaling pair, use the second image as a mask for the first image to perform a mask overlay operation, resulting in a list of original wind chime images; Step 5. Select one image from the original list of wind chime images as the wind chime, identify and quantize the outline boundary of the wind chime, and obtain the edge path point set; Step 6. For the set of edge path points, construct a set of edge point triangles; Step 7. Based on the width and height of the model image A, normalize the coordinates of the edge points in the edge path point set to the [0,1] interval to obtain the UV coordinates of each triangle vertex in the edge point triangle set, and use them as the vertex coordinates in 3D. Step 8. Input the edge path point set, the edge point triangle set and their UV coordinates, input the texture image B, and generate a 3D wind chime model.

2. The method of claim 1, wherein the three-dimensional bell model is generated based on two-dimensional images. Step 3 includes: Step 3.1: Perform a clip operation with the center of the new model image A' as the reference, expanding the width outward by 5% from the center to form a separable region; Step 3.2: Cut the expanded image into two parts from top to bottom, forming two sets of images; Step 3.3: Perform n center scaling operations on the left and right sets of images, where n is an even number, and each two scaling operations form a scaling pair; Step 3.4: Store the scaling results sequentially into the image array to form a set of slice groups.

3. The method for generating a three-dimensional wind chime model based on a two-dimensional image as described in claim 1, characterized in that, Step 5 includes: Step 5.1: Select one image from the list of original wind chime images and use the straddle algorithm to extract edges; Step 5.2: Starting from the top left corner of the selected image, scan line by line to find the first pixel with non-zero transparency and set it as the edge start point; Step 5.3: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left, with 0 for transparency and 1 for non-transparency, to form a four-bit binary code; Step 5.4: Convert the binary code into a decimal index and determine the direction of travel by looking up a predefined direction table; Step 5.5: Move to the next edge pixel in the specified direction, and repeat steps 5.3 to 5.4 until you return to the starting point or close the loop; Step 5.6: Obtain the complete set of edge path points.

4. The method for generating a three-dimensional wind chime model based on a two-dimensional image as described in claim 1, characterized in that, Step 6 includes: Step 6.1: Sort the edge path point set in a clockwise direction; Step 6.2: Take three consecutive edge points P1(x1,y1), P2(x2,y2), and P3(x3,y3), and calculate Δ. The formula is Δ=(x2-x1)×(y3-y1)-(y2-y1)×(x3-x1); Step 6.3: When Δ > 0, the three points form a valid triangle in a clockwise direction; when Δ < 0, the three points form a valid triangle in a counterclockwise direction; when Δ = 0, the three points are collinear and do not form a valid triangle. Step 6.4 If the triangle formed by the three points P1, P2, and P3 does not contain any other edge path points, then the triangle is determined to be a valid partitioning unit; save the indices of the three points of the valid partitioning unit to the index array. Step 6.5: Repeat steps 6.2 to 6.4 until all points form a complete triangle set.

5. The method for generating a three-dimensional wind chime model based on a two-dimensional image as described in claim 1, characterized in that, Step 8 includes: Step 8.1: Input the edge path point set, edge point triangle set, and their UV coordinates into the Three.js rendering pipeline; Step 8.2: Rotate the left half of the model by +25° around the Z-axis, and rotate the right half of the model around the Z-axis. At 25°, a natural wind chime structure is created; Step 8.3: Use the remaining area of ​​the clip to form the central axis part, and repeat the triangulation and UV mapping to generate the central structure; Step 8.4: Input texture image B as a PBR material texture into Three.js and combine it with ambient light and parallel light; Step 8.5: Output a complete 3D wind chime model to enable online display and real-time interaction.

6. A computer-readable storage medium, characterized in that, The storage medium stores a computer program; when the computer program is executed in the computer, it causes the computer to perform the method for generating a three-dimensional wind chime model based on a two-dimensional image as described in any one of claims 1 to 5.

7. An electronic device, characterized in that, It includes an image input module, a data initialization module, an AABB calculation module, an edge cropping module, a slice scaling module, a mask compositing module, an edge extraction module, a triangulation module, a UV mapping module, a rendering module, and a display module; The image input module is used to input model image A and texture image B; The data initialization module uses Canvas2D to load the model image and extract pixel information to obtain the width, height, and pixel transparency matrix of model image A. The AABB calculation module scans the pixel transparency matrix of the model image A line by line and calculates the minimum bounding rectangle AABB of the non-transparent pixels, and then records the coordinates of the upper left and lower right corners of the AABB. The edge clipping module uses Canvas2D to perform clipping operations and remove blank background areas, generating a new model image A' and outputting its width, height, and pixel transparency matrix; The slice scaling module performs several slices, scaling and image layering on the new model image A' to obtain several sets of scaling pairs; For each scaling pair, the mask synthesis module uses the second image as a mask for the first image to perform a mask overlay operation, thereby obtaining a list of original wind chime images. The edge extraction module automatically identifies and quantifies the contour boundary of the wind chime to obtain the edge path point set; The triangulation module constructs a set of edge point triangles for the edge path point set; The UV mapping module normalizes the edge points of the edge path point set and maps them to UV coordinates; The rendering module generates a 3D wind chime model based on the edge path point set, the edge point triangle set and its UVs, and the texture image B, and outputs it to the display module for display.

Images