Interface rendering method and apparatus

Abstract

The present application provides an interface rendering method and apparatus. The method comprises: acquiring first rendering information used for rendering a three-dimensional light source in a first picture and second rendering information used for rendering a two-dimensional element in the first picture, wherein the first rendering information comprises a first layout position of the three-dimensional light source in the first picture, and the second rendering information comprises a second layout position of the two-dimensional element in the first picture; obtaining first reflection rendering information of the two-dimensional element on the basis of the first layout position and the second layout position; and rendering the reflection of the two-dimensional element under the illumination of the three-dimensional light source on the basis of the first reflection rendering information, rendering the three-dimensional light source on the basis of the first rendering information, and rendering the two-dimensional element on the basis of the second rendering information to render the first picture. The method can enhance a user's sense of immersion when viewing an interface, thereby improving the user experience.

Description

Interface rendering method and device

[0001] This application claims priority to the Chinese Patent Application No. 202410649501.6, filed on May 21, 2024, and entitled "Interface rendering method and device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of computer, and in particular, to an interface rendering method and device. BACKGROUND

[0003] With the development of terminal technology and the richness of application types, more and more interfaces include both three-dimensional (3D) scenes and two-dimensional (2D) scenes. Since the three-dimensional rendering pipeline and the two-dimensional rendering pipeline have obvious differences, it is difficult to realize the fusion rendering of the three-dimensional scene and the two-dimensional scene, resulting in the display of the three-dimensional scene and the display of the two-dimensional scene being disjointed and having no interaction in the interface. In particular, the three-dimensional scene usually has a three-dimensional light source, such as the sun in a weather information interface. In the interface display, the elements in the two-dimensional scene (such as text, numbers, cards, icons, etc. in the weather information interface) do not reflect the light emitted by the three-dimensional light source even within the coverage range of the light emitted by the three-dimensional light source, resulting in poor user experience. SUMMARY

[0004] The present application provides an interface rendering method and device, which can make the interface display the reflection of the two-dimensional elements on the three-dimensional light source, improve the immersion of the user watching the interface, and thus improve the user experience.

[0005] In a first aspect, an interface rendering method is provided, the interface including a first picture, the constituent elements of the first picture including a three-dimensional light source and a two-dimensional element, the method including: obtaining first rendering information for rendering the three-dimensional light source in the first picture and second rendering information for rendering the two-dimensional element in the first picture; wherein the first rendering information includes a first layout position of the three-dimensional light source in the first picture, and the second rendering information includes a second layout position of the two-dimensional element in the first picture; obtaining first reflection rendering information of the two-dimensional element based on the first layout position and the second layout position; rendering the reflection of the two-dimensional element under the irradiation of the three-dimensional light source based on the first reflection rendering information, and rendering the three-dimensional light source based on the first rendering information, and rendering the two-dimensional element based on the second rendering information, to render the first picture. Illustratively, the three-dimensional light source can be the sun, the moon, etc. Illustratively, the three-dimensional light source can be any one or more of a point light source, a directional light, and an ambient light. The two-dimensional element can be a card, a number, a text, an icon, etc.

[0006] The method can render the reflection of the two-dimensional element on the three-dimensional light source when the interface includes the three-dimensional light source, so that the interface displays the reflection of the two-dimensional element on the three-dimensional light source, thereby improving the visual effect of the interface, and further improving the immersion of the user in watching the interface, and improving the user experience.

[0007] In a possible implementation, the interface further includes a second picture, the second picture being a next picture of the first picture, and the constituent elements of the second picture including the three-dimensional light source and the two-dimensional element. The method further includes: obtaining third rendering information for rendering the three-dimensional light source in the second picture and fourth rendering information for rendering the two-dimensional element in the second picture; wherein the third rendering information includes a third layout position of the three-dimensional light source in the second picture, and the fourth rendering information includes a fourth layout position of the two-dimensional element in the second picture; obtaining second reflection rendering information of the two-dimensional element based on the third layout position and the fourth layout position; rendering the reflection of the two-dimensional element under the irradiation of the three-dimensional light source based on the second reflection rendering information, and rendering the three-dimensional light source based on the third rendering information and rendering the two-dimensional element based on the fourth rendering information, to render the second picture.

[0008] In this implementation, when the interface is dynamic, that is, the interface is a plurality of pictures played in time sequence, the reflection of the two-dimensional element on the three-dimensional element can be rendered for each picture, so that when the position of the three-dimensional light source changes, the reflection of the two-dimensional element on the three-dimensional light source also changes accordingly. For example, the interface is a weather interface, and the three-dimensional light source is the sun. As the sun moves in the sky, the reflection of the two-dimensional element also moves accordingly, thereby improving the visual effect of the weather interface and improving the user's viewing experience.

[0009] In a possible implementation, rendering the reflection of the two-dimensional element under the irradiation of the three-dimensional light source based on the first reflection rendering information, and rendering the three-dimensional light source based on the first rendering information and rendering the two-dimensional element based on the second rendering information to render the first picture includes: rendering the reflection of the two-dimensional element under the irradiation of the three-dimensional light source to a first layer based on the first reflection rendering information; rendering the three-dimensional light source to a second layer based on the first rendering information; rendering the two-dimensional element to a third layer based on the second rendering information; and obtaining the first picture based on the first layer, the second layer, and the third layer.

[0010] In this implementation, the reflection of the two-dimensional element under the irradiation of the three-dimensional light source, the two-dimensional element, and the three-dimensional element can be rendered to different layers, and then the pictures are obtained by merging these layers. In this way, the efficiency of picture rendering can be improved.

[0011] In a possible implementation, the first reflection rendering information includes a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the first reflection rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position, including: a range covering the reflection point is obtained based on the first layout position and the second layout position; and the reflection point is obtained in the range.

[0012] In this implementation, a smaller range covering the reflection point is obtained first, and then the reflection point is found in the smaller range through step-by-step calculation. In this way, the calculation amount for finding the reflection point can be reduced, and the efficiency of picture rendering is improved.

[0013] In a possible implementation, the first reflection rendering information includes a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the first reflection rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position, including: a polygon surrounding the two-dimensional element is set based on the second layout position; a range covering the reflection point is obtained based on the polygon and the first layout position; and the reflection point is obtained in the range.

