Picture batch processing method applied to Cocos engine, medium and equipment

Abstract

The invention provides a picture batch processing method applied to a Cocos engine, a medium and equipment, and the method comprises the steps: loading a batch processing picture group, and constructing a picture attribute cache table; when the to-be-processed picture is a target picture, key point coordinates used for controlling rounding are determined based on picture information of the target picture, and the picture information of the target picture is updated based on the key point coordinates; starting a fillet vertex transformation logic for vertex transformation of a target picture through a vertex shader, and adopting a conventional vertex transformation logic for a non-target picture; and performing fragment coloring on each to-be-processed picture through the fragment shader to realize batch processing of the batch processing picture group. According to the scheme, a fillet picture implementation scheme matched with a Cocos engine is developed, the natural and smooth fillet effect can be achieved, the visual presentation requirement is met, the batch processing rule can be ingeniously met, it is ensured that many fillet pictures and other elements are efficiently and cooperatively rendered, the stable frame rate is maintained, and the rendering efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of graphics rendering technology, and more specifically, to a batch image processing method, medium, and device applied to the Cocos engine. Background Technology

[0002] In the fields of game, animation, and various interactive application development, the Cocos engine is widely used, and a beautiful and smooth UI interface is a key element. Rounded corner images, due to their smooth and approachable visual style, are more in line with current aesthetics and user experience compared to sharp right-angled images.

[0003] In Cocos development, batch processing can significantly optimize rendering performance by submitting multiple elements with identical textures and similar drawing parameters to the GPU for rendering together. However, images requiring rounded corners cannot participate in batch processing because there are currently two main methods for achieving rounded corners: one is to use graphics libraries (like Cairo and Skia) to perform pixel-level rounded corner drawing operations during image loading. This method can accurately generate rounded corner effects, but because the processing flow for each image is different, they cannot be grouped into a batch during rendering. As a result, the GPU has to execute instructions separately for each rounded corner image, leading to extremely low rendering efficiency. The second method uses masking technology to overlay a mask texture with a pre-set rounded corner shape onto the original image, thereby creating the rounded corner appearance. The masking method is relatively convenient, but it also has drawbacks. The GPU needs to perform additional calculations to blend the mask with the original image, making each rounded corner image a separate rendering unit, which cannot participate in batch processing. Furthermore, the approach of using the graphics rendering API to draw rounded corners pixel by pixel and adding an extra mask layer to the image results in a surge in the number of DrawCalls (N rounded corner images generate N DrawCalls) due to texture differences (masking introduces extra textures that disrupt the consistency of textures within the same batch) or differences in rendering parameters (changes in vertex structure / shader logic block batch merging), causing a sharp drop in GPU utilization.

[0004] Therefore, the shortcomings of existing technologies lie in their disruption of batch processing mechanisms, which severely impacts rendering performance. The pixel-by-pixel rounded corner drawing method based on the graphics rendering API has a high computational load; frequent single-image drawing instructions lengthen GPU idle time, causing significant frame rate fluctuations and noticeable stuttering in complex scenes. While the masking method reduces some CPU processing costs, the GPU rendering process is cumbersome and cannot participate in batch processing. Additional texture sampling and blending calculations consume substantial resources, and as the number of rounded corner images on the interface increases, the frame rate plummets, resulting in a complete loss of smoothness. Summary of the Invention

[0005] The purpose of this application is to provide an image batch processing method, medium, and device for the Cocos engine, and to develop a rounded corner image implementation scheme adapted to the Cocos engine. This scheme can achieve a natural and smooth rounded corner effect, meet visual presentation requirements, and cleverly fit batch processing rules to ensure that numerous rounded corner images can be efficiently rendered in collaboration with other elements, maintain a stable frame rate, and improve rendering efficiency.

[0006] To achieve the above objectives, the embodiments of this application are implemented in the following manner: In a first aspect, embodiments of this application provide a batch image processing method applied to the Cocos engine, comprising: loading a batch image group and constructing an image attribute cache table, wherein the batch image group includes multiple images to be processed, and at least one of the multiple images to be processed is a target image that needs to be rounded; the image attribute cache table caches the image information of each image to be processed, the image information including image size and vertex coordinates; when the image to be processed is a target image, determining the key point coordinates for controlling rounded corners based on the image information of the target image, and updating the image information of the target image based on the key point coordinates; performing vertex transformation on each image to be processed based on the image information using a vertex shader, wherein rounded corner vertex transformation logic is enabled for the vertex transformation of the target image, and conventional vertex transformation logic is used for non-target images; and performing fragment shading on each image to be processed using a fragment shader to achieve batch processing of the batch image group.

