Special effect display method and device, terminal and storage medium

Abstract

The embodiment of the invention discloses a special effect display method and device, a terminal and a storage medium, and belongs to the technical field of image processing. The method comprises the steps that sub-special-effect rendering is carried out through multiple sub-special-effect rendering channels, multiple sub-special-effect rendering results are obtained, and different sub-special-effect rendering channels are used for rendering different sub-special-effects; performing special effect synthesis on the multiple paths of sub-special effect rendering results through a synthesis rendering path to obtain a special effect synthesis result; and displaying the special effect synthesis result in a second display layer superposed above a first display layer, wherein the first display layer is used for displaying a first interface of a to-be-displayed special effect. According to the scheme provided by the embodiment of the invention, the power consumption of special effect display can be reduced on the premise of ensuring the special effect display effect.

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the technical field of image processing, and particularly relate to a special effect display method and device, a terminal, and a storage medium. BACKGROUND

[0002] In order to prompt a user that a certain function is triggered, a terminal usually displays a corresponding function special effect when the function is triggered.

[0003] In related technologies, a terminal displays a function special effect through a window. When a complex function special effect needs to be displayed, multiple special effect windows need to be created and displayed in a superimposed manner. SUMMARY

[0004] Embodiments of the present application provide a special effect display method, device, terminal, and storage medium. The technical solutions are as follows:

[0005] In one aspect, a special effect display method is provided, and the method includes:

[0006] Sub-effect rendering is performed through multiple sub-effect rendering paths to obtain multiple sub-effect rendering results, and different sub-effect rendering paths are used to render different sub-effects.

[0007] Special effect synthesis is performed on the multiple sub-effect rendering results through a synthesis rendering path to obtain a special effect synthesis result.

[0008] The special effect synthesis result is displayed in a second display layer superimposed above a first display layer, and the first display layer is used to display a first interface of a to-be-displayed special effect.

[0009] In another aspect, a special effect display device is provided, and the device includes:

[0010] A rendering module is configured to perform sub-effect rendering through multiple sub-effect rendering paths to obtain multiple sub-effect rendering results, and different sub-effect rendering paths are used to render different sub-effects.

[0011] A synthesis module is configured to perform special effect synthesis on the multiple sub-effect rendering results through a synthesis rendering path to obtain a special effect synthesis result.

[0012] A display module is configured to display the special effect synthesis result in a second display layer superimposed above a first display layer, and the first display layer is used to display a first interface of a to-be-displayed special effect.

[0013] In another aspect, a terminal is provided, which includes a processor and a memory. The memory stores at least one computer instruction, which is loaded and executed by the processor to implement the special effect display method described in the above aspects.

[0014] In another aspect, an embodiment of the present application provides a computer readable storage medium, which stores at least one computer instruction, and the at least one computer instruction is used to be executed by a processor to implement the special effect display method according to the above aspect.

[0015] In another aspect, an embodiment of the present application provides a computer program product, which comprises computer instructions, and the computer instructions are executed by a processor to implement the special effect display method according to the above aspect.

[0016] In the embodiment of the present application, a multi-path rendering synthesis framework is adopted, a special effect rendering result of different sub special effects is obtained through a plurality of sub special effect rendering paths, and a special effect synthesis is performed on the multi-path sub special effect rendering results through a synthesis rendering path to obtain a special effect synthesis result, so that the special effect synthesis result is displayed in the second display layer which is superimposed above the first display layer. Since only a single window is needed to realize the special effect display, the power consumption of the special effect display can be reduced under the premise of ensuring the special effect display effect when complex special effects are displayed. BRIEF DESCRIPTION OF DRAWINGS

[0017] Figure 1 is a schematic diagram of multi-window special effect display in the related art;

[0018] Figure 2 shows a flowchart of a special effect display method provided by an example embodiment of the present application;

[0019] Figure 3 is a schematic diagram of a special effect layering rendering, synthesis and display process shown by an example embodiment of the present application;

[0020] Figure 4 is a schematic diagram of a sub special effect process shown by an example embodiment of the present application;

[0021] Figure 5 is a flowchart of a first sub special effect rendering process shown by an example embodiment of the present application;

[0022] Figure 6 is a schematic diagram of a first sub special effect rendering result shown by an example embodiment of the present application;

[0023] Figure 7 is a flowchart of a second sub special effect rendering process shown by an example embodiment of the present application;

[0024] Figure 8 is a schematic diagram of a second sub special effect rendering result shown by an example embodiment of the present application;

[0025] Figure 9is a flow chart of a third sub-special effect rendering process according to an example embodiment of the present application;

[0026] Figure 10 is a schematic diagram of a third sub-special effect rendering result according to an example embodiment of the present application;

[0027] Figure 11 is a schematic diagram of a fourth sub-special effect rendering result according to an example embodiment of the present application;

[0028] Figure 12 is a flow chart of a fifth sub-special effect rendering process according to an example embodiment of the present application;

[0029] Figure 13 is a schematic diagram of a fifth sub-special effect rendering result according to an example embodiment of the present application;

[0030] Figure 14 is a schematic diagram of a sub-special effect rendering, synthesizing and displaying process according to an example embodiment of the present application;

[0031] Figure 15 shows a structural block diagram of a special effect display device according to an example embodiment of the present application;

[0032] Figure 16 shows a structural block diagram of a terminal according to an example embodiment of the present application. DETAILED DESCRIPTION

[0033] In order to make the purpose, technical scheme and advantages of the present application clearer, the embodiments of the present application will be further described in detail below with reference to the drawings.

[0034] In the present document, "a plurality of" refers to two or more. "And / or" describes the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the three cases of A alone, A and B together, and B alone. The character " / " generally represents an "or" relationship between the associated objects before and after it.

[0035] In the related art, since the special effect display is mainly based on window animation, the display of complex special effects needs to rely on multiple windows. Illustratively, as shown in Figure 1 When a complex special effect needs to be displayed on the upper layer of the first interface 11, a first special effect window 12, a second special effect window 13 and a third special effect window 14 are sequentially arranged on the upper layer of the first interface 11 corresponding windows, wherein the first special effect window 12, the second special effect window 13 and the third special effect window 14 are respectively used to carry different window animations.

[0036] With the solutions in the prior art, on one hand, a large number of windows need to be created and managed every time special effects are displayed, which consumes high power; on the other hand, the special effects that can be displayed are limited due to the properties of the windows (for example, the windows cannot change irregularly, and the whole window cannot be blurred).

[0037] To reduce the power consumption of special effect display and enrich the special effects that can be displayed, an embodiment of the present application provides a multi-pass rendering synthesis framework, which is composed of a plurality of sub-special effect rendering passes and one synthesis rendering pass. The plurality of sub-special effect rendering passes are used to render different sub-special effects to obtain a plurality of sub-special effect rendering results, and the synthesis rendering pass is used to synthesize the plurality of sub-special effect rendering results to obtain a special effect synthesis result for final display. The special effect synthesis result is finally displayed in an upper display layer of an interface of the special effect to be displayed.

[0038] Since only a single window is needed to display complex special effects, the power consumption of special effect display (especially complex special effects) can be reduced. In addition, sub-special effects are rendered in units of passes, which can break through the limitations of the properties of the windows on the types of sub-special effect rendering, thereby enriching the sub-special effects that can be rendered and the special effects that can be displayed.

[0039] The special effect display method provided by the embodiment of the present application can be a system-level special effect display solution of a terminal, that is, when various application programs are displayed, special effects can be displayed in an upper layer of an application interface (the special effect display process is implemented by an operating system). The terminal can be a smart phone, a tablet computer, a wearable device, a personal computer, a vehicle machine, etc., and the operating system can be various types of operating systems, such as a mobile phone operating system, a wearable device operating system, a computer operating system, a vehicle machine operating system, a tablet computer operating system, etc. The embodiment of the present application does not limit the operating system.

[0040] Alternatively, the special effect display method provided by the embodiment of the present application can be an application-level special effect display method, that is, when a specific application program is displayed, special effects can be displayed in an upper layer of an application interface of the specific application program (the special effect display process is implemented by the specific application program).

[0041] In each of the following embodiments, the execution subject is a terminal for convenience of description.

[0042] Please refer to Figure 2 which shows a flowchart of a special effect display method provided by an example embodiment of the present application. The embodiment takes the method used in a terminal as an example for description, and the method can include the following steps:

[0043] Step 201, sub-effect rendering is performed through multiple sub-effect rendering paths to obtain multiple sub-effect rendering results, different sub-effect rendering paths being used to render different sub-effects.