[0014] The polygon is a regular shape, and the calculation amount required for calculating the intersection of the polygon and the light emitted by the three-dimensional light source is small. The smaller range covering the reflection point is obtained by calculating the intersection of the polygon and the light emitted by the three-dimensional light source, and then the reflection point is found in the smaller range through step-by-step calculation. In this way, the calculation amount for finding the reflection point can be reduced, and the efficiency of picture rendering is improved.

[0015] In a possible implementation, the method includes: obtaining light-and-shadow rendering information of the two-dimensional element based on the first layout position and the second layout position; and rendering light-and-shadow of the two-dimensional element under illumination of the three-dimensional light source based on the light-and-shadow rendering information.

[0016] In this implementation, the influence of the two-dimensional element on the three-dimensional element, such as the light-and-shadow generated by the two-dimensional element blocking the light emitted by the three-dimensional light source, can be rendered in the three-dimensional scene. In this way, the visual effect of the interface can be further improved, and the user experience can be improved.

[0017] In a possible implementation, the first rendering information further includes an illumination intensity of the three-dimensional light source; and the first reflection rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position, including: the first reflection rendering information is obtained based on the illumination intensity, the first layout position, and the second layout position.

[0018] The reflection rendering information obtained through this implementation contains the illumination intensity, which can make the rendered reflection consistent with the illumination intensity of the light source, further improve the visual effect of the interface, and improve the user experience.

[0019] In a second aspect, an interface rendering apparatus is provided. The interface includes a first picture, and constituent elements of the first picture include a three-dimensional light source and a two-dimensional element. The apparatus includes: an obtaining module configured to obtain first rendering information for rendering the three-dimensional light source in the first picture and second rendering information for rendering the two-dimensional element in the first picture; wherein the first rendering information includes a first layout position of the three-dimensional light source in the first picture, and the second rendering information includes a second layout position of the two-dimensional element in the first picture; a deriving module configured to derive first reflection rendering information of the two-dimensional element based on the first layout position and the second layout position; and a rendering module configured to render reflection of the two-dimensional element under illumination of the three-dimensional light source based on the first reflection rendering information, render the three-dimensional light source based on the first rendering information, and render the two-dimensional element based on the second rendering information, so as to render the first picture.

[0020] In a possible implementation, the interface further includes a second picture, the second picture being a next picture of the first picture, and constituent elements of the second picture include the three-dimensional light source and the two-dimensional element; the obtaining module is further configured to obtain third rendering information for rendering the three-dimensional light source in the second picture and fourth rendering information for rendering the two-dimensional element in the second picture; wherein the third rendering information includes a third layout position of the three-dimensional light source in the second picture, and the fourth rendering information includes a fourth layout position of the two-dimensional element in the second picture; the deriving module is further configured to derive second reflection rendering information of the two-dimensional element based on the third layout position and the fourth layout position; and the rendering module is further configured to render reflection of the two-dimensional element under illumination of the three-dimensional light source based on the second reflection rendering information, render the three-dimensional light source based on the third rendering information, and render the two-dimensional element based on the fourth rendering information, so as to render the second picture.

[0021] In a possible implementation, the rendering module is configured to: render the reflection of the two-dimensional element under illumination of the three-dimensional light source to a first layer based on the first reflection rendering information; render the three-dimensional light source to a second layer based on the first rendering information; render the two-dimensional element to a third layer based on the second rendering information; and derive the first picture based on the first layer, the second layer, and the third layer.

[0022] In a possible implementation, the first reflection rendering information includes a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the deriving module is configured to: derive a range covering the reflection point based on the first layout position and the second layout position; and derive the reflection point in the range.

[0023] In a possible implementation, the first reflection rendering information includes a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the deriving module is configured to: set a polygon surrounding the two-dimensional element based on the second layout position; derive a range covering the reflection point based on the polygon and the first layout position; and derive the reflection point in the range.

[0024] In a possible implementation, the obtaining module is further configured to: obtain light-and-shadow rendering information of the two-dimensional element based on the first layout position and the second layout position; and the rendering module is further configured to: render light-and-shadow of the two-dimensional element under illumination of the three-dimensional light source based on the light-and-shadow rendering information.

[0025] In a possible implementation, the first rendering information further includes an illumination intensity of the three-dimensional light source; and the obtaining module is further configured to: obtain the first reflection rendering information based on the illumination intensity, the first layout position and the second layout position.

[0026] In a third aspect, an electronic device is provided, which includes: a memory; and a processor configured to execute instructions in the memory, so that the electronic device performs the method provided in the first aspect.

[0027] In a fourth aspect, a computer storage medium is provided, which includes computer software instructions, and the computer software instructions include a program for implementing the method provided in the first aspect.

[0028] In a fifth aspect, a computer program product is provided, which includes a program for implementing the method provided in the first aspect.

[0029] The beneficial effects of the second aspect to the seventh aspect can refer to the beneficial effects of the first aspect described above, and will not be described herein again. BRIEF DESCRIPTION OF DRAWINGS

[0030] FIG. 1 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application;

[0031] FIG. 2 is a schematic diagram of a software structure of an electronic device according to an embodiment of the present application;

[0032] FIG. 3A is a schematic diagram of an interface according to an embodiment of the present application;

[0033] FIG. 3B is a schematic diagram of an interface according to an embodiment of the present application;

[0034] FIG. 3C is a schematic diagram of an interface according to an embodiment of the present application;

[0035] FIG. 4 is a flowchart of an interface rendering method according to an embodiment of the present application;

[0036] FIG. 5 is a schematic diagram of an interface rendering method according to an embodiment of the present application;

[0037] FIG. 6 is a schematic diagram of an interface according to an embodiment of the present application;

[0038] FIG. 7 is a schematic block diagram of a rendering device according to an embodiment of the present application;

[0039] FIG. 8 is a schematic block diagram of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0040] The schemes provided by the embodiments of the present application will be described below with reference to the drawings. In the embodiments of the present application, "multiple" refers to two or more, and "various" refers to two or more. "First", "second", and the like are only used to distinguish similar objects, and do not necessarily describe a specific order or number of objects.

[0041] To facilitate understanding of the schemes provided by the embodiments of the present application, the technical terms that may be involved in the embodiments of the present application are introduced first.