[0007] In conjunction with the first aspect, in the first possible implementation of the first aspect, the image information of each image to be processed also includes an image resource ID. The method for determining whether the image to be processed is the target image is as follows: based on the image resource ID, determine whether the image to be processed is associated with a rounded corner processing identifier; if the image resource ID is associated with a rounded corner processing identifier, determine that the image to be processed corresponding to the image resource ID is the target image; if the image resource ID is not associated with a rounded corner processing identifier, determine that the image to be processed corresponding to the image resource ID is not the target image.

[0008] In conjunction with the first aspect, in the second possible implementation of the first aspect, the key point coordinates for controlling corner rounding are determined based on the image information of the target image, including: obtaining the corner radius for rounding each vertex in the target image; determining the center of the rounded corner based on the vertex coordinates and the corner radius of the target image; and determining a set of key point coordinates corresponding to each vertex coordinate based on the vertex coordinates and the corresponding center of the rounded corner, wherein the key point coordinates are the reference coordinates of the control points when fitting a quarter circle using a Bézier curve.

[0009] In conjunction with the first aspect, in the third possible implementation of the first aspect, the vertex shader performs vertex transformation on each image to be processed based on image information, including: the vertex shader performs the following processing on the images to be processed in the batch image group: determines whether the current image to be processed is the target image; if the current image to be processed is not the target image, calls the regular vertex transformation logic, performs the regular vertex transformation on the current image to be processed based on the image information, and outputs the result; if the current image to be processed is the target image, calls the rounded vertex transformation logic, performs the rounded vertex transformation on the current image to be processed based on the image information, and outputs the result.

[0010] Combining the third possible implementation of the first aspect, in the fourth possible implementation of the first aspect, the rounded vertex transformation logic is called to perform rounded vertex transformation on the current image to be processed based on the image information, including: for each vertex coordinate: based on the vertex coordinate and its corresponding set of key point coordinates, the vertex coordinate is translated using a Bézier curve to obtain the latest coordinates corresponding to this vertex coordinate.

[0011] In conjunction with the fourth possible implementation of the first aspect, in the fifth possible implementation of the first aspect, based on the vertex coordinates and its corresponding set of keypoint coordinates, a Bézier curve is used to perform a displacement transformation on the vertex coordinates to obtain the latest coordinates corresponding to these vertex coordinates. This includes: performing a coordinate system transformation on the vertex coordinates to determine the anchor point coordinates of the vertex coordinates in the anchor point coordinate system; mapping the anchor point coordinates corresponding to the vertex coordinates to Bézier curve parameters; using the keypoint coordinates corresponding to these vertex coordinates and the Bézier curve parameters, calculating the latest coordinates corresponding to these vertex coordinates to complete the rounded vertex transformation.

[0012] In conjunction with the second possible implementation of the first aspect, in the sixth possible implementation of the first aspect, after performing vertex transformation on each image to be processed based on image information using the vertex shader, the method further includes: passing the corner radius and image size as varying variables to the fragment shader, wherein the corner radius of non-target images is 0; correspondingly, performing fragment coloring on each image to be processed using the fragment shader includes: processing the images to be processed in the batch image group using the fragment shader as follows: receiving varying variables passed from the vertex shader; rendering based on the corner radius and image size using a distance field algorithm.

[0013] In conjunction with the sixth possible implementation of the first aspect, the seventh possible implementation of the first aspect uses a distance field algorithm for rendering based on the corner radius and image size, including: moving the texture coordinate origin to the image center point to establish a symmetrical coordinate system centered on the image; performing boundary distance detection on each fragment based on the corner radius and image size to obtain the signed distance value of each fragment; and generating smooth transparency based on the signed distance value, wherein for fragments with signed distance values ​​less than a set value... For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 1.0 to remain completely opaque. For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 0 to remain completely transparent. For fragments with a signed distance value within the range... The anti-aliasing transparency of fragments is determined based on the symbolic distance value. Maintain a gradual change in transparency between elements; sample the texture color of the image to be processed, and render based on the anti-aliasing transparency and texture color of the fragments.

[0014] Secondly, embodiments of this application provide a storage medium disposed within an electronic device, comprising a stored program, wherein, when the program is executed, the electronic device containing the storage medium is controlled to execute the image batch processing method applied to the Cocos engine as described in the first aspect or any possible implementation thereof.

