Three-dimensional model multi-scale data reorganization, progressive transmission and rendering method for web-side application

Abstract

The application relates to the technical field of three-dimensional model visualization methods, and discloses a three-dimensional model multi-scale data reorganization, progressive transmission and rendering method for web terminal applications, which comprises the following steps: step 1: obtaining a model file, firstly judging whether the model file is a mesh file, if not, executing step 3, otherwise executing step 2; step 2: if the model file is a mesh file, extracting boundary edges in a data set through a filter, then returning a new data set containing the boundary edges, and executing step 4. The three-dimensional model multi-scale data reorganization, progressive transmission and rendering method for web terminal applications mainly reorganizes the data of a model to obtain a tree structure which is non-redundant and easy to query; based on the structure, transmission is carried out in units of basic data groups with a configurable size, the transmission delay is low, and the total amount of data transmitted is equivalent to the data of a complete model transmitted at a single time, and there is no data redundancy.

Description

Technical Field

[0001] This invention relates to the field of 3D model visualization methods, specifically to a method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications. Background Technology

[0002] In the wave of digital economic development, web applications centered on 3D models have developed rapidly. For example, web-based displays of 3D models can be widely used in digital marketing and promotion. Web applications have advantages that desktop applications do not have, such as no software installation required and instant use. However, web applications also have technical problems that need to be solved. A typical problem is how to efficiently handle large-scale models. The number of polygons in a complex model may reach hundreds of millions, which is a huge amount of data for web display. Loading and displaying the entire model will consume a lot of network bandwidth and memory, resulting in unacceptable latency and rendering stutters. When the data volume is too large, it may even lead to insufficient bandwidth or storage resources, making the software unusable.

[0003] To alleviate the above problems to some extent, there are currently two main solutions: one is multi-level progressive loading, which does not load the complete model data at once, but divides the model into multiple parts according to different levels of detail. Each LOD corresponds to a different model precision. When loading the model, low-resolution model data is loaded first. As the user zooms or pans the model, higher-resolution model data is loaded gradually, and the model precision is gradually increased when more fine details are needed. Another type is mesh simplification technology. Mesh simplification technology uses algorithms to optimize and simplify the model, removing some faces that have little impact on the visual effect or merging adjacent faces, thereby reducing the number of faces and the amount of data in the model.

[0004] The multi-level progressive loading method in Scheme 1 may result in redundant data processing because each level of detail requires a new subdivision process. Gradually loading more resource data may lead to high resource consumption, and the final amount of loaded data will be greater than the amount of data for a single loading of the complete model. In addition, in common practice, other geometric relationships are discarded and only the mesh data is retained, which can cause problems when interacting with the model later. The mesh simplification technique in Scheme 2 reduces the number of facets and the amount of data in the model. When performing mesh simplification, it is necessary to select appropriate simplification algorithms and parameters according to the actual application scenario and data characteristics in order to balance the relationship between model details and data volume. Otherwise, the model's fidelity will be insufficient and many detailed features will be lost. Therefore, a method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications is proposed to address the aforementioned problems. Summary of the Invention

[0005] (a) Technical problems to be solved To address the shortcomings of existing technologies, this invention provides a method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications. This method has advantages such as reducing data storage, improving information retrieval and processing speed, reducing redundant transmission, optimizing rendering efficiency, and improving user experience. It solves the problems that multi-level progressive loading may lead to high resource consumption and data redundancy, while mesh simplification may result in the loss of detailed features of the model.