[0042] Special shape: refers to an irregular shape, which usually includes multiple curves and cannot be simply described by a mathematical expression. Common special shapes include letters and numbers. In contrast to special shapes, regular shapes include rectangles, circles, and straight lines.

[0043] Three-dimensional element: also referred to as a three-dimensional model, is a three-dimensional object with length, width, and height.

[0044] Two-dimensional element: is an object represented in a two-dimensional space. A two-dimensional element is composed of points, lines, and surfaces in the same plane, and can be represented by a mathematical expression.

[0045] Three-dimensional scene: refers to a three-dimensional space including one or more three-dimensional elements.

[0046] Two-dimensional scene: refers to a scene composed of two-dimensional elements.

[0047] Weather interface: refers to an interface for displaying weather information.

[0048] Fusion rendering: refers to fusion rendering of a three-dimensional scene and a two-dimensional scene, or fusion rendering of three-dimensional and two-dimensional, that is, when rendering a three-dimensional scene and a two-dimensional scene, the mutual influence between elements in the two-dimensional scene and elements in the three-dimensional scene is considered, and the corresponding visual effects are rendered based on the influence, so that the two-dimensional scene and the three-dimensional scene are interactive and non-segmented in the rendered interface. For example, in the interface, if the elements in the two-dimensional scene are within the coverage range of the light emitted by the light source in the three-dimensional scene, the reflection of the light emitted by the three-dimensional light source on the elements in the two-dimensional scene can be rendered through fusion rendering.

[0049] 3A (a lot of money, a lot of resources, a lot of time) game: an informal game classification method, usually used to describe games developed or published by medium or large publishers, with high development and marketing budgets. 3A games usually have the characteristics of high investment, high quality, and high richness.

[0050] For game applications (e.g., 3A games), the rendering of weather plays an important role. Generally, the rendering of weather can enhance the visual effects of the game, for example, by rendering rain, snow, or fog, etc., to make the game picture more realistic, thereby increasing the user's sense of immersion. Through the rendering of weather, emotions and atmospheres are created. For example, by rendering a clear sky, a sense of comfort is created. For another example, by rendering a rainy day, a sense of tension is increased, etc. In addition, real-time rendering of real weather and providing gameplay matching the real weather can increase the playability of the game.

[0051] Forecasting weather and displaying current weather information are common functions of mobile terminals such as mobile phones, tablets, watches, and vehicle-mounted terminals. Generally, a mobile terminal forecasts weather and displays current weather information through a weather wallpaper or a weather forecast application. The weather wallpaper or the weather forecast application displays the forecasted weather information and the current weather information to the user by rendering and displaying a weather interface. Real-time rendering has an important influence on the rendering effect of the weather interface. The interface rendering of the weather wallpaper or the weather forecast application needs to ensure the real-time nature of the weather forecast and the current weather information, so as to provide the user with instant weather information. The interface rendering of the weather wallpaper or the weather forecast application needs to ensure the accuracy of the weather forecast and the current weather, so as to provide the user with accurate weather forecast and current weather.

[0052] A three-dimensional scene is presented in the weather interface to enhance the visual effect of the weather interface, thereby enhancing the user's viewing experience. In order to present a three-dimensional scene in the weather interface, a three-dimensional scene needs to be rendered. In addition, a terminal device such as a mobile terminal has two-dimensional elements, and the weather interface displayed on the terminal device presents a two-dimensional scene, so a two-dimensional scene also does not need to be rendered. That is, in the same weather interface, a three-dimensional scene and a two-dimensional scene need to be rendered.

[0053] The three-dimensional rendering pipeline and the two-dimensional rendering pipeline have great differences.

[0054] The three-dimensional rendering pipeline is used to convert a three-dimensional model into a two-dimensional image. The three-dimensional rendering pipeline includes stages such as geometry processing, rasterization, pixel processing, and post-processing. In the geometry processing stage, a three-dimensional element is converted into a data structure that can be processed by a computer, and scene clipping and coordinate transformation are performed, such as transformation from a three-dimensional world coordinate system to a screen space coordinate system. In the rasterization stage, the three-dimensional element is converted into a pixel point to generate a two-dimensional image. In the rasterization stage, the computer processes each pixel, including color, depth, and shadow. In the pixel processing stage, each pixel is processed for color, texture, and lighting to generate the final two-dimensional image. In the post-processing stage, the final two-dimensional image is processed, including anti-aliasing, blurring, and color correction.

[0055] A two-dimensional rendering pipeline is used to convert two-dimensional elements (e.g., two-dimensional user interface (UI) elements), such as circles, rectangles, text, and the like, into two-dimensional images. The two-dimensional rendering pipeline includes stages of two-dimensional scene tree construction, dirty region calculation, draw instruction generation, and display sending. In the two-dimensional scene tree construction stage, a two-dimensional scene tree is constructed. Because the number of two-dimensional elements is large, the two-dimensional scene tree is used to manage the two-dimensional elements. In the dirty region calculation stage, a dirty region is calculated. The dirty region refers to a place in the UI where content changes occur. In two-dimensional rendering, only the dirty region is recalculated and rendered, or the original calculation result is used. In the draw instruction generation stage, content to be rendered is converted into instructions that can be recognized by a graphics processing unit (GPU). In the display sending stage, the rendered result is sent to the GPU for display.

[0056] As described above, the rendering mechanisms of the three-dimensional rendering pipeline and the two-dimensional rendering pipeline are different. Therefore, it is difficult to perform fusion rendering of two-dimensional and three-dimensional elements.

[0057] The interface rendering method provided in the embodiments of the present application can realize fusion rendering of two-dimensional and three-dimensional elements. Specifically, the reflection of a two-dimensional element on a three-dimensional light source can be rendered, so that the interface displays the reflection of the two-dimensional element on the three-dimensional light source, thereby improving the visual effect of the interface and improving the user experience. When rendering the interface, the rendering information of the three-dimensional light source and the rendering information of the two-dimensional element can be obtained, and the reflection rendering information of the light emitted by the three-dimensional light source on the two-dimensional element can be obtained based on the rendering information of the three-dimensional light source and the rendering information of the two-dimensional element. Then, the reflection of the light emitted by the three-dimensional light source on the two-dimensional element can be rendered based on the reflection rendering information of the light. When the interface is dynamic, that is, the interface is a plurality of pictures played in time sequence, the reflection of the two-dimensional element on the three-dimensional element can be rendered for each picture, so that when the position of the three-dimensional light source changes, the reflection of the two-dimensional element on the three-dimensional light source also changes. For example, the interface is a weather interface, and the three-dimensional light source is the sun. As the sun moves in the sky, the reflection of the two-dimensional element also moves, thereby improving the visual effect of the weather interface and improving the user's viewing experience.

