Fix: Mobile Game Shader Precision Banding on Android

Your title screen shows a smooth dark-blue gradient on iPhone and on desktop. On a Pixel or Samsung device, the same gradient has distinct vertical bands of color — you can count maybe 30 visible steps where there should be 256. The art is correct; the rendering is being quantized too aggressively.

Why Mobile Banding Happens

Many Android GPUs — Adreno especially, and Mali to a lesser extent — perform fragment shader math at mediump (16-bit float) precision by default. A 16-bit float has only ~3 decimal digits of precision. For colors in the 0–1 range, that’s precision of about 1/512. When you compute a slow gradient (alpha rising from 0 to 0.1 over 1000 pixels), the intermediate values quantize to 50 distinct steps. The final 8-bit output reflects those steps as visible bands.

Fix 1: Promote Color Math to highp

precision mediump float;   // fragment shader default

in highp vec2 v_uv;
uniform highp vec3 u_color_a;
uniform highp vec3 u_color_b;

void main() {
    highp float t = v_uv.y;
    highp vec3 color = mix(u_color_a, u_color_b, t);
    gl_FragColor = vec4(color, 1.0);
}

The gradient math runs at 32-bit precision; banding from precision loss disappears. Cost: highp fragment work is slower than mediump on most Android GPUs, but for small color operations the perf impact is sub-1%.

Fix 2: Dither Before Quantization

Even at highp precision, the 8-bit output framebuffer can’t represent 256 shades smoothly. Add per-pixel noise to randomize quantization boundaries:

highp float dither(highp vec2 uv) {
    return fract(sin(dot(uv * 512.0, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
    highp vec3 color = mix(u_color_a, u_color_b, v_uv.y);
    color += (dither(gl_FragCoord.xy) - 0.5) / 255.0;
    gl_FragColor = vec4(color, 1.0);
}

The dither shifts each pixel by ±0.5/255 before quantization. Adjacent pixels with very similar source colors are pushed across the quantization boundary in different directions, replacing hard bands with noisy transitions. The noise is below human perception threshold but eliminates banding.

Fix 3: Higher Bit Depth Framebuffer

For HDR pipelines or scenes where dithering isn’t enough, switch the color attachment to GL_RGBA16F instead of GL_RGBA8. 16-bit per channel = 65,536 shades per color, far more than human eyes can distinguish.

Memory bandwidth doubles, which hurts on mobile (mobile GPUs are typically bandwidth-bound). Use selectively — one HDR scene buffer with tone-mapping, then resolve to 8-bit for display.

In Unity URP, enable HDR in the Universal Renderer asset; in Unreal, the default mobile pipeline already uses an HDR intermediate.

Fix 4: Cap the Banding-Sensitive Operations

If you have a long, dark gradient (the bands are most visible in dark colors due to perceptual non-linearity), break the gradient into discrete steps deliberately rather than trying to render a smooth one. A “cel shaded” quantized sky reads as artistic intent rather than precision loss.

Verifying

Build and test on representative devices — ideally one Adreno (Pixel, Samsung S series) and one Mali (older Samsung, Huawei). Capture a screenshot of the worst gradient. Compare before and after. The banding should be replaced with subtle noise that’s invisible from normal viewing distance.

Understanding the issue

Shader bugs manifest visually but trace to invisible state. Triage requires understanding the runtime context as much as the source.

The specific bug described above is the kind that surfaces during integration rather than unit testing. It depends on a combination of factors: the asset configuration, the runtime state, the platform's specific behavior. In isolation, each piece looks correct; in combination, the bug emerges. This is why thorough integration testing - playing the actual game in realistic conditions - catches things that automated tests miss.

Why this happens

Bugs of this class are particularly easy to ship past internal QA because they often depend on specific runtime conditions - hardware combinations, network states, or asset configurations that QA didn't reproduce. Players hit them in the wild, file reports that are hard to repro, and the bug accumulates negative reviews while engineering tries to recreate the failure mode.

At the engine level, the behavior comes from a deliberate design decision in the engine. The engine team chose a particular trade-off - usually performance versus convenience, or generality versus specificity - and that trade-off has consequences when you push against it. Understanding the trade-off is what turns 'this bug is mysterious' into 'this bug is the expected consequence of this design'.

Verifying the fix

For shipping games, the safest verification is a staged rollout. Apply the fix to 1% of players for 24 hours; watch the affected metric; expand if green. Skipping the staged rollout means the verification is the entire player base, which is too high a stakes for most fixes.

Reproducibility is the prerequisite for verification. If you can't reliably reproduce the bug pre-fix, you can't reliably verify it post-fix. Spend time getting a clean reproduction before you write any fix code. The fix is fast once you understand the reproduction; the reproduction is the slow part.

Variations to watch for

Related bug classes often share the same root cause. If you find yourself fixing this issue, look for cousins: similar symptoms in adjacent systems, the same data flow but a different value, or the same fix pattern in another module. The catalog of 'we've seen this before' becomes valuable institutional knowledge.

Adjacent bugs often share a root cause. After fixing the case you've found, spend an hour searching the codebase for similar patterns. What's the same call with different arguments? The same data flow with a different entity type? The same lifecycle issue in a sibling system? Each match is a candidate for the same fix, or a related fix that prevents future bugs of the same class.

In production

Live games surface this bug class at scale. What's a rare edge case in development becomes a daily occurrence once you have a few thousand concurrent players. The class isn't 'this player has a unique setup'; it's 'one in N thousand sessions will trigger this exact combination'.

When triaging a similar issue in production, prioritize gathering data over hypothesizing causes. A player report describes a symptom; what you need is a build SHA, a session timestamp, and ideally a screen recording or session replay. With those, the bug becomes tractable. Without them, you're guessing at hypothetical reproductions that may not match what the player actually hit.

Performance considerations

If this issue manifests under high load (many actors, many particles, many network connections), profile the post-fix code path with realistic counts. The original cost was a bug; the new cost is real work, and real work has a budget.

Diagnostic approach

Before applying any fix, gather enough context to be confident you're addressing the actual cause and not a similar-looking symptom. The cheapest diagnostic step is reproducing the bug deterministically - if you can't get the same failure twice in a row, your fix attempts will be hard to evaluate. Lock down the reproduction first.

For the engine-specific diagnostics, the editor's profiler is the canonical starting point. Capture a representative frame with the symptom present; compare against a frame without the symptom; the diff often points directly at the cause. If the symptom is non-deterministic, capture multiple frames and look for the pattern - the cause is usually a state transition or a specific input value rather than a continuous effect.

Tooling and ecosystem

Modern engine versions ship better tooling for this kind of issue than older versions. If you're on an older release, the diagnostic step may take significantly longer because the tools you'd want don't exist yet. Sometimes the right answer is upgrading rather than fighting through limited tooling.

Within the engine, the relevant diagnostic surfaces include the standard frame debugger, memory profiler, and engine-specific debug overlays. Each one shows a different facet of what's happening. The frame debugger reveals draw call ordering and state transitions; the memory profiler shows allocation patterns; the debug overlay reveals per-system state. Bugs that resist one tool usually surrender to another - the trick is knowing which tool to reach for first.

Edge cases and pitfalls

Boundary conditions deserve specific testing attention. What happens when the input is zero, maximum, negative, or NaN? What happens at the start of a session vs hours in? What happens at the boundary between two systems handling the same data? These are where bugs hide and where regression tests are most valuable.

When writing a regression test for this fix, focus on the boundary conditions that surfaced the original bug. Tests that exercise the happy path catch obvious regressions; tests that exercise the boundary catch the subtler regressions that look like new bugs but are really the original returning. The latter are the tests that earn their keep over the long life of the project.

Team communication

Document the fix and its rationale in the commit message or attached engineering doc. Future engineers will encounter related issues; the rationale tells them whether your fix is reusable or specific to the case at hand. Without rationale, the fix gets reverted or copied incorrectly.

If this fix touches a system several engineers work in, a short writeup in the team's engineering channel helps. Not a full design doc - a paragraph explaining what was wrong, what's fixed, and what to watch for. Future engineers encountering similar symptoms will search for the fix; making it findable is a small investment that pays back later.

“Banding is a precision problem. Either raise the precision, mask it with noise, or quantize it intentionally.”

Dithering is essentially free perf-wise and fixes 90% of banding. Add it to every fullscreen pass that draws gradients.