[0006] (II) Technical Solution To achieve the aforementioned goals of reducing data storage, improving information retrieval and processing speed, reducing redundant transmission, optimizing rendering efficiency, and improving user experience, this invention provides the following technical solution: a method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications, comprising the following steps: Step 1: Once the model file is obtained, first determine if it is a mesh file. If not, proceed to step 3; otherwise, proceed to step 2. Step 2: If it is a mesh file, extract the boundary edges in the dataset using a filter, and return a new dataset containing the boundary edges. Then proceed to Step 4. Step 3: If it is not a mesh file, extract the edge information directly by traversing the edges of the model, and then proceed to Step 4; Step 4: Store the outer border data and output it to the web application. For mesh files, proceed to step 7; for geometry files, proceed to step 5. Step 5: Triangulate the model and determine if the face information has been traversed. If not, continue with the subsequent operations in Step 5; otherwise, proceed to Step 6. First, traverse the face information, record the face number and vertex data, and determine if the vertex has been added repeatedly. If not, add it to the data and record the index of its triangular face vertex, then proceed to Step 5. Step 6: Traverse the volume information and determine if the volume information has been traversed. If not, continue with the subsequent operations in Step 6; otherwise, proceed to Step 8. Obtain the current volume number, the data of all faces within the volume, and proceed with Step 6. Step 7: Traverse the cell information and determine whether the cell information has been traversed. If not, continue to step 7; otherwise, continue to execute. Record the cell number and vertex data, and determine whether the vertex has been added repeatedly. If not, add it to the data and record the index of its triangle face vertex. Execute step 8. Preparation stage for back-side rejection: Step 8: Perform OpenGL initialization settings; create and bind frame buffers, initialize rendering settings, enable backplane culling, set camera position, and render. Step 9: Bind VAO, VBO, and IBO, then proceed to Step 10; Step 10: Create and bind the frame buffer to the top and bottom, and bind the texture attachment to the frame buffer, then proceed to Step 11; Step 11: Initialize rendering settings and enable backface culling, then proceed to step 12; Step 12: Off-screen rendering, proceed to step 13; Progressive data transfer rendering stage: Step 13: Create an array processed by the Fisher-Yates algorithm, denoted as pixelIndices, to store the indices of all pixels; and create a cell marker array and a vertex marker array to obtain the color of all pixels on the screen, and then proceed to step 14. Step 14: Traverse pixelIndices and determine if all pixels have been traversed. If all pixels have been traversed, proceed to step 15; otherwise, proceed to step 14. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 15; otherwise, write the string and proceed to step 14. Step 15: Output the forward surface model fragment data, reset the string, and execute step 14; Step 16: Traverse the cell marker array and determine if the array has been traversed. If it has been traversed, proceed to step 18; otherwise, proceed to step 16. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 17; otherwise, write the string and proceed to step 16. Step 17: Output the forward surface model fragment data, reset the string, and execute step 16; Step 18: End the sharding operation.

[0007] Preferably, in step 2, a filter is used to preprocess the dataset in the mesh file to extract the boundary edge data. Then, the extracted boundary edge data is stored in a new dataset, and step 4 is executed. In step 4, the outer border data in the extracted dataset is stored for subsequent processing and analysis. At the same time, according to the type of model file, the corresponding operation is performed. For mesh files, step 7 is executed; for geometry files, step 5 is executed.

[0008] Preferably, in step 5, the model is triangulated to divide it into multiple faces. Then, the information of these faces is traversed, the face number and vertex data are recorded, and it is determined whether a vertex has been added repeatedly. If not, it is added to the data and the index of its triangular face vertex is recorded.

[0009] Preferably, in step 8, OpenGL needs to be initialized, including creating a window, setting the viewport size, and clearing the color buffer. These settings ensure that OpenGL can work properly and is ready for rendering.

[0010] Preferably, in step 9, the vertex array object, vertex buffer object, and index buffer object need to be bound to the current context. These objects are used to manage vertex data and index data and provide an efficient way to render objects.

[0011] Preferably, in step 10, a new framebuffer object needs to be created and bound to the current context. At the same time, a texture suitable for the framebuffer attachment also needs to be generated and bound to the framebuffer. In this way, the texture is used for shading and mapping operations during rendering.

[0012] Preferably, in step 11, the rendering needs to be configured again, including enabling depth testing and enabling backface culling. These settings ensure that objects are drawn in the correct order during the rendering process and only the objects closest to the camera are displayed. In step 12, rendering can proceed. In this step, the OpenGL rendering function is called to draw the objects in the scene into the frame buffer.

[0013] Preferably, in step 13, data reading and preprocessing operations need to be performed, such as reading and processing the frame buffer after rendering is completed, or saving and outputting the rendering results.

[0014] Preferably, in step 14, the pixelIndices array is traversed to check if all pixels have been traversed. If all pixels have been traversed, step 15 is executed; otherwise, the cell flag and vertex flag of the current pixel are set to 1, and this information is added to a string. Then, it is checked whether the size of the string exceeds 5MB. If it exceeds 5MB, step 15 is executed; otherwise, more information is added to the string, and step 14 is executed.

[0015] Preferably, in step 17, the sliced ​​data of the forward face model is output to the screen, and the string is reset to store the next batch of data. Then, step 16 is executed, that is, the cell marker array is traversed and the above process is repeated.

