Light-shadow effect display method and electronic device

Abstract

The present application relates to the technical field of terminals. Provided are a light-shadow effect display method and an electronic device. The present application can adaptively realize light-shadow effect display on the basis of preset lighting information in combination with current display information, thereby enriching the light-shadow effect of an interface, and improving the usage experience of a user. The method comprises: detecting a first operation of a user, and an electronic device determining to refresh a first interface that is being displayed; the electronic device acquiring lighting information and current display information, wherein the lighting information is a pre-configured global lighting definition; the electronic device performing lighting rendering on the basis of the lighting information and the current display information; and then, the electronic device displaying a second interface, wherein a first component in the second interface has a light-shadow effect formed after the lighting rendering.

Description

Light and shadow effect display method and electronic device

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on July 31, 2023, with application number 202310963290.9 and application name “Light and shadow effect display method and electronic device”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The embodiments of the present application relate to the field of terminal technology, and in particular to a light and shadow effect display method and an electronic device. Background Art

[0003] With the development of terminal technology, virtual light sources can be pre-set in electronic devices, introducing some real-world presentation methods to achieve lighting and shadow effects in the graphical user interface (GUI) of electronic devices. For example, based on the pre-set virtual light source, the shadow of the control is displayed according to the control's Z-axis altitude, thus enriching the display effect and improving the user experience.

[0004] However, the current light and shadow display effects are limited to some simple-shaped controls. For example, shadow display only supports circular controls and rounded rectangle controls, and cannot achieve better GUI light and shadow effects.

[0005] Summary of the Invention

[0006] To solve the above technical problems, this application provides a method and electronic device for displaying light and shadow effects. The technical solution provided by this application adaptively realizes the display of light and shadow effects based on preset lighting information and combined with current display information, enriching the GUI light and shadow effects and improving the user experience.

[0007] In order to achieve the above technical objectives, this application provides the following technical solutions:

[0008] In a first aspect, a method for displaying light and shadow effects is provided, applicable to an electronic device. The method includes: detecting a first user operation, determining to refresh a first interface currently being displayed; obtaining lighting information and current display information, where the lighting information is a preconfigured global illumination definition; performing lighting rendering based on the lighting information and the current display information; and displaying a second interface, where a first component in the second interface has the light and shadow effects resulting from the lighting rendering.

[0009] In this way, the electronic device combines the lighting information and the current display information to provide users with interface lighting effects that better meet user needs, thereby improving the user experience.

[0010] According to the first aspect, the global illumination definition is used to indicate one or more of the physical lighting principles, lighting types, lighting properties, scene lighting effects, lighting models, lighting materials, and shadow properties in the real world.

[0011] According to the first aspect, or any implementation method of the first aspect above, the current display information includes one or more of the electronic device's current time information, location information, motion status information, interface virtual light source information, component height information, component material information, and component transparency information.

[0012] According to the first aspect, or any implementation method of the first aspect above, the rendering process of the first component includes border rendering, lighting layer rendering, user interface canvas rendering, surface layer rendering, and shadow bearing layer rendering; wherein, the border rendering is used to draw at least one of the self-luminous edge effect, highlight edge effect, and contour line effect of the first component; the lighting layer is used to receive lighting and complete the lighting drawing corresponding to the first component; the user interface canvas is used to complete the drawing of the style content of the first component; the surface layer is used to draw the display container of the first component; the shadow bearing layer is used to carry the layer shadow and overflow lighting drawing.

[0013] According to the first aspect, or any implementation method of the first aspect above, lighting rendering is performed based on the lighting information and the current display information, including: outputting visual features based on the light source information, rendering equations and basic physical properties indicated by the lighting information and the current display information, and the visual features include one or more of color information, projection information, and physical material information.

[0014] According to the first aspect, or any implementation of the first aspect above, the light source information includes the lighting type and lighting properties; the basic physical properties include one or more of the base color, metallicity, roughness, reflectivity, self-luminescence, normal information, refractive index, transparency, absorptivity, and transmittance.

[0015] According to the first aspect, or any implementation of the first aspect above, the light and shadow effects include a shadow rendering effect, and the shadow rendering effect corresponds to one or more of the height of the first component, the position of the light source, the shape of the first component, and the material of the first component, and the shape of the first component is a regular shape or an irregular shape.

[0016] For example, the shadow rendering effect is related to the height of the first component. The shadow of the first component includes the umbra and penumbra. The higher the first component is and the closer it is to the light source, the larger its penumbra and the more obvious the shadow display effect will be.

[0017] For another example, the shadow rendering effect is related to the position of the light source. For example, if the light source is located in the upper right corner of the first component, the shadow will be located in the lower left corner of the first component. For another example, if the light source is located directly above the first component, the shadow will be located directly below the first component. If the light source is located in the upper left corner of the first component, the shadow will be located in the lower right corner of the first component.

[0018] For another example, the shadow rendering effect is related to the shape of the first component. The electronic device can output shadow display effects of different shapes depending on the shape of the first component. In addition to supporting shadow rendering of circles and rounded rectangles, the electronic device also supports rendering of various special-shaped shadows.

[0019] For another example, the shadow rendering effect is related to the material of the first component. For example, if a translucent material supports color projection, then the shadow color will be similar to the color of the first component of the translucent material. For example, the color of the first component to be rendered by the electronic device is blue, and the material of the first component is translucent. Then, based on the color and material of the first component, the electronic device can draw a light blue shadow, so that the shadow display effect is more consistent with the shadow effect in the real physical world, thereby improving the user experience.

[0020] In this way, electronic devices can bring different shadow rendering effects according to different light sources and physical properties, enrich the GUI interface display, and enhance the user experience.

[0021] In addition, when the shape of the first component is relatively complex, the electronic device can also combine the lighting information and the current display information to generate the light and shadow effects of the first component with the complex shape to enrich the display of the interface.

[0022] According to the first aspect, or any implementation of the first aspect above, performing lighting rendering based on lighting information and current display information includes: determining a shadow offset and direction based on the light source coordinates indicated by the lighting information and the current display information and the height of the first component, and obtaining a shadow rendering effect. Alternatively, copying the first component to create a shadow map. Obtaining a shadow rendering effect by blurring the shadow map. Alternatively, obtaining a shadow rendering effect by using a shadow rendering algorithm based on the lighting information and the current display information.

[0023] According to the first aspect, or any implementation of the first aspect above, when the material of the first component is a translucent material, the light and shadow effects include one or more of frosted glass effect, rainbow glass effect, and acrylic glass effect.

[0024] In this way, when the first component is made of a translucent material, the electronic device can also combine the lighting information and the current display information to generate the light and shadow effects of the first component of the translucent material to enrich the display of the interface.

[0025] In a second aspect, an electronic device is provided. The electronic device includes: a processor, a memory, and a display screen, wherein the memory and the display screen are coupled to the processor, the memory being used to store computer program code, the computer program code including computer instructions. When the processor reads the computer instructions from the memory, the electronic device executes the following steps: detecting a first user operation, and determining to refresh a first interface currently being displayed. Lighting information and current display information are obtained, where the lighting information is a preconfigured global illumination definition. Lighting rendering is performed based on the lighting information and the current display information. A second interface is displayed, where the first component in the second interface has a light and shadow effect formed by the lighting rendering.

[0026] According to the second aspect, the global illumination definition is used to indicate one or more of the physical lighting principles, lighting types, lighting properties, scene lighting effects, lighting models, lighting materials, and shadow properties in the real world.

[0027] According to the second aspect, or any implementation method of the above second aspect, the current display information includes one or more of the electronic device's current time information, location information, motion status information, interface virtual light source information, component height information, component material information, and component transparency information.

[0028] According to the second aspect, or any implementation method of the above second aspect, the rendering process of the first component includes border rendering, lighting layer rendering, user interface canvas rendering, surface layer rendering, and shadow bearing layer rendering; wherein, the border rendering is used to draw at least one of the self-luminous edge effect, highlight edge effect, and contour line effect of the first component; the lighting layer is used to receive lighting and complete the lighting drawing corresponding to the first component; the user interface canvas is used to complete the drawing of the style content of the first component; the surface layer is used to draw the display container of the first component; the shadow bearing layer is used to carry the layer shadow and overflow lighting drawing.

[0029] According to the second aspect, or any implementation method of the second aspect above, lighting rendering is performed based on the lighting information and the current display information, including: outputting visual features based on the light source information, rendering equations and basic physical properties indicated by the lighting information and the current display information, and the visual features include one or more of color information, projection information, and physical material information.

[0030] According to the second aspect, or any implementation of the second aspect above, the light source information includes the lighting type and lighting properties; the basic physical properties include one or more of the base color, metallicity, roughness, reflectivity, self-luminescence, normal information, refractive index, transparency, absorptivity, and transmittance.

[0031] According to the second aspect, or any implementation method of the above second aspect, the light and shadow effects include a shadow rendering effect, and the shadow rendering effect corresponds to one or more of the height of the first component, the position of the light source, the shape of the first component, and the material of the first component, and the shape of the first component is a regular shape or an irregular shape.

