Image rendering processing method and device, nonvolatile storage medium and electronic equipment

Abstract

The invention discloses an image rendering processing method and device, a nonvolatile storage medium and electronic equipment. The method comprises the following steps: acquiring an original image; determining texture features based on the distribution condition of pixel points included in the original image and the time parameters; according to the texture features, the frost strength of the pixel points is determined, and the frost strength is used for representing the display degree of the frost effect in the original image; and performing rendering processing on the original image according to the frost intensity to obtain a target image presenting a frost effect. According to the method and the device, the technical problem that the frost effect generated by rendering the image is not ideal in the prior art is solved.

Description

Technical Field

[0001] The present application relates to the field of image processing, and more specifically, to an image rendering processing method, device, non-volatile storage medium, and electronic device. Background Art

[0002] Frost effects are a popular visual effect in image processing and user interface design, used to create a cool and blurred visual experience. They typically simulate the appearance of frost through gradients, blurs, or transparency changes, adding an artistic and layered quality to the image. In related art, frost effects on images are typically implemented using CSS and JavaScript animations, or by utilizing complex image synthesis using image processing libraries. However, generating frost effects on images using these methods still has several drawbacks. First, achieving high-quality randomized frost effects requires complex calculations and texture manipulation, placing high demands on graphics hardware performance. Second, the generated frost effects lack realism and naturalness, failing to capture the complex physical phenomena of the frosting process, such as crystal growth and ice crystal shape changes. Finally, for applications requiring faster frost generation, achieving high-quality frost effects without sacrificing frame rate is difficult. Consequently, related art suffers from the problem of unsatisfactory frost effects generated by rendering images.

[0003] To address the above-mentioned problems, no effective solutions have been proposed so far. Summary of the Invention

[0004] The embodiments of the present application provide an image rendering processing method, apparatus, non-volatile storage medium, and electronic device to at least solve the technical problem in the related art of unsatisfactory frost effects generated by rendering images.

[0005] According to one aspect of an embodiment of the present application, an image rendering processing method is provided, including: acquiring an original image; determining texture features based on the distribution of pixels included in the original image and time parameters; determining the frost intensity of the pixels according to the texture features, wherein the frost intensity is used to indicate the degree of appearance of the frost effect in the original image; rendering the original image according to the frost intensity to obtain a target image presenting the frost effect.

[0006] Optionally, texture features are determined based on the distribution of pixels included in the original image and time parameters, including: processing according to the coordinates of the target pixel in the original image and the time parameters to obtain a first random number; determining the distribution of the target pixel based on the distance between the target pixel and other pixels in the current cell and multiple adjacent cells, wherein the original image is divided into multiple cells and the current cell where the target pixel is located is adjacent to multiple adjacent cells; determining the single-point feature of the target pixel according to the first random number and the distribution of the target pixel; determining the single-point feature of each pixel included in the original image by adopting the method of determining the single-point feature of the target pixel; and determining the texture feature based on the single-point feature of each pixel.

[0007] Optionally, processing is performed according to the coordinates of the target pixel point in the original image and the time parameters to obtain a first random number, including: when the coordinates are pixel coordinates, normalizing the pixel coordinates to a predetermined numerical range to obtain the texture coordinates of the target pixel point; using a preset main noise function, processing based on the texture coordinates and time parameters to obtain the first random number.

[0008] Optionally, determining the single-point feature of the target pixel point according to the first random number and the distribution status of the target pixel point includes: generating a second random number based on the first random number and the offset using a hash function; and determining the single-point feature based on the second random number and the distribution status.

[0009] Optionally, based on the distance between the target pixel point and other pixel points in the current cell and multiple adjacent cells, the distribution status of the target pixel point is determined, including: determining the corresponding center point and random points in the current cell and multiple adjacent cells as other pixel points; determining the minimum distance among the distances between the target pixel point and the center points and random points corresponding to the current cell and multiple adjacent cells; and determining the distribution status of the target pixel point based on the minimum distance.

[0010] Optionally, the original image is rendered according to the frost intensity to obtain a target image presenting a frost effect, including: determining the transparency of the target pixel in the original image according to the frost intensity; mixing the original color of the target pixel in the original image and a predetermined frost color based on the transparency to determine the rendering parameters of the target pixel; and rendering the original image according to the rendering parameters to obtain the target image.

[0011] Optionally, the method further includes: updating the time parameters according to a predetermined period; obtaining new rendering parameters by adopting the method of obtaining rendering parameters when the time parameters are updated; rendering the original image according to the new rendering parameters to obtain a new target image.