[0058] Next, the interface rendering method provided in the embodiments of the present application will be described in detail.

[0059] The interface rendering method provided in the embodiments of the present application can be applied to an electronic device 100. The electronic device 100 can be a mobile phone, a tablet computer, a digital camera, a personal digital assistant (PDA), a wearable device, a laptop, or the like. Exemplary embodiments of the portable electronic device include, but are not limited to, a mobile phone, a tablet computer, a digital camera, a PDA, a wearable device, a laptop, and the like. or other operating systems. The portable electronic device described above can also be other portable electronic devices, such as a laptop having a touch-sensitive surface (e.g., a trackpad), and the like. It should also be understood that, in some other embodiments of the present application, the electronic device 100 can also not be a portable electronic device, but a desktop computer having a touch-sensitive surface (e.g., a trackpad). The embodiments of the present application do not make specific limitations on the type of the electronic device 100.

[0060] FIG. 1 shows a structural schematic diagram of an electronic device 100 according to an embodiment of the present application.

[0061] As shown in FIG. 1, the electronic device 100 can 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 loudspeaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, and the like. The sensor module 180 can include a pressure sensor, a gyroscope sensor, a barometric 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.

[0062] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In some other embodiments of the present application, the electronic device 100 can include more or fewer components than shown, or combine certain components, or split certain components, or different arrangement of components. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0063] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices, or can be integrated in one or more processors.

[0064] The electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can adopt LCD, OLED, AMOLED, FLED, Miniled, MicroLed, Micro-oLed, QLED, etc. In some embodiments, the electronic device 100 can include 1 or N display screens 194, N being a positive integer greater than 1.

[0065] Figure 2 shows a software architecture that the electronic device 100 can adopt. The software architecture includes a two-dimensional rendering module 210, a three-dimensional rendering module 220, and a fusion rendering module 230. Among them, the two-dimensional rendering module 210 is used to render two-dimensional elements to be displayed in the interface, to render a two-dimensional scene. The three-dimensional rendering module 220 is used to render three-dimensional elements to be displayed in the interface, to render a three-dimensional scene. The fusion rendering module 230 is used to render the interaction between the two-dimensional elements and the three-dimensional elements, for example, the reflection of the light emitted by the three-dimensional light source by the two-dimensional elements.

[0066] In some embodiments, the software architecture also includes a layer fusion module 240. Among them, the two-dimensional rendering module 210 is used to render two-dimensional elements to a two-dimensional rendering layer, the three-dimensional rendering module 220 is used to render three-dimensional rendering to a three-dimensional rendering layer, and the fusion rendering module 230 is used to render the interaction between the two-dimensional elements and the three-dimensional elements to a fusion rendering layer. That is, the rendering results of the two-dimensional rendering module 210, the three-dimensional rendering module 220, and the fusion rendering module 230 are different layers respectively. The layer fusion module 240 is used to fuse the two-dimensional rendering layer, the three-dimensional rendering layer, and the fusion rendering layer into an interface or a picture used to form an interface.

[0067] The above example introduces the electronic device 100. Next, taking execution in the electronic device 100 as an example, a flow of a method for rendering an interface provided by an embodiment of the present application is introduced.

[0068] The method is used for rendering an interface 300 of the electronic device 100, where the interface 300 can include a picture 310. Exemplarily, the interface 300 is a dynamic interface, and the interface 300 at a certain moment is the picture 310. That is, the picture 310 is the interface 300 at a certain moment. As shown in FIG. 3A or FIG. 3B, the picture 310 includes constituent elements including a three-dimensional light source and a two-dimensional element. Exemplarily, the three-dimensional light source can be the sun, the moon, etc. Exemplarily, the three-dimensional light source can be any one or more of a point light source, a directional light, and an ambient light. The two-dimensional element can be a card, a number, a character, an icon, etc. UI element.

[0069] As shown in FIG. 4, the method includes the following steps.

[0070] First, in step 401, rendering information for rendering a three-dimensional light source in the picture 310 and rendering information for rendering a two-dimensional element in the picture 310 are acquired. For convenience of description, the rendering information for rendering the three-dimensional light source in the picture 310 can be referred to as first rendering information, and the rendering information for rendering the two-dimensional element in the picture 310 can be referred to as second rendering information.

[0071] Wherein, the rendering information of an element is information required for rendering the element in a picture. For example, the first rendering information includes a layout position of the three-dimensional light source in the picture 310, so as to render and display the three-dimensional light source on the layout position. The second rendering information includes a layout position of the two-dimensional element in the picture 310, so as to render and display the two-dimensional element on the layout position. For convenience of description, the layout position of the three-dimensional light source in the picture 310 can be referred to as a first layout position, and the layout position of the two-dimensional element in the picture 310 can be referred to as a second layout position.

[0072] The rendering information of an element can also include other information. For example, the first rendering information can include the light intensity of the three-dimensional light source, the light emitting angle of the three-dimensional light source, geometric vertices, textures, etc. The second rendering information can include representation information of the shape of the two-dimensional element, such as a mathematical formula.

[0073] In some embodiments, step 401 is specifically performed by the fusion rendering module 230 described above. As shown in FIG. 5, the fusion rendering module 230 can obtain, from the rendering information of the three-dimensional scene, rendering information for rendering the three-dimensional light source in the picture 310, i.e., first rendering information. The rendering information of the three-dimensional scene is the rendering information of all three-dimensional elements that need to be rendered in the picture 310. The fusion rendering module 230 can obtain, from the rendering information of the two-dimensional scene, rendering information for rendering the two-dimensional element in the picture 310, i.e., second rendering information. The rendering information of the two-dimensional scene is the rendering information of all two-dimensional elements that need to be rendered in the picture 310. The two-dimensional scene can include multiple two-dimensional elements, and the second rendering information of step 401 is the rendering information of the elements of the multiple two-dimensional elements that can be exposed to the illumination of the three-dimensional light source, e.g., the rendering information of the two-dimensional elements that are not surrounded by other two-dimensional elements.