[0032] According to the second aspect, or any implementation of the second aspect above, performing lighting rendering based on the lighting information and current display information includes: determining a shadow offset and direction based on the light source coordinates indicated by the lighting information and the current display information and the height of the first component, and obtaining a shadow rendering effect. Alternatively, copying the first component to create a shadow map. Obtaining the shadow rendering effect by blurring the shadow map. Alternatively, obtaining the shadow rendering effect by using a shadow rendering algorithm based on the lighting information and the current display information.

[0033] According to the second aspect, or any implementation of the second aspect above, when the material of the first component is a translucent material, the light and shadow effects include one or more of frosted glass effect, rainbow glass effect, and acrylic glass effect.

[0034] The technical effects corresponding to the second aspect and any implementation method of the second aspect can be found in the technical effects corresponding to the above-mentioned first aspect and any implementation method of the first aspect, and will not be repeated here.

[0035] In a third aspect, an electronic device is provided, which has the function of implementing the light and shadow effect display method described in the first aspect and any possible implementation thereof. This function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above-mentioned functions.

[0036] In a fourth aspect, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program (also referred to as instructions or code), which, when executed by an electronic device, causes the electronic device to perform the method of the first aspect or any one of the embodiments of the first aspect.

[0037] In a fifth aspect, a computer program product is provided. When the computer program product is run on an electronic device, the electronic device executes the method of the first aspect or any one of the embodiments of the first aspect.

[0038] In a sixth aspect, a circuit system is provided, the circuit system including a processing circuit, the processing circuit being configured to execute the method of the first aspect or any one of the embodiments of the first aspect.

[0039] In the seventh aspect, a chip system is provided, comprising at least one processor and at least one interface circuit, wherein the at least one interface circuit is used to perform transceiver functions and send instructions to the at least one processor. When the at least one processor executes the instructions, the at least one processor executes the method of the first aspect or any one of the embodiments of the first aspect.

[0040] The technical effects of the aforementioned aspects can be referenced with each other and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] FIG1 is a schematic diagram of a light and shadow display scene according to an embodiment of the present application;

[0042] FIG2 is a second schematic diagram of a light and shadow display scene provided in an embodiment of the present application;

[0043] FIG3 is a third schematic diagram of a light and shadow display scene provided in an embodiment of the present application;

[0044] FIG4 is a schematic diagram of the electronic device provided in an embodiment of the present application;

[0045] FIG5 is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0046] FIG6 is a schematic diagram of a software structure block diagram provided in an embodiment of the present application;

[0047] FIG7 is a second schematic diagram of a software structure block diagram provided in an embodiment of the present application;

[0048] FIG8 is a first schematic diagram of a rendering process according to an embodiment of the present application;

[0049] FIG9 is a second schematic diagram of a rendering process provided in an embodiment of the present application;

[0050] FIG10 is a schematic diagram of a light and shadow effect display processing flow according to an embodiment of the present application;

[0051] FIG11 is a first schematic diagram of a light and shadow effect display according to an embodiment of the present application;

[0052] FIG12 is a second schematic diagram showing light and shadow effects according to an embodiment of the present application;

[0053] FIG13 is a third schematic diagram of a light and shadow effect display according to an embodiment of the present application;

[0054] FIG14 is a schematic diagram of the basic physical principles of light and shadow effects provided by an embodiment of the present application;

[0055] FIG15 is a schematic diagram of light and shadow effects of different types of light sources provided in an embodiment of the present application;

[0056] FIG16 is a schematic diagram of a UI framework structure provided in an embodiment of the present application;

[0057] FIG17 is a schematic diagram showing metalness, normal, and roughness according to an embodiment of the present application;

[0058] FIG18 is a schematic diagram of a scene for automatically generating normal information according to an embodiment of the present application;

[0059] FIG19 is a schematic diagram of a refractive index change scenario provided by an embodiment of the present application;

[0060] FIG20 is a schematic diagram of a scenario of absorption rate change provided in an embodiment of the present application;

[0061] FIG21 is a schematic diagram of a light transmittance change scenario provided by an embodiment of the present application;

[0062] FIG22 is a schematic diagram of a thickness change scenario provided by an embodiment of the present application;

[0063] FIG23 is a schematic diagram of the principle of the PBR lighting model provided in an embodiment of the present application;

[0064] FIG24 is a schematic diagram of the principle of a ray tracing rendering model provided in an embodiment of the present application;

[0065] FIG25 is a schematic diagram of the principle of a semi-transparent material rendering equation provided in an embodiment of the present application;

[0066] FIG26 is a first schematic diagram of a shadow effect provided by an embodiment of the present application;

[0067] FIG27 is a second schematic diagram of a shadow effect provided by an embodiment of the present application;

[0068] FIG28 is a third schematic diagram of shadow effects provided by an embodiment of the present application;

[0069] FIG29 is a fourth schematic diagram of a shadow effect provided by an embodiment of the present application;

[0070] FIG30 is a fifth schematic diagram of shadow effects provided by an embodiment of the present application;

[0071] FIG31 is a first schematic diagram of the shadow simulation principle provided by an embodiment of the present application;

[0072] FIG32 is a second schematic diagram of the shadow simulation principle provided by an embodiment of the present application;

[0073] FIG33 is a first schematic diagram of the shadow effect generation principle provided by an embodiment of the present application;

[0074] FIG34 is a second schematic diagram of the shadow effect generation principle provided by an embodiment of the present application;

[0075] FIG35 is a third schematic diagram of the shadow effect generation principle provided by an embodiment of the present application;

[0076] FIG36 is a schematic diagram of the Changhong glass principle according to an embodiment of the present application;

[0077] FIG37 is a second schematic diagram of the Changhong glass principle provided in an embodiment of the present application;

[0078] FIG38 is a schematic diagram of frosted glass effect, rainbow glass effect, and lattice glass effect provided in an embodiment of the present application;

[0079] FIG39 is a schematic diagram of window display effects of different translucent materials provided in an embodiment of the present application;

[0080] FIG40 is a first schematic diagram of the light and shadow display effect of the main interface provided by an embodiment of the present application;

[0081] FIG41 is a second schematic diagram of the light and shadow display effect of the main interface provided by an embodiment of the present application;

[0082] FIG42 is a schematic diagram of light and shadow display effects during email refresh according to an embodiment of the present application;

[0083] FIG43 is a schematic diagram of light and shadow display effects during the activation of a pull-up menu according to an embodiment of the present application;

[0084] FIG44 is a schematic diagram of a flow chart of a method for displaying light and shadow effects according to an embodiment of the present application;

[0085] Figure 45 is a schematic structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0086] The technical solutions in the embodiments of the present application are described below in conjunction with the drawings in the embodiments of the present application. Among them, in the description of the embodiments of the present application, the terms used in the following embodiments are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to include expressions such as "one or more", unless there is a clear indication to the contrary in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one or more (including two).

[0087] References to "one embodiment" or "some embodiments" etc. described in this specification mean that the specific features, structures or characteristics described in conjunction with the embodiment are included in one or more embodiments of the present application. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. appearing in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in another way. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in another way. The term "connected" includes direct and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated.

[0088] In the embodiments of this application, words such as "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be interpreted as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplarily" or "for example" is intended to present the relevant concepts in a concrete manner.

[0089] In some embodiments, light and shadow effects are implemented in electronic devices by introducing some real-world presentation methods. For example, based on a preset virtual light source, the shadow of a control is displayed according to the control's Z-axis altitude, thereby enriching the display effect and improving the user experience.

[0090] For example, as shown in FIG1(a), Two virtual light sources are defined in, such as virtual light source 11 and virtual light source 12. As shown in (b) of Figure 1, a search bar 14, a background 15, and an add control 16 are displayed on the interface 101. Among them, as shown in (c) of Figure 1, the Z-axis altitudes of different controls displayed on the same interface may be different. Then, in order to achieve the light and shadow display effect of the interface 101, the electronic device can draw shadows based on the lighting directions of the virtual light source 11 and the virtual light source 12, as well as the Z-axis altitudes of different controls. For example, by adding the shadow of control 16 to the interface 101, the light and shadow display effect of the interface 101 is enhanced.

[0091] However, the current light and shadow display effects are limited to some simple-shaped controls. Shadow display only supports circular controls and rounded rectangular controls, and cannot achieve better GUI light and shadow effects.

[0092] In other embodiments, The Universal Windows Platform (UWP) platform widely adopts real physical lighting definitions to enable the controls displayed on the GUI interface to produce light and shadow effects. Among them, the lighting definition includes the lighting type definition shown in Table 1, the lighting attribute definition shown in Table 2, the scene lighting effect definition shown in Table 3, and the lighting model (rendering equation) definition shown in Table 4. As shown in Figure 2, during the interface display process, the electronic device combines the lighting definition and performs lighting rendering through the material shader. Among them, the lighting rendering process includes texture sampling, Gaussian blur, texture color mixing calculation and lighting calculation, so as to realize the output of texture. In the lighting rendering process, the material shader combines the lighting definition and adopts parameters such as background texture (texture), Gaussian blur (Blur) parameter definition, exclusion mixing (texture / color), coverage color, noise function, etc. to realize lighting rendering.

[0093] Table 1

[0094] Table 2

[0095] Table 3

[0096] Table 4