[0015] Thirdly, embodiments of this application provide an electronic device, including a memory and a processor. The memory is used to store information including program instructions, and the processor is used to control the execution of the program instructions. When the program instructions are loaded and executed by the processor, they implement the steps of the image batch processing method applied to the Cocos engine as described in the first aspect or any of the possible implementations of the first aspect.

[0016] Beneficial effects: 1. This solution loads batch image groups and constructs an image attribute cache table (caching image information for each image to be processed, including image size and vertex coordinates). When the image to be processed is a target image (i.e., an image requiring rounded corners), the keypoint coordinates used to control the rounded corners are determined, and the image information of this target image is updated based on the keypoint coordinates (the keypoint coordinates are added to the image attribute cache table). The vertex shader performs vertex transformation on each image to be processed based on the image information. For target images, rounded corner vertex transformation logic is enabled; for non-target images, regular vertex transformation logic is used. This cleverly adjusts vertex positions, deforming the original rectangular vertices towards rounded corner areas, reshaping a precise rounded corner outline. Finally, the fragment shader performs fragment shading on each image to be processed (using a unified... The processing logic involves passing the corner radius and image size as varying variables to the fragment shader, while assigning a corner radius of 0 to non-target images. The fragment shader receives varying variables from the vertex shader and, based on the corner radius and image size, uses a distance field algorithm for rendering, achieving batch processing of the batch of images. This approach achieves a natural and smooth rounded corner effect, meeting visual presentation requirements, while cleverly adhering to batch processing rules (because the images in the same batch maintain batch processing conditions, only minor adjustments to the processing logic of the vertex and fragment shaders are needed to allow rounded corner processing to participate in batch processing without hindrance, achieving efficient rendering). This ensures that numerous rounded corner images and other elements are rendered efficiently and collaboratively, maintaining a stable frame rate and comprehensively optimizing application rendering performance.

[0017] 2. Image resource IDs are cached using an image attribute table. These resource IDs can be associated with rounded corner processing identifiers, allowing the vertex shader to determine whether the image to be processed corresponding to that resource ID is the target image. This determines whether to use rounded corner transformation logic or regular vertex transformation logic when shading the vertex of the image to be processed. This ensures that the vertex shader performs vertex shading on each image to be processed in the batch processing image group (including target images that need rounded corner processing and non-target images that do not need rounded corner processing) using a unified rendering instruction structure, completing the batching of image rounded corner processing and regular processing without interrupting the batch processing. When rounding corners on the target image, the rounded corner radius corresponding to each vertex coordinate can be used to determine the rounded corner center, generating a set of keypoint coordinates corresponding to each vertex coordinate (reference coordinates of control points when fitting a 1 / 4 circle using a Bézier curve). Then, the vertex coordinates are transformed using a Bézier curve to obtain the latest coordinates corresponding to this vertex coordinate, thereby realizing the rounded corner processing of the target image in the vertex shading stage.

[0018] 3. The corner radius and image size are passed as varying variables to the fragment shader via the vertex shader (the corner radius of non-target images is set to 0). The fragment shader receives the varying variables from the vertex shader and then renders based on the corner radius and image size using the distance field algorithm. When rendering using the distance field algorithm, anti-aliasing of the rounded corner edges is considered. This is achieved by moving the texture coordinate origin to the image center point, establishing a symmetrical coordinate system centered on the image. Based on the corner radius and image size, boundary distance detection is performed on each fragment to obtain a signed distance value for each fragment. Based on the signed distance value, smooth transparency is generated. For signed distance values ​​less than a set value... For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 1.0 to remain completely opaque. For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 0 to remain completely transparent. For fragments with a signed distance value within the range... The anti-aliasing transparency of fragments is determined based on the symbolic distance value. The process maintains a gradual change in transparency; it samples the texture color of the image to be processed and renders based on the anti-aliasing transparency and texture color of the fragments. This allows for pixel-level anti-aliasing rendering of rounded corners, ensuring a natural and smooth transition.

[0019] 4. This solution is structured as follows: Preprocessing stage (building and updating the image attribute cache table), Vertex shading stage (shading the vertices of the images to be processed: rounded corner vertex transformation logic is used for target images, and conventional vertex transformation logic is used for non-target images), and Fragment shading stage (using the distance field algorithm for anti-aliasing rendering of rounded corners). The preprocessing stage creates an efficient image attribute cache table to store key parameters and calculation results of rounded corner images in advance, avoiding redundant calculations. This not only accelerates the rendering process but also forms the core foundation of the solution, providing accurate data support for subsequent vertex and fragment processing. The vertex shading stage incorporates unique vertex judgment and transformation logic to intelligently distinguish between rounded and non-rounded corner images. It can reshape the rounded corner vertices of the target image, seamlessly integrating with the batch processing framework. This is a key part of ensuring that rounded corner images do not disrupt batch processing. The fragment shading stage utilizes the fragment processing method of the distance field algorithm to achieve natural color mixing at rounded corners, resulting in better visual effects. It also aligns with GPU rendering characteristics, facilitating smooth batch processing. The three key components work closely together and are interconnected, successfully solving the challenge of achieving both rounded corners and batch processing of images in the Cocos engine, thus balancing visual effects and performance.

[0020] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0021] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 A flowchart illustrating an image batch processing method applied to the Cocos engine, as provided in this embodiment of the application.

