Adaptive GUI Shadow Rendering for Complex Interface Shapes
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current light and shadow display effects in electronic devices are limited to simple shapes, such as circular and rounded rectangular controls, failing to achieve a more realistic and enriched GUI experience.
Innovation Solution
An adaptive light and shadow effect display method that utilizes preset lighting information and current display information to enhance GUI rendering, including rendering processes for borders, lighting layers, user interface canvases, and shadow hosting layers, supporting various shapes and materials, and employing shadow rendering algorithms.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If traditional shadow display methods are used for simple shapes, then implementation is straightforward, but the GUI display effect is limited and not enriched
Solution Approach 1:
The patent implements a universal shadow rendering mechanism that can handle multiple shapes (circles, rounded rectangles, irregular shapes) through a unified rendering pipeline. The system uses a standardized shadow hosting layer and lighting layer structure that automatically adapts to different component shapes, eliminating the need for shape-specific shadow rendering code and enabling broad shape compatibility while maintaining manageable complexity
Solution Approach 2:
The rendering system is segmented into distinct layers: shadow hosting layer, surface layer, lighting layer, and user interface canvas. This segmentation allows each layer to handle specific rendering tasks independently, with the shadow hosting layer专门负责 shadow rendering for any shape, the lighting layer handling light effects, and the UI canvas composing the final display. This modular approach enables complex shape support without overwhelming system complexity
2Manufacturing precision
If basic lighting rendering is applied, then processing is simple, but the light and shadow effect is not realistic and detailed
Solution Approach 1:
The system implements selective detailed rendering by applying sophisticated lighting effects (ambient occlusion, soft shadows, colored lighting) only to components that require them, while using simplified rendering for other elements. The adaptive shadow rendering algorithm dynamically adjusts shadow softness and detail based on component properties and position, providing high precision where needed while conserving computational energy for the overall system
Solution Approach 2:
Different rendering qualities are applied to different regions and components based on their importance and visual requirements. Critical UI elements receive high-precision shadow and lighting rendering with detailed soft shadows and ambient occlusion, while less important background elements use simplified rendering. This local quality differentiation achieves realistic effects for key components while managing overall computational energy consumption
3Ease of operation
If shadow rendering is added to enhance GUI effect, then user experience is improved, but the rendering process becomes more complex
Solution Approach 1:
The shadow rendering process is merged with the existing UI rendering pipeline by integrating the shadow hosting layer into the standard layer composition. Shadow rendering is combined with surface rendering, lighting effects, and UI canvas composition in a unified rendering pass, eliminating the need for separate shadow rendering processes and reducing overall process complexity despite enhanced visual effects
Solution Approach 2:
The shadow hosting layer acts as an intermediary between the component definition and the final rendered output. It receives component information, automatically generates appropriate shadow effects based on component properties, and passes the combined result to the surface layer for further rendering. This intermediary approach simplifies the overall process by centralizing shadow rendering logic and shielding other parts of the system from complexity
Data Source
Figure 1(a)~1(c)
Figure 2~4
Figure 5
AI summary
This application relates to the field of terminal technologies, and provides a light and shadow effect display method and an electronic device. In this application, a light and shadow effect can be adaptively displayed based on preset lighting information and current display information. In this way, an interface light and shadow effect is enriched, and user experience is improved. The method includes the following steps: The electronic device detects a first operation of a user, and determines to refresh a first interface being displayed. The electronic device obtains lighting information and current display information, where the lighting information is a preconfigured global illumination definition. The electronic device performs lighting rendering based on the lighting information and the current display information. Then the electronic device displays a second interface, where a first component in the second interface has a light and shadow effect formed after the lighting rendering.