[0097] It can be seen that although UWP realizes the real lighting effect of the GUI interface by combining the lighting definition, it uses a layer blending method in the lighting rendering process, combining the processing parameters of different layers (such as background texture, Gaussian blur parameter definition, etc.) to complete the lighting rendering. In UWP, acrylic materials are mainly used to express windows and various translucent effects, but the layer blending method results in poor results in achieving acrylic material effects.

[0098] In some 3D scenes, electronic devices can also render objects through 3D real-time rendering. The 3D real-time rendering process includes, for example, analyzing 3D scene and rendering object data, 3D content modeling, UV mapping, baking textures for 3D models, creating materials, real-time rendering, and animation processing.

[0099] While 3D real-time rendering offers high realism and ease of user understanding, making it widely applicable in areas like gaming, it is complex, requires high computing power, and consumes high power, making it unsuitable for a wide range of electronic devices. Furthermore, the 3D real-time rendering process differs from the development process of traditional 2D human-machine interfaces, making direct integration impossible.

[0100] In other embodiments, some GUI systems also achieve some simulated lighting effects by overlaying light maps or using 2D rendering algorithms. For example, the control glowing effect shown in Figure 3 or the text flashing effect.

[0101] However, current methods require separate development for different lighting effects, which results in high development costs. Furthermore, the lighting effects are not realistic and cannot reflect real lighting effects.

[0102] Based on this, an embodiment of the present application provides a method for displaying light and shadow effects. The electronic device adaptively realizes the display of light and shadow effects based on preset lighting information and combined with current display information, enriches the GUI light and shadow effects, and improves the user experience.

[0103] Optionally, the light and shadow effect display method provided in the embodiment of the present application can be applied to an electronic device 100. As shown in Figure 4, the electronic device 100 can specifically be a mobile phone 41, a tablet computer 42, a laptop computer 43, a smart screen 44, a car terminal 45, a wearable device (such as a smart watch, a smart bracelet, etc.) 46, a folding screen mobile phone, a computer, a personal computer (personal computer, PC), an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook, a personal digital assistant (personal digital assistant, PDA), a virtual reality (virtual reality, VR) device / augmented reality (augmented reality, AR) device, an artificial intelligence (artificial intelligence, AI) device, and other terminal devices with display functions. The operating system installed in the above electronic device 100 includes but is not limited to This application does not limit the specific type of the electronic device 100 or the installed operating system.

[0104] FIG5 shows a schematic structural diagram of the electronic device 100 .

[0105] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0106] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0107] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0108] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0109] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0110] In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface.

[0111] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display 194 and the camera 193. MIPI interfaces include the camera serial interface (CSI) and the display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to implement the camera function of the electronic device 100. The processor 110 and the display 194 communicate via the DSI interface to implement the display function of the electronic device 100.

[0112] The USB interface 130 is an interface that complies with USB standards and may be a Mini USB interface, a Micro USB interface, a USB Type-C interface, or the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, or to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio. This interface can also be used to connect other electronic devices, such as augmented reality devices.

[0113] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0114] The charging management module 140 is configured to receive charging input from a charger. The charger can be either a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 can receive charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 can receive wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also provide power to the electronic device via the power management module 141.

[0115] The power management module 141 is used to connect the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and provides power to the processor 110, the internal memory 121, the display 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage, impedance). In some other embodiments, the power management module 141 can also be set in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

[0116] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0117] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0118] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0119] The modem processor may include a modulator and a demodulator. The modulator is used to modulate the low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After being processed by the baseband processor, the low-frequency baseband signal is passed to the application processor. The application processor outputs the sound signal through the audio device or displays an image or video through the display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be provided in the same device as the mobile communication module 150 or other functional modules.

[0120] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0121] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with a network and other devices through wireless communication technologies. The wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

[0122] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0123] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be manufactured using a liquid crystal display (LCD), for example, an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Mini-LED, a Micro-LED, a Micro-OLED, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 100 can include one or N display screens 194, where N is a positive integer greater than one.

[0124] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, and then passes the electrical signal to the ISP for conversion into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0125] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0126] The internal memory 121 can be used to store computer executable program codes, which include instructions. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc. The processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121 and / or instructions stored in a memory provided in the processor.

[0127] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be set in the processor 110, or some functional modules of the audio module 170 can be set in the processor 110. The electronic device 100 can use the audio module 170, such as music playback and recording. The audio module 170 may include a speaker, a receiver, a microphone, a headphone jack, and an application processor to implement audio functions.

[0128] The sensor module 180 may include a pressure sensor, a gyro sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, and the like.

[0129] The buttons 190 include a power button, a volume button, and the like. The buttons 190 may be mechanical buttons or touch buttons. The electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100.

[0130] Motor 191 can generate vibration alerts. This can be used for incoming call vibration alerts or touch vibration feedback. Depending on the touch operation applied to different areas of the display 194, motor 191 can also generate different vibration feedback effects. Different application scenarios (e.g., time reminders, receiving messages, alarm clocks, gaming, etc.) can also correspond to different vibration feedback effects.

[0131] The indicator 192 may be an indicator light, which may be used to indicate the charging status, power level changes, messages, missed calls, notifications, etc.

[0132] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and disconnected from the electronic device 100 by inserting or removing the SIM card into or from the SIM card interface 195. The electronic device 100 may support one or N SIM card interfaces, where N is a positive integer greater than one.

[0133] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present application, the Android system with a layered architecture is used as an example to illustrate the software structure of the electronic device 100.

[0134] FIG6 is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

[0135] A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers: application layer, application framework layer, system layer, and kernel layer, from top to bottom.

[0136] The application layer can include a series of application packages.

[0137] As shown in FIG6 , the application package may include applications such as calendar, contacts, memo, camera, music, gallery, map, call, video, etc.

[0138] The application framework layer provides an application programming interface (API) and programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0139] As shown in FIG6 , the application framework layer may include a user interface (UI) framework, a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0140] Exemplarily, as shown in FIG7 , the UI framework is used to save global illumination definitions, build a hierarchical architecture of UI components, and create rendering tasks.

[0141] Optionally, the UI framework includes a global illumination definition that indicates various physical lighting principles, lighting types, lighting properties, scene lighting effects, lighting models, lighting materials, shadow properties, and other content in the real world. Based on the global illumination information defined by the UI framework, the shadow effects implemented in the subsequent rendering process are enriched.

[0142] Optionally, the UI framework reconstructs the current basic UI components, adds relevant information such as material, lighting, environment, border properties, shadow properties, etc., so as to complete lighting material rendering in a single-layer canvas.

[0143] Exemplarily, as shown in Figure 8, the UI component is reconstructed in a single-layer canvas, and the UI framework divides the rendering process of the UI component into 5 layers, including border drawing, lighting layer, UI canvas, surface layer (surface), and shadow bearing layer. Among them, during the rendering process, the lighting definition can be used to indicate information such as lighting type, lighting spatial position, lighting attenuation coefficient, and lighting color. Border drawing is used to draw the self-luminous edge effects, highlight edge effects, outline and other effects of UI components. The lighting layer is used to receive lighting and complete lighting drawing. The UI canvas is used to complete the drawing of the UI component style content. The surface is used to draw the display container of the system layer. The shadow bearing layer is used to carry layer shadows and overflow lighting drawing to achieve system-level non-placeholder shadows and lighting.

[0144] Optionally, the UI framework is also used to create rendering tasks, including lighting rendering tasks, and the UI framework sends the created lighting tasks to the rendering service at the system level to trigger rendering.

[0145] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the screen, take screenshots, etc.

[0146] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0147] The view system includes visual controls, such as those for displaying text and images. The view system is used to build applications. A display interface can consist of one or more views. For example, a display interface containing a text notification icon might include a view for displaying text and a view for displaying images.

[0148] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including answering, hanging up, etc.).

[0149] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0150] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include text messages in the status bar, beeps, vibrations on electronic devices, and flashing indicator lights.

[0151] The system layer can include multiple functional modules, such as the surface manager, graphics processing library (e.g. OpenGL ES), rendering service, graphics engine (e.g. SGL), media library, etc.

[0152] The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0153] The media library supports playback and recording of a variety of common audio and video formats, as well as static image files. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0154] The graphics processing library is used to implement graphics drawing, image rendering, compositing, and layer processing. In some examples, the graphics processing library includes a rendering service.

[0155] The graphics engine is a drawing engine that draws pictures.

[0156] The kernel layer is the layer between hardware and software. The kernel layer includes at least display driver, camera driver, audio driver, and sensor driver.

[0157] For example, as shown in Figure 7, the rendering service is used to perform unified rendering, global visual effects across windows, animation UI thread separation, and inter-process element sharing. Unified rendering includes the render tree, surface management, shadow-bearing node management, control tree, lighting material rendering, and shadow rendering.

[0158] The graphics engine supports rendering services that implement lighting rendering, shadow drawing, and physical material rendering capabilities. Examples of this include a 2D rendering algorithm, a shader runtime (ShaderRuntime), and a 2D rendering engine. Shadow drawing optionally includes full shadow (or umbra) drawing and penumbra drawing. Physical materials include general materials and translucent materials. General materials, for example, are physically based rendering (PBR) materials.