[0023] Figure 2 This is a schematic diagram showing the coordinates of the center of the rounded corner.

[0024] Figure 3 This is a schematic diagram of the transformation to the texture coordinate system. Detailed Implementation

[0025] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.

[0026] Please see Figure 1 , Figure 1 This is a flowchart illustrating an image batch processing method applied to the Cocos engine, as provided in an embodiment of this application. In this embodiment, the image batch processing method applied to the Cocos engine may include steps S10, S20, S30, and S40.

[0027] To achieve batch processing, images that meet batching criteria (such as the same material, the same blending mode, the same rendering queue, etc.) can be grouped into batch processing image groups. These groups include target images that need to be rounded and non-target images that do not need to be rounded. Target images that need to be rounded can be marked and associated with a rounded corner processing identifier for their image resource ID.

[0028] At this point, step S10 can be run.

[0029] Step S10: Load the batch image group and build an image attribute cache table. The batch image group includes multiple images to be processed, and at least one of the multiple images to be processed is a target image that needs to be rounded. The image attribute cache table caches the image information of each image to be processed, including the image size and vertex coordinates.

[0030] In this embodiment, as a preprocessing stage, the batch of images can be preprocessed first: load the batch of images to be batch-processed and construct an image attribute cache table. Here, the batch of images includes multiple images to be processed, and there may be target images that need to be rounded in the multiple images to be processed. To construct the image attribute cache table, it is necessary to load the image texture of the image to be processed, and in addition, parse the metadata information of the image to be processed, extract key parameters such as the image size and the original four-corner coordinates (i.e., vertex coordinates), and construct the image attribute cache table with the image resource ID as the index for convenient subsequent quick search and call.

[0031] After the image attribute cache table is constructed, the target image needs to be further processed. At this time, step S20 is executed.

[0032] Step S20: When the image to be processed is a target image, determine the key point coordinates for controlling rounding based on the image information of the target image, and update the image information of this target image based on the key point coordinates.

[0033] In this embodiment, it is possible to determine whether the image to be processed is a target image through the image resource ID of each image to be processed. The specific method is as follows: Based on the image resource ID, determine whether the image to be processed is associated with a rounding processing flag. If the image resource ID is associated with a rounding processing flag, it can be determined that the image to be processed corresponding to the image resource ID is a target image; if the image resource ID is not associated with a rounding processing flag, it is determined that the image to be processed corresponding to the image resource ID is not a target image.

[0034] For the target image: it is possible to determine the key point coordinates for controlling rounding based on the image information of the target image.

[0035] It is possible to obtain the rounding radius for rounding each vertex in the target image (the rounding radius can be globally set uniformly or fine-tuned as needed for different images), and then determine the rounding center based on the vertex coordinates and the rounding radius of the target image. For example, the vertex coordinates are respectively: (0, 0), (0, h), (w, h), (w, 0), and the rounding radius is r, r < min(w, h). Then, the rounding centers corresponding to the four vertex coordinates are respectively: (r, r), (r, h - r), (w - r, h - r), (w - r, r), as Figure 2 shown.

[0036] After determining the center of the rounded corner, a Bézier curve can be used to fit each set of vertex coordinates and the corresponding quarter circle of the rounded corner center. This determines a set of keypoint coordinates for each vertex coordinate, which serves as the reference coordinates for the control points when fitting the quarter circle using the Bézier curve. Here, a set of keypoint coordinates can consist of 2-3 points; this example uses 2 points, resulting in a total of 8 keypoint coordinates for the four vertices of the target image.

[0037] After obtaining a set of keypoint coordinates corresponding to each vertex coordinate, the keypoint coordinates can be added to the image information of the target image to update the image information of the target image.