[0044] In a possible implementation, the same sub-effect is rendered by at least one sub-effect rendering path, that is, the same sub-effect can be rendered by one sub-effect rendering path, or the same sub-effect can be cooperatively rendered by multiple sub-effect rendering paths. Optionally, the multiple sub-effect rendering paths can be cooperatively rendered in a serial manner.

[0045] In some embodiments, sub-effect rendering of different sub-effects can be performed in parallel, that is, multiple sub-effect rendering paths can work in parallel, so as to improve the sub-effect rendering efficiency.

[0046] Optionally, a sub-effect can be split from a complex effect, and sub-effect rendering results of different sub-effects are different. For example, the sub-effect rendering result can be a full-screen effect, or a local area effect.

[0047] In a possible implementation, each sub-effect rendering path supports separate control of resolution output, that is, different sub-effect rendering results can correspond to different resolutions, which helps to reduce the power consumption of effect display.

[0048] Regarding the timing of sub-effect rendering, in a possible implementation, when there is a need for effect display, the terminal performs sub-effect rendering through multiple sub-effect rendering paths. When a specific operation gesture is recognized, a specific voice is recognized, or a triggering operation on a specific physical key is recognized, the terminal determines that there is a need for effect display.

[0049] For example, when a pressing operation on a flash note function key of the terminal is received, the terminal needs to display a flash note function effect, and thus performs sub-effect rendering on multiple sub-effects constituting the flash note function effect through multiple sub-effect rendering paths.

[0050] Illustratively, as shown in Figure 3 , the terminal performs sub-effect rendering through multiple sub-effect rendering paths to obtain five sub-effect rendering results, that is, a first sub-effect rendering result 31, a second sub-effect rendering result 32, a third sub-effect rendering result 33, a fourth sub-effect rendering result 34, and a fifth sub-effect rendering result 35.

[0051] Step 202, performing effect synthesis on the multiple sub-effect rendering results through a synthesis rendering path to obtain an effect synthesis result.

[0052] In some embodiments, the synthesis rendering path is independent of the sub-effect rendering path, or part of the sub-effect rendering path is located in the synthesis rendering path, that is, part of the sub-effect is rendered when performing effect synthesis.

[0053] In some embodiments, the composite rendering pass is configured to perform effect composition on the multiple sub-effect rendering results according to an effect composition rule, to obtain an effect composition result containing multiple sub-effects.

[0054] Optionally, the effect composition rule includes an effect resolution rule, an effect composition level rule, etc., which are not limited in the embodiments of the present application.

[0055] In some embodiments, the effect composition result is consistent with the screen size of the terminal.

[0056] As shown in FIG. 6, the terminal displays the effect composition result 36 in the second display layer. Figure 3 As shown in FIG. 6, the composite rendering pass performs effect composition on the five sub-effect rendering results, to obtain the effect composition result 36.

[0057] In step 203, the effect composition result is displayed in the second display layer overlaid on the first display layer, and the first display layer is configured to display the first interface of the to-be-displayed effect.

[0058] In a possible implementation, when there is a need to display the effect, the terminal creates an effect window configured to carry the effect composition result, and overlays the effect window on the first display layer where the first interface of the to-be-displayed effect is located (i.e., the window is located in the second display layer).

[0059] Correspondingly, after the effect composition is completed, the terminal displays the effect composition result in the effect window located in the second display layer. In some embodiments, the first interface is invisible when the effect composition result is displayed, or part of the interface area of the first interface is visible (e.g., the non-masked area of the effect composition result) when the effect composition result is displayed.

[0060] As shown in FIG. 6, the terminal displays the effect composition result 36 in the upper layer of the first interface 37. Figure 3

[0061] In some embodiments, when the display of the effect composition result is completed, the terminal cancels the effect window located above the first display layer, so that the first interface is completely exposed.

[0062] To sum up, in the embodiments of the present application, a multi-pass rendering and composite framework is adopted, the effect rendering results of different sub-effects are obtained through multiple sub-effect rendering passes, the effect composition result is obtained by performing effect composition on the multiple sub-effect rendering results through the composite rendering pass, and the effect composition result is displayed in the second display layer overlaid on the first display layer. Since only a single window is needed to display the effect, the power consumption of the effect display can be reduced while ensuring the display effect of the effect, when a complex effect is displayed.

[0063] ​In a possible implementation, the multiple sub-special effect rendering paths render multiple sub-special effect rendering effects including at least two of the following:

[0064] 1. a first sub-special effect rendering result, the first sub-special effect rendering result refers to a water ripple special effect of the first interface.

[0065] In some embodiments, the first sub-special effect rendering result includes an interface image of the first interface, and the interface image has a water ripple special effect, that is, the interface image at a water ripple passing area is deformed, and the water ripple passing area dynamically changes.

[0066] In some embodiments, the starting position of the water ripple special effect is a region triggering the special effect display. For example, when the special effect is triggered by receiving a pressing operation on a physical button on the frame, the starting position of the water ripple special effect is a screen edge region corresponding to the physical button and moves along a preset path; when the special effect is triggered by receiving a screen long pressing operation, the starting position of the water ripple special effect is the pressing region and spreads to the surrounding.

[0067] 2. a second sub-special effect rendering result, the second sub-special effect rendering result refers to a moving special effect of a scanning area.

[0068] In some embodiments, the second sub-special effect rendering result includes a special effect that the scanning area moves in a preset direction, and the scanning area presents a preset color effect to convey the intention of scanning the first interface. The preset direction can be from the bottom of the screen to the top of the screen, or from the left side of the screen to the right side of the screen, and the like, which is not limited in the embodiment.

[0069] 3. a third sub-special effect rendering result, the third sub-special effect rendering result refers to a screen edge light flowing special effect.

[0070] In some embodiments, the third sub-special effect rendering result includes a marquee effect generated by the screen edge light flowing. The screen edge light can flow in a clockwise or counterclockwise direction.

[0071] 4. a fourth sub-special effect rendering result, the fourth sub-special effect rendering result refers to a map rotation special effect at a preset screen area.

[0072] Optionally, the preset screen area can be a screen opening area, a real-time activity reminder control area at the top of the screen, and the like, and the specific setting mode of the preset screen area is not limited in the embodiment.

[0073] 5. a fifth sub-special effect rendering result, the fifth sub-special effect rendering result refers to a special effect that the first interface is deformed and shrunk and moved to a preset screen area.

[0074] In some embodiments, the fifth sub-effect rendering result includes the effect of the first interface deforming and shrinking, and moving to a preset screen area at a preset speed, which is used to convey the intention of analyzing the interface content of the first interface.

[0075] In some embodiments, to avoid some sub-effects being obscured and unable to be displayed due to improper superposition of factor effects, when performing effect compositing on the rendering results of multiple sub-effects through the compositing rendering path, the terminal performs effect compositing on the rendering results of multiple sub-effects according to the superposition order of sub-effects through the compositing rendering path to obtain the effect compositing result.

[0076] In one possible implementation, when the multi-path sub-effect rendering effect includes a first sub-effect rendering result, a second sub-effect rendering result, a third sub-effect rendering result, a fourth sub-effect rendering result, and a fifth sub-effect rendering result, the sub-effect stacking order from top to bottom is the fifth sub-effect rendering result, the fourth sub-effect rendering result, the third sub-effect rendering result, the second sub-effect rendering result, and the first sub-effect rendering result, that is, the first sub-effect rendering result is located at the bottom layer, and the fifth sub-effect rendering result is located at the top layer.

[0077] Indicative, such as Figure 4 As shown, the compositing rendering path performs special effects compositing on water ripple effect 41, sweeping light effect 42, marquee effect 43, screen punch-hole effect 44, and window deformation shrinkage effect 45 (corresponding to the rendering results of the first to fifth sub-effects respectively) in a bottom-up order, resulting in special effects compositing result 46.

[0078] Of course, in cases where there are other sub-effect rendering results besides the above-mentioned sub-effect rendering results, the superposition order of the sub-effect rendering results can be determined according to the effect content contained in the sub-effect rendering results. This application embodiment does not limit the specific superposition order.

[0079] The rendering process of the five special effects will be explained below.

[0080] The rendering process of the first sub-effect

[0081] In one possible implementation, since water ripples are typically circular, the area through which the ripples pass can be represented by a circular mask; furthermore, the effect of deformation and distortion of the content in the area through which the ripples pass can be simulated by coordinate offset. Figure 5 As shown, the rendering process of the first sub-effect may include the following steps:

[0082] Step 501: Generate the first ring mask through the first sub-effect rendering path.

[0083] In one possible implementation, the rendering of the first sub-effect is achieved by the first sub-effect rendering path.