[0016] (III) Beneficial Effects Compared with existing technologies, this invention provides a method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications, which has the following advantages: 1. This method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications primarily reorganizes the model data into a non-redundant and easily queryable tree structure. Based on this structure, data is transmitted in configurable-sized basic data groups, resulting in low transmission latency and a total transmitted data volume equivalent to a single transmission of the complete model's data, eliminating data redundancy. Simultaneously, by incorporating observer perspective and other information, the transmitted data groups are sorted, prioritizing the rendering of user-visible front faces to improve the user experience. Firstly, the multi-scale data reorganization strategy reduces data file storage by eliminating the need for redundant data and outputting information according to a hierarchical structure. This allows for faster on-demand information retrieval for the picking function. Furthermore, during fragmentation, incremental data filling is performed, resulting in the same data volume as directly loading a model, avoiding repeated transmission of the same data.

[0017] 2. This method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications uses a backface culling strategy to map units onto the texture of the framebuffer. The projected area of ​​the framebuffer represents the planar area of ​​the corresponding unit's projection in the coordinate system of the framebuffer region. This potentially reduces the number of units that need to be processed by 50%. Furthermore, it combines random sampling with backface culling using the Fisher-Yates shuffling algorithm to ensure that visible units with large projected areas are transmitted first, thus achieving spatial continuity and improving the user experience. Finally, a progressive data transmission and rendering strategy is used: when a piece of data is successfully prepared, it is transmitted to the client for rendering, thereby improving rendering efficiency, enhancing the user's platform experience, and enabling them to obtain the required information more quickly. Attached Figure Description

[0018] Figure 1 This is a flowchart of the data reorganization part of the multi-scale model of the present invention; Figure 2 This is a flowchart of the progressive data transmission and rendering stage of the present invention; Figure 3 This is a flowchart illustrating the progressive transmission and cloud rendering process of a 3D model based on multi-scale data reorganization, as described in this invention. Detailed Implementation

[0019] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0020] Example 1 Please see Figure 1-3 A method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications includes the following steps: Step 1: Once the model file is obtained, first determine if it is a mesh file. If not, proceed to step 3; otherwise, proceed to step 2. Step 2: If it is a mesh file, extract the boundary edges in the dataset using a filter, and return a new dataset containing the boundary edges. Then proceed to Step 4. Step 3: If it is not a mesh file, extract the edge information directly by traversing the edges of the model, and then proceed to Step 4; Step 4: Store the outer border data and output it to the web application. For mesh files, proceed to step 7; for geometry files, proceed to step 5. Step 5: Triangulate the model and determine if the face information has been traversed. If not, continue with the subsequent operations in Step 5; otherwise, proceed to Step 6. First, traverse the face information, record the face number and vertex data, and determine if the vertex has been added repeatedly. If not, add it to the data and record the index of its triangular face vertex, then proceed to Step 5. Step 6: Traverse the volume information and determine if the volume information has been traversed. If not, continue with the subsequent operations in Step 6; otherwise, proceed to Step 8. Obtain the current volume number, the data of all faces within the volume, and proceed with Step 6. Step 7: Traverse the cell information and determine whether the cell information has been traversed. If not, continue to step 7; otherwise, continue to execute. Record the cell number and vertex data, and determine whether the vertex has been added repeatedly. If not, add it to the data and record the index of its triangle face vertex. Execute step 8. Preparation stage for back-side rejection: Step 8: Perform OpenGL initialization settings; create and bind frame buffers, initialize rendering settings, enable backplane culling, set camera position, and render. Step 9: Bind VAO, VBO, and IBO, then proceed to Step 10; Step 10: Create and bind the frame buffer to the top and bottom, and bind the texture attachment to the frame buffer, then proceed to Step 11; Step 11: Initialize rendering settings and enable backface culling, then proceed to step 12; Step 12: Off-screen rendering, proceed to step 13; Progressive data transfer rendering stage: Step 13: Create an array processed by the Fisher-Yates algorithm, denoted as pixelIndices, to store the indices of all pixels; and create a cell marker array and a vertex marker array to obtain the color of all pixels on the screen, and then proceed to step 14. Step 14: Traverse pixelIndices and determine if all pixels have been traversed. If all pixels have been traversed, proceed to step 15; otherwise, proceed to step 14. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 15; otherwise, write the string and proceed to step 14. Step 15: Output the forward surface model fragment data, reset the string, and execute step 14; Step 16: Traverse the cell marker array and determine if the array has been traversed. If it has been traversed, proceed to step 18; otherwise, proceed to step 16. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 17; otherwise, write the string and proceed to step 16. Step 17: Output the forward surface model fragment data, reset the string, and execute step 16; Step 18: End the sharding operation.