[0074] Secondly, in step 402, based on the first layout position and the second layout position, first reflection rendering information of the two-dimensional element is obtained.

[0075] The first reflection rendering information is used for rendering the reflection of the two-dimensional element under the illumination of the three-dimensional light source in the picture 310. The first reflection rendering information can include whether the light emitted by the three-dimensional light source will reach the two-dimensional element, the incident angle of the light reaching the two-dimensional element, the reflection angle of the two-dimensional element reflecting the light, etc., according to the first layout position and the second layout position.

[0076] In some embodiments, the first rendering information can further include the illumination intensity of the three-dimensional light source. In step 402, the first reflection rendering information can be calculated and obtained based on the illumination intensity of the three-dimensional light source, the first layout position, and the second layout position. The first reflection rendering information includes the intensity of the reflection of the two-dimensional element under the illumination of the three-dimensional light source.

[0077] In some embodiments, the first rendering information can further include the light-emitting angle of the three-dimensional light source. In step 402, the first reflection rendering information can be calculated and obtained based on the light-emitting angle of the three-dimensional light source, the first layout position, and the second layout position. The light-emitting angle affects the incident angle of the light emitted by the three-dimensional light source reaching the two-dimensional element, the reflection angle of the two-dimensional element reflecting the light, etc.

[0078] In some embodiments, the first rendering information can further include the color of the three-dimensional light source. In step 402, the first reflection rendering information can be calculated and obtained based on the color of the three-dimensional light source, the first layout position, and the second layout position. The first reflection rendering information includes the color of the reflection of the two-dimensional element under the illumination of the three-dimensional light source.

[0079] The first reflection rendering information includes a reflection point of the two-dimensional element under illumination of the three-dimensional light source. The reflection point is an intersection of the light emitted by the three-dimensional light source and the two-dimensional element. Specifically, in step 402, the position of the reflection point is calculated based on the first layout position, the second layout position, and the representation information of the shape of the two-dimensional element. Specifically, the calculation is performed in a step-by-step manner. The light emitted by the three-dimensional light source moves forward by a preset step length, and whether the position of the light after moving is on the two-dimensional element is calculated. If the position is on the two-dimensional element, the position is the reflection point. Otherwise, the light continues to move forward by a step length. The representation information of the shape of the two-dimensional element is used to calculate whether the position of the light after moving is on the two-dimensional element. Therefore, the complexity of the representation information of the shape of the two-dimensional element has an important influence on the calculation amount of the first reflection rendering information. The calculation of whether the position of the light after moving is on the two-dimensional element for each step length of the light is referred to as a step. The light is also referred to as a light ray, and the position of the light is specifically the position of the front end of the light ray. The end of the light ray is the three-dimensional light source.

[0080] The representation information of the shape of the regular two-dimensional element (for example, the two-dimensional element shown in FIG. 3A) is usually a few formulas, for example, one or two formulas. The representation information is simple and has low complexity. Therefore, the calculation amount of the first reflection rendering information is small, and the terminal device such as a mobile terminal can cope with it.

[0081] The shape of the irregular two-dimensional element, that is, the shape of the special-shaped two-dimensional element (for example, the two-dimensional element shown in FIG. 3B), usually includes a plurality of curves and needs more formulas to describe. The representation information has high complexity, which leads to a large calculation amount of the first reflection rendering information. The terminal device such as a mobile terminal may be difficult to cope with it.

[0082] Embodiments of the present application provide a solution to reduce the calculation amount of reflection rendering information. Next, the solution is introduced.

[0083] In some embodiments, in step 402, a range covering the reflection point can be obtained based on the first layout position and the second layout position, and then the reflection point can be obtained in the range. That is, a smaller range is first calculated based on the first layout position and the second layout position. The smaller range covers the two-dimensional element but does not cover the three-dimensional light source. Then, the light emitted by the three-dimensional light source directly moves to the boundary of the range (i.e., does not move to the boundary of the range step by step according to a preset step). Then, the reflection point is calculated in the smaller range according to the preset step. That is, the light starts from the edge of the range, and the first reflection rendering information is calculated by step-by-step calculation. In this way, the reflection point can be calculated by a smaller number of steps, thereby saving the number of calculations of whether the light position falls on the two-dimensional element, and thereby reducing the calculation amount of calculating the first reflection rendering information.

[0084] In one example, the range covering the reflection point can be calculated based on a signed distance field (SDF) between the three-dimensional light source and the two-dimensional element. The SDF between the three-dimensional light source and the two-dimensional element can be obtained based on the first layout position and the second layout position. Generally, for an interface, the number and position of the three-dimensional light source and the two-dimensional element displayed are limited, and therefore the SDF between the three-dimensional light source and the two-dimensional light source can be calculated in advance. In step 402, the pre-calculated SDF can be directly used without further calculation, thereby further reducing the calculation amount of calculating the first reflection rendering information.

[0085] In one example, a polygon or a circle surrounding the second layout position but not including the first layout position can be set, and the polygon or the circle can be gradually reduced to a minimum degree capable of covering the two-dimensional element. Then, the area within the polygon or the circle is taken as the range covering the reflection point.

[0086] In some embodiments, referring to FIG. 3C, in step 402, a polygon surrounding the two-dimensional element is set based on the second layout position, then a range covering the reflection point is obtained based on the polygon and the first layout position, and then the reflection point is obtained in the range. The polygon can be referred to as a bounding polygon. In an example, a polygon surrounding the second layout position but not including the first layout position can be set, and the polygon can be gradually reduced to a minimum degree capable of covering the two-dimensional element. Then, the area within the polygon is taken as the range covering the reflection point. In an example, the number and position of the two-dimensional elements are limited, and therefore the polygon surrounding the two-dimensional element can be set in advance.

[0087] The polygons are regular shapes. Whether the light position falls on the polygon can be calculated by a step-by-step manner based on the first layout position and the representation information of the shape of the polygon. The representation information of the shape of the polygon has low complexity, and the calculation of whether the light position falls on the polygon has small amount. When the light position falls on the polygon, whether the light position falls on the polygon is calculated by a step-by-step manner based on the first layout position and the representation information of the shape of the two-dimensional element, so as to obtain the reflection point.