[0084] The first annular mask is used to simulate the area through which the water ripples pass, and the area corresponding to the first annular mask is a transparent area. In some embodiments, the first annular mask is calculated based on a sine wave. For example, the sine wave is sin(dst*intensity-time), where dst is the distance between a pixel and the center point, intensity is used to control the density of the water ripples, and time is a variable that increases with time, which is used to achieve the water diffusion effect.

[0085] In other embodiments, in order to reduce the amount of calculation and thus reduce the power consumption when rendering the first sub-effect, the first sub-effect rendering path generates the first annular mask using a smoothstep difference value. Since the smoothstep difference value only needs to perform one distance calculation and two smooth transition calculations, it can reduce the calculation amount by 50% compared to the sine wave.

[0086] When generating the first annular mask using the smoothstep difference value, in one possible implementation, the terminal generates a first circle and a second circle by calling a smooth function through the first sub-effect rendering path, where the first circle and the second circle have the same center but different radii.

[0087] Optionally, the first circle and the second circle are inverse circular mask, i.e., the area within the first circle and the second circle is a transparent area, and the area outside the first circle and the second circle is an opaque area.

[0088] Further, the terminal performs difference processing on the first circle and the second circle through the first sub-effect rendering path to obtain the first annular mask, where the first annular mask corresponds to the annular area between the first circle and the second circle.

[0089] In some embodiments, in order to achieve different attenuation effects in different mask areas of the first annular mask, when generating the first circle and the second circle, a feathering effect can be added to the first circle and the second circle, i.e., the edges of the generated first circle and the second circle have a feathering effect. Correspondingly, the edges of the first annular mask obtained by difference calculation also have a feathering effect.

[0090] In one illustrative example, the process of generating the first annular mask with a feathering effect can be represented as:

[0091] float dis=length(muv-center); / / calculate the distance from the current pixel to the center

[0092] float circle1=smoothstep(radius+featherS,radius-featherS,dis);

[0093] float circle2 = smoothstep(radius + featherS * featherE, radius - featherS * featherE, dis);

[0094] return circle1 - circle2;

[0095] Wherein, the circle1 and the circle2 are respectively the first circle and the second circle, and the featherS and the featherE are both feather parameters, which can be exposed externally to adjust the feather degree according to requirements.

[0096] In step 502, the first annular mask is superimposed on the interface image of the first interface through the first sub special effect rendering path, and the mask value of the first annular mask is subjected to coordinate offset to obtain a first sub special effect rendering result.

[0097] After the first annular mask is generated, the first sub special effect rendering path superimposes the first annular mask on the interface image of the first interface. In order to simulate the effect of content deformation of water waves, the first sub special effect rendering path subjects the mask value of the first annular mask to coordinate offset, that is, the pixel points in the interface image located below the first annular mask are subjected to coordinate offset.

[0098] Illustratively, as shown in Figure 6 Fig. 6, the first annular mask 62 (only a part of the mask located in the screen area is shown) is superimposed on the interface image 61 of the first interface, and after the mask value is subjected to coordinate offset, the area in the interface image 61 located below the first annular mask 62 is deformed, simulating the effect of water ripples passing through.

[0099] In a possible implementation, the first sub special effect rendering path realizes anisotropic interface image distortion by independently controlling the disturbance direction of the X-axis and the Y-axis.

[0100] In other possible implementations, the first sub special effect rendering path can also realize the water ripple effect in a static texture sampling manner to reduce the cost of continuous rendering, which is not limited in the embodiments of the present application.

[0101] In some embodiments, the first sub special effect rendering path can also update the position of the first annular mask superimposed on the interface image according to a preset moving path, thereby simulating the effect of water waves moving along the preset moving path.

[0102] It should be noted that the above-mentioned ring-shaped mask generation and coordinate offsetting process are completed in the screen space, without the access of geometry or vertex shader. Therefore, compared with the Compute Shader scheme (such as the wave equation diffusion), the first special effect is generated more lightly by using the scheme provided in the embodiments of the present application, which helps to improve the display frame rate of the special effect.

[0103] In the embodiment, the first ring-shaped mask used for simulating the water wave passing area is generated by using the double-smooth difference method, which helps to reduce the calculation amount when rendering the water ripple special effect. Moreover, by increasing the feathering effect, different areas of the same ring-shaped mask present different feathering effects, which improves the authenticity of the water ripple special effect.

[0104] The rendering process of the second sub-special effect

[0105] In order to highlight the current light-swept area and show the dynamic moving effect of the light-swept area, the light-swept area can be in the form of a mask, and the mask is superimposed on the dynamic color image with dynamic effect, so that the color of different areas of the dynamic color image is exposed by moving the mask, simulating the effect of the color dynamic change of the light-swept area when the light-swept area moves. As shown in Figure 7 The rendering process of the second sub-special effect can include the following steps:

[0106] In step 701, a first dynamic color image is generated by the second sub-special effect rendering path, and a second ring-shaped mask is generated.

[0107] In a possible implementation, the rendering of the second sub-special effect is realized by the second sub-special effect rendering path.

[0108] In order to improve the dynamic effect of the light-swept area, the second sub-special effect rendering path needs to generate a color image with dynamic effect as the light-swept background, so that the light-swept area presents a color dynamic change effect.

[0109] In a possible implementation, the generation process of the first dynamic color image can include a dynamic color layer generation process and a multi-dynamic color layer mixing process. The dynamic color layer generation process is used to generate a plurality of color layers with motion, and the multi-dynamic color layer mixing process is used to mix a plurality of dynamic color layers to obtain a dynamic color image.

[0110] In some embodiments, the terminal first performs texture sampling and color synthesis based on the UV coordinates after dynamic disturbance by the second sub-special effect rendering path to obtain a plurality of dynamic color layers, and then performs color mixing on the plurality of dynamic color layers by the second sub-special effect rendering path to obtain the first dynamic color image. Different dynamic color layers correspond to different color channels, for example, the plurality of dynamic color layers include dynamic color layers corresponding to R, G, B and Alpha channels respectively.

[0111] Optionally, the purpose of the dynamic perturbation of the UV coordinates is to improve randomness in subsequent texture sampling and improve the dynamic effect of the subsequently generated dynamic color layer. The process of texture sampling based on the dynamically perturbed UV coordinates can be performed on a texture map corresponding to each color channel, and the texture map includes a texture pattern under the color channel. Optionally, the texture map can be represented by a grayscale image.

[0112] Regarding the manner of UV coordinate perturbation and color synthesis, in one possible implementation, the process can include the following sub-steps.

[0113] Sub-step 1: Displace, rotate, and scale the UV coordinates to obtain dynamically perturbed UV coordinates.

[0114] Optionally, the second sub-effect rendering path can achieve dynamic jitter (i.e., dynamic displacement) through a sine function (sin) and achieve dynamic perturbation of the UV coordinates in combination with a rotation matrix (such as rotate2d) and scaling operations to obtain dynamically perturbed UV coordinates.

[0115] The dynamic perturbation is related to time, i.e., the dynamically perturbed UV coordinates are different at different times.

[0116] In some embodiments, the above dynamic jitter, rotation, and scaling operations can be integrated into a single formula, and the dynamic effect can be controlled individually through parameters to improve computational efficiency (compared to step-by-step calculation).

[0117] In one illustrative example, the process of displacing, rotating, and scaling the UV coordinates is as follows:

[0118] vec2 dynamicCenter = center + colorShakeDisplacement * sin(colorShakeSpeed * time); / / Dynamic center calculation (jitter displacement)

[0119] vec2 rotatedUV = rotate2d(colorSpeed * time) * (uv - dynamicCenter) + dynamicCenter;

[0120] rotatedUV = (rotatedUV - vec2(0.5)) * colorScale + vec2(0.5); / / UV rotation and scaling (parametric dynamic transformation)

[0121] Sub-step 2, texture sampling is performed on the color texture corresponding to the color channel based on the UV coordinates after dynamic disturbance, and color synthesis is performed between the texture sampling result and the color corresponding to the color channel, to obtain multiple dynamic color layers.

[0122] In a possible implementation, each color channel corresponds to a respective color texture, and the second sub-special effect rendering path performs texture sampling on the color texture corresponding to the color channel based on the UV coordinates after dynamic disturbance, and performs color synthesis between the texture value obtained by sampling and the color corresponding to the color channel, to obtain a dynamic color layer corresponding to the color channel.

[0123] Optionally, the texture value obtained by sampling based on the UV coordinates after dynamic disturbance is used as an alpha value, and color synthesis is performed between the alpha value and the color value of the fixed color corresponding to the color channel, to obtain a dynamic color layer corresponding to the color channel.

[0124] In an illustrative example, the process of texture sampling and color synthesis is as follows:

[0125] float textureValue = texture(textureSampler, rotatedUV) [channel];