[0159] In some embodiments, when the electronic device determines that the display of the current interface needs to be refreshed (such as when a touch event is detected), one or more layers are drawn through the UI thread (such as DoFrame) in the UI framework; the rendering (Render) thread (such as Draw Frame) performs layer rendering on one or more layers. Afterwards, the synthesis thread (Surface Flinger) in the display framework performs layer synthesis on the drawn one or more layers (that is, the rendered one or more layers) to obtain an image frame. Afterwards, the LCD driver of the hardware display module can receive the synthesized image frame, and the synthesized image frame is displayed by the LCD. After the LCD displays the image frame, the image displayed by the LCD can be perceived by the human eye.

[0160] Optionally, the event that triggers rendering may be, for example, a touch operation detected by the electronic device on the display screen by the user, such as clicking an interactive control, or a sliding operation (such as sliding up and down, sliding left and right, etc.) of the user on the display screen; or it may be a voice input of the user detected by the electronic device; or it may be an event in which the foreground application of the electronic device automatically switches screens, etc., without limitation here. The foreground application is the application corresponding to the interface currently displayed on the display screen of the electronic device.

[0161] It should be noted that the screen content of the foreground application can include not only the screen visible to the user, but also content without a user interface, content in a transparent layer, or content that is blocked by other application interfaces and is invisible to the user. The electronic device needs to obtain all the control data and layout data to be drawn corresponding to the screen content.

[0162] Optionally, the rendering process includes control rendering (including layout rendering) and lighting rendering. The present embodiment introduces the lighting rendering process, while the control rendering process can refer to the prior art, which will not be further described in the present embodiment.

[0163] In some embodiments, during the UI drawing process, the UI thread can draw a control tree (view tree), which is used to represent controls and layouts organized in a tree structure. Based on the tree structure of the control tree, different rendering nodes can be determined during the rendering process.

[0164] Exemplarily, as shown in FIG9 , combined with the control tree structure and the hierarchical rendering structure shown in FIG8 , the rendering service can reconstruct the rendering process and complete the UI component and lighting border drawing in a unified canvas. The rendering service constructs a shadow receiving layer based on information such as the Z-axis height and shadow properties of the UI component to achieve non-placeholder shadow and overflow lighting rendering. For example, as shown in FIG9 , the rendering service completes the drawing of the UI content, lighting drawing, and border drawing on the UI canvas. In addition, the overflow shadow corresponding to the UI component can be displayed in the shadow receiving layer to achieve non-placeholder shadow and overflow lighting rendering.

[0165] For example, the lighting rendering system shown in Figure 10 introduces the overall lighting rendering process in combination with the interaction process of different modules. When the user performs an input operation on the electronic device (such as triggering the electronic device to start an application), the kernel layer can generate a corresponding input event (such as an application startup event) based on the input operation, and report the event to the application framework layer. The UI framework of the application framework layer determines the control data and layout data corresponding to the application, as well as the process logic of the rendering service rendering (such as creating a rendering task), and sends it to the rendering service of the system layer. The rendering service can process the acquired information through the graphics engine, and send the processed rendering results to the display driver of the kernel layer, which displays the corresponding application interface on the display screen.

[0166] Among them, lighting information is preset in the UI framework, and the lighting information is a global lighting definition. As mentioned above, the lighting information includes light source information (such as light source type, light source properties, etc.), physical properties, image light and shadow, etc. After determining the process logic of the rendering service, the UI framework sends the light source information and rendering tasks to the rendering service. In addition, the rendering service can also obtain the display information required in the current rendering process, such as time information, location information, motion status information (such as the hand gesture information of the electronic device), interface virtual light source information, control height information, control transparency and other information. Afterwards, the rendering service can combine the lighting information and display information, execute the rendering task through the graphics engine, and output the lighting rendering results.

[0167] Optionally, the graphics engine includes a 2D rendering pipeline, and the rendering service performs lighting rendering through the 2D rendering pipeline. In some examples, the rendering service can also perform lighting rendering through the GPU rendering pipeline to obtain better rendering effects.

[0168] In this way, by adding a lighting rendering system to the existing 2D GUI interface and defining and simulating real physical lighting and lighting systems, the interaction and reality enhancement of the existing GUI interface can be achieved.

[0169] Furthermore, humans are subconsciously familiar with lighting systems, which reduces learning costs and increases user acceptance. Furthermore, the lighting system's effects align with human cognition, enhancing the sophistication and aesthetics of the GUI interface while also easily gaining user acceptance.

[0170] Exemplarily, based on the lighting rendering system shown in FIG10 , the electronic device can obtain more realistic light and shadow effects in the GUI interface. For example, as shown in FIG11 , when the electronic device is displaying the desktop, the shadow effects on the icons 111 and 112 displayed on the desktop can rotate counterclockwise over time. For another example, as shown in FIG12 , when the electronic device is displaying the desktop, the light and shadow effects on the icons displayed on the desktop can change as the posture of the handheld electronic device changes. For example, the size of the light and shadow area on icon 121 changes as the direction and angle of the user shaking the electronic device change. For another example, as shown in FIG13 , the electronic device receives a pop-up notification, and as the posture of the handheld electronic device changes, the light and shadow position on the pop-up notification 131 changes.

[0171] Optionally, the electronic device can confirm the posture of the electronic device through a sensor installed on the electronic device. For example, the electronic device is equipped with a gyroscope sensor, which is used to determine the motion posture of the electronic device. In some embodiments, the angular velocity of the electronic device around three axes (i.e., x, y, and z axes) can be determined by a gyroscope sensor. For another example, the electronic device is equipped with an acceleration sensor, which can detect the magnitude of the acceleration of the electronic device in various directions (generally three axes). When the electronic device is stationary, the magnitude and direction of gravity can be detected. Alternatively, it can also be used to identify the posture of the electronic device and applied to horizontal and vertical screen switching.

[0172] In this way, the electronic device combines lighting information and display information to provide users with GUI lighting effects that better meet user needs, thereby improving the user experience.

[0173] The above briefly introduces the overall solution of the light and shadow effect display method provided in the embodiment of the present application. The following is a detailed introduction to the specific implementation process of the solution.

[0174] In some embodiments, the primary visual features of the physical world, as represented in a computer vision system, are determined by lighting, basic physical properties, and lighting rendering equations. These primary visual features include color information, projection information, and physical material information.

[0175] The impact of lighting on physical visual effects is deeply ingrained in human consciousness. Therefore, by introducing a lighting rendering system into the GUI system, which provides color, brightness, shadows, and material features, the user experience can be significantly improved.

[0176] For example, as shown in FIG14 , based on lighting, rendering equations (PBR) and basic physical properties, the electronic device can output visual features (such as color information), projection information, and physical material information on a GUI interface.

[0177] For example, electronic devices build a lighting rendering system that can be used in 2D GUI systems based on the principles of light, shadow, and material formation in the physical world, combined with the characteristics of 2D GUI systems. By giving graphic controls, icons, cards, images, and other components in 2D GUIs lighting visual effects, realistic physical shadow effects, and material effects, this improves user acceptance and understanding of human-computer interaction interfaces, ultimately enhancing the user experience.

[0178] In some embodiments, the system-level lighting capabilities of the electronic device are implemented through physical real lighting (e.g., corresponding to lighting information), UI system physical properties, and image lighting. For example, as shown in FIG10 , the lighting information includes light source information, physical properties, and image lighting.

[0179] The light source information includes the light source type and light source properties. As shown in Table 5, light source types include diffuse light, parallel light (Sun) light, point light, spotlight light, natural ambient light light, and sky light light. For example, the display effects of point light, spotlight light, and parallel light are shown in Figure 15.

[0180] As shown in Table 6, light source properties include the light source's color, direction, coordinate system (which view) position, cone (spot), offset, intensity, attenuation coefficient, and so on. For example, the coordinate system position of a light source changes over time (e.g., the sun rises in the east and sets in the west). Alternatively, scenarios in which light source properties change include scenarios that change over time, with weather (e.g., rain, thunder, fog, etc.), with system-specific changes, and with product form.

[0181] Based on different light source types and light source properties, different lighting effects can be generated for UI components, and thus based on the lighting effects, the electronic device can achieve corresponding light and shadow display effects.

[0182] Table 5

[0183] Table 6

[0184] In some embodiments, as described above, the electronic device adds a global illumination definition (i.e., light source information) to the UI framework. For example, as shown in FIG16 , the global illumination positioning position in the UI framework includes a graphic control, a layout system, a window management framework, and a light source. The defined light source content includes the light source type and light source properties described above. The defined graphic control content includes the control type, graphic style, and physical properties.

[0185] Optionally, the system-level lighting and shadow capabilities of the electronic device are implemented through physical real lighting (e.g., corresponding to lighting information), UI system physical properties, and image lighting and shadow. The UI system physical properties include UI element properties, window properties, UI normal properties, and physical properties (e.g., metallicity, roughness, reflectivity, transparency, base color, etc.).

[0186] For example, the basic physical property definitions shown in Table 7 below are pre-configured in the UI framework. The rendering system can then better perform lighting rendering based on these basic physical property definitions during the subsequent rendering process.