[0088] In some embodiments, when the two-dimensional element is a special-shaped two-dimensional element, the above solution can be used to calculate the first reflection rendering information. When the two-dimensional element is not a special-shaped two-dimensional element, i.e., when the shape of the two-dimensional element is regular, the above solution can not be used, and the first reflection rendering information can be calculated by a step-by-step manner starting from the three-dimensional light source.

[0089] In the above manner, the first reflection rendering information can be calculated.

[0090] Then, in step 403, the reflection of the two-dimensional element under the irradiation of the three-dimensional light source is rendered based on the first reflection rendering information, the three-dimensional light source is rendered based on the first rendering information, and the two-dimensional element is rendered based on the second rendering information, so as to render the picture 310.

[0091] In some embodiments, the two-dimensional element under the irradiation of the three-dimensional light source can be rendered based on the first reflection rendering information by using a two-dimensional rendering pipeline or a three-dimensional rendering pipeline. The three-dimensional light source can be rendered based on the first rendering information by using a three-dimensional rendering pipeline. The two-dimensional element can be rendered based on the second rendering information by using a two-dimensional rendering pipeline.

[0092] In some embodiments, referring to FIG. 5, in step 403, the two-dimensional scene can be rendered based on the rendering information of the two-dimensional scene, wherein the rendering information of the two-dimensional scene includes the second rendering information, and the rendered two-dimensional scene includes the two-dimensional element. The three-dimensional scene can be rendered based on the rendering information of the three-dimensional scene, wherein the rendering information of the three-dimensional scene includes the first rendering information, and the rendered three-dimensional scene includes the two-dimensional light source.

[0093] In some embodiments, the three-dimensional light source, the two-dimensional element, and the reflection of the two-dimensional element under the illumination of the three-dimensional light source can be rendered to different layers respectively. The reflection of the two-dimensional element under the illumination of the three-dimensional light source can be rendered to a fusion rendering layer based on the first reflection rendering information; the three-dimensional light source can be rendered to a three-dimensional rendering layer based on the first rendering information; and the two-dimensional element can be rendered to a two-dimensional rendering layer based on the second rendering information. There can be multiple two-dimensional elements. In one example, each two-dimensional element corresponds to a fusion rendering layer, and the reflection of the two-dimensional element under the illumination of the three-dimensional light source is rendered to the fusion rendering layer corresponding to the two-dimensional element. In one example, two or more two-dimensional elements can correspond to the same fusion rendering layer, and the reflections of the two or more two-dimensional elements under the illumination of the three-dimensional light source are rendered to the fusion rendering layer corresponding to the two or more two-dimensional elements.

[0094] Then, the two-dimensional rendering layer, the three-dimensional rendering layer, and the fusion rendering layer corresponding to each two-dimensional element can be fused to obtain the picture 310. As shown in FIG. 5, the fusion of each layer can be performed by the layer fusion module 240.

[0095] In some embodiments, the depths of the two-dimensional rendering layer, the three-dimensional rendering layer, and the fusion rendering layer can be set. Then, the two-dimensional rendering layer and the three-dimensional rendering layer are fused to obtain the fusion rendering layer according to the set depths. In some embodiments, the fusion rendering layer can be in the front by default.

[0096] In some embodiments, the formula (1) can be used to fuse each layer.

[0097] In the formula (1), L represents the picture 310, ω represents the fusion coefficient, L represents the layer, and n is the total number of layers. The fusion coefficient refers to the weight of the pixels in the layer. i i In the formula (1), L represents the picture 310, ω represents the fusion coefficient, L represents the layer, and n is the total number of layers. The fusion coefficient refers to the weight of the pixels in the layer.

[0098] In some embodiments, the frame rates of the three-dimensional pipeline and the two-dimensional pipeline can be different, resulting in different frame rates of the two-dimensional rendering layer, the three-dimensional rendering layer, and other layers. When the layers are fused, the frame rates of different layers can be aligned by using the frame interpolation technology. The frame interpolation technology can be the image warping technology.

[0099] In some embodiments, the rendering method provided in the present application further includes: obtaining light and shadow rendering information of the two-dimensional element based on the first layout position and the second layout position; and rendering light and shadow of the two-dimensional element under the illumination of the three-dimensional light source based on the light and shadow rendering information.

[0100] ​The two-dimensional element blocks the light emitted by the three-dimensional light source, leaving a highlight. The position of the highlight, the size of the highlight, and the like can be obtained based on the first layout position and the second layout position. The information forms highlight rendering information, which can be used to render that the two-dimensional element blocks the light emitted by the three-dimensional light source and leaves the highlight in the picture 310.

[0101] In some embodiments, the second rendering information can further include the size of the two-dimensional element, and the like. The size of the highlight can be obtained based on the first layout position, the second layout position, and the size of the two-dimensional element.

[0102] In some embodiments, the highlight can be rendered into the three-dimensional scene based on the highlight rendering information by using a three-dimensional rendering pipeline. Specifically, the highlight can be rendered into a three-dimensional rendering layer.

[0103] In some embodiments, the interface 300 can be a dynamic interface, and the plurality of pictures displayed in time sequence to form the interface 300 further include a picture 320. The picture 320 can be the next interface of the picture 310. The picture 320 can be rendered by using the method shown in FIG. 4. As shown in FIG. 6, the constituent elements of the picture 320 include the three-dimensional light source and the two-dimensional element described above.

[0104] Firstly, third rendering information for rendering the three-dimensional light source in the picture 320 and fourth rendering information for rendering the two-dimensional element in the picture 320 can be obtained. The third rendering information can include a third layout position of the three-dimensional light source in the picture 320, and the fourth rendering information can include a fourth layout position of the two-dimensional element in the picture 320. The third rendering information can be implemented by referring to the introduction of the first rendering information above, and the fourth rendering information can be implemented by referring to the introduction of the second rendering information above.

[0105] Secondly, second highlight rendering information of the two-dimensional element can be obtained based on the third layout position and the fourth layout position. The implementation can be specifically referred to the introduction of the step 402 above.

[0106] Then, the highlight of the two-dimensional element under the irradiation of the three-dimensional light source is rendered based on the second highlight rendering information, the three-dimensional light source is rendered based on the third rendering information, and the two-dimensional element is rendered based on the fourth rendering information, so as to render the picture 320. The implementation can be specifically referred to the introduction of the step 403 above.