[0126] return vec4(color, textureValue); / / output RGBA, color is an RGB value, and textureValue is an Alpha value

[0127] Regarding the manner of synthesis of multiple dynamic color layers, in a possible implementation, the process can include the following sub-steps.

[0128] Sub-step 1, based on the color dithering parameters corresponding to different color channels, the second sub-special effect rendering path performs dithering processing on the multiple dynamic color layers.

[0129] In some embodiments, in order to achieve differentiated dynamic effects, the second sub-special effect rendering path assigns respective color dithering parameters to different color channels, so as to perform dithering processing on the multiple dynamic color layers based on the color dithering parameters.

[0130] Optionally, the second sub-special effect rendering path uses vector components to assign independent dynamic parameters to different dynamic color layers, that is, to achieve “one formula with multiple controls” through componentized parameters, to reduce code redundancy.

[0131] In an illustrative example, taking the R and G color channels as examples, the process of dithering processing on the dynamic color layers corresponding to the R and G color channels (other dynamic color layers are processed similarly) is as follows:

[0132] vec4 layer1 = generateColorLayer(..., colorShakeSpeed.r, colorSpeed.r,...); / / use the component corresponding to R channel in the vector

[0133] vec4 layer2 = generateColorLayer(..., colorShakeSpeed.g, colorSpeed.g,...); / / use the component corresponding to G channel in the vector

[0134] Sub-step 2: Take the transparent channel value obtained by texture sampling as the mixing weight, and perform layer-by-layer synthesis on the multiple dynamic color layers processed by shaking through the second sub-special effect rendering path to obtain the first dynamic color image.

[0135] In some embodiments, the second sub-special effect rendering path adopts a layer-by-layer synthesis manner to synthesize the multiple dynamic color layers, wherein in the synthesis process, the second sub-special effect rendering path adopts the mix function and takes the transparent channel value obtained by texture sampling as the weight to perform color layer superposition, and finally obtains the first dynamic color image.

[0136] In an illustrative example, the synthesis process of the multiple dynamic color layers processed by shaking is as follows:

[0137] vec3 col = mix(layer1.rgb, layer2.rgb, layer2.a);

[0138] col = mix(col, layer3.rgb, layer3.a);

[0139] col = mix(col, layer4.rgb, layer4.a);

[0140] Wherein, layer2.a, layer3.a and layer4.a are the transparent channel values obtained by sampling the texture image corresponding to each color.

[0141] Regarding the generation manner of the second annular mask, similar to the process of generating the first annular mask, in a possible implementation manner, the terminal first generates a third circle and a fourth circle with the same center and different radii through the second sub-special effect rendering path by calling the smooth function; and then performs difference processing on the third circle and the fourth circle through the second sub-special effect rendering path to obtain the second annular mask.

[0142] Optionally, the third circle and the fourth circle are anti-phase circle masks, i.e., the area within the third circle and the fourth circle is a transparent area, and the area outside the third circle and the fourth circle is an opaque area. Correspondingly, the second annular mask obtained by difference calculation is an annular area between the third circle and the fourth circle, and the second annular mask is a transparent area.

[0143] In some embodiments, in order to achieve different attenuation effects in different mask areas of the second annular mask, when the third circle and the fourth circle are generated, feathering effects can be added to the third circle and the fourth circle, i.e., the edges of the generated third circle and the fourth circle have feathering effects. Correspondingly, the edges of the second annular mask obtained by difference calculation also have feathering effects.

[0144] The specific process of generating the second annular mask can refer to the process of generating the first annular mask described above, and the embodiments of the present application will not be repeated here.

[0145] Step 702, superimpose the second annular mask on the first dynamic color image through the second sub-special effect rendering path, and control the movement of the second annular mask to obtain a second sub-special effect rendering result.

[0146] In one possible implementation, the second sub-special effect rendering path controls the movement of the second annular mask superimposed on the upper layer of the first dynamic color image based on a preset movement path, thereby simulating the movement effect of the light scanning area.

[0147] Illustratively, as shown in Figure 8 When the second annular mask 82 (only part of the mask located in the screen area is shown) is superimposed on the first dynamic color image 81, the area below the second annular mask 82 in the first dynamic color image 81 is revealed, and the area outside the second annular mask 82 is blocked. When the second annular mask 82 is controlled to move from bottom to top, the effect of scanning from bottom to top and the color of the scanning area changing constantly is presented.

[0148] In this embodiment, by generating a plurality of dynamic color layers and superimposing the plurality of dynamic color layers, a dynamic color image with motion is obtained, so that the content displayed at the subsequent light scanning area has a dynamic effect, and the effect of the light scanning special effect is improved. Moreover, the second annular mask corresponding to the light scanning area is generated by using the double smoothing difference method, which helps to reduce the calculation amount when rendering the special effect.

[0149] The rendering process of the third sub-special effect

[0150] In some embodiments, the terminal can generate a dynamic color image with a color flowing effect, and mask the dynamic color image by using a mask, so that the edge area of the dynamic color image is exposed, thereby simulating the effect of screen edge light flowing (marquee).

[0151] In a possible implementation, the rendering of the third sub-effect is divided into a preprocessing stage and a main rendering stage, wherein the preprocessing stage is rendered by the third sub-effect rendering pass to generate a dynamic color image with a color flowing effect, and the main rendering stage is performed by the fourth sub-effect rendering pass to perform a masking process on the dynamic color image generated by the third sub-effect rendering pass.

[0152] As shown in FIG. 9, the rendering process of the third sub-effect can include the following steps: Figure 9

[0153] Step 901, generating a second dynamic color image by the third sub-effect rendering pass.

[0154] In order to simulate the light source surrounding and directional flowing effect, in a possible implementation, the third sub-effect rendering pass adopts a dynamic UV transformation and directional flowing control manner to generate the second dynamic color image.

[0155] In addition, when performing color texture sampling based on the processed UV coordinates, the third sub-effect rendering pass uses a noise texture to drive the color texture sampling, so as to reduce the real-time calculation amount.

[0156] Optionally, the generating of the second dynamic color image can include the following sub-steps:

[0157] Step 901A, rotating the UV coordinates by the third sub-effect rendering pass.

[0158] In a possible implementation, the third sub-effect rendering pass performs the rendering on the UV coordinates by using a rotation matrix (such as rotated) and a time parameter (u_time) to simulate the light source surrounding effect.

[0159] In an illustrative example, the UV coordinate rotation process is as follows:

[0160] uv = rotate2d(iFlowRotateSpeed * u_time) * (uv - vec2(0.5)) + vec2(0.5).

[0161] Step 901B, performing an optical flow direction and speed control process on the rotated UV coordinates by the third sub-effect rendering pass, and performing noise texture sampling based on the processed UV coordinates.

[0162] In a possible implementation, the third sub-effect rendering pass performs the optical flow direction and speed control on the rotated UV coordinates based on an optical flow direction parameter and an optical flow speed parameter.

[0163] ​In some embodiments, the third sub-effect rendering path can adopt a unified light flow direction parameter and light flow speed parameter, or different light flow direction parameters and light flow speed parameters for different regions to achieve different light flow effects in different regions. For example, different light flow direction parameters and light flow speed parameters can be used for the left and right regions, so that the final screen edge light flow dynamic effect presented is different on the left and right sides.

[0164] In some embodiments, the light flow direction parameter and the light flow speed parameter can be dynamically adjusted based on user operations, so as to realize real-time linkage between user operations and screen edge light flow dynamic effects.

[0165] In an exemplary embodiment, the third sub-effect rendering path realizes light flow direction and speed control through normalize(iFlowDirction)*u_time*iFlowSpeed. Wherein, iFlowDirction is the light flow direction parameter, iFlowSpeed is the light flow speed parameter, and u_time is the time parameter.

[0166] In order to reduce the calculation amount when color texture sampling, in a possible implementation, the third sub-effect rendering path first performs noise sampling based on the processed UV coordinates, and then drives color texture sampling based on the noise sampling result.

[0167] In an exemplary example, the third sub-effect rendering path uses the sampling result of the R channel obtained by noise texture sampling as a mask to drive subsequent color texture sampling, which can be represented as:

[0168] float mask=texture(iChannel1,uv-normalize(iFlowDirction)*u_time*iFlowSpeed).r, wherein iChannel1 is a noise texture.

[0169] Step 901C, driving color texture sampling based on the noise texture sampling result through the third sub-effect rendering path to obtain a second dynamic color image.

[0170] Further, the third sub-effect rendering path drives color texture sampling based on the mask obtained by noise texture sampling to obtain a second dynamic color image.