[0021] Example 2 Please see Figure 1-3 The multi-scale data reorganization stage includes the following: reading the model file; extracting its edge information, simultaneously performing file fragmentation processing, and outputting it to the web application. The purpose is to: 1. prioritize rendering on the application side, allowing users to perceive the model outline faster and reduce latency; 2. extract the edge information algorithm logic; for parametric geometric models, edge information is extracted directly by traversing the edge information of the model; for discrete mesh models, the boundary edges in the dataset are extracted through filters, and a new dataset containing the boundary edges is returned.

[0022] The progressive data transfer rendering stage includes the following: 1. Perform OpenGL initialization preparation 2. Binding of vertex and color data and indices; 3. Creation and binding of relevant buffers 4. Enable backface culling for off-screen rendering; 5. Random sampling is performed using the Fisher-Yates algorithm to select forward-facing and backward-facing triangular facets.

[0023] How to obtain specific information about the surface: Before off-screen rendering, use a color buffer to mark and index each triangle with a different color; RGBA is in the range of 0-255, so a base-256 system is used for recording the face index, which can record a total of 2... 32 Number of face indexes.

[0024] Logic for determining front and back faces: In off-screen rendering, the backplane culling technique is used to remove pixels on the backplane during the rasterization stage, so that only pixels on the frontplane enter the fragment processing stage. The front-side pixels are obtained by reading the pixels in the color buffer of the framebuffer object; the front and back sides are distinguished by using a marking method.

[0025] Example 3 Please see Figure 1-3 Multi-scale data reorganization includes the following: Topological relationships are stored using a hierarchical tree structure of the model; For mesh models, the hierarchical relationship is only the relationship from the model to the subdivided elements; For geometric models, the hierarchical structure obtained after model analysis is in order from high to low levels.

[0026] In summary, this method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications primarily reorganizes the model data into a non-redundant and easily queryable tree structure. Based on this structure, data is transmitted in configurable-sized basic data groups, resulting in low transmission latency and a total transmitted data volume equivalent to a single transmission of the complete model's data, eliminating data redundancy. Simultaneously, by incorporating observer perspective information, the transmitted data groups are sorted, prioritizing the rendering of user-visible front faces to enhance the user experience. Firstly, the multi-scale data reorganization strategy reduces data file storage by eliminating the need for redundant data and outputting information according to a hierarchical structure. This allows for faster on-demand information retrieval for the picking function. Furthermore, during fragmentation processing, incremental data filling ensures the same data volume as directly loading a model, avoiding repeated transmission of the same data.

[0027] Furthermore, by using a backface culling strategy, units are mapped onto the texture of the framebuffer. The projected area of ​​the framebuffer represents the planar area of ​​the corresponding slice unit projected in the coordinate system of the framebuffer region. On the one hand, this potentially reduces the number of units that need to be processed by 50%. On the other hand, the Fisher-Yates shuffling algorithm is used to combine random sampling with backface culling to ensure that slices visible to the user and with large projected areas are transmitted first, thereby achieving a spatial continuity effect and improving the user experience. Finally, a progressive data transmission and rendering strategy is used: when a piece of data is successfully prepared, it is transmitted to the client for rendering, thereby improving rendering efficiency, enhancing the user's platform experience, and enabling them to obtain the required information more quickly.