[0012] According to another aspect of an embodiment of the present application, an image rendering processing device is provided, including: an image acquisition module for acquiring an original image; a texture feature determination module for determining texture features based on the distribution of pixels included in the original image and time parameters; a frost intensity determination module for determining the frost intensity of the pixels according to the texture features, wherein the frost intensity is used to indicate the degree of appearance of the frost effect in the original image; and a target image determination module for rendering the original image according to the frost intensity to obtain a target image presenting a frost effect.

[0013] According to another aspect of an embodiment of the present application, a non-volatile storage medium is provided. The non-volatile storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing any one of the image rendering processing methods.

[0014] According to another aspect of an embodiment of the present application, an electronic device is provided, comprising: one or more processors and a memory, the memory being used to store one or more programs, wherein when the one or more programs are executed by one or more processors, the one or more processors implement any one of the image rendering processing methods.

[0015] In an embodiment of the present application, an original image is acquired; texture features are determined based on the distribution of pixels in the original image and a time parameter; frost intensity is determined based on the texture features, where the frost intensity represents the degree of frost effect visible in the original image; and the original image is rendered based on the frost intensity to obtain a target image exhibiting a frost effect. This achieves the goal of determining the texture features of the original image using a noise function, and then rendering the original image in combination with the frost intensity and rendering parameters to obtain a target image exhibiting a frost effect. This achieves the technical effect of enhancing the realism and layering of the frost effect in the target image, thereby resolving the technical problem of unsatisfactory frost effects generated by image rendering in related technologies. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0017] Figure 1 is a flowchart of an optional image rendering processing method provided according to an embodiment of the present application;

[0018] Figure 2 is a structural diagram of an optional image rendering processing method provided according to an embodiment of the present application;

[0019] Figure 3 This is an effect diagram of an optional image rendering processing method provided in an embodiment of the present application;

[0020] Figure 4 This is a schematic diagram of an optional image rendering processing device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0021] In order to enable those skilled in the art to better understand the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of this application.

[0022] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in a sequence other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0023] For ease of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0024] Vue Custom Directives are an extension mechanism provided by the Vue.js framework (a progressive JavaScript framework for building user interfaces) for adding specific behaviors or functionality to HTML (Hypertext Markup Language) elements. Developers can bind custom behaviors to DOM (Document Object Model) elements for greater flexibility and controllability in rendering and interaction. Custom directives can be reused and applied across different components, improving code maintainability and reusability.

[0025] GLSL (OpenGL Shading Language) is a programming language for writing graphics shaders, which are used to perform high-performance parallel computing and graphics processing tasks in the graphics rendering pipeline. GLSL uses C-style syntax and provides a rich set of built-in functions and data types, enabling developers to implement a variety of complex image processing effects. It supports different types of shader programs, such as vertex shaders, fragment shaders, and geometry shaders.

[0026] CSS (Cascading Style Sheets) is a style language used to describe how elements in an HTML or XML (Extensible Markup Language) document are presented on the screen, on paper, or on other media.

[0027] JavaScript is a lightweight, interpreted programming language primarily used to implement interactivity and dynamic functionality on web pages.

[0028] According to an embodiment of the present application, a method embodiment of an image rendering processing method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0029] Figure 1 is a flowchart of an optional image rendering processing method provided according to an embodiment of the present application, such as Figure 1 As shown, the method includes the following steps:

[0030] Step S102, obtaining an original image;

[0031] It can be understood that the original image needs to be rendered to present the frost effect.

[0032] Step S104, determining texture features based on the distribution of pixels included in the original image and a time parameter;

[0033] As can be understood, pixel data of the original image is obtained to determine the distribution of pixels within the original image. A time parameter is then determined, and based on the distribution of pixels within the original image and the time parameter, the texture characteristics of the original image at the current time parameter are determined. By generating a texture based on the pixel distribution, the natural formation of frost on the image can be simulated, resulting in a more realistic and natural effect.

[0034] In an optional embodiment, texture features are determined based on the distribution of pixels included in the original image and a time parameter, including: processing according to the coordinates of the target pixel in the original image and the time parameter to obtain a first random number; determining the distribution of the target pixel based on the distance between the target pixel and other pixels in the current cell and multiple adjacent cells, wherein the original image is divided into multiple cells and the current cell where the target pixel is located is adjacent to multiple adjacent cells; determining the single-point feature of the target pixel according to the first random number and the distribution of the target pixel; determining the single-point feature of each pixel included in the original image by using a method for determining the single-point feature of the target pixel; and determining the texture feature based on the single-point feature of each pixel.