[0038] The pseudocode implementation is as follows: interface RoundedImageCache { [textureID: string]: { rawSize: [number, number]; / / Original size cornerRadius: number; / / Corner radius deformedVertices: Float32Array; / / Pre-calculated vertex coordinates (coordinates of 8 key points, stored as 32-bit floating-point numbers) }; } After updating the image information, the vertex shading stage can begin. At this point, the vertex shader can be used to run step S30.

[0039] Step S30: Perform vertex transformation on each image to be processed based on the image information using the vertex shader. For the vertex transformation of the target image, the rounded vertex transformation logic is enabled, and for non-target images, the regular vertex transformation logic is used.

[0040] In this embodiment, for each image to be processed (which may be a target image or a non-target image), the vertex shader can perform vertex transformation on each image to be processed based on the image information.

[0041] For example, the vertex shader can determine whether the current image to be processed is the target image (this can be determined by the image resource ID): If the image to be processed is not the target image, the vertex shader can call the regular vertex transformation logic to perform regular vertex transformations on the current image to be processed based on the image information. Regular vertex transformations are not the focus of this solution and will not be elaborated upon here.

[0042] If the current image to be processed is the target image, the vertex shader can call the rounded vertex transformation logic to perform rounded vertex transformation on the current image to be processed based on the image information and output it.

[0043] For example, for each vertex coordinate of the target image: the vertex shader can use a Bézier curve to perform a displacement transformation on the vertex coordinates based on the vertex coordinates and its corresponding set of keypoint coordinates, to obtain the latest coordinates corresponding to this vertex coordinates.

[0044] Specifically, the vertex shader can perform coordinate system transformation on the vertex coordinates to determine the anchor point coordinates in the anchor point coordinate system. Then, it maps the anchor point coordinates corresponding to the vertex coordinates to the Bézier curve parameter t. Using the key point coordinates and Bézier curve parameter corresponding to the vertex coordinates, it calculates the latest coordinates corresponding to this vertex coordinates, thus completing the rounded vertex transformation.

[0045] The entire process is as follows: original vertex coordinates — anchor point coordinate system transformation (the current vertex coordinates are transformed from model space to a local coordinate system centered on these vertex coordinates) — calculation of parameter t (find the position parameter t of the current vertex on the ideal arc path; since the anchor point coordinates corresponding to the vertex coordinates are the origin, t can be forced to be 0.5) — Bézier curve calculation (using the Bézier curve formula and the position parameter t, calculate the new position that the vertex coordinates should be on the fillet) — inverse coordinate system transformation (transform from the local coordinate system back to model space to obtain the latest coordinates corresponding to the vertex coordinates) — output the latest coordinates of the vertex coordinates.

[0046] The pseudocode implementation of the vertex shader is as follows: attribute vec2 a_position; / / Original vertex position uniform sampler2D u_cacheMap; / / Texture the cache table data void main() { vec4 cacheData = texture2D(u_cacheMap, textureID); if (cacheData.a > 0.0) { / / Identify rounded corner images using the alpha channel vec2 deformedPos = deformPosition(a_position, cacheData.xyzw); gl_Position = u_projMatrix * vec4(deformedPos, 0, 1); v_radius = cacheData.z; / / Pass the radius to the fragment } else { gl_Position = u_projMatrix * vec4(a_position, 0, 1); / / Standard procedure } } Image resource IDs are cached using an image attribute table. These resource IDs can be associated with rounded corner processing identifiers, allowing the vertex shader to determine whether the image to be processed corresponding to that resource ID is the target image. This determines whether to use rounded corner transformation logic or regular vertex transformation logic when shading the vertex of the image to be processed. This approach ensures that the vertex shader uses a unified rendering instruction structure to perform vertex shading on each image to be processed in a batch (including target images requiring rounded corner processing and non-target images that do not require rounded corner processing), combining rounded corner processing and regular processing into a single batch without interrupting the batch process. When rounding the target image, the rounded corner radius corresponding to each vertex coordinate can be used to determine the rounded corner center, generating a set of keypoint coordinates for each vertex coordinate (reference coordinates of control points when fitting a quarter circle using a Bézier curve). The vertex coordinates are then transformed using a Bézier curve to obtain the latest coordinates for that vertex, thus achieving rounded corner processing of the target image during the vertex shading stage.

[0047] After calculating the latest coordinates for each vertex, the vertex shader can pass the corner radius and image size as varying variables to the fragment shader. The corner radius for non-target images is 0. This 0 corner radius for non-target images is primarily to maintain a consistent rendering pattern in subsequent fragment shader rendering, thus preserving batch processing conditions.