[0171] In an exemplary example, the color texture-based process can be represented as vec4 color=texture(iChannel2,vec2(mask,0.2)), wherein iChannel2 is a color texture.

[0172] At step 902, a rounded rectangle mask is generated by the fourth sub-effect rendering pass, and the rounded rectangle mask is superimposed on the central region of the second dynamic color image to obtain a third sub-effect rendering result, and the size of the rounded rectangle mask is smaller than the size of the screen.

[0173] To present the effect of screen edge light flow only, the fourth sub-effect rendering pass generates a rounded rectangle mask for shielding the central region of the second dynamic color image, and superimposes the rounded rectangle mask on the central region of the second dynamic color image, so that the image region under the rounded rectangle mask is invisible.

[0174] In a possible implementation, the fourth sub-effect rendering pass can render the straight sides of the rounded rectangle and the arcs respectively, thereby obtaining the rounded rectangle mask.

[0175] In another possible implementation, the fourth sub-effect rendering pass can use a signed distance field (SDF) function to calculate the edges of the rounded rectangle, so as to reduce the calculation amount when generating the rounded rectangle mask and improve the rendering speed.

[0176] In some embodiments, the fourth sub-effect rendering pass generates the rounded rectangle mask by calling the signed distance field function based on the rectangle width, the rectangle height, and the rectangle corner radius.

[0177] wherein the rectangle width is the width of the rounded rectangle mask, the rectangle height is the height of the rounded rectangle mask, and the rectangle corner radius is the radius of the corner of the rounded rectangle mask.

[0178] Optionally, the rectangle width, the rectangle height, and the rectangle corner radius can be fixed values, or can be set as dynamic values. The dynamic values can be determined based on user operations, so as to realize real-time linkage between user operations and effects. For example, the rectangle width and the rectangle height can be set based on the operation duration or the operation strength of the operation performed by the user when triggering the effect, so as to present screen edge light effects with different widths.

[0179] In an exemplary example, the process of generating the rounded rectangle mask can be represented as:

[0180] float RBox(vec2 coord, float width, float height, float r) {

[0181] vec2 d = abs(coord) - vec2(width, height);

[0182] return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;

[0183] wherein coord is the point coordinate (px, py), width is the rectangle width, height is the rectangle height, and r is the rectangle corner radius.

[0184] As shown in Figure 10 , the rounded rectangle mask 1002 is superimposed on the center area of the first dynamic color image 1001, and the image area under the rounded rectangle mask 1002 is blocked, so that the edge light flow effect is presented through the area outside the rounded rectangle mask 1002.

[0185] In this embodiment, the noise texture is used to drive the color texture sampling, and the dynamic color image with the rotating light flow effect is obtained by performing color texture sampling based on the UV coordinates after dynamic rotation and light flow control, which helps to reduce the calculation amount; and the SDF function is used to generate the rounded rectangle mask, which helps to reduce the calculation amount when rendering the mask, thereby improving the rendering speed of the sub-effect.

[0186] Rendering process of the fourth sub-effect

[0187] In one possible implementation, a preset map corresponding to the fourth sub-effect displayed in the preset screen area is pre-set. In order to present a dynamic effect, the terminal performs UV coordinate displacement, scaling and rotation transformation processing on the preset map through the fifth sub-effect rendering channel to obtain a processed map.

[0188] wherein the UV coordinate displacement, scaling and rotation transformation can be integrated through matrix operation.

[0189] Further, in order to realize the feathering effect, based on the shape (and size) of the preset screen area, the terminal performs feathering processing on the processed map through the fifth sub-effect rendering channel to obtain the fourth sub-effect rendering result.

[0190] Optionally, when the preset screen area is a screen hole area and is a circular hole, the fifth sub-effect rendering channel realizes circular feathering by using a smooth function (smoothstep).

[0191] As shown in Figure 11 , the screen circular hole light effect 1101 with the feathering effect is rendered at the circular hole area through the fourth sub-effect rendering channel.

[0192] Rendering process of the fifth sub-effect

[0193] In some embodiments, in order to simulate the effect that the window corresponding to the first interface is shrunk and deformed and moves to the preset screen area, the terminal adopts multiple sub-effect rendering channels to respectively render the smooth round corner effect, the deformation and halo dispersion effect and the running blur effect of the interface image.

[0194] As shown in Figure 12 the rendering process of the fifth sub-effect can include the following steps:

[0195] In step 1201, the interface image of the first interface is subjected to smooth round corner processing through the sixth sub-effect rendering channel.

[0196] In some embodiments, when the first interface presents a round corner effect in the screen (the screen is a round corner screen), in order to make the window shrink and deform effect also have a round corner effect, the sixth sub-effect rendering channel first subjects the interface image of the first interface to smooth round corner processing.

[0197] In a possible implementation, the interface image of the first interface supports independent control of the round corner radius of different regions. For example, independent control of the upper and lower round corner radii is supported, that is, the round corner radius of the upper round corner can be different from the round corner radius of the lower round corner.

[0198] Optionally, the sixth sub-effect rendering channel can realize independent control of the round corner radius of different regions through partition determination and radius interpolation.

[0199] In an exemplary example, the independent control process of the upper and lower round corner radii can be represented as:

[0200] isTop=step(0.5,centeredUV.y) / / upper and lower partition determination

[0201] adjustedRadius=radiusBottom+isTop*(radiusTop-radiusBottom) / / radius interpolation, the round corner radius of the upper half is radiusTop, and the round corner radius of the lower half is radiusBottom.

[0202] In order to reduce the calculation amount in smooth round corner processing, in a possible implementation, the sixth sub-effect rendering channel can adopt symmetry reuse to reuse the smooth round corner processing result of part of the region to the symmetrical region.

[0203] In some embodiments, the terminal subjects the first image corner region of the interface image of the first interface to smooth round corner processing through the sixth sub-effect rendering channel, and then reuses the smooth round corner processing result of the first image corner region to the second image corner region symmetrical to the first image corner region through the sixth sub-effect rendering channel. In some embodiments, in order to simulate the effect that the window corresponding to the first interface is shrunk and deformed and moves to the preset screen area, the terminal adopts multiple sub-effect rendering channels to respectively render the smooth round corner effect, the deformation and halo dispersion effect and the running blur effect of the interface image.

[0194] As shown in Figure 12 the rendering process of the fifth sub-effect can include the following steps:

[0195] In step 1201, the interface image of the first interface is subjected to smooth round corner processing through the sixth sub-effect rendering channel.

[0196] In some embodiments, when the first interface presents a round corner effect in the screen (the screen is a round corner screen), in order to make the window shrink and deform effect also have a round corner effect, the sixth sub-effect rendering channel first subjects the interface image of the first interface to smooth round corner processing.

[0197] In a possible implementation, the interface image of the first interface supports independent control of the round corner radius of different regions. For example, independent control of the upper and lower round corner radii is supported, that is, the round corner radius of the upper round corner can be different from the round corner radius of the lower round corner.

[0198] Optionally, the sixth sub-effect rendering channel can realize independent control of the round corner radius of different regions through partition determination and radius interpolation.

[0199] In an exemplary example, the independent control process of the upper and lower round corner radii can be represented as:

[0200] isTop=step(0.5,centeredUV.y) / / upper and lower partition determination

[0201] adjustedRadius=radiusBottom+isTop*(radiusTop-radiusBottom) / / radius interpolation, the round corner radius of the upper half is radiusTop, and the round corner radius of the lower half is radiusBottom.

[0202] In order to reduce the calculation amount in smooth round corner processing, in a possible implementation, the sixth sub-effect rendering channel can adopt symmetry reuse to reuse the smooth round corner processing result of part of the region to the symmetrical region.

[0203] In some embodiments, the terminal subjects the first image corner region of the interface image of the first interface to smooth round corner processing through the sixth sub-effect rendering channel, and then reuses the smooth round corner processing result of the first image corner region to the second image corner region symmetrical to the first image corner region through the sixth sub-effect rendering channel.

[0204] The sixth sub-special effect rendering path can reuse the smooth rounded corner processing result of the first image corner region to the second image corner region symmetric to the X axis and / or to the second image corner region symmetric to the Y axis by X axis symmetry and Y axis symmetry.

[0205] In this way, only 1 / 4 of the region needs to be processed, and the smooth rounded corner processing result can be reused in other regions based on symmetry, reducing the calculation by 3 / 4.

[0206] Optionally, when independent control of the radii of the rounded corners of different regions is required, the sixth sub-special effect rendering path can reuse the smooth rounded corner processing result by proportional compensation.

[0207] Illustratively, when independent control of the radii of the rounded corners of different regions is required, the smooth rounded corner processing result can be reused in the X axis symmetry direction and in the Y axis symmetry direction by proportional compensation as follows:

[0208] correctedUV.x = min(centeredUV.x, 1.0 - centeredUV.x); / / X axis symmetry

[0209] correctedUV.y = min(centeredUV.y, 1.0 - centeredUV.y) * ratio; / / Y axis proportional compensation, the proportional compensation coefficient is ratio

[0210] In some embodiments, the sixth sub-special effect rendering path can use an implicit distance field to replace geometric clipping, so that the interface image after smooth rounded corner processing natively supports anti-aliasing. Illustratively, the process can be represented as:

[0211] circleCenter = vec2(adjustedRadius); / / center position

[0212] distanceToCenter = length(correctedUV - circleCenter); / / calculate the distance to the center

[0213] step(distanceToCenter, adjustedRadius); / / transparency output

[0214] Step 1202, deform and halo scatter the interface image after smooth rounded corner processing by the seventh sub-special effect rendering path.

[0215] In one possible implementation, the terminal performs dynamic width interpolation on the interface image after smoothing rounded corners through a seventh sub-effect rendering path to obtain the deformed interface image. Using single-step interpolation calculations instead of piecewise functions or affine transformation matrices helps reduce computational load.

[0216] In some embodiments, when the deformation effect of the interface image is a linear deformation from the bottom to the top of the image (i.e., a rectangle deforms into a trapezoid), the seventh sub-effect rendering path achieves continuous width variation along the Y-axis through a linear interpolation function. Schematic, this process can be represented as float width = mix(bottomWidth, topWidth, uv.y).

[0217] Optionally, for the deformed interface image, the seventh sub-effect rendering path dynamically calculates the horizontal offset to ensure that the deformed interface image remains centered in the X-axis direction.

[0218] Since the refractive indices of different wavelengths of light (i.e., different colors of light) differ (red light has the lowest refractive index, and blue light has the highest), the halo dispersion effect can be simulated by shifting different color channels to different degrees.

[0219] In one possible implementation, the terminal performs asymmetric offset processing on the red and blue color channels of the deformed interface image through the seventh sub-effect rendering path to obtain the interface image after deformation and halo dispersion processing.

[0220] Optionally, the offset corresponding to the red channel is smaller than the offset corresponding to the blue channel.

[0221] In an illustrative example, the halo dispersion processing can be represented as follows:

[0222] vec2 uvR = vec2(uv.x + offsetR.x, uv.y - offsetR.y); / / Horizontal positive offset + vertical negative offset of the R channel vec2 uvB = vec2(uv.x - offsetB.x, uv.y + offsetB.y); / / Horizontal negative offset + vertical positive offset of the B channel

[0223] Step 1203: Motion blur processing is applied to the interface image after deformation and halo dispersion processing through three sub-effect rendering paths to obtain the fifth sub-effect rendering result.

[0224] To reduce the computational load of motion blur processing, in one possible implementation, the terminal uses a three-stage blur pipeline structure, employing three sub-effect rendering paths for motion blur processing. This three-stage blur pipeline structure includes directional Gaussian Blur, X-axis box blur (boxBlurX), and Y-axis box blur (boxBlurY).

[0225] In one possible implementation, the terminal sequentially performs directional blurring, X-axis box blurring, and Y-axis box blurring on the interface image after deformation and halo dispersion processing through three sub-effect rendering paths to obtain the fifth sub-effect rendering result.

[0226] Optionally, the terminal controls the motion direction (directionX / Y) through the eighth sub-effects rendering path and performs sampling point offset to simulate the visual persistence produced during high-speed motion. Illustratively, this process can be represented as:

[0227] vec2 offset = direction * x; / / Dynamic direction offset

[0228] color+=texture(tex,uv+offset)*weight.

[0229] Optionally, the terminal performs Gaussian weighted blur along the horizontal direction through the ninth sub-effect rendering path to achieve X-axis box blur; and performs Gaussian weighted blur along the vertical direction through the tenth sub-effect rendering path to achieve Y-axis box blur.

[0230] Among them, a dual-axis separation fuzzy processing method is adopted, and the number of samples is from KernelSize. 2 Reducing the size to 2×KernelSize significantly reduces the amount of sampling and computation.

[0231] It should be noted that when performing directional blurring, the offset direction is generated based on the input vector, and the colors of multiple sampling points are mixed using Gaussian weights; when performing X-axis / Y-axis box blurring, the weights of the box blur convolution kernel are adaptively determined based on the box size and pixel position (horizontal position, vertical position).

[0232] Indicative, such as Figure 13 As shown, through multiple sub-effect rendering paths, a fifth sub-effect 1301 with deformation, halo dispersion and motion blur effects is formed in the central area of ​​the screen.

[0233] In the embodiment, the symmetric multiplexing is used to multiplex the smooth round corner processing result of the partial area to the symmetric area, which helps to reduce the calculation amount when the image is processed by the smooth round corner; and the running blur effect is realized by the direction blur and the biaxial separation box blur, which helps to reduce the calculation amount when the running blur is processed while ensuring the running blur effect.

[0234] In combination with the above embodiment, in an illustrative example, when the target special effect includes the first to fifth sub-special effects, the special effect rendering process is as shown in Figure 14

[0235] The background scanning light rendering path (i.e., the second sub-special effect rendering path) is used to render the background scanning light; the edge light rotation pre-computation path (i.e., the third sub-special effect rendering path) and the screen edge light rendering path (i.e., the fourth sub-special effect rendering path) are used to jointly render the screen edge light; the screen aperture edge light rendering path (i.e., the fifth sub-special effect rendering path) is used to render the screen aperture edge light; the window smooth round corner rendering path (i.e., the sixth sub-special effect rendering path), the window light halo dispersion rendering path (i.e., the seventh sub-special effect rendering path), the window Y direction blur rendering path (i.e., the eighth sub-special effect rendering path), the window X axis box blur rendering path, and the window Y axis box blur rendering path are used to jointly render the window special effect. The background water ripple is completed in the synthesis rendering path, and is mixed with the background scanning light, the screen edge light, the screen aperture edge light, and the window special effect result to obtain a mixed special effect result.

[0236] Reference is made to Figure 15 which shows a structural block diagram of a special effect display device provided by an exemplary embodiment of the present application. The device includes:

[0237] The rendering module 1501 is configured to perform sub-special effect rendering through a plurality of sub-special effect rendering paths to obtain a plurality of sub-special effect rendering results, different sub-special effect rendering paths being used to render different sub-special effects.

[0238] The synthesis module 1502 is configured to perform special effect synthesis on the plurality of sub-special effect rendering results through a synthesis rendering path to obtain a special effect synthesis result.

[0239] The display module 1503 is configured to display the special effect synthesis result in a second display layer superimposed on a first display layer, the first display layer being used to display a first interface of a to-be-displayed special effect.

[0240] Optionally, the plurality of sub-special effect rendering results include at least two of the following:

[0241] The first sub-special effect rendering result refers to a water ripple special effect of the first interface.

[0242] ​a second sub-special effect rendering result, the second sub-special effect rendering result indicating a light scanning area moving special effect;

[0243] a third sub-special effect rendering result, the third sub-special effect rendering result indicating a screen edge light flowing special effect;

[0244] a fourth sub-special effect rendering result, the fourth sub-special effect rendering result indicating a map rotating special effect at a preset screen area;

[0245] a fifth sub-special effect rendering result, the fifth sub-special effect rendering result indicating a special effect that the first interface is deformed to shrink and moves to a preset screen area.

[0246] Optionally, in a case where the multiple sub-special effect rendering results include the first sub-special effect rendering result, the rendering module 1501 is configured to:

[0247] generate a first annular mask through a first sub-special effect rendering path;

[0248] superimpose the first annular mask on an interface image of the first interface through the first sub-special effect rendering path, and perform coordinate offset on a mask value of the first annular mask, to obtain the first sub-special effect rendering result.

[0249] Optionally, the rendering module 1501 is configured to:

[0250] generate a first circle and a second circle through a first sub-special effect rendering path by calling a smoothing function, the first circle and the second circle have a same center and different radii, and edges of the first circle and the second circle have feathering effects;

[0251] perform difference value processing on the first circle and the second circle through the first sub-special effect rendering path, to obtain the first annular mask.

[0252] Optionally, in a case where the multiple sub-special effect rendering results include the second sub-special effect rendering result, the rendering module 1501 is configured to:

[0253] generate a first dynamic color image and a second annular mask through a second sub-special effect rendering path;

[0254] superimpose the second annular mask on the first dynamic color image through the second sub-special effect rendering path, and control movement of the second annular mask, to obtain the second sub-special effect rendering result.

[0255] Optionally, the rendering module 1501 is configured to:

[0256] The second sub-special effect rendering path is used for texture sampling and color synthesis based on the dynamically disturbed UV coordinates, to obtain a plurality of dynamic color layers, wherein different dynamic color layers correspond to different color channels.

[0257] The second sub-special effect rendering path is used for color mixing of the plurality of dynamic color layers, to obtain the first dynamic color image.

[0258] Optionally, the rendering module 1501 is configured to:

[0259] The UV coordinates are subjected to displacement, rotation and scaling processing, to obtain the dynamically disturbed UV coordinates.

[0260] Texture sampling is performed on color textures corresponding to different color channels based on the dynamically disturbed UV coordinates, and color synthesis is performed on the texture sampling result and colors corresponding to the color channels, to obtain the plurality of dynamic color layers.

[0261] Optionally, the rendering module 1501 is configured to:

[0262] The second sub-special effect rendering path is used for dithering processing of the plurality of dynamic color layers based on color dithering parameters corresponding to different color channels.

[0263] The second sub-special effect rendering path is used for layer-by-layer synthesis of the plurality of dynamic color layers subjected to dithering processing, to obtain the first dynamic color image, with a transparent channel value obtained by texture sampling as a mixing weight.

[0264] Optionally, the rendering module 1501 is configured to:

[0265] The second sub-special effect rendering path is used for calling a smoothing function to generate a third circle and a fourth circle, the third circle and the fourth circle have the same center and different radii, and the edges of the third circle and the fourth circle both have feathering effects.

[0266] The second sub-special effect rendering path is used for difference processing of the third circle and the fourth circle, to obtain the second ring-shaped mask.

[0267] Optionally, in a case where the multi-path sub-special effect rendering result includes the third sub-special effect rendering result, the rendering module 1501 is configured to:

[0268] The third sub-special effect rendering path is used for generating a second dynamic color image.

[0269] generate a rounded rectangle mask through the fourth sub-special effect rendering path, and superimpose the rounded rectangle mask on a center region of the second dynamic color image to obtain the third sub-special effect rendering result, wherein a size of the rounded rectangle mask is smaller than a size of the screen.

[0270] Optionally, the rendering module 1501 is configured to:

[0271] perform rotation on the UV coordinates through the third sub-special effect rendering path;

[0272] perform optical flow direction and speed control processing on the rotated UV coordinates through the third sub-special effect rendering path, and perform noise texture sampling based on the processed UV coordinates;

[0273] drive color texture sampling based on the noise texture sampling result through the third sub-special effect rendering path to obtain the second dynamic color image.

[0274] Optionally, the rendering module 1501 is configured to:

[0275] generate the rounded rectangle mask through the fourth sub-special effect rendering path based on a rectangle width, a rectangle height, and a rectangle rounded corner radius by calling a signed distance field function.

[0276] Optionally, in a case where the multiple sub-special effect rendering results include the fourth sub-special effect rendering result, the rendering module 1501 is configured to:

[0277] perform UV coordinate displacement, scaling, and rotation transformation processing on a preset map through a fifth sub-special effect rendering path to obtain a processed map;

[0278] perform feathering processing on the processed map through the fifth sub-special effect rendering path based on a shape of the preset screen region to obtain the fourth sub-special effect rendering result.

[0279] Optionally, in a case where the multiple sub-special effect rendering results include the fifth sub-special effect rendering result, the rendering module 1501 is configured to:

[0280] perform smooth rounded corner processing on an interface image of the first interface through a sixth sub-special effect rendering path;

[0281] perform morphing and halo dispersion processing on the interface image after the smooth rounded corner processing through a seventh sub-special effect rendering path;

[0282] perform motion blur processing on the interface image after the morphing and halo dispersion processing through three sub-special effect rendering paths to obtain the fifth sub-special effect rendering result.

[0283] Optionally, the rendering module 1501 is configured to:

[0284] The sixth sub-special effect rendering path is used for performing smooth corner processing on a first image corner region of the interface image of the first interface;

[0285] The sixth sub-special effect rendering path is used for multiplexing a smooth corner processing result of the first image corner region to a second image corner region symmetrical to the first image corner region.

[0286] Optionally, the rendering module 1501 is configured to:

[0287] The seventh sub-special effect rendering path is used for performing dynamic width interpolation processing on the interface image after the smooth corner processing, to obtain a deformed interface image;

[0288] The seventh sub-special effect rendering path is used for performing asymmetric offset processing on a red-blue color channel of the deformed interface image, to obtain a deformed interface image after the deformation and halo dispersion processing.

[0289] Optionally, the rendering module 1501 is configured to:

[0290] The three sub-special effect rendering paths are used for sequentially performing directional blurring, X-axis box blurring and Y-axis box blurring on the deformed interface image after the deformation and halo dispersion processing, to obtain the fifth sub-special effect rendering result.

[0291] Optionally, the synthesis module 1502 is configured to:

[0292] The synthesis rendering path is used for performing special effect synthesis on the multiple sub-special effect rendering results according to a sub-special effect superposition order, to obtain the special effect synthesis result.

[0293] In the embodiments of the present application, a multi-path rendering synthesis framework is adopted, special effect rendering results of different sub-special effects are obtained through multiple sub-special effect rendering paths, and special effect synthesis is performed on the multiple sub-special effect rendering results through a synthesis rendering path, to obtain a special effect synthesis result, so that the special effect synthesis result is displayed in the second display layer superimposed above the first display layer. Since only a single window is needed to realize the special effect display, the power consumption of the special effect display can be reduced on the premise of ensuring the special effect display effect when complex special effects are displayed.

[0294] It should be noted that the apparatus provided in the above embodiments is only used as an example for the division of the above functional modules. In actual applications, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the apparatus is divided into different functional modules to complete all or part of the above described functions. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and the implementation process is detailed in the method embodiments, which will not be repeated here.

[0295] Referring to Figure 16 , Figure 16 is a structural block diagram of a terminal provided by an exemplary embodiment of the present application. The terminal can include one or more of the following components: a processor 1610 and a memory 1620.

[0296] Optionally, the processor 1610 connects various parts in the entire electronic device by using various interfaces and lines, and performs various functions of the electronic device and processes data by running or executing instructions, programs, code sets or instruction sets stored in the memory 1620, and calling data stored in the memory 1620. Optionally, the processor 1610 can be implemented in at least one of a hardware form of a digital signal processing (DSP), a field-programmable gate array (FPGA), a programmable logic array (PLA).

[0297] The processor 1610 can be integrated with a combination of one or several of a central processing unit (CPU), a graphics processing unit (GPU), a neural-network processing unit (NPU) and a baseband chip. Among them, the CPU is mainly used to process operating systems, user interfaces and application programs, etc.; the GPU is used to render and draw the content to be displayed required by the touch display screen; the NPU is used to implement artificial intelligence (AI) functions; and the baseband chip is used to process wireless communication. It can be understood that the above-mentioned baseband chip can also not be integrated into the processor 1610, but be implemented by a separate chip.

[0298] The memory 1620 can include a random access memory (RAM) and can also include a read-only memory (ROM). Optionally, the memory 1620 includes a non-transitory computer-readable storage medium. The memory 1620 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 1620 can include a program storage area and a data storage area, wherein the program storage area can store instructions for implementing an operating system, instructions for at least one function, instructions for implementing the above-mentioned various method embodiments, etc.; and the data storage area can store data created according to the use of the electronic device, etc.

[0299] In addition, those skilled in the art can understand that the structure of the terminal shown in the above-described drawings does not constitute a limitation on the terminal, and the terminal can include more (such as a display assembly, a power assembly, a display assembly) or less components than the drawings, or combine certain components, or different component arrangements.

[0300] The embodiment of the present application provides a computer readable storage medium, the computer readable storage medium stores at least one computer instruction, the at least one computer instruction is used for being executed by a processor to realize the special effect display method as described in the above embodiment.

[0301] In another aspect, the embodiment of the present application provides a computer program product, the computer program product includes computer instructions, and a processor executes the computer instructions to realize the special effect display method as described in the above embodiment.

[0302] Those skilled in the art should realize that, in one or more examples described above, the functions described in the embodiments of the present application can be realized by hardware, software, firmware or any combination thereof. When realized by software, these functions can be stored in a computer readable medium or transmitted as one or more instructions or codes on a computer readable medium. The computer readable medium includes a computer storage medium and a communication medium, wherein the communication medium includes any medium facilitating the transmission of a computer program from one place to another. The storage medium can be any available medium accessible by a general or special purpose computer.

[0303] The above description is only optional embodiments of the present application, and does not limit the present application, and any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for displaying special effects, characterized in that, The method includes: Sub-effects are rendered through multiple sub-effect rendering paths to obtain multiple sub-effect rendering results. Different sub-effect rendering paths are used to render different sub-effects. The multi-path special effects rendering results are composited using a composite rendering path to obtain a composite special effects result. The effect compositing result is displayed in a second display layer overlaid on the first display layer, where the first display layer is used to display the first interface of the effect to be displayed.

2. The method according to claim 1, characterized in that, The multi-path special effects rendering results include at least two of the following: The first sub-effect rendering result refers to the water ripple effect on the first interface; The second sub-effect rendering result refers to the sweeping light area movement effect; The third sub-effect rendering result refers to the screen edge light flow effect; The fourth sub-effect rendering result refers to the texture rotation effect at the preset screen area. The fifth sub-effect rendering result refers to the effect of the first interface deforming, shrinking, and moving to a preset screen area.

3. The method according to claim 2, characterized in that, When the multi-path sub-effect rendering result includes the first sub-effect rendering result, the step of performing sub-effect rendering through multiple sub-effect rendering paths to obtain the multi-path sub-effect rendering result includes: The first ring mask is generated through the first sub-effect rendering path; The first ring mask is superimposed on the interface image of the first interface through the first sub-effect rendering path, and the mask value of the first ring mask is offset by coordinates to obtain the first sub-effect rendering result.

4. The method according to claim 3, characterized in that, The generation of the first ring-shaped mask through the first sub-effects rendering path includes: The first and second circles are generated by calling the smoothing function through the first sub-effect rendering path. The first and second circles have the same center but different radii, and the edges of the first and second circles have a feathering effect. The first ring mask is obtained by performing difference processing on the first circle and the second circle through the first sub-effect rendering path.

5. The method according to claim 2, characterized in that, When the multi-path sub-effect rendering result includes the second sub-effect rendering result, the step of performing sub-effect rendering through multiple sub-effect rendering paths to obtain the multi-path sub-effect rendering result includes: The first dynamic color image is generated through the second sub-effect rendering path, and the second ring mask is generated. The second ring mask is superimposed on the first dynamic color image through the second sub-effect rendering path, and the movement of the second ring mask is controlled to obtain the second sub-effect rendering result.

6. The method according to claim 5, characterized in that, The generation of the first dynamic color image through the second sub-effects rendering path includes: Through the second sub-effect rendering path, texture sampling and color synthesis are performed based on the dynamically perturbed UV coordinates to obtain multiple dynamic color layers, where different dynamic color layers correspond to different color channels; The first dynamic color image is obtained by mixing the multiple dynamic color layers through the second sub-effect rendering path.

7. The method according to claim 6, characterized in that, The texturing and color synthesis based on dynamically perturbed UV coordinates yields multiple dynamic color layers, including: The UV coordinates are translated, rotated, and scaled to obtain the dynamically disturbed UV coordinates. Based on the dynamically perturbed UV coordinates, texture sampling is performed on the color textures corresponding to different color channels, and the texture sampling results are combined with the colors corresponding to the color channels to obtain the multiple dynamic color layers.

8. The method according to claim 6, characterized in that, The step of mixing the multiple dynamic color layers through the second sub-effect rendering path to obtain the first dynamic color image includes: Based on the color dithering parameters corresponding to each color channel, the multiple dynamic color layers are dithered through the second sub-effect rendering path; Using the transparency channel value obtained from texture sampling as the blending weight, the multiple dynamic color layers after dithering are synthesized layer by layer through the second sub-effect rendering path to obtain the first dynamic color image.

9. The method according to claim 5, characterized in that, The generation of the second ring mask through the second sub-effect rendering path includes: The second sub-effect rendering path calls the smoothing function to generate a third circle and a fourth circle. The third circle and the fourth circle have the same center but different radii, and the edges of the third circle and the fourth circle have a feathering effect. The second ring mask is obtained by performing difference processing on the third circle and the fourth circle through the second sub-effect rendering path.

10. The method according to claim 2, characterized in that, When the multi-path sub-effect rendering result includes the third sub-effect rendering result, the step of performing sub-effect rendering through multiple sub-effect rendering paths to obtain the multi-path sub-effect rendering result includes: A second dynamic color image is generated through the third sub-effects rendering path; A rounded rectangle mask is generated through the fourth sub-effect rendering path, and the rounded rectangle mask is superimposed on the central area of ​​the second dynamic color image to obtain the third sub-effect rendering result. The size of the rounded rectangle mask is smaller than the screen size.

11. The method according to claim 10, characterized in that, The generation of the second dynamic color image through the third sub-effects rendering path includes: The UV coordinates are rotated through the third sub-effect rendering path; The optical flow direction and velocity are controlled by the rotated UV coordinates through the third sub-effect rendering path, and noise texture sampling is performed based on the processed UV coordinates. The second dynamic color image is obtained by driving color texture sampling based on noise texture sampling results through the third sub-effect rendering path.

12. The method according to claim 10, characterized in that, The generation of a rounded rectangle mask through the fourth sub-effects rendering path includes: Based on the rectangle's width, height, and corner radius, the rounded rectangle mask is generated by calling the signed distance field function through the fourth sub-effect rendering path.

13. The method according to claim 2, characterized in that, When the multi-path sub-effect rendering result includes the fourth sub-effect rendering result, the step of performing sub-effect rendering through multiple sub-effect rendering paths to obtain the multi-path sub-effect rendering result includes: The preset texture is processed by UV coordinate displacement, scaling and rotation transformation through the fifth sub-effect rendering path to obtain the processed texture. Based on the shape of the preset screen area, the processed texture is feathered through the fifth sub-effect rendering path to obtain the fourth sub-effect rendering result.

14. The method according to claim 2, characterized in that, When the multi-path sub-effect rendering result includes the fifth sub-effect rendering result, the step of performing sub-effect rendering through multiple sub-effect rendering paths to obtain the multi-path sub-effect rendering result includes: The interface image of the first interface is smoothed and rounded using the sixth sub-effect rendering path. The seventh sub-effects rendering path is used to deform and process halo dispersion in the interface image after smoothing rounded corners. The fifth sub-effect rendering result is obtained by applying motion blur to the interface image after deformation and halo dispersion processing through three sub-effect rendering paths.

15. The method according to claim 14, characterized in that, The step of smoothing and rounding the corners of the interface image of the first interface through the sixth sub-effects rendering path includes: The sixth sub-effect rendering path is used to smooth and round the corners of the first image of the interface of the first interface. The smooth rounded corner processing result of the first image corner area is reused in the second image corner area that is symmetrical to the first image corner area through the sixth sub-effect rendering path.

16. The method according to claim 14, characterized in that, The deformation and halo dispersion processing of the interface image after smoothing rounded corners through the seventh sub-effects rendering path includes: The seventh sub-effects rendering path is used to perform dynamic width interpolation on the interface image after smoothing rounded corners to obtain the deformed interface image. The red and blue color channels of the deformed interface image are asymmetrically offset through the seventh sub-effect rendering path to obtain the interface image after deformation and halo dispersion processing.

17. The method according to claim 14, characterized in that, The fifth sub-effect rendering result is obtained by performing motion blur processing on the interface image after deformation and halo dispersion processing through three sub-effect rendering paths, including: The interface image after deformation and halo dispersion processing is sequentially blurred by directional blurring, X-axis box blurring, and Y-axis box blurring through the three sub-effect rendering paths to obtain the fifth sub-effect rendering result.

18. The method according to any one of claims 1 to 17, characterized in that, The process of compositing the multi-path sub-effect rendering results through a compositing rendering path to obtain a compositing effect result includes: The multi-path sub-effect rendering results are composited using the compositing rendering path according to the sub-effect stacking order to obtain the compositing effect result.

19. A special effects display device, characterized in that, The device includes: The rendering module is used to render sub-effects through multiple sub-effect rendering paths to obtain multiple sub-effect rendering results. Different sub-effect rendering paths are used to render different sub-effects. The compositing module is used to perform special effects compositing on the multi-path sub-effect rendering results through the compositing rendering path to obtain the special effects compositing result; A display module is used to display the special effects compositing result in a second display layer superimposed on a first display layer, wherein the first display layer is used to display a first interface of the special effects to be displayed.

20. A terminal, characterized in that, The terminal includes a processor and a memory, the memory storing at least one computer instruction, which is loaded and executed by the processor to implement the special effects display method as described in any one of claims 1 to 18.

21. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one computer instruction, which is executed by a processor to implement the special effects display method as described in any one of claims 1 to 18.

22. A computer program product, characterized in that, The computer program product includes computer instructions, and when the processor executes the computer instructions, it implements the special effects display method as described in any one of claims 1 to 18.

Images