[0035] It can be understood that the original image is divided into multiple cells, the coordinates of the target pixel in the original image are determined, and the first random number is obtained in combination with the time parameter. The current cell where the target pixel is located and the multiple adjacent cells adjacent to the current cell are determined, and then the distance between the target pixel and other pixels in the current cell and the multiple adjacent cells is determined, and the distribution of the target pixel is determined based on the distance. Based on the distribution of the target pixel and the first random number, the single point feature (i.e., point texture) of the target pixel is determined. According to the above process, the single point features corresponding to the multiple pixels included in the original image are determined, and based on the single point features corresponding to the multiple pixels, the texture features of the original image under the current time parameter are obtained. By combining the coordinates of the pixel, the time parameter and its local distribution in the image, generating random numbers and determining the single point features, the texture features of the entire image are finally formed, ensuring that while retaining the image details, a dynamic, delicate and realistic frost fade effect is produced, thereby improving the user experience and visual appeal.

[0036] In an optional embodiment, the coordinates of the target pixel point in the original image and the time parameter are processed to obtain a first random number, including: when the coordinates are pixel coordinates, normalizing the pixel coordinates to a predetermined numerical range to obtain the texture coordinates of the target pixel point; using a preset main noise function, processing based on the texture coordinates and time parameters to obtain the first random number.

[0037] It can be understood that if the original image pixel coordinates are pixel coordinates, to reduce the impact of resolution, the pixel coordinates of the target pixel are converted to texture coordinates through normalization. The texture coordinates of the pixel fall within a predetermined range, such as [0, 1]. A first random number is generated based on the time parameter and the texture coordinates of the target pixel using a predetermined main noise function. By normalizing the pixel coordinates and processing them through the noise function in conjunction with the time parameter, a more detailed and natural frost effect can be generated. The degree of frost at different pixels varies depending on their position in the image and the time parameter, thereby simulating the physical phenomenon of frost accumulation or dissipation under different conditions and time.

[0038] Alternatively, Perlin noise or Worley noise can be used to simulate frost effects. By defining a random function (such as a hash function), different noise values ​​can be generated for subsequent texture processing.

[0039] Optionally, the pixel coordinates of the target pixel point are normalized using the following formula to obtain texture coordinates.

[0040]

[0041] Among them, fragCoord represents the pixel coordinates of the target pixel point, iResolution represents the resolution, and uv represents the texture coordinates of the target pixel point.

[0042] Optionally, during image rendering, the time parameter iTime can be used to dynamically update the noise value, enhancing the dynamics of the frost effect. The main noise function GenRandom can incorporate a time factor into its input, generating a first random number A for the target pixel under the time parameter iTime, allowing the frost effect to vary across different time frames.

[0043] A=GenRandom(uv+iTime)

[0044] Among them, iTime represents the time parameter.

[0045] In an optional embodiment, the single-point feature of the target pixel point is determined according to the first random number and the distribution status of the target pixel point, including: generating a second random number based on the first random number and the offset using a hash function; and determining the single-point feature based on the second random number and the distribution status.

[0046] As can be understood, a hash function is used to generate a second random number based on the first random number and the offset of the target pixel. The single-point feature of the target pixel is determined based on the second random number and the distribution of the target pixels. The random number generated by the hash function creates a non-uniform distribution of the frost effect across the image, mimicking the naturally occurring irregularities of frost formation in the real world. Furthermore, the generation of the second random number and the determination of the single-point feature ensure that the intensity and type of the frost effect are independently determined for each pixel, increasing the randomness and diversity of the frost effect in the image.

[0047] Optionally, define a two-dimensional hash function `Hash2` to generate a second random number.

[0048] Hash2(uv)=1-2fract(cos(uv.x·vec2(91.52,-74.27)+uv.y·vec2(-39.07,9.78))·939.24)

[0049] Here, fract represents the fractional function, vec2(91.52, -74.27) and vec2(-39.07, 9.78) represent two two-dimensional constant vectors, uv.x represents the horizontal texture coordinate of the target pixel, and uv.y represents the vertical texture coordinate of the target pixel. This function generates random values ​​for the input texture coordinates, providing the basis for noise.

[0050] Optionally, using the `Hash2` function above, the texture coordinates uv of the input target pixel are rounded to the nearest grid cell using the `floor` function (a mathematical function that rounds the input coordinates down) to determine the nearest neighbor cell (i.e., the current cell). The distances from randomly generated points and the center point of the current cell and its neighboring cells to the target pixel are calculated to find the nearest point, and the minimum distance D is determined as the noise value (i.e., distribution) of the target pixel. This distance value is used to determine the frost intensity.