[0187] It should be understood that the names and descriptions of the basic physical properties defined in different operating systems may differ, but the physical essence of the content expressed by these different descriptions is the same. For example, the "specular reflection / glossiness" process that may be used in some systems and the "metallicity / roughness" process provided in the embodiments of this application are physically identical, simply using different descriptions.

[0188] Table 7

[0189] In some examples, different graphical controls may have different physical properties based on different application scenarios and styles. As shown in Table 7 above, the system can set default values ​​corresponding to different physical properties.

[0190] Optionally, for some specific application scenarios, or to achieve the developer's design goals, different physical property values ​​need to be written to the graphic control. Therefore, the electronic device needs to support developers or users to customize physical properties. For example, the electronic device provides an API interface for setting different physical properties of the graphic control. Alternatively, the electronic device sets themes corresponding to different physical properties and updates the physical properties of the graphic control for different themes. Alternatively, the electronic device sets the physical properties of the graphic control in the control declaration or layout description.

[0191] For example, the following uses the API interface to set different physical properties of the graphic control. Among them, through this API interface, the metalness (Matellic) of the graphic control can be set to the default value, the roughness (Rouguness) value to 0.2, and the reflectance (Reflectance) value to 0.1.

[0192] In some embodiments, the specific physical properties of each pixel of some graphic controls may be different, so the electronic device can set the physical properties by mapping.

[0193] For example, in the above example, the physical properties directly set by the electronic device through various methods represent the physical properties of each pixel in the graphic control. However, in different scenarios, the physical properties of some graphic control pixels may vary. For example, in a scene with a patterned background, the metallicity, normal, and roughness of different pixels may vary.

[0194] For example, a schematic diagram of the display of metalness, normal, and roughness is shown in Figure 17. For example, the electronic device determines that the roughness of each pixel of the metalness of the graphic control to be rendered is 0.2, and the physical properties of the graphic control can be set through the setting method of the above-mentioned API interface. For another example, as shown in Figure 17, the electronic device determines that the metalness requirements of different pixels of the graphic control to be rendered are different. In this case, a texture can be generated first, and then the texture can be covered on the surface of the graphic control to change the roughness displayed by the graphic control, that is, the physical properties of the graphic control can be made to meet the requirements through the texture.

[0195] In other embodiments, some physical properties of a graphical control may also be automatically generated. For example, due to the difficulty in setting some physical properties of a graphical control or the developer's low willingness to set them, these physical properties of the graphical control may be missing. Therefore, the electronic device may pre-install an image conversion algorithm to automatically generate some or all of the physical properties of the graphical control.

[0196] Exemplarily, normal information is an important component of the physical properties of graphic controls, which can significantly enhance the lighting effects and the micro-stereoscopic effects produced by lighting. Therefore, the embodiment of the present application takes the automatic generation process of normal information as an example to introduce the automatic generation process of some physical properties of graphic controls. As shown in Figure 18, based on the original data of the graphic control, such as layout information, Z-axis height, etc., the electronic device generates a normal map or a height map through an image conversion algorithm, thereby automatically outputting the discovery information of the graphic control. Optionally, the implementation process of the image conversion algorithm includes, for example, inputting a grayscale image, and then performing partial derivative calculations based on the grayscale image to output a corresponding display effect.

[0197] Optionally, the system-level lighting capabilities of the electronic device are implemented through physically realistic lighting (e.g., corresponding to lighting information), UI system physical properties, and image lighting, including providing realistic color projection capabilities for translucent UIs and generating normals for images.

[0198] The following is an introduction to the rendering of translucent materials.

[0199] In some embodiments, electronic devices can display a variety of display interfaces, including some translucent ones. For these translucent interfaces, electronic devices can render them based on translucent materials in the real world. However, translucent materials possess additional physical properties, necessitating the expansion of the physical properties supported by electronic devices during lighting rendering for these materials.

[0200] For example, the following Table 8 shows some extended physical properties of translucent materials, including, for example, the refractive index, transparency, absorptivity, and transmittance of the translucent material.

[0201] Table 8

[0202] For example, as shown in Figure 19, materials with different refractive indices (IORs) can produce different refractive effects. For example, when the IOR is 1.0, observing object 192 through translucent material 191 does not produce a refractive effect. When the IOR is 1.33, observing object 192 through translucent material 191 does produce a refractive effect, such as the position of object 192 displayed in translucent material 191 being offset from the actual position of object 192.

[0203] For another example, as shown in FIG20 , when the absorption rate changes from (0.0, 0.02, 0.14) to (0.0, 0.36, 2.3), the translucent material produces different light absorption effects.

[0204] For another example, as shown in FIG21 , when the transmittance changes from 0.0 to 1.0, the translucent material produces different light transmission effects.

[0205] For another example, as shown in Figure 22, the thickness of the solid transmissive material changes from 0.0 to 3.0, and the translucent material produces different light and shadow effects.

[0206] The preceding article introduces lighting, basic physical properties, and extended physical properties. Electronic devices can output visual features based on lighting, rendering equations, and basic physical properties. The following section introduces the rendering equations.

[0207] In some embodiments, in computer graphics, the rendering equation is an integral equation. It is the theoretical basis for all global illumination methods (such as ray tracing, path tracing, radiosity, etc.). Rendering is the calculation of light radiance, which is a fundamental characteristic of light distribution in an environment.

[0208] In some embodiments, different rendering equations (which can also be described as lighting calculation models) are pre-set in the electronic device, and a lighting rendering result is output during the lighting rendering process through any of the different rendering equations.

[0209] Optionally, based on the hardware capabilities, application scenarios, etc. of the electronic device, the developer or the system may select a rendering equation configured in the electronic device.

[0210] Optionally, the rendering equation includes, for example, a Blinn-Phone lighting model, a PBR lighting model, and a ray-tracing rendering model.

[0211] In some examples, the Blinn-Phone lighting model determines the final lighting effect based on the diffuse lighting and the specular lighting. For example, lighting = diffuse lighting + specular lighting. Diffuse lighting can be determined based on light color, diffuse amount, normal, and direction. Specular lighting can be determined based on light color, specular amount, normal, and shininess. For example, diffuse lighting = light color * diffuse amount * dot (normal, light direction); specular lighting = light color * specular amount * dot (normal, half way vector) ^ shininess.

[0212] Among them, the Blinn-Phone lighting model has better calculation speed and output lighting rendering effects, and is widely used in the lighting rendering process. However, the Blinn-Phone lighting model is an empirical model and does not fully conform to real-world lighting phenomena.

[0213] In some examples, as shown in Figure 23, the PBR lighting model performs lighting rendering based on the physical energy conservation principle that incident light equals the sum of specular and diffuse light. The PBR lighting model is the closest to real-world lighting. However, the PBR lighting model is relatively complex, with many branches and calculation items.

[0214] In some examples, as shown in Figure 24, the basic principle of the ray-tracing rendering model is that there is a light source, which emits a photon. This photon then travels in a straight line until it hits a surface, where it reflects and refracts, losing a certain amount of energy, and ultimately reaches the camera. The ray-tracing rendering model reverses this process, using the camera to emit rays. That is, light enters the scene from the camera, reflects or refracts, and finally hits the light source.

[0215] Ray-tracing rendering models achieve results close to the real world, but they are computationally complex and consume significant computing power. They are generally only used in scenarios with extremely high performance requirements or when devices require significant computing power. In other scenarios, ray-tracing rendering models are often used in combination with other rendering models.

[0216] In some embodiments, as described above, the physical properties of translucent materials have extended content. Therefore, based on the extended physical properties of translucent materials, the rendering equation can also be extended.

[0217] For example, as shown in Figure 25, when light strikes a translucent material, it generates both transmitted and reflected light. Based on the translucent material, transmitted light generates a transmitted light roughness value, while reflected light generates a reflected light roughness value. Furthermore, when light strikes a translucent material, it experiences attenuation, the influence of its thickness property, and the effects of color and distance on absorptivity. The rendering service then performs lighting rendering based on the extended rendering equation shown in Figure 25.

[0218] Alternatively, developers can select a rendering equation configured in the electronic device based on factors such as the electronic device's performance. Alternatively, if multiple rendering equations are configured in the electronic device, and when lighting rendering is required, the electronic device selects an appropriate rendering equation based on its current state. For example, if the electronic device has sufficient battery power when lighting rendering is required, the electronic device may select a rendering equation that provides better rendering effects but requires higher computing power.

[0219] The above introduces the rendering equation and the extended rendering equation. The following describes the specific implementation process of lighting rendering in detail.

[0220] In some embodiments, based on real physical lighting, shadow generation is related to basic requirements such as the physical properties of UI components (such as height), light source position, UI component shape, and UI component material. Based on the above basic requirements for shadow generation, the electronic device performs shadow rendering. The lighting rendering process includes shadow rendering.

[0221] For example, the generation of shadows is related to the height of the UI component. As shown in (a) and (b) in Figure 26, the shadow of the UI component includes the umbra and penumbra. For the same light source (the position, height, etc. are the same), the shadow effects produced by UI components at different heights are different. For example, the umbra of the UI component appears to be more solid, while the penumbra appears to be more virtual. The higher the height of the UI component and the closer it is to the light source, the larger its penumbra and the more obvious the shadow display effect. As shown in (c) in Figure 26, during the UI component rendering process, the rendering service determines the corresponding shadow display effect based on the height of the UI component.

