Aurora Animation and 3D Penguin Effects in Mobile QQ: Noise Algorithms, Color Mapping, Performance Optimization, and Rendering Techniques

On February 10, 1999 QQ was released; 2024 marks its 25th anniversary. The latest QQ 9.0 introduces a lightweight UI and new visual effects such as aurora‑like animations and a spring‑driven 3D penguin.

01 Aurora Animation

Designers requested an effect that changes freely like aurora or flowing water and works with both day and night themes. The solution uses noise algorithms to simulate natural randomness.

1.1 Problem definition

Natural phenomena such as clouds, mountains, water ripples appear random yet possess linear artistic beauty. In computer graphics this is modeled with noise.

1.2 Randomness

Simple white‑noise is generated by assigning each pixel a random grayscale value, but lacks continuity between neighboring pixels.

f(x) = 3x^2-2x^3

1.3 Continuity

Interpolation across a grid of vertices creates continuous noise.

f(x) = 6x^5-15x^4+10x^3

1.4 Smoothing

Applying smoothing functions removes grid artifacts and yields natural‑looking noise.

1.5 Naturalness

Further smoothing improves the visibility of edge colors.

02 From Grayscale to Color

After generating a single‑channel noise image, the grayscale values are mapped to a predefined color palette. Linear mapping causes some colors (e.g., #FAE366) to be rarely displayed because the gray distribution follows a normal curve.

To solve this, a uniform probability mapping combined with smoothing is applied.

// Get noise gray value
float gray = noise(x, y);
// Color range size
float rangeSize = 1 / colorCount;
// Corresponding color index
int colorIndex = ceil(gray / rangeSize);
// Adjust gray for interpolation
gray -= rangeSize * colorIndex;
gray /= rangeSize;
// Color interpolation
mix(color1, color2, gray);

03 Performance Optimization

Initial CPU‑based Perlin noise calculation on a full‑screen bitmap took several seconds. Down‑sampling reduced the cost to <10 ms, but frame drops still occurred. Switching to GPU rendering and compute shaders moved the noise calculation to the GPU, achieving 1–2 ms rendering on both Android and iOS.

3.1 Rendering Pipeline

Mobile GPUs use Metal, OpenGL, or Vulkan. The pipeline leverages vertex and fragment shaders.

3.2 Compute Shader

Compute shaders enable high‑parallelism GPGPU tasks. Care must be taken with thread‑group sizes and data alignment on low‑end devices.

3.3 Compatibility

Compute shaders are supported on OpenGL ES 3.1 and Metal 3.0 (iOS 16+, iPhone 11+). Android support exceeds 97 %.

04 Dynamic 3D Penguin

The 3D penguin is rendered with Google’s Filament engine, which supports glTF/glb models, PBR materials, and various light types.

enum class Type : uint8_t {
  SUN,            // 太阳光
  DIRECTIONAL,    // 指向光
  POINT,          // 点光源
  FOCUSED_SPOT,   // 聚光灯
  SPOT,           // 斑点光源
};

Material settings use emissiveFactor and adjust metallic/roughness to approximate a glass‑like surface.

4.1 Lighting

Differences between design mock‑ups and rendered results are addressed by matching light types.

4.2 Material

Emissive factor combined with PBR yields a subtle blue glow.

4.3 Spring Animation

A damped harmonic oscillator model is used instead of the built‑in SpringAnimation to achieve realistic bounce:

f = -k·x

m * d²x/dt² + c * dx/dt + k * x = 0

Underdamped, critically damped, and overdamped regimes are discussed.

4.4 Optimized Spring Effect

Underdamped behavior provides fast convergence for UI interaction.

4.5 Easter Egg

Rotating the penguin three times on the “About” page triggers a hidden animation.

05 Outlook

Future work includes generating color palettes from brand colors using HCT theory to create richer aurora effects for different themes.