[0051] D=min(length(0.5·Hash2(A+offset)+A-uv+offset),D)

[0052] Wherein, length represents the distance calculation function, offset represents the offset of adjacent cells, such as (1,0), (0,1), etc., A represents the first random number, and Hash2(A+offset) represents the second random number.

[0053] In an optional embodiment, the distribution status of the target pixel point is determined based on the distance between the target pixel point and other pixel points in the current cell and multiple adjacent cells, including: determining the corresponding center point and random points in the current cell and multiple adjacent cells as other pixel points; determining the minimum distance among the distances between the target pixel point and the center points and random points corresponding to the current cell and multiple adjacent cells; and determining the distribution status of the target pixel point based on the minimum distance.

[0054] It can be understood that the original image is divided into multiple cells, and the texture coordinates of the target pixel in the original image are determined. According to the texture coordinates of the target pixel, the current cell to which the target pixel belongs and multiple adjacent cells of the current cell are determined. The center point and random point of the above-mentioned current cell, as well as the center points and random points corresponding to the above-mentioned multiple adjacent cells, are used as other pixel points of the target pixel. The distance between the target pixel and the above-mentioned other pixel points is determined to obtain the minimum distance. Based on the minimum distance, the distribution status of the target pixel is determined. By calculating the distance between the target pixel and the surrounding random points and center points, the non-uniform distribution characteristics of frost on the image can be simulated, making the frost effect closer to natural phenomena and enhancing the realism and artistic sense of the visual effect.

[0055] Step S106, determining the frost intensity of the pixel point according to the texture feature, wherein the frost intensity is used to represent the degree of appearance of the frost effect in the original image;

[0056] As you can understand, the frost intensity of each pixel in the original image is determined based on the original image's texture features. Frost intensity represents the degree to which the frost effect appears in the original image. By mapping the original image's texture features to frost intensity, a frost effect with subtle layers and randomness can be created, making it appear more natural and realistic.

[0057] Optionally, the initial frost intensity F is generated according to the texture coordinates of the pixel point and the time parameter iTime, and the formula is:

[0058] F=noise(uv+iTime)

[0059] Among them, noise function represents the noise function.

[0060] Optionally, after the initial frost intensity F is determined, the frost intensity F′ of each pixel in the original image is obtained according to the texture features of the original image and the initial frost intensity F, so as to control the appearance degree of the frost effect.

[0061] Step S108 : Rendering the original image according to the frost intensity to obtain a target image showing a frost effect.

[0062] It can be understood that, according to the frost intensity, the original image is rendered to obtain a target image showing the frost effect. By calculating the frost intensity and applying it to the rendering process of the original image, a natural and realistic frost effect can be generated.

[0063] In an optional embodiment, the original image is rendered according to the frost intensity to obtain a target image presenting a frost effect, including: determining the transparency of the target pixel in the original image according to the frost intensity; mixing the original color of the target pixel in the original image and a predetermined frost color based on the transparency to determine the rendering parameters of the target pixel; and rendering the original image according to the rendering parameters to obtain the target image.

[0064] It will be appreciated that the transparency of the target pixel is determined based on the frost intensity of the target pixel. Based on the transparency, the original color of the target pixel, determined based on the original image, is blended with the predetermined frost color of the target pixel to obtain the rendering parameters of the target pixel. The rendering parameters corresponding to each of the multiple pixels included in the original image are determined using the aforementioned method, and the original image is rendered based on these corresponding rendering parameters to obtain the target image. By calculating transparency and performing color blending, a high-quality image frost effect is achieved, enhancing the naturalness and layering of the visual effect.

[0065] Optionally, define a transparency function `opacity` and use a smooth interpolation function (such as `smoothstep`) to achieve a gradual change in transparency. The formula of the opacity function is:

[0066] opacity=smoothstep(min,max,F′)

[0067] Where min and max are predetermined transparency thresholds.

[0068] Optionally, the original image color C is adjusted based on the calculated transparency. base and frost color C frost To mix:

[0069] C=mix(C base ,C frost ,opacity)

[0070] Where C represents the rendering parameter of the target pixel, and mix represents the mixing function, which is used to mix two colors to achieve a smooth transition effect.

[0071] In an optional embodiment, the method further includes: updating the time parameters according to a predetermined period; when the time parameters are updated, obtaining new rendering parameters by adopting the method of obtaining rendering parameters; rendering the original image according to the new rendering parameters to obtain a new target image.