[0222] For another example, the generation of shadows is related to the position of the light source. As shown in Figure 27, based on the direction angle shown in the xy coordinate system, the positional relationship between the light source and the UI component is illustrated. For example, as shown in Figure 27 (a), the light source 271 is located at a 45-degree direction of the UI component 272 (i.e., the light source is located at the upper right of the UI component), then the rendering system outputs the shadow of the UI component 272 as a 45-degree left shadow (i.e., the shadow is located at the lower left of the UI component). As shown in Figure 27 (b), the light source 271 is located at a 90-degree direction of the UI component 272 (i.e., the light source is located directly above the UI component), then the rendering system outputs the shadow of the UI component 272 as a 90-degree bottom shadow (i.e., the shadow is located directly below the UI component). As shown in Figure 27 (c), the light source 271 is located at a 135-degree direction of the UI component 272 (i.e., the light source is located at the upper left of the UI component), then the rendering system outputs the shadow of the UI component 272 as a 135-degree right shadow (i.e., the shadow is located at the lower right of the UI component).

[0223] For another example, the generation of shadows is related to the shape of UI components. The rendering system can output shadow display effects of corresponding different shapes according to the different shapes of UI components. Among them, in addition to supporting the shadow rendering of circles and rounded rectangles, the rendering system also supports the rendering of various special-shaped shadows. For example, as shown in Figure 28 (a), the rendering system completes the shadow rendering of the circular UI component. As shown in Figure 28 (b), the rendering system completes the shadow rendering of the square UI component. As shown in Figure 28 (c), the rendering system completes the shadow rendering of the bird-shaped (special-shaped) UI component.

[0224] For another example, the generation of shadows is related to the material of UI components. For example, translucent materials support color projection, so the shadow color is similar to the color of the UI component of the translucent material. As shown in Figure 29, the color of the card to be rendered by the electronic device is blue, and the material of the card is translucent. Then, the rendering service can draw a light blue shadow based on the color and material of the UI component (i.e., the card), so that the shadow display effect is more consistent with the shadow effect in the real physical world, thereby enhancing the user experience.

[0225] In some embodiments, different light sources and physical properties can bring about different shadow effects, and the rendering service determines the shadow rendering effect according to the light source and physical properties.

[0226] In some examples, the same light source and UI components, but different UI component positions and shapes, can output different shadow rendering effects.

[0227] Exemplarily, as shown in FIG30 , the rendering service is based on the same light source (such as the same light source type, light emission direction, etc.), and will output different shadow rendering effects when the element is lying flat and when the element is standing upright. For example, as shown in FIG30 (a), element 301 is the product display window that is currently to be shadow rendered. The rendering service outputs an elliptical shadow rendering effect as shown in reference numeral 302 based on the lying state of element 301. Alternatively, as shown in FIG30 (b), as element 301 changes from a lying state to an upright state, as shown in reference numeral 303, the shadow of element 301 changes from an ellipse to an extended rectangle.

[0228] In some examples, different light source types can output different shadow rendering effects for the same UI component. For example, as shown in FIG30(a), the rendering service outputs an elliptical shadow rendering effect, as shown in reference numeral 302, based on the flat state of element 301 and the natural ambient light source. As shown in FIG30(c), the rendering service outputs a curved rectangular shadow rendering effect, as shown in reference numeral 304, based on the flat state of element 301 and the spotlight source.

[0229] In this way, the rendering service brings different shadow effects according to different light sources and physical properties, enriches the GUI interface display, and improves the user experience.

[0230] In some embodiments, the electronic device may also pre-set a shadow rendering algorithm to simulate the physical real shadow of the UI component based on the shadow rendering algorithm. Optionally, based on the shadow simulation, a 2D GUI interface may obtain a 3D shadow display effect.

[0231] Optionally, the shadow rendering algorithm includes, for example, a shadow map (ShadowMap) algorithm, a percentage closer filtering (PCF) algorithm, a percentage closer soft shadows (PCSS) algorithm, etc.

[0232] For example, the rendering service uses a shadow mapping algorithm to determine the reachable position of the light source based on the depth map of the UI component, and outputs the corresponding shadow rendering effect.

[0233] For example, as shown in Figure 31 (a), the UI component to be shadow rendered is composed of different objects, so the electronic device can obtain a depth map of the UI component. Based on the depth map, the electronic device can use a shadow mapping algorithm to determine whether different positions on the UI component are reachable by the light source to output the corresponding shadow effect. For example, as shown in Figure 31 (b), based on the above principle, the electronic device can output the shadow rendering effect of the current UI component.

[0234] For example, the rendering service uses the PCF algorithm to sample pixels around shadows and perform a mean filter based on their percentages. This blurs the edges of shadows processed by PCF, eliminating severe aliasing and achieving a better shadow display effect.

[0235] For example, as shown in Figure 32, the origin of the coordinate system is the center of the shadow, with circles of different layers representing distance from the shadow center. During shadow rendering, the rendering service samples pixels around the shadow based on their distance from the center, applies a mean filter based on their percentages, and outputs the shadow rendering effect.

[0236] In some examples, the shadow rendering algorithms described above can produce the desired shadow effects. However, these algorithms often suffer from issues such as high computing power, poor shadow rendering quality, or a lack of support for colored shadows. Therefore, the following describes three shadow rendering methods for achieving realistic shadow effects in 2D GUI scenes.

[0237] For example, the rendering service can determine the shadow offset and direction based on the light source coordinates and the height of the UI component to output the shadow rendering effect.

[0238] For example, in the coordinate system diagram shown in Figure 33(a), the rendering service can determine the coordinates of the light source and the coordinates of Object 1 (i.e., the UI component), and can also obtain the height of Object 1. The rendering system can then render shadows. For example, as shown in Figure 33(b), the rendering service renders a shadow for Object 2 based on the principle shown in Figure 33(a). This shadow rendering effect can reflect the shadow effect in the real physical world.

[0239] For example, the rendering service can copy the original content to construct a shadow map, and then use blurring to achieve PCF soft shadow effects.

[0240] Exemplarily, as shown in FIG34( a ), the rendering service copies the UI component, constructs a shadow map 341 , and then obtains a shadow rendering effect as shown by reference numeral 342 through blurring.

[0241] As another example, as shown in (b) of FIG34 , the rendering service copies the UI component, constructs a shadow map 343 , processes the shadow map 343 in a blurring manner, and then reduces the blur layer to obtain a shadow rendering effect as shown by reference numeral 344 .

[0242] For example, the rendering service uses the Progressive Blur algorithm to achieve soft shadow rendering effects.

[0243] Exemplarily, as shown in FIG35 , during the shadow rendering process, the shadow of the UI component is blurred using the Progressive Blur algorithm. The farther away from the UI component, the higher the degree of blurring, thereby achieving a soft shadow rendering effect.

[0244] In some embodiments, during the lighting rendering process, for translucent materials, the rendering service can combine the material properties of the translucent material with real physical lighting to create the effects of translucent materials such as frosted glass, Changhong glass, and acrylic glass. This allows the display effect of translucent material UI components in the electronic device GUI interface to better meet user expectations. For example, if the image to be displayed on the interface is a glass partition door, the electronic device combines the material properties of the translucent material with real physical lighting to render the current image so that the final display effect of Changhong glass is achieved.

[0245] For example, Figure 36 is a schematic diagram of the Changhong glass principle. The electronic device combines at least one of the roughness, transmittance, and thickness of a translucent material with the translucent material's refractive index map to output various glass material effects. Figure 37 shows a schematic diagram of translucent materials with different roughness, transmittance, and thickness. Based on the principles shown in Figure 36 and the different physical properties shown in Figure 37, the UI components displayed by the electronic device can achieve frosted glass effects, Changhong glass effects, and checkered glass effects, as shown in Figure 38.

[0246] In some embodiments, during the lighting rendering process, the electronic device can also construct various translucent material application or application window display effects based on the lighting and UI component materials. For example, the electronic device can construct window display effects such as paper, metal, leather, and stained glass. For example, as shown in Figure 39 (a), the electronic device constructs various translucent materials based on the lighting and UI component materials, thereby achieving window display effects of different translucent materials as shown in Figure 39 (b).

[0247] In this way, by constructing a translucent material display effect, the GUI interface display is enriched to meet the user's usage needs.

[0248] The above introduces the specific implementation principle and process of the light and shadow effect display method provided in the embodiment of the present application. The following is an illustrative description of the display effect of the electronic device GUI interface after lighting rendering based on the light and shadow effect display method.

[0249] For example, as shown in FIG40 , an electronic device displays a main interface, which includes a calendar card, a weather card, and application icons. As time passes, it can be seen that the lighting effects on the calendar card, weather card, and application icons change significantly. For example, the position of the lighting point on calendar card 401 changes over time. Alternatively, the electronic device can adjust the position and size of the card's shadow based on the lighting position. Alternatively, the electronic device can combine the card's color and output a shadow of a similar color.

