Ruiyao Luo 2025

Project Info


Team Size	10+
Role	TA Rendering Algorithm
Responsibility	High-performance smooth rounded corner algorithm, anti-aliasing and curve shape definition; high-performance blur and blending algorithm; high-performance ambient occlusion algorithm.
Duration	~ 2 Years
Platform	HyperOS 1.0/2.0
Tech Stack	Figma, React, GLSL, SKSL

Introduction

The operating system needs to ensure that the user's attention is focused on the content and tasks that are important to them at the moment, so the aesthetic expression within the system must be restrained and convergent. Based on the aesthetic concept of "Alive" proposed by Mr. Kenya Hara, we have extracted the most basic elements from the system, rethought them, and created Advanced Material Design 1.0 with the most advanced rendering technology.

“在环境之间不断运动, 始终保持一种平衡状态和个性, 这也就是生命本身的样子。” -- 原研哉

The elements of the system need to adapt to different sizes/types of devices, different ways of interaction, different lighting environments, different animation effects, different content displays, etc., and perform well, just like the adaptive ability possessed by living organisms in different environments.

Problem

How to make the interface elements clearly identifiable and non-disturbing in any scene.
How to create a sense of luxury to support the group's strategy.
How to achieve the widest visual renewal coverage at the lowest cost.

Scope

1. Rounding Corner

The hardware frame needs to consider the stress impact during the manufacturing process, so it will be chamfered around the phone. With the popularity of full-screen displays, the display screen also adopts a rounded corner design to maximize space utilization. To maintain consistency, software also began to use rounded corner design on windows.

Anti-drop/Eliminate stress \to ID \to Screen \to Software

At its root, the design of rounded corners is to improve the yield of products, extend the service life of devices, and provide soft total reflection under illumination. Analyzing and improving the curvature continuity of the rounded corner curve is a necessary means to achieve all of this.

1.1. Curvature Continuity

Surface curvature is widely used in the automotive industry design. By improving the curvature continuity, light reflection can be reduced, and visual comfort can be improved. For different curvature requirements, there are also very handy mathematical tools, such as Nurbs, Bezier, B-Spline, etc.

For any parametric curve, $r(t) = (x(t), y(t))$ , the curvature at each point can be calculated by the following formula.

\displaystyle \kappa = \frac{|x'y'' - y'x''|}{(x'^2 + y'^2)^{3/2}}

1.2. Circular Rounded Corner and G4 Continuous Smooth Rounded Corner

The most commonly used circular rounded corners (left) have a curvature mutation when intersecting with a straight line. In addition to the limitation of screen pixels, it will cause a visual discontinuity. The advanced material rounded corners (right) we propose smooth the curvature transition when the curve intersects with a straight line by improving the curvature continuity, making it more visually comfortable.

In addition, factors such as the pixel density, sub-pixel arrangement, brightness of different screens will affect the anti-aliasing of smooth rounded corners, thereby affecting the visual effect. We use a magnification device to correct the rounded corners of different devices, different display areas, and different display resolutions separately to ensure the consistency of the visual effect.

In practical applications, there will be dozens or even hundreds of rounded corners on the screen at the same time. How to improve the curvature continuity while ensuring performance is the problem we need to solve.

Here we use a series of real-time rendering technologies, integrate the Android rendering process by utilizing the parallel computing capabilities of the GPU, and finally achieve a high-performance smooth rounded corner algorithm on all platforms. Due to NDA restrictions, the specific smooth rounded corner algorithm and curve generation method cannot be displayed here.

1.3. Before and After

We do not just seek the smoothness of rounded corners, but strive to ensure that in any use scenario, they can harmonize with other elements to achieve a unified visual effect. A negative space example is when rounded corners are arranged in a matrix. A perfect ellipse which satisfies infinite curvature continuity can be a better choice if we only seek the smoothness of rounded corners.

But when we observe the negative space composed by the hyper-ellipse, it is easy to notice that the convexity of the hyper-ellipse corners is more obvious, and the length of the straight line part approaches infinity, resulting in a very complex negative space that cannot be harmonized with other straight-edge elements.

Not only visually, but the length of the straight sections of a superellipse approaches zero infinitely, which means that during the performance optimization phase, it will be impossible to exclude unnecessary rendering elements by slicing the nine-grid. This will result in power consumption being $43\%$ higher under standard rounded corners compared to our smooth rounded corners. The choice of corner curvature alone can have such a significant impact on final performance, which is a benefit that can only be achieved by improving the production process.

Through a year of effort by three teams, the smooth rounded corners have finally entered the Hyper OS 1.0 system firmware. We have distributed it to 4 million personal devices of Xiaomi.

2. Blur

2.1. Window, Attention and Stage

A very important part of the operating system is to help users better manage multitasking scenarios. Real-world tasks are complex and nonlinear. User attention, like the storage and computing resources of hardware devices, needs to be carefully scheduled.

We try to break down complex tasks into linear steps as much as possible to protect the user's attention, but when multiple tasks are entangled, users inevitably need to switch between multiple contexts. How to help users schedule attention more quickly is a problem that the operating system needs to solve.

Here, we propose the concept of Stage. The center of the stage is the visual performance area of the task that the user is currently focusing on, which is the focus of the user's current attention. The other areas of the stage are the range of peripheral vision, and they need to retreat in time to ensure that the user's attention is not distracted.

2.2. Gaussian Blur

O(W\times H\times r^2) \approx 1920\times 1080\times 4\times 10\times 10 = 829440000

O(2\times W\times H\times r) \approx 1920\times 1080\times 4\times 10\times 2 = 165888000

2.3. Before and After

2.4. The next step - Progressive Blur

🚧