Rxl-tech.art
HomeAbout AI?ContactCV
Back to Home
Case Study·Graphics Programming / GPU Systems·Internal

Unity Pitch Shader System

A dual-path football pitch shader system for Unity URP, designed for a wide range of devices with a clean fallback behavior on weaker ones.

Shader OptimizationMobile RenderingHLSLUnity
Football pitch shader system showing art-directed grass, field lines, and branded surface treatment
Unity HLSL Shader Breakdown
01Overview

HLSL pitch shader system for quality and performance (mobile/WebGL)

  • Dual-path Unity URP pitch shader: lit mode and a fake-lit fallback.
  • Shared field look, branding, and necessary technical controls across both paths.
  • GPU performance focus for WebGL/mobile
Impact
Internal
Platforms
WebGL · Mobile · Unity URP
Tools
Unity · HLSL · C#
Focus
Shader Optimization · Mobile Rendering · HLSL · Unity
03Technical Breakdown
item.01

Dual-Path Rendering Architecture

Rendering diagram...

Comparison between the Full Lit and fallback paths

  • The fallback was designed to be structurally cheaper, not just visually simpler.
  • The lit shader is the higher-fidelity path for devices that can afford normal mapping, specular response, and real player shadows on the pitch.
  • The fake-lit shader is the deliberate fallback for constrained mobile and WebGL cases, where the pitch still needs acceptable visuals without full real-time lighting cost.
item.02

Visual Systems - Dimensions, Branding

  • Shared surface controls across both shaders: base color, side color, field lines, grass breakup, reveal animation, sponsor branding, and spotlight shaping.
  • Animations and branding inputs were important to customize and control at runtime due to business requirements.

Procedural Lines (aliasing, dimensions)

  • The pitch lines are generated procedurally in the shader instead of being baked into a texture. This avoids thin texture lines breaking up or shimmering at distance, especially on low-end devices.
  • Because the lines come from math, we can anti-alias them directly in shader using screen-space derivatives like fwidth(...), instead of relying on camera post-processing AA that can be expensive.
  • fwidth estimates how quickly the line edge changes across screen pixels, so the shader can soften just the edge by the right amount for the current camera distance and angle.
Code
float aaWidth = max(fwidth(signedDistance), 0.001);
float lineAlpha = 1.0 - smoothstep(lineHalfWidth - aaWidth, lineHalfWidth + aaWidth, abs(signedDistance));

float distToCircle = length(position - center) - radius;
float aa = max(fwidth(distToCircle), 0.001);
float circleAlpha = 1.0 - smoothstep(lineHalfWidth - aa, lineHalfWidth + aa, abs(distToCircle));
item.03

Visual fidelity / GPU performance balance

Texture packing

  • One RGB texture carries several grayscale data roles
  • That reduces texture sampling cost, count and memory pressure
  • Still allowed for the same level of visual details

Real shadows vs. blob shadows

  • Lit mode keeps real player shadows and the full lighting path.
  • Fallback mode disables real shadow casting and relies on blob shadows for cheaper grounding.

We noticed that, since the app does not have a realistic look anyway, the overall visual experience is not really impacted when using the default broadcast camera view, thus raising the question of the actual need for real-time shadows.

item.04

Performance Outcome

  • Blob shadows preserved player grounding while removing most of the cost of dynamic projected shadows.
  • About 200 draw calls saved and roughly 10-15 constant FPS (target 60FPS cap) gained on iPhone 17 in WebGL.

This should be read as a production measurement, not a full browser GPU timing study, because WebGL profiling depth was limited.

← Previous Project

Compute-Driven Grass Rendering

Next Project →

FIFA 2026 World Cup Live App