[0250] As another example, as shown in FIG41 , the electronic device displays a lock screen interface, on which information such as time, temperature, date, and recommended content is displayed. As shown in FIG41 , the electronic device displays a distinct light and shadow effect of the time component based on the Z-axis height of the time component and the position where the light from the light source can reach. Furthermore, the electronic device can change the light and shadow display effect of the interface as the posture of the electronic device changes based on the posture detection of the sensor. Alternatively, the electronic device uses the normal information of the text component, as shown in FIG412 , to create a micro-stereoscopic effect for the text component.

[0251] As another example, the light and shadow changes of the GUI interface in the email refresh scenario are shown in Figure 42. As shown in interface 4201 in Figure 42 (a), while the electronic device is displaying the email application, it detects that the user has swiped down on interface 4201 in the direction indicated by arrow 421, triggering a refresh of the currently displayed email list. During the swiping process, as shown in interface 4202 in Figure 42 (b), the electronic device determines to perform lighting rendering on the search bar 422 based on the lighting information and the current display information. As shown in interface 4202, the electronic device displays a shadow 423 above the search bar 422. In addition, as shown in interface 4203 in Figure 42 (c) and interface 4204 in Figure 42 (d), the length of the shadow 423 displayed above the search bar 422 increases as the user swips down. Thus, as the user refreshes the email list, the shadow changes deepen the user's understanding of the details, providing a better human-computer interaction experience.

[0252] Optionally, when the electronic device detects that the user has finished scrolling down, it can restore the display of the email list interface in the order of interface 4204 - interface 4203 - interface 4202 - interface 4201. During this process, the electronic device can gradually reduce the length of shadow 423 displayed above search bar 422. This provides a better user experience through shadow changes during the email list refresh and restoration process.

[0253] As another example, the light and shadow changes of the GUI interface in the pull-up menu startup scene shown in Figure 43. As shown in interface 4301 in Figure 43 (a), the electronic device detects the user's upward swiping operation along the bottom of the display screen and displays the pull-up menu. During the pull-up menu drawing and rendering process, the electronic device determines to perform lighting rendering on the pull-up menu 431 based on the lighting information and the current display information. As shown in interface 4301, the electronic device displays a shadow 432 above the pull-up menu 431. In addition, as shown in interface 4301 and interface 4302 in Figure 43 (b), as the user's upward swiping distance increases, the length of the shadow 432 displayed above the pull-up menu 431 also increases. Thus, in the process of the user swiping up the menu bar, the shadow changes to provide the user with a better human-computer interaction experience.

[0254] Figure 44 is a flow chart of a display processing method provided by an embodiment of the present application. It should be noted that the method is not limited to Figure 44 and the specific sequence described below. It should be understood that in other embodiments, the order of some steps in the method can be interchanged according to actual needs, or some steps can be omitted or deleted. The method includes the following steps:

[0255] S4401. The electronic device detects a first operation by the user and determines to refresh the first interface being displayed.

[0256] The first operation may be, for example, an operation instructing the user to display the desktop, an operation to refresh the current interface (such as a sliding operation on the interface), an operation to jump to another application interface, etc. Alternatively, the first operation may be an unlocking operation, in which case the first interface is the lock screen operation, and the refreshed second interface is the unlocked interface.

[0257] S4402: The electronic device obtains illumination information and current display information.

[0258] The lighting information is a pre-configured global lighting definition, which indicates one or more of the following: physical lighting principles, lighting types, lighting properties, scene lighting effects, lighting models, lighting materials, and shadow properties in the real world.

[0259] Among them, the current display information includes one or more of the electronic device's current time information, location information, motion status information, interface virtual light source information, component height information, component material information, and component transparency information.

[0260] In some embodiments, developers can pre-configure lighting information in the electronic device. When the electronic device determines that it needs to refresh the interface display, it can obtain the locally stored lighting information and obtain the current display information.

[0261] S4403: The electronic device performs lighting rendering according to the lighting information and current display information.

[0262] In some embodiments, after acquiring the lighting information and the current display information, the electronic device performs lighting rendering on the first component in the next frame of the image to be displayed.

[0263] In some examples, as shown in Figure 8, the rendering process of the first component includes border rendering, lighting layer rendering, user interface canvas rendering, surface layer rendering, and shadow bearing layer rendering; wherein, border rendering is used to draw at least one of the self-luminous edge effect, highlight edge effect, and contour line effect of the first component; the lighting layer is used to receive lighting and complete the lighting drawing corresponding to the first component; the user interface canvas is used to complete the drawing of the style content of the first component; the surface layer is used to draw the display container of the first component; the shadow bearing layer is used to carry the layer shadow and overflow lighting drawing.

[0264] In some embodiments, the electronic device outputs visual features based on the light source information, rendering equations, and basic physical properties indicated by the lighting information and the current display information. The visual features include one or more of color information, projection information, and physical material information.

[0265] Optionally, the light source information includes the lighting type and lighting properties. Basic physical properties include one or more of base color, metallicity, roughness, reflectivity, self-illumination, normal information, refractive index, transparency, absorptivity, and transmittance.

[0266] For example, for some specific application scenarios, or to achieve the developer's design goals, different physical property values ​​need to be written into the components. Therefore, the electronic device needs to support developers or users to customize physical properties. For example, the electronic device provides an API interface for setting different physical properties of the component. Alternatively, the electronic device sets themes corresponding to different physical properties, and updates the physical properties of the component for different themes. Alternatively, the electronic device sets the physical properties of the component in the control declaration or layout description. In some embodiments, the light and shadow effect includes a shadow rendering effect, and the shadow rendering effect corresponds to one or more of the height of the first component, the position of the light source, the shape of the first component, and the material of the first component. Wherein, the shape of the first component is a regular shape or an irregular shape.

[0267] For example, the shadow rendering effect is related to the height of the first component. As shown in (a) and (b) in Figure 26, the shadow of the first component includes an umbra and a penumbra. For the same light source (the position, height, etc. are the same), the shadow effects produced by first components at different heights are different. For example, the umbra of the first component appears to be more solid, while the penumbra appears to be more virtual. The higher the height of the first component and the closer it is to the light source, the larger its penumbra and the more obvious the shadow display effect. As shown in (c) in Figure 26, during the rendering process of the first component, the electronic device determines the corresponding shadow display effect according to the height of the first component.

[0268] For another example, the shadow rendering effect is related to the position of the light source. As shown in Figure 27, based on the direction angle shown in the xy coordinate system, the positional relationship between the light source and the first component (such as the UI component) is illustrated. For example, as shown in Figure 27 (a), the light source 271 is located at a 45-degree direction of the UI component 272 (i.e., the light source is located at the upper right of the UI component), then the rendering system outputs the shadow of the UI component 272 as a 45-degree left shadow (i.e., the shadow is located at the lower left of the UI component). As shown in Figure 27 (b), the light source 271 is located at a 90-degree direction of the UI component 272 (i.e., the light source is located directly above the UI component), then the rendering system outputs the shadow of the UI component 272 as a 90-degree bottom shadow (i.e., the shadow is located directly below the UI component). As shown in Figure 27 (c), the light source 271 is located at a 135-degree direction of the UI component 272 (i.e., the light source is located at the upper left of the UI component), then the rendering system outputs the shadow of the UI component 272 as a 135-degree right shadow (i.e., the shadow is located at the lower right of the UI component).

[0269] For another example, the shadow rendering effect is related to the shape of the first component. The rendering system can output shadow display effects of corresponding different shapes according to the different shapes of the first component. Among them, in addition to supporting the shadow rendering of circles and rounded rectangles, the rendering system also supports the rendering of various special-shaped shadows. For example, as shown in Figure 28 (a), the rendering system completes the shadow rendering of the circular UI component. As shown in Figure 28 (b), the rendering system completes the shadow rendering of the square UI component. As shown in Figure 28 (c), the rendering system completes the shadow rendering of the bird-shaped (special-shaped) UI component.

[0270] For another example, the shadow rendering effect is related to the material of the first component. For example, if a translucent material supports color projection, then the shadow color is similar to the color of the first component of the translucent material. As shown in Figure 29, the color of the first component to be rendered by the electronic device is blue, and the material of the first component is a translucent material. Then, the electronic device can draw a light blue shadow based on the color and material of the first component, so that the shadow display effect is more consistent with the shadow effect in the real physical world, thereby improving the user experience.

[0271] In some examples, the electronic device determines the shadow offset and direction based on the light source coordinates indicated by the lighting information and the current display information and the height of the first component to obtain a shadow rendering effect.

[0272] In other examples, the electronic device copies the first component to create a shadow map, and blurs the shadow map to obtain a shadow rendering effect.

[0273] In some other examples, a shadow rendering effect is obtained through a shadow rendering algorithm according to the lighting information and the current display information.

[0274] In this way, electronic devices can bring different shadow rendering effects according to different light sources and physical properties, enrich the GUI interface display, and enhance the user experience.

[0275] In addition, when the shape of the first component is relatively complex, the electronic device can also combine the lighting information and the current display information to generate the light and shadow effects of the first component with the complex shape to enrich the display of the interface.

[0276] S4404. The electronic device displays a second interface, and the first component in the second interface has a first light and shadow effect formed after light rendering.