[0048] Therefore, the fragment shader stage can be entered, and step S40 is executed by the fragment shader.

[0049] Step S40: Perform fragment coloring on each image to be processed using a fragment shader to achieve batch processing of the batch image group.

[0050] In this embodiment, the fragment shader can process the images to be processed in the batch image group as follows: receive the varying variables passed from the vertex shader, and then render them using the distance field algorithm based on the corner radius and image size.

[0051] For example, a fragment shader can move the origin of the texture coordinates to the center of the image, establishing a symmetrical coordinate system centered on the image, such as... Figure 3As shown. Then, based on the corner radius and image size, boundary distance detection is performed on each fragment to obtain the signed distance value of each fragment; based on the signed distance value, smooth transparency is generated, wherein for fragments with a signed distance value less than a set value... For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 1.0 to remain completely opaque. For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 0 to remain completely transparent. For fragments with a signed distance value within the range... The anti-aliasing transparency of fragments is determined based on the symbolic distance value. Maintain a gradual change in transparency between them. For example, If the signed distance is -2 (per pixel), then when the signed distance is -2, the fragment's anti-aliasing opacity is set to 1.0; when the signed distance is -1, the fragment's anti-aliasing opacity is set to 0.5; and when the signed distance is 0, the fragment's anti-aliasing opacity is set to 0. Of course, other schemes are also possible, for example... If the value is -5, then the transparency can also be gradually changed according to the proportion of the signed distance value.

[0052] Then, the texture color of the image to be processed can be sampled, and rendering can be performed based on the anti-aliasing transparency and texture color of the fragment.

[0053] The pseudocode for implementing rounded corner anti-aliasing using the distance field algorithm in the fragment shader is as follows: float sdf = length(max(abs(v_uv - 0.5) - (v_size * 0.5 - v_radius),0.0)) - v_radius; float alpha = smoothstep(-1.0, 1.0, -sdf * u_pixelRatio); / / Anti-aliased transition vec4 color = texture2D(u_texture, v_uv); gl_FragColor = vec4(color.rgb, color.a * alpha); / / Outputs a color with rounded corners and transparency. The vertex shader passes the corner radius and image size as varying variables to the fragment shader (the corner radius of non-target images is set to 0). The fragment shader receives the varying variables from the vertex shader and then renders based on the corner radius and image size using the distance field algorithm. When rendering using the distance field algorithm, pixel-level anti-aliasing is achieved for the rounded corners of the image, ensuring a smooth and natural transition.

[0054] Instructions for using this solution in the project: 1. During the project resource import phase, developers mark image resources that need to be processed into rounded corners and set global or single image rounded corner radius parameters (or use a globally uniform rounded corner radius).

[0055] 2. The Cocos engine automatically performs the preprocessing process in the background to populate the image attribute cache table; during rendering, no additional code intervention is required, and the engine's internal vertex and fragment shaders operate according to the established logic, efficiently rendering rounded corner images.

[0056] 3. If developers wish to fine-tune the rounded corner effect, they can inherit and rewrite the relevant logic of the vertex and fragment shaders, and flexibly customize based on the existing framework to meet special visual needs.

[0057] 4. In addition to the regular texture file, the rounded corner image resource is accompanied by a lightweight metadata file, which records the original attributes of the image, rounded corner setting parameters, and other information. This facilitates accurate parsing and extraction of key data during the preprocessing stage, and works in conjunction with the main texture file to complete the rounded corner effect rendering, thereby improving resource management and rendering efficiency.

[0058] Overall workflow: The application starts, loads image resources, and the preprocessing module parses and populates the cache table, which takes relatively little time and allows for parallel processing of multiple images. Each frame is rendered by rapidly traversing vertices, adjusting vertex coordinates in real-time when encountering rounded corner images, and outputting new vertex information. The fragment shader receives vertex information, identifies fragment regions, samples textures, mixes and outputs colors, and the rendering of a single frame ends. The entire process is interspersed with the rendering of other ordinary elements, fitting the batch processing rhythm.

[0059] When the entire solution is running, it has the following advantages: the rendering instruction structure is completely equivalent to that of rounded corner images and ordinary rectangular images; DrawCall=1 (regardless of the number of rounded corner images), the fragment shader only adds ≤10 instructions, the metadata file size is <1KB, and there are no redundant textures; it automatically adapts to the existing Cocos pipeline and requires zero API modifications.