[0107] As shown in FIG. 3A and FIG. 6, the position of the three-dimensional light source in the picture 310 is different from the position of the three-dimensional light source in the picture 320, and the highlight of the two-dimensional element under the irradiation of the three-dimensional light source is also different. In this way, the highlight can move with the movement of the three-dimensional light source, and the visual effect of the interface is improved.

[0108] The method can be applied to rendering of a weather interface, and the three-dimensional light source can be the sun. The weather interface displays sunlight. A light spot scattered by the sunlight swings back and forth within a range of X degrees on the left and right at a current irradiation angle. X degrees can be a preset value. When the sunlight irradiates on a number representing temperature, the number can reflect the sunlight to form a highlight reflection. The highlight reflection moves with the light spot, thereby improving the visual effect of the weather interface and increasing the user's perception of a sunny day.

[0109] In summary, the interface rendering method provided by the embodiments of the present application can render the reflection of a two-dimensional element on a three-dimensional light source when the interface includes the three-dimensional light source, so that the interface displays the reflection of the two-dimensional element on the three-dimensional light source, thereby improving the visual effect of the interface, further improving the user's sense of immersion in viewing the interface, and improving the user's experience.

[0110] The embodiments of the present application provide an interface rendering device 700. The device can be configured in an electronic device, for example, the electronic device 100. The interface includes a first picture, and constituent elements of the first picture include a three-dimensional light source and a two-dimensional element. As shown in FIG. 7, the device 700 includes:

[0111] The obtaining module 710 is configured to obtain first rendering information for rendering the three-dimensional light source in the first picture and second rendering information for rendering the two-dimensional element in the first picture. The first rendering information includes a first layout position of the three-dimensional light source in the first picture, and the second rendering information includes a second layout position of the two-dimensional element in the first picture.

[0112] The obtaining module 720 is configured to obtain first reflection rendering information of the two-dimensional element based on the first layout position and the second layout position.

[0113] The rendering module 730 is configured to render the reflection of the two-dimensional element under irradiation of the three-dimensional light source based on the first reflection rendering information, render the three-dimensional light source based on the first rendering information, and render the two-dimensional element based on the second rendering information, to render the first picture.

[0114] In some embodiments, the interface further comprises a second picture, the second picture being a next picture of the first picture, and constituent elements of the second picture comprising the three-dimensional light source and the two-dimensional element; the obtaining module 710 is further configured to: obtain third rendering information for rendering the three-dimensional light source in the second picture and fourth rendering information for rendering the two-dimensional element in the second picture; wherein the third rendering information comprises a third layout position of the three-dimensional light source in the second picture, and the fourth rendering information comprises a fourth layout position of the two-dimensional element in the second picture; the obtaining module 720 is further configured to: based on the third layout position and the fourth layout position, obtain second reflection rendering information of the two-dimensional element; and the rendering module 730 is further configured to: render reflection of the two-dimensional element under illumination of the three-dimensional light source based on the second reflection rendering information, render the three-dimensional light source based on the third rendering information, and render the two-dimensional element based on the fourth rendering information, to render the second picture.

[0115] In some embodiments, the rendering module 730 is configured to: render reflection of the two-dimensional element under illumination of the three-dimensional light source to a first layer based on the first reflection rendering information; render the three-dimensional light source to a second layer based on the first rendering information; render the two-dimensional element to a third layer based on the second rendering information; and obtain the first picture based on the first layer, the second layer, and the third layer.

[0116] In some embodiments, the first reflection rendering information comprises a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the obtaining module 720 is configured to: based on the first layout position and the second layout position, obtain a range covering the reflection point; and obtain the reflection point in the range.

[0117] In some embodiments, the first reflection rendering information comprises a reflection point of the two-dimensional element under illumination of the three-dimensional light source; and the obtaining module 720 is configured to: based on the second layout position, set a polygon surrounding the two-dimensional element; based on the polygon and the first layout position, obtain a range covering the reflection point; and obtain the reflection point in the range.

[0118] In some embodiments, the obtaining module 720 is further configured to: based on the first layout position and the second layout position, obtain light-and-shadow rendering information of the two-dimensional element; and the rendering module is further configured to: render light-and-shadow of the two-dimensional element under illumination of the three-dimensional light source based on the light-and-shadow rendering information.

[0119] In some embodiments, the first rendering information further comprises an illumination intensity of the three-dimensional light source; and the obtaining module 720 is further configured to: obtain the first reflection rendering information based on the illumination intensity, the first layout position and the second layout position.

[0120] The functions of the modules of the apparatus 700 can refer to the above description of the embodiments shown in FIG. 4, and will not be repeated here.

[0121] Referring to FIG. 8, an electronic device 800 is provided. The electronic device 800 can include a processor 810 and a memory 820. The memory 820 is configured to store computer instructions. When the computer program stored in the memory 820 is executed by the processor 810, the electronic device 800 performs the method shown in FIG. 4.

[0122] Embodiments of the present application also provide a computer program product containing instructions. The computer program product can be software or a program product containing instructions, which can be run on a computing device or stored in any available medium. When the computer program product is run on the computing device, the computing device performs the method shown in FIG. 4.

[0123] Embodiments of the present application also provide a computer readable storage medium. The computer readable storage medium can be any available medium that the computing device can store or a data storage device such as a data center containing one or more available media. The available medium can be a magnetic medium (for example, a floppy disk, a hard disk, a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk), etc. The computer readable storage medium includes instructions that instruct the computing device to perform the method shown in FIG. 4.

[0124] Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and not to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand: it can still modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacement for part of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the protection scope of the technical solutions of the embodiments of the present application.

Claims

1. An interface rendering method, characterized by, The interface includes a first picture, constituent elements of the first picture include a three-dimensional light source and a two-dimensional element, and the method includes: obtaining first rendering information for rendering the three-dimensional light source in the first picture and second rendering information for rendering the two-dimensional element in the first picture; wherein the first rendering information includes a first layout position of the three-dimensional light source in the first picture, and the second rendering information includes a second layout position of the two-dimensional element in the first picture; based on the first layout position and the second layout position, obtaining first reflection rendering information of the two-dimensional element; based on the first reflection rendering information, rendering reflection of the two-dimensional element under irradiation of the three-dimensional light source, and based on the first rendering information, rendering the three-dimensional light source, and based on the second rendering information, rendering the two-dimensional element, to render the first picture.

