Graphics Rendering for Filleted Corners and Edge Effects
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing graphics rendering methods fail to effectively render graphics with vertex filleted corners and edge effects, such as border highlighting, which are common in user interfaces like progress bars.
Innovation Solution
A graphics rendering method that determines an offset value and size of a vertex filleted corner for a mask based on a progress value, using a to-be-processed mask to cover the border of the graphic, and performs vertex and fragment coloring to render the graphic, including edge effects.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If existing graphics rendering methods are used, then simple foreground bars with specific shapes can be rendered, but graphics with vertex filleted corners and edge effects cannot be rendered
Solution Approach 1:
The rendering process is divided into two distinct stages: vertex coloring stage and fragment coloring stage. The vertex coloring stage handles the overall shape and filleted corners using offset values, while the fragment coloring stage handles the edge effects and border highlighting. This segmentation allows each stage to focus on specific rendering tasks, achieving both versatility and accuracy.
Solution Approach 2:
Offset values are pre-calculated based on the progress value before the actual rendering process. These offset values represent the expected vertex positions and are used in the vertex coloring stage to efficiently render filleted corners without requiring complex real-time calculations during rendering.
2Shape
If vertex filleted corners are added to graphics, then graphic style complexity increases, but rendering compatibility with existing methods decreases
Solution Approach 1:
The invention introduces offset values as a new parameter that controls the vertex positioning for filleted corners. By adjusting the offset value based on the progress value, the rendering method can adapt to different graphic styles and corner geometries while maintaining compatibility with the existing rendering pipeline through parameter adjustment rather than structural change.
3Illumination intensity
If edge effects such as border highlighting are implemented, then visual quality improves, but rendering complexity increases
Solution Approach 1:
The rendering process is divided into two distinct stages: vertex coloring stage and fragment coloring stage. The vertex coloring stage handles the overall shape and filleted corners using offset values, while the fragment coloring stage handles the edge effects and border highlighting. This segmentation allows each stage to focus on specific rendering tasks, achieving both visual quality and manageable complexity.
Solution Approach 2:
The fragment coloring stage acts as an intermediary between the vertex coloring result and the final rendered image. It takes the vertex-colored graphic and adds edge effects by detecting pixels outside the mask boundary and applying special coloring, thereby enhancing visual quality without requiring fundamental changes to the base rendering pipeline.
Data Source
AI summary
The present disclosure provides a graphics rendering method and apparatus, and a storage medium. In the method, a to-be-rendered graphic is determined, then an offset value and a size of a vertex filleted corner of a corresponding to-be-processed mask are determined based on a progress value of the to-be-rendered graphic, where the to-be-rendered graphic includes one or more vertex filleted corners, so that graphics rendering is performed on a UI based on the offset value and the size of the vertex filleted corner of the to-be-processed mask, thereby realizing the rendering of a graphic including a vertex filleted corner. Moreover, a vertex filleted corner at which the to-be-processed mask intersects with the to-be-rendered graphic is considered when the graphics rendering is performed according to embodiments of the present disclosure.