[0028] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0029] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications, characterized by: Includes the following steps: Step 1: Once the model file is obtained, first determine if it is a mesh file. If not, proceed to step 3; otherwise, proceed to step 2. Step 2: If it is a mesh file, extract the boundary edges in the dataset using a filter, and return a new dataset containing the boundary edges. Then proceed to Step 4. Step 3: If it is not a mesh file, extract the edge information directly by traversing the edges of the model, and then proceed to Step 4; Step 4: Store the outer border data and output it to the web application. For mesh files, proceed to step 7; for geometry files, proceed to step 5. Step 5: Triangulate the model and determine if the face information has been traversed. If not, continue with the subsequent operations in Step 5; otherwise, proceed to Step 6. First, traverse the face information, record the face number and vertex data, and determine if the vertex has been added repeatedly. If not, add it to the data and record the index of its triangular face vertex, then proceed to Step 5. Step 6: Traverse the volume information and determine if the volume information has been traversed. If not, continue with the subsequent operations in Step 6; otherwise, proceed to Step 8. Obtain the current volume number, the data of all faces within the volume, and proceed with Step 6. Step 7: Traverse the cell information and determine whether the cell information has been traversed. If not, continue to step 7; otherwise, continue to execute. Record the cell number and vertex data, and determine whether the vertex has been added repeatedly. If not, add it to the data and record the index of its triangle face vertex. Execute step 8. Preparation stage for back-side rejection: Step 8: Perform OpenGL initialization settings; create and bind frame buffers, initialize rendering settings, enable backplane culling, set camera position, and render. Step 9: Bind VAO, VBO, and IBO, then proceed to Step 10; Step 10: Create and bind the frame buffer to the top and bottom, and bind the texture attachment to the frame buffer, then proceed to Step 11; Step 11: Initialize rendering settings and enable backface culling, then proceed to step 12; Step 12: Off-screen rendering, proceed to step 13; Progressive data transfer rendering stage: Step 13: Create an array processed by the Fisher-Yates algorithm, denoted as pixelIndices, to store the indices of all pixels; and create a cell marker array and a vertex marker array to obtain the color of all pixels on the screen, and then proceed to step 14. Step 14: Traverse pixelIndices and determine if all pixels have been traversed. If all pixels have been traversed, proceed to step 15; otherwise, proceed to step 14. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 15; otherwise, write the string and proceed to step 14. Step 15: Output the forward surface model fragment data, reset the string, and execute step 14; Step 16: Traverse the cell marker array and determine if the array has been traversed. If it has been traversed, proceed to step 18; otherwise, proceed to step 16. Set the index corresponding to the obtained cell marker array to 1 and the index corresponding to the vertex marker array to 1. Determine if the string to be written is greater than 5MB. If it is, proceed to step 17; otherwise, write the string and proceed to step 16. Step 17: Output the forward surface model fragment data, reset the string, and execute step 16; Step 18: End the sharding operation.

2. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications as described in claim 1, characterized in that: In step 2, a filter is used to preprocess the dataset in the mesh file to extract the boundary edge data. Then, the extracted boundary edge data is stored in a new dataset, and step 4 is executed. In step 4, the outer border data in the extracted dataset is stored for subsequent processing and analysis. At the same time, according to the type of model file, the corresponding operation is performed. For mesh files, step 7 is executed; for geometry files, step 5 is executed.

3. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications as described in claim 1, characterized in that: In step 5, the model is triangulated to divide it into multiple faces. Then, the information of these faces is traversed, and the face number and vertex data are recorded. At the same time, it is determined whether a vertex has been added repeatedly. If not, it is added to the data, and the index of its triangular face vertex is recorded.

4. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications as described in claim 1, characterized in that: Step 8 requires initializing OpenGL settings, including creating a window, setting the viewport size, and clearing the color buffer. These settings ensure that OpenGL is working correctly and ready for rendering.

5. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 9, the vertex array object, vertex buffer object, and index buffer object need to be bound to the current context. These objects are used to manage vertex data and index data and provide an efficient way to render objects.

6. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 10, a new framebuffer object needs to be created and bound to the current context. At the same time, a texture suitable for the framebuffer attachment also needs to be generated and bound to the framebuffer. This way, the texture is used for shading and mapping operations during rendering.

7. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 11, the rendering needs to be configured again, including enabling depth testing and enabling backface culling. These settings ensure that objects are drawn in the correct order during the rendering process and only the objects closest to the camera are displayed. Rendering is performed in step 12. In this step, the OpenGL rendering function is called to draw the objects in the scene into the frame buffer.

8. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 13, data reading and preprocessing operations need to be performed. After rendering is completed, the frame buffer needs to be read and processed, or the rendering results need to be saved and output.

9. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 14, the pixelIndices array is traversed to check if all pixels have been traversed. If all pixels have been traversed, step 15 is executed; otherwise, the cell flag and vertex flag of the current pixel are set to 1, and this information is added to a string. Then, it is checked whether the size of the string exceeds 5MB. If it exceeds 5MB, step 15 is executed; otherwise, more information is added to the string, and step 14 is executed.

10. The method for multi-scale data reorganization, progressive transmission, and rendering of 3D models for web applications according to claim 1, characterized in that: In step 17, the sliced ​​data of the forward face model is output to the screen, and the string is reset to store the next batch of data. Then, step 16 is executed, which is to traverse the cell marker array and repeat the above process.

Images