[0060] According to actual testing: in a scenario with 1000 rounded corner images, the frame rate remains at 55+ FPS (iPhone 13 Pro), with a performance loss of less than 3%.

[0061] This application provides a storage medium disposed within an electronic device, comprising a stored program, wherein the program, when running, controls the electronic device containing the storage medium to execute the image batch processing method applied to the Cocos engine according to this embodiment.

[0062] Furthermore, this application provides an electronic device including a memory and a processor. The memory is used to store information including program instructions, and the processor is used to control the execution of the program instructions. When the program instructions are loaded and executed by the processor, they implement the steps of the image batch processing method applied to the Cocos engine in this embodiment.

[0063] In summary, this application provides a batch image processing method, medium, and device for the Cocos engine. This solution loads a batch of images and constructs an image attribute cache table (caching image information for each image to be processed, including image size and vertex coordinates). When the image to be processed is a target image (i.e., an image requiring rounded corners), the keypoint coordinates for controlling the rounded corners are determined, and the image information of the target image is updated based on these keypoint coordinates (the keypoint coordinates are added to the image attribute cache table). The vertex shader performs vertex transformation on each image to be processed based on the image information. For target images, rounded corner vertex transformation logic is enabled; for non-target images, conventional vertex transformation logic is used. This cleverly adjusts vertex positions, deforming the original rectangular vertices towards rounded corner areas, reshaping a precise rounded corner outline, and then using fragment shading... The processor performs fragment shading on each image to be processed (using a unified processing logic, passing the corner radius and image size as varying variables to the fragment shader, and assigning a corner radius of 0 to non-target images; the fragment shader receives varying variables from the vertex shader, and uses a distance field algorithm for rendering based on the corner radius and image size, thus achieving batch processing of batch image groups. This approach achieves a natural and smooth rounded corner effect, meeting visual presentation requirements, and cleverly conforms to batch processing rules (because the images to be processed in the same batch maintain batch processing conditions, only partial adjustments to the processing logic of the vertex shader and fragment shader are needed to allow the rounded corner processing of images to participate in batch processing without hindrance, achieving efficient rendering), ensuring that numerous rounded corner images and other elements are rendered efficiently and collaboratively, maintaining a stable frame rate, and comprehensively optimizing application rendering performance.

[0064] This solution is structured as follows: a preprocessing stage (building and updating the image attribute cache table), a vertex shading stage (shading the vertices of the images to be processed: rounded corner vertex transformation logic is used for target images, and regular vertex transformation logic is used for non-target images), and a fragment shading stage (using the distance field algorithm for anti-aliasing rendering of rounded corners). The preprocessing stage creates an efficient image attribute cache table, pre-storing key parameters and calculation results for rounded corner images to avoid redundant calculations, accelerating the rendering process and forming the core foundation of the solution, providing accurate data support for subsequent vertex and fragment processing. The vertex shading stage incorporates unique vertex judgment and transformation logic, intelligently distinguishing between rounded and non-rounded corner images, enabling the reshaping of rounded corner vertices for target images, seamlessly integrating with the batch processing framework, and is a crucial part of ensuring that rounded corner images do not disrupt batch processing. The fragment shading stage utilizes the distance field algorithm's fragment processing method to achieve natural color blending at rounded corners, achieving better visual effects while also aligning with GPU rendering characteristics, facilitating smooth batch processing. These three stages work closely together, successfully solving the challenge of achieving both rounded corners and batch processing in the Cocos engine, balancing visual effects and performance.

[0065] In this document, relational terms such as first and second are used only to distinguish one entity or operation from another entity or operation, without necessarily requiring or implying any such actual relationship or order between these entities or operations.

[0066] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A batch image processing method applied to the Cocos engine, characterized in that, include: Load the batch image group and build the image attribute cache table. The batch image group includes multiple images to be processed, and at least one of the multiple images to be processed is a target image that needs to be rounded. The image attribute cache table caches the image information of each image to be processed, including the image size and vertex coordinates. When the image to be processed is the target image, the key point coordinates used to control the rounded corners are determined based on the image information of the target image, and the image information of the target image is updated based on the key point coordinates. The vertex shader performs vertex transformation on each image to be processed based on the image information. For the vertex transformation of the target image, the rounded vertex transformation logic is enabled, and for the non-target image, the regular vertex transformation logic is used. By using a fragment shader to color each image to be processed, batch processing of a group of images can be achieved.

2. The image batch processing method applied to the Cocos engine according to claim 1, characterized in that, The image information for each image to be processed also includes an image resource ID. The method for determining whether an image to be processed is the target image is as follows: Based on the image resource ID, determine whether the image to be processed is associated with a rounded corner processing identifier; If an image resource ID is associated with a rounded corner processing identifier, the image to be processed corresponding to that image resource ID is determined to be the target image; If the image resource ID is not associated with a rounded corner processing identifier, it is determined that the image to be processed corresponding to that image resource ID is not the target image.

3. The image batch processing method applied to the Cocos engine according to claim 1, characterized in that, Based on the image information of the target image, the coordinates of key points used to control rounded corners are determined, including: Obtain the corner radius of each vertex in the target image after rounding. Based on the vertex coordinates and corner radius of the target image, determine the center of the rounded corner; Based on the vertex coordinates and the corresponding rounded corner center, a set of key point coordinates corresponding to each vertex coordinate is determined. The key point coordinates are the reference coordinates of the control points when fitting a quarter circle using a Bézier curve.

4. The image batch processing method applied to the Cocos engine according to claim 1, characterized in that, The vertex shader performs vertex transformations on each image to be processed based on the image information, including: The following processing is performed on the images to be processed in the batch image group using the vertex shader: Determine if the image to be processed is the target image; If the current image to be processed is not the target image, the regular vertex transformation logic is called to perform a regular vertex transformation on the current image to be processed based on the image information and output it. If the current image to be processed is the target image, call the rounded vertex transformation logic to perform rounded vertex transformation on the current image to be processed based on the image information and output it.

5. The image batch processing method applied to the Cocos engine according to claim 4, characterized in that, The rounded corner vertex transformation logic is invoked to perform rounded corner vertex transformation on the current image to be processed based on the image information, including: For each vertex coordinate: Based on the vertex coordinate and its corresponding set of keypoint coordinates, the vertex coordinate is transformed using a Bézier curve to obtain the latest coordinates corresponding to this vertex.

6. The image batch processing method applied to the Cocos engine according to claim 5, characterized in that, Based on the vertex coordinates and their corresponding set of keypoint coordinates, a Bézier curve is used to perform a displacement transformation on the vertex coordinates to obtain the latest coordinates corresponding to this vertex, including: Perform coordinate system transformation on the vertex coordinates to determine the anchor point coordinates within the anchor point coordinate system; Map the anchor point coordinates corresponding to the vertex coordinates to Bézier curve parameters; Using the keypoint coordinates and Bézier curve parameters corresponding to this vertex coordinates, calculate the latest coordinates corresponding to this vertex coordinates to complete the rounded vertex transformation.

7. The image batch processing method applied to the Cocos engine according to claim 3, characterized in that, After performing vertex transformation on each image to be processed using a vertex shader based on image information, the method further includes: The corner radius and image size are passed as varying variables to the fragment shader, where the corner radius of non-target images is 0; Correspondingly, each image to be processed is fragment-colored using a fragment shader, including: The fragment shader is used to process the images in the batch image group as follows: Receives the varying variables passed from the vertex shader; Rendering is performed using a distance field algorithm based on the corner radius and image size.

8. The image batch processing method applied to the Cocos engine according to claim 7, characterized in that, Rendering is performed using a distance field algorithm based on corner radius and image size, including: Move the origin of the texture coordinates to the center of the image to establish a symmetrical coordinate system centered on the image. Based on the corner radius and image size, boundary distance detection is performed on each fragment to obtain the signed distance value of each fragment; A smooth transparency is generated based on the signed distance value, wherein for signed distance values ​​less than a set value... For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 1.0 to remain completely opaque. For fragments with a signed distance value greater than 0, set the anti-aliasing opacity to 0 to remain completely transparent. For fragments with a signed distance value within the range... The anti-aliasing transparency of fragments is determined based on the symbolic distance value. Maintain a gradual change in transparency between them; The texture color of the image to be processed is sampled, and rendering is performed based on the anti-aliasing transparency and texture color of the fragments.

9. A storage medium, characterized in that, The storage medium is disposed within an electronic device and includes a stored program, wherein, when the program is executed, it controls the electronic device containing the storage medium to execute the image batch processing method applied to the Cocos engine as described in any one of claims 1 to 8.

10. An electronic device comprising a memory and a processor, the memory for storing information including program instructions, and the processor for controlling the execution of the program instructions, characterized in that: When the program instructions are loaded and executed by the processor, they implement the steps of the image batch processing method applied to the Cocos engine as described in any one of claims 1 to 8.

Images