[0277] In some embodiments, after performing lighting rendering on the first component, the second electronic device can make the first component displayed in the refreshed interface have a rendering effect formed after the lighting rendering.

[0278] In some examples, the lighting effects include shadow rendering effects.

[0279] In other examples, when the material of the first component is translucent, the lighting and shadow effects include one or more of frosted glass, iridescent glass, and acrylic glass. Thus, when the first component is translucent, the electronic device can also combine lighting information and current display information to generate lighting and shadow effects for the translucent first component, thereby enriching the interface display.

[0280] In this way, the electronic device combines the lighting information and the current display information to provide the user with a GUI lighting effect that better meets the user's needs, thereby improving the user's usage experience.

[0281] Furthermore, humans are subconsciously familiar with lighting systems, which reduces learning costs and increases user acceptance. Furthermore, the lighting system's effects align with human cognition, enhancing the sophistication and aesthetics of the GUI interface while also easily gaining user acceptance.

[0282] The above describes in detail the light and shadow effect display method provided by the embodiment of the present application in conjunction with Figures 6 to 44. The following describes in detail the electronic device provided by the embodiment of the present application in conjunction with Figure 45.

[0283] In one possible design, Figure 45 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. As shown in Figure 45, electronic device 4500 may include: a transceiver unit 4501, a processing unit 4502, and a display unit 4503. Electronic device 4500 may be used to implement the functions of the electronic device involved in the above method embodiments.

[0284] Optionally, the transceiver unit 4501 is used to support the electronic device 4500 to execute S4401 in Figure 44.

[0285] Optionally, the processing unit 4502 is used to support the electronic device 4500 to execute S4401, S4402 and S4403 in Figure 44.

[0286] Optionally, the display unit 4503 is used to support the electronic device 4500 to execute S4404 in Figure 44.

[0287] The transceiver unit may include a receiving unit and a transmitting unit, and may be implemented by a transceiver or transceiver-related circuit components, and may be a transceiver or a transceiver module. The operations and / or functions of each unit in the electronic device 4500 are respectively for implementing the corresponding processes of the light and shadow effect display method described in the above method embodiment. All relevant contents of each step involved in the above method embodiment can be referred to the functional description of the corresponding functional unit. For the sake of brevity, they are not repeated here.

[0288] Optionally, the electronic device 4500 shown in FIG45 may further include a storage unit (not shown in FIG45 ) storing a program or instruction. When the transceiver unit 4501, the processing unit 4502, and the display unit 4503 execute the program or instruction, the electronic device 4500 shown in FIG45 may execute the light and shadow effect display method described in the above method embodiment.

[0289] The technical effects of the electronic device 4500 shown in FIG45 can refer to the technical effects of the light and shadow effect display method described in the above method embodiment, and will not be repeated here.

[0290] In addition to being in the form of electronic device 4500, the technical solution provided in this application can also be a functional unit or chip in an electronic device, or a device used in conjunction with the electronic device.

[0291] An embodiment of the present application also provides a chip system, including: a processor, the processor is coupled to a memory, the memory is used to store programs or instructions, when the program or instructions are executed by the processor, the chip system implements the method in any of the above method embodiments.

[0292] Optionally, there may be one or more processors in the chip system. The processor may be implemented in hardware or software. When implemented in hardware, the processor may be a logic circuit, an integrated circuit, etc. When implemented in software, the processor may be a general-purpose processor implemented by reading software code stored in a memory.

[0293] Optionally, the memory in the chip system may be one or more. The memory may be integrated with the processor or may be provided separately from the processor, which is not limited in the embodiments of the present application. For example, the memory may be a non-transient processor, such as a read-only memory (ROM), which may be integrated with the processor on the same chip or provided on different chips. The embodiments of the present application do not specifically limit the type of memory or the configuration of the memory and the processor.

[0294] Exemplarily, the chip system may be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.

[0295] It should be understood that each step in the above method embodiment can be completed by hardware integrated logic circuits in a processor or by software instructions. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.

[0296] An embodiment of the present application also provides a computer-readable storage medium, which stores a computer program. When the computer program runs on a computer, the computer executes the above-mentioned related steps to implement the light and shadow effect display method in the above-mentioned embodiment.

[0297] An embodiment of the present application also provides a computer program product. When the computer program product is run on a computer, it enables the computer to execute the above-mentioned related steps to implement the light and shadow effect display method in the above-mentioned embodiment.

[0298] In addition, embodiments of the present application further provide a device. Specifically, the device may be a component or module, and may include one or more processors and a memory connected to each other. The memory is configured to store a computer program. When the computer program is executed by one or more processors, the device performs the light and shadow effect display method described in each of the above method embodiments.

[0299] The apparatus, computer-readable storage medium, computer program product, or chip provided in the embodiments of the present application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects of the corresponding methods provided above, and will not be repeated here.

[0300] The steps of the method or algorithm described in conjunction with the disclosure of the embodiments of the present application can be implemented in a hardware manner or can be implemented by a processor executing software instructions. The software instructions can be composed of corresponding software modules, and the software modules can be stored in a random access memory (RAM), a flash memory, a read-only memory (ROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a register, a hard disk, a mobile hard disk, a read-only compact disc (CD-ROM) or any other form of storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and can write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an application specific integrated circuit (ASIC).

[0301] Through the description of the above embodiments, those skilled in the art will clearly understand that for the sake of convenience and brevity, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed; that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working processes of the above-mentioned systems, devices, and units can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0302] In the several embodiments provided in this application, it should be understood that the disclosed methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of the modules or units is only a logical function division, and there may be other division methods in actual implementation; for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of modules or units, which can be electrical, mechanical or other forms.

[0303] In addition, the functional units in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0304] Computer-readable storage media include, but are not limited to, any of the following: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and other media that can store program code.

[0305] The above is only a specific embodiment of the present application, but the scope of protection of this application is not limited to this. Any changes or substitutions within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for displaying light and shadow effects, characterized in that: Applied to electronic equipment, the method comprises: Detecting a first operation of the user, and determining to refresh the first interface being displayed; Obtaining lighting information and current display information, wherein the lighting information is a preconfigured global illumination definition; Performing lighting rendering according to the lighting information and the current display information; A second interface is displayed, wherein the first component in the second interface has the light and shadow effect formed after the light rendering.

2. The method according to claim 1, characterized in that: The global illumination definition is used to indicate one or more of the physical illumination principles, illumination types, illumination properties, scene illumination effects, illumination models, illumination materials, and shadow properties in the real world.

3. The method according to claim 1 or 2, characterized in that: The current display information includes one or more of the current time information, location information, motion state information, interface virtual light source information, component height information, component material information, and component transparency information of the electronic device.

4. The method according to any one of claims 1 to 3, characterized in that: The rendering process of the first component includes border rendering, lighting layer rendering, user interface canvas rendering, surface layer rendering, and shadow bearing layer rendering; wherein the border rendering is used to draw at least one of the self-luminous edge effect, highlight edge effect, and contour line effect of the first component; the lighting layer is used to receive lighting and complete the lighting drawing corresponding to the first component; the user interface canvas is used to complete the drawing of the style content of the first component; the surface layer is used to draw the display container of the first component; the shadow bearing layer is used to carry layer shadows and overflow lighting drawing.

5. The method according to any one of claims 1 to 4, characterized in that: The performing illumination rendering according to the illumination information and the current display information includes: According to the light source information, rendering equations and basic physical properties indicated by the illumination information and the current display information, visual features are output, where the visual features include one or more of color information, projection information and physical material information.

6. The method according to claim 5, characterized in that The light source information includes the lighting type and lighting properties; the basic physical properties include one or more of base color, metallicity, roughness, reflectivity, self-luminescence, normal information, refractive index, transparency, absorptivity, and transmittance.

7. The method according to any one of claims 1 to 6, characterized in that: The light and shadow effects include shadow rendering effects, which correspond to one or more of the height of the first component, the position of the light source, the shape of the first component, and the material of the first component. The shape of the first component is a regular shape or an irregular shape.

8. The method according to claim 7, characterized in that The performing illumination rendering according to the illumination information and the current display information includes: Determine a shadow offset and direction according to the illumination information, the light source coordinates indicated by the current display information, and the height of the first component, and obtain the shadow rendering effect; or, Duplicate the first component to create a shadow map; Obtain the shadow rendering effect by blurring the shadow map; or, The shadow rendering effect is obtained through a shadow rendering algorithm according to the illumination information and the current display information.

9. The method according to any one of claims 1 to 8, characterized in that: In the case where the material of the first component is a translucent material, the light and shadow effects include one or more of frosted glass effect, rainbow glass effect, and acrylic glass effect.

10. An electronic device, characterized in that: include: A processor, a memory and a display screen, wherein the memory and the display screen are coupled to the processor, the memory is used to store computer program code, and the computer program code includes computer instructions. When the processor reads the computer instructions from the memory, the electronic device executes the method as described in any one of claims 1 to 9.

11. A computer-readable storage medium, characterized in that: The computer-readable storage medium comprises a computer program, and when the computer program is executed on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 9.

12. A computer program product, characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 9.

Images