[0072] As can be understood, the time parameters are updated periodically to obtain new time parameters. Based on the new time parameters, the original image's new texture features, new frost intensity, and new rendering parameters are re-determined. The original image is then rendered based on these new texture features, new frost intensity, and new rendering parameters to obtain a new target image under the updated time parameters. By periodically updating the time parameters and recalculating the rendering parameters, a frost effect that changes dynamically over time can be generated, creating a frost fade-in and fade-out effect, enhancing the dynamic and immersive visual experience.

[0073] In step S102, an original image is obtained; in step S104, texture features are determined based on the distribution of pixels in the original image and a time parameter; in step S106, frost intensity is determined for each pixel based on the texture features, where the frost intensity represents the degree of frost effect visible in the original image; and in step S108, the original image is rendered based on the frost intensity to obtain a target image exhibiting a frost effect. This method achieves the goal of determining the texture features of the original image using a noise function, and then rendering the original image in combination with the frost intensity and rendering parameters to obtain a target image exhibiting a frost effect. This method achieves the technical effect of enhancing the realism and layering of the frost effect in the target image, thereby resolving the technical problem of unsatisfactory frost effects generated by image rendering in related technologies.

[0074] Based on the above-mentioned embodiments and optional embodiments, the present application proposes an optional implementation method, a method for generating an image frost fade effect based on custom instructions. The image frost fade effect is a visual effect commonly used in image processing and animation, in which the image presents a blurred, frosty texture as it gradually appears or disappears. This effect gradually blurs the edges of the image, as if covered by frost, enhancing the visual softness and artistic atmosphere. In practical applications, it is often achieved by adjusting the transparency and blurriness of the image to make the image transition more natural. It is commonly seen in slides, video editing, and user interface design.

[0075] A custom directive-based method for generating image frost fade effects combines Vue custom directives with WebGL technology (a browser-based 3D graphics application programming interface), enabling developers to quickly implement high-quality frost effects without writing complex code. This method leverages the parallel computing power of the GPU (Graphics Processing Unit). In the fragment shader, a noise function is first applied to generate a randomly distributed point texture, simulating the non-uniform characteristics of frost on the surface. Furthermore, by dynamically adjusting parameters, developers can customize the effect to meet different scenario requirements, thereby improving the user experience, lowering the design barrier, improving development efficiency, and achieving richer visual effects.

[0076] Step S1, custom instruction definition. Create a Vue custom instruction `v-frosted-fade`, first register it through Vue.directive (a global method for registering custom instructions in the Vue.js framework). In the mounted hook of the instruction (a function), get the WebGL context and configure the basic rendering state, such as setting the clear color and viewport size. Next, load the required vertex and fragment shaders to ensure that they can support the calculation of noise and frost effects. Subsequently, prepare the necessary textures (such as background images) and set the Uniform parameters (such as time, noise intensity) to dynamically control the frost effect. Finally, implement the rendering loop and use requestAnimationFrame (an application program interface provided by the browser for performing animations) to update the screen regularly to ensure that the effect is smooth and reflects changes in real time.

[0077] Step S2, vertex shader definition. The vertex shader is responsible for mapping the vertex coordinates of the original image to the pixel coordinate system. The output formula of the pixel coordinate is:

[0078] gl_Position=vec4(a_position,0.0,1.0)

[0079] Among them, gl_Position represents the pixel coordinates output by the vertex shader, vec4(a_position,0.0,1.0) represents a four-dimensional vector, a_position represents the original position of the pixel point, which is a three-dimensional vector, 0.0 represents the homogeneous coordinates of the vector, and 1.0 represents the depth value of the pixel point.

[0080] Step S3: Build the fragment shader. The fragment shader implements the core logic of the frost effect fade-in and fade-out. It calculates the normalized texture coordinates based on the current pixel coordinates.

[0081]

[0082] Among them, fragCoord represents the pixel coordinates of the target pixel point, iResolution represents the resolution, and uv represents the texture coordinates of the target pixel point.

[0083] In step S4, a primary noise function is used to generate randomly distributed point-like textures (i.e., single-point features of pixels) to simulate the non-uniform characteristics of frost on the surface. A noise generation function for frost effects, such as Perlin noise or Worley noise, is used to simulate frost effects. A random function (e.g., a hash function) is defined to generate different noise values ​​for texture processing in subsequent steps.

[0084] Step S41: Noise function selection. An appropriate noise generation function is selected. Commonly used noise generation functions include Perlin noise and Worley noise. Worley noise is used as an example because it has a good visual effect and is suitable for simulating frost textures.