2. The method of claim 1, wherein, The interface also includes a second picture, which is the next picture of the first picture, constituent elements of the second picture include the three-dimensional light source and the two-dimensional element, and the method further includes: obtaining third rendering information for rendering the three-dimensional light source in the second picture and fourth rendering information for rendering the two-dimensional element in the second picture; wherein the third rendering information includes a third layout position of the three-dimensional light source in the second picture, and the fourth rendering information includes a fourth layout position of the two-dimensional element in the second picture; based on the third layout position and the fourth layout position, obtaining second reflection rendering information of the two-dimensional element; based on the second reflection rendering information, rendering reflection of the two-dimensional element under irradiation of the three-dimensional light source, and based on the third rendering information, rendering the three-dimensional light source, and based on the fourth rendering information, rendering the two-dimensional element, to render the second picture.

3. The method according to claim 1 or 2, characterized in that, The based on the first reflection rendering information, rendering reflection of the two-dimensional element under irradiation of the three-dimensional light source, and based on the first rendering information, rendering the three-dimensional light source, and based on the second rendering information, rendering the two-dimensional element, to render the first picture, includes: based on the first reflection rendering information, rendering reflection of the two-dimensional element under irradiation of the three-dimensional light source to a first layer; based on the first rendering information, rendering the three-dimensional light source to a second layer; based on the second rendering information, rendering the two-dimensional element to a third layer; based on the first layer, the second layer and the third layer, obtaining the first picture.

4. The method according to any one of claims 1-3, characterized in that, The first reflection rendering information includes a reflection point of the two-dimensional element under irradiation of the three-dimensional light source; and the based on the first layout position and the second layout position, obtaining first reflection rendering information of the two-dimensional element, includes: based on the first layout position and the second layout position, obtaining a range covering the reflection point; in the range, obtaining the reflection point.

5. The method according to any one of claims 1-3, characterized in that, The first reflection rendering information includes a reflection point of the two-dimensional element under irradiation of the three-dimensional light source; the first reflection rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position, including: a polygon surrounding the two-dimensional element is set based on the second layout position; a range covering the reflection point is obtained based on the polygon and the first layout position; the reflection point is obtained in the range.

6. The method according to any one of claims 1-5, characterized in that, The method includes: light and shadow rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position; light and shadow of the two-dimensional element under irradiation of the three-dimensional light source is rendered based on the light and shadow rendering information.

7. The method according to any one of claims 1 to 6, characterized in that, The first rendering information further includes an illumination intensity of the three-dimensional light source; the first reflection rendering information of the two-dimensional element is obtained based on the first layout position and the second layout position, including: the first reflection rendering information is obtained based on the illumination intensity, the first layout position and the second layout position.

8. An interface rendering apparatus, characterized by comprising: The interface includes a first picture, and constituent elements of the first picture include a three-dimensional light source and a two-dimensional element; the device includes: an acquisition module, configured to acquire first rendering information for rendering the three-dimensional light source in the first picture and second rendering information for rendering the two-dimensional element in the first picture; wherein the first rendering information includes a first layout position of the three-dimensional light source in the first picture, and the second rendering information includes a second layout position of the two-dimensional element in the first picture; an obtaining module, configured to obtain first reflection rendering information of the two-dimensional element based on the first layout position and the second layout position; a rendering module, configured to render reflection of the two-dimensional element under irradiation of the three-dimensional light source based on the first reflection rendering information, and render the three-dimensional light source based on the first rendering information and render the two-dimensional element based on the second rendering information, so as to render the first picture.

9. The apparatus of claim 8, wherein, The interface further includes a second picture, which is a next picture of the first picture, and constituent elements of the second picture include the three-dimensional light source and the two-dimensional element; the acquisition module is further configured to acquire third rendering information for rendering the three-dimensional light source in the second picture and fourth rendering information for rendering the two-dimensional element in the second picture; wherein the third rendering information includes a third layout position of the three-dimensional light source in the second picture, and the fourth rendering information includes a fourth layout position of the two-dimensional element in the second picture; the obtaining module is further configured to obtain second reflection rendering information of the two-dimensional element based on the third layout position and the fourth layout position; the rendering module is further configured to render reflection of the two-dimensional element under irradiation of the three-dimensional light source based on the second reflection rendering information, and render the three-dimensional light source based on the third rendering information and render the two-dimensional element based on the fourth rendering information, so as to render the second picture.

10. The apparatus of claim 8 or 9, wherein, The rendering module is configured to: render the reflection of the two-dimensional element under the illumination of the three-dimensional light source to a first layer based on the first reflection rendering information; render the three-dimensional light source to a second layer based on the first rendering information; render the two-dimensional element to a third layer based on the second rendering information; obtain the first picture based on the first layer, the second layer and the third layer.

11. The apparatus of any one of claims 8-10, wherein, The first reflection rendering information includes a reflection point of the two-dimensional element under the illumination of the three-dimensional light source; and the obtaining module is configured to: obtain a range covering the reflection point based on the first layout position and the second layout position; obtain the reflection point in the range.

12. The apparatus of any one of claims 8-10, wherein, The first reflection rendering information includes a reflection point of the two-dimensional element under the illumination of the three-dimensional light source; and the obtaining module is configured to: set a polygon surrounding the two-dimensional element based on the second layout position; obtain a range covering the reflection point based on the polygon and the first layout position; obtain the reflection point in the range.

13. The apparatus of any one of claims 8-12, wherein: the obtaining module is further configured to obtain light-and-shadow rendering information of the two-dimensional element based on the first layout position and the second layout position; the rendering module is further configured to render light-and-shadow of the two-dimensional element under the illumination of the three-dimensional light source based on the light-and-shadow rendering information.

14. The apparatus of any one of claims 8-13, wherein, The first rendering information further includes an illumination intensity of the three-dimensional light source; and the obtaining module is further configured to obtain the first reflection rendering information based on the illumination intensity, the first layout position and the second layout position.

15. An electronic device, comprising: The electronic device comprises: a memory; a processor configured to execute instructions in the memory to cause the electronic device to perform the method of any one of claims 1-7.

16. A computer storage medium, characterized in that, computer software instructions comprising a program for implementing the method of any one of claims 1-7.

17. A computer program product, characterised in that, a program for implementing the method of any one of claims 1-7.

Images