[0085] Step S42: Hash function definition. Define a two-dimensional hash function `Hash2` to generate the second random number. Hash2(uv) = 1-2fract(cos(uv.x·vec2(91.52,-74.27)+uv.y·vec2(-39.07,9.78))·939.24)

[0086] Here, fract represents the fractional function, vec2(91.52, -74.27) and vec2(-39.07, 9.78) represent two two-dimensional constant vectors, uv.x represents the horizontal texture coordinate of the target pixel, and uv.y represents the vertical texture coordinate of the target pixel. This function generates random values ​​for the input texture coordinates, providing the basis for noise.

[0087] Step S43: Implementation of the main noise function. The logic of the main noise function, `GenRandom`, is as follows: The texture coordinates uv of the input target pixel are rounded to the nearest grid cell using the `floor` function (a mathematical function used to round input coordinates down) to determine the nearest neighboring cell (i.e., the current cell). The distances from randomly generated random points and the center point of the current cell and its neighboring cells to the target pixel are calculated to find the nearest point. The minimum distance D is determined as the noise value (i.e., distribution) of the target pixel. This distance value is used to determine the frost intensity.

[0088] D=min(length(0.5·Hash2(A+offset)+A-uv+offset),D)

[0089] Wherein, length represents the distance calculation function, offset represents the offset of adjacent cells, such as (1,0), (0,1), etc., A represents the first random number, and Hash2(A+offset) represents the second random number.

[0090] During image rendering, the time parameter iTime is used to dynamically update the noise value, enhancing the dynamics of the frost effect. The main noise function GenRandom can be input with a time factor, generating the first random number A for the target pixel under the time parameter iTime, making the frost effect appear to vary across different time frames.

[0091] A=GenRandom(uv+iTime)

[0092] Among them, iTime represents the time parameter.

[0093] Through the above steps, the main noise function provides basic data for the frost effect of the image, making the final effect more natural and layered.

[0094] Step S5, frost effect calculation. Generate the initial frost intensity F according to the texture coordinates of the pixel point and the time parameter iTime, the formula is:

[0095] F=noise(uv+iTime)

[0096] Among them, noise function represents the noise function.

[0097] After determining the initial frost intensity F, the main rendering function is used to obtain the frost intensity F′ of each pixel in the original image according to the texture characteristics of the original image and the initial frost intensity F, thereby controlling the degree of frost effect.

[0098] Step S6: Transparency calculation. Define the transparency function `opacity` and use a smooth interpolation function (such as `smoothstep`) to achieve a gradual change in transparency. The formula of the opacity function is:

[0099] opacity=smoothstep(min,max,F′)

[0100] Where min and max are predetermined transparency thresholds.

[0101] Step S7, color mixing logic. According to the calculated transparency, the original image color C base and frost color C frost To mix:

[0102] C=mix(C base ,C frost,opacity)

[0103] Where C represents the rendering parameter of the target pixel, and mix represents the mixing function, which is used to mix two colors to achieve a smooth transition effect.

[0104] Step S8: The WebGL program is started. The vertex shader and fragment shader are created and linked, and the WebGL rendering pipeline is started to output the final image (i.e., the target image).

[0105] Step S9, use of custom instructions. Developers only need to ` <canvas v-frosted-fade>`(which represents an HTML canvas element used in Vue.js, with a custom directive called v-frosted-fade applied to it)) Add the directive tag to the element to achieve the frosted fade effect.

[0106] Step S10 , through the binding parameters of the instruction, allows the developer to customize the time parameters, noise intensity, transparency range, etc., to enhance the adjustability and flexibility of the frost effect.

[0107] Figure 2 is a structural diagram of an optional image rendering processing method provided according to an embodiment of the present application, such as Figure 2 The flowchart of a method for generating a frost fade effect on an image based on custom instructions is shown. First, a WebGL context is obtained; next, a shader program object is constructed, including defining a vertex shader and projecting a plane so that it covers the entire viewport; next, a fragment shader is constructed, including defining a hash function to generate a second random number, selecting a Worley noise function to simulate a frost texture, determining a main rendering function to determine the frost intensity of a pixel, generating a noise output (i.e., determining a noise value), generating a noise texture (i.e., determining the texture features of the original image), sampling the texture and outputting it (i.e., determining transparency and performing color blending based on the frost intensity); next, a target image (i.e., the original image in the optional embodiment) is input into the constructed shader program object for rendering processing, resulting in a rendered target image; and by adjusting parameters, rendered target images under different parameter conditions are generated, resulting in a frost fade effect on the target image.

[0108] Figure 3 is an effect diagram of an optional image rendering processing method provided in an embodiment of the present application, such as Figure 3 As shown, the picture in the upper left corner is the original picture (i.e., the original image), and the other three pictures are the frost effect pictures of the original image under different parameters. The whole process can present the frost fade-in and fade-out effect of the original image.

[0109] The above optional implementation methods achieve at least the following effects: the method of combining Vue custom instructions with WebGL technology simplifies the implementation process of the frost effect, making it possible to quickly integrate high-quality image effects; adopts the Worley noise generation function to simulate the non-uniform characteristics formed by frost on the surface of the object, and enhances the naturalness and layering of the effect by dynamically adjusting the noise parameters; supports real-time updates and dynamic effects, and increases the variability of the visual effects by introducing time parameters, so that the frost effect shows different characteristics in different time frames; calculates transparency through a smooth interpolation function, and combines the original image color and the frost color for mixing, ultimately generating a natural and layered frost fade-in and fade-out effect; utilizes the parallel computing capability of the GPU to achieve efficient image rendering processing, ensuring the real-time and smoothness of the frost effect.

[0110] It should be noted that the steps shown in the flowcharts of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and that, although a logical order is shown in the flowcharts, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0111] This embodiment also provides an image rendering processing device for implementing the above-mentioned embodiments and preferred implementations. Details already described will not be repeated. As used below, the terms "module" and "device" may refer to a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, implementation using hardware, or a combination of software and hardware, is also possible and contemplated.

[0112] According to an embodiment of the present application, there is also provided an embodiment of a device for implementing the image rendering processing method. Figure 4 is a schematic diagram of an image rendering processing device according to an embodiment of the present application, such as Figure 4 As shown, the image rendering processing device includes an image acquisition module 402, a texture feature determination module 404, a frost intensity determination module 406, and a target image determination module 408. The device will be described below.

[0113] Image acquisition module 402, used to acquire original images;

[0114] The texture feature determination module 404 is connected to the image acquisition module 402 and is used to determine the texture feature based on the distribution of pixels included in the original image and the time parameter;

[0115] a frost intensity determination module 406 connected to the texture feature determination module 404 and configured to determine the frost intensity of a pixel point according to the texture feature, wherein the frost intensity is used to indicate the degree of appearance of the frost effect in the original image;

[0116] The target image determination module 408 is connected to the frost intensity determination module 406 and is configured to render the original image according to the frost intensity to obtain a target image presenting a frost effect.

[0117] In an image rendering processing device provided in an embodiment of the present application, an image acquisition module 402 is provided for acquiring an original image; a texture feature determination module 404, connected to the image acquisition module 402, is configured to determine texture features based on the distribution of pixels in the original image and a time parameter; a frost intensity determination module 406, connected to the texture feature determination module 404, is configured to determine the frost intensity of the pixels according to the texture features, wherein the frost intensity represents the degree of frost effect in the original image; and a target image determination module 408, connected to the frost intensity determination module 406, is configured to render the original image according to the frost intensity to obtain a target image exhibiting a frost effect. This achieves the purpose of determining the texture features of the original image using a noise function, and then rendering the original image in combination with the frost intensity and rendering parameters to obtain a target image exhibiting a frost effect. This achieves the technical effect of improving the realism and layering of the frost effect in the target image, thereby resolving the technical problem of unsatisfactory frost effects generated by image rendering in the related art.

[0118] It should be noted that the above modules can be implemented by software or hardware. For example, for the latter, it can be implemented in the following ways: the above modules can be located in the same processor; or the above modules can be located in different processors in any combination.

[0119] It should be noted that the image acquisition module 402, texture feature determination module 404, frost intensity determination module 406, and target image determination module 408 correspond to steps S102 to S108 in the embodiment. The examples and application scenarios implemented by these modules and corresponding steps are the same, but are not limited to the contents disclosed in the above embodiment. It should be noted that these modules, as part of the device, can be run on a computer terminal.

[0120] It should be noted that the optional or preferred implementation of this embodiment can be found in the relevant description in the embodiment, which will not be repeated here.

[0121] The above-mentioned image rendering processing device may also include a processor and a memory. The image acquisition module 402, the texture feature determination module 404, the frost intensity determination module 406, the target image determination module 408, etc. are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize the corresponding functions.

[0122] The processor includes a kernel, which retrieves the corresponding program unit from memory. There can be one or more kernels. Memory may include non-permanent memory in a computer-readable medium, random access memory (RAM), and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory includes at least one memory chip.

[0123] An embodiment of the present application provides a non-volatile storage medium on which a program is stored. When the program is executed by a processor, an image rendering processing method is implemented.

[0124] An embodiment of the present application provides an electronic device comprising a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, the following steps are performed: obtaining an original image; determining texture features based on the distribution of pixels in the original image and a time parameter; determining frost intensity of the pixels based on the texture features, wherein the frost intensity represents the degree of frost effect in the original image; and rendering the original image based on the frost intensity to obtain a target image exhibiting the frost effect. The device herein may be a server, a PC, or the like.

[0125] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing an initialized program having the following method steps: obtaining an original image; determining texture features based on the distribution of pixels included in the original image and time parameters; determining the frost intensity of the pixels according to the texture features, wherein the frost intensity is used to indicate the degree of appearance of the frost effect in the original image; and rendering the original image according to the frost intensity to obtain a target image presenting the frost effect.

[0126] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, systems, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0127] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the steps in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0128] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0129] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0130] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0131] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0132] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0133] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a..." does not preclude the presence of other identical elements in the process, method, commodity, or apparatus comprising the element.

[0134] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0135] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.< / canvas>

Claims

1. An image rendering processing method, characterized in that: include: Get the original image; Determining texture features based on a distribution of pixels included in the original image and a time parameter; determining the frost intensity of the pixel point according to the texture feature, wherein the frost intensity is used to represent the degree of appearance of the frost effect in the original image; The original image is rendered according to the frost intensity to obtain a target image presenting a frost effect.

2. The method according to claim 1, characterized in that The determining of texture features based on the distribution of pixels in the original image and a time parameter includes: Processing is performed according to the coordinates of the target pixel point in the original image and the time parameter to obtain a first random number; determining a distribution status of the target pixel based on distances between the target pixel and other pixels in a current cell and a plurality of adjacent cells, wherein the original image is divided into a plurality of cells, and the current cell where the target pixel is located is adjacent to the plurality of adjacent cells; Determining a single point feature of the target pixel according to the first random number and the distribution of the target pixel; Determine the single point feature of each pixel included in the original image by using the method of determining the single point feature of the target pixel; The texture feature is determined based on the single-point feature of each pixel.

3. The method according to claim 2, characterized in that The processing according to the coordinates of the target pixel point in the original image and the time parameter to obtain the first random number includes: In the case where the coordinates are pixel coordinates, normalizing the pixel coordinates to a predetermined value range to obtain the texture coordinates of the target pixel point; A preset main noise function is used to perform processing based on the texture coordinates and the time parameter to obtain the first random number.

4. The method according to claim 3, characterized in that The determining of the single point feature of the target pixel according to the first random number and the distribution of the target pixel includes: Generate a second random number using a hash function based on the first random number and the offset; The single-point feature is determined based on the second random number and the distribution condition.

5. The method according to claim 2, characterized in that Determining a distribution status of the target pixel based on distances between the target pixel and other pixels in the current cell and a plurality of adjacent cells includes: Determining corresponding center points and random points in the current cell and the plurality of adjacent cells, respectively, as the other pixel points; Determine a minimum distance among the distances between the target pixel point and the center point and the random point corresponding to the current cell and the plurality of adjacent cells; Based on the minimum distance, a distribution status of the target pixel points is determined.

6. The method according to any one of claims 1 to 5, characterized in that The rendering process is performed on the original image according to the frost intensity to obtain a target image showing a frost effect, including: determining the transparency of a target pixel in the original image according to the frost intensity; According to the transparency, the original color of the target pixel in the original image and a predetermined frost color are mixed to determine a rendering parameter of the target pixel; The original image is rendered according to the rendering parameters to obtain the target image.

7. The method according to claim 1, characterized in that The method further comprises: updating the time parameter according to a predetermined period; When the time parameter is updated, new rendering parameters are obtained by using a rendering parameter obtaining method; The original image is rendered according to the new rendering parameters to obtain a new target image.

8. An image rendering processing device, characterized in that: include: An image acquisition module, used to acquire original images; A texture feature determination module, configured to determine texture features based on a distribution of pixels in the original image and a time parameter; a frost intensity determination module, configured to determine the frost intensity of the pixel point according to the texture feature, wherein the frost intensity is used to represent the degree of appearance of the frost effect in the original image; The target image determination module is used to render the original image according to the frost intensity to obtain a target image presenting a frost effect.

9. A non-volatile storage medium, characterized in that: The non-volatile storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executed by the image rendering processing method according to any one of claims 1 to 7.

10. An electronic device, characterized in that: include: One or more processors and a memory, the memory being used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the image rendering processing method described in any one of claims 1 to 7.

Images