Gradient &
Liquid Fill
Shaders
Hand-written HLSL shader pack for Unity 6. Gradients, animated skies, liquid fill, and full UI support — across both URP and HDRP — with a polished custom inspector, zero texture dependencies, and SRP Batcher compatibility.
01 — Getting StartedInstallation & Setup
Prismatica works out of the box. Pipeline detection runs automatically on first Editor load — no manual configuration needed.
Folder Structure
Assets/
└── Prismatica/
├── Shaders/
│ ├── CoreShaderFiles/ ← GradientCore.hlsl, LiquidFillCore.hlsl
│ ├── URP/ ← All URP shader variants
│ └── HDRP/ ← All HDRP shaders (pipeline-guarded)
├── Scripts/
│ ├── Editor/ ← GradientShaderGUI.cs, GradientShaderSetup.cs
│ └── Runtime/ ← GradientSkySettings.cs, GradientSkyRenderer.cs
└── Demo/ ← 7 demo scenes
Pipeline Detection
Runs silently on the first domain reload. Logs only when something actually changes.
Go to Tools → Prismatica → Detect Pipeline to force a re-run at any time.
A move watcher re-runs the include path fixer automatically — shaders stay green anywhere.
HDRP projects: Detection adds PRISMATICA_HDRP_AVAILABLE automatically. In URP-only projects, HDRP shaders compile to magenta — never an error.
Demo Scenes
| Scene | Demonstrates |
|---|---|
| Scene 1 — Animated Sky | Linear gradient, 3-stop mid colour, day/sunset animation, horizon offset |
| Scene 2 — 3D Object Showcase | Sphere (Linear), Cube (Radial), Cylinder (Angular), Capsule (Diamond) + LiquidFill |
| Scene 3 — 2D Liquid Sprites | Sprite Renderer LiquidFill with staggered animations |
| Scene 4 — Layers | 5 layered quads, staggered Z depths + FlowOffsets |
| Scene 5 — Distortion Comparison | Distortion=0 vs Distortion=0.55 side by side |
| Scene 6 — UI Showcase | Cooldown ring, slider, liquid UI image, metallic button |
| Scene 7 — Gradient Sky | Skybox gradient with TMP text, slow Y rotation |
02 — ArchitectureShared Core Design
All shaders share one of two HLSL core files. A fix in the core propagates to every variant automatically.
GradientCore.hlsl
Shared by all 8 gradient variants — Mesh, UI, Skybox across URP and HDRP. All gradient math, noise, animation, sweep mask, and metallic streak.
LiquidFillCore.hlsl
Shared by all 4 LiquidFill variants — 3D and UI across URP and HDRP. Wave simulation, glass shell, rim glow, specular highlight, wave-fade clamping.
Precision System
// REAL macro — both core files #if defined(SHADER_API_GLES3) || defined(SHADER_API_METAL) || defined(SHADER_API_WEBGL) #define REAL half // mobile + WebGL → half precision, 2× ALU throughput #else #define REAL float // desktop → full float precision #endif
SRP Batcher Compatibility
All material properties live in a single CBUFFER_START(UnityPerMaterial) block. Textures and samplers are declared outside the CBUFFER as required. Confirm in the Frame Debugger — look for SRP Batch.
03 — Gradient ShadersGradient_URP & Gradient_HDRP
General-purpose gradient shaders for 3D meshes, 2D sprites, UI Raw Images, and quads.
Cull Mode Guidance
| Surface | Cull Mode | Reason |
|---|---|---|
| 3D mesh (sphere, cube, capsule) | Back | Standard — hides backfaces |
| Quad / Plane | Off | Flat — both sides visible |
| UI Raw Image | Off | Canvas element — always flat |
| Sprite Renderer 2D | Off | Sprite is always flat |
04 — Gradient TypesAll Gradient Modes
Four core gradient types — same across all mesh, UI, and skybox shaders.
Linear
Full 360° directional gradient via Gradient Angle. Combine with Horizon Offset to shift the blend band.
Radial
Centre-outward on meshes. Pole-outward on skybox. Gradient Angle rotates the pattern.
Angular
Full 360° azimuthal conical sweep. Maps to the full horizon band on skybox.
Diamond
Symmetric reflected ramp from centre creating a diamond / rhombus gradient.
Gradient Modifiers
| Modifier | Properties | Description |
|---|---|---|
| Three-stop mid colour | UseMidStop, MidColor, MidPoint | Third colour at configurable position 0.01–0.99 |
| Sharpness | Sharpness (0.1–8) | Power curve — hard bands or ultra-soft blends |
| Horizon offset | HorizonOffset (−0.5–0.5) | Shifts blend band without changing angle |
| Scrolling UV | ScrollSpeedX, ScrollSpeedY | Flowing, lava, and liquid motion effects |
| Noise distortion | Distortion, DistortionScale | Procedural noise warp. Zero texture dependency. |
| Dithered edge | DitherAmount, DitherScale | Dissolve-style noise threshold on boundary |
| Colour animation | FlowSpeed, TargetTopColor, TargetBottomColor | Sine-wave oscillation between colours. 0 = static. |
| HDR brightness | Brightness (0–3, skybox 0–5) | Above 1 = HDR bloom-ready output |
05 — UI ShadersGradientUI_URP & GradientUI_HDRP
Extends the base gradient with shape masking, a sweep arc cooldown mask, and a metallic highlight streak.
Shape Masking
Assign any sprite to _MainTex. The alpha channel is multiplied into the gradient — fills the exact silhouette.
Sweep Arc Mask
Enable UseSweep. Set FillAmount 0–1. Ideal for cooldown rings, circular progress, radial meters.
Metallic Streak
Enable UseMetallic. Additive specular band for gloss/foil sheen on buttons and UI panels.
HDRP Canvas limitation: Screen Space — Overlay is not supported in HDRP (engine constraint). Use Screen Space — Camera or World Space instead — both work correctly.
06 — Skybox ShadersGradient_Skybox_URP & HDRP
Full-sphere environment sky shaders using world-space view direction. All four gradient types, procedural sun disc, HDR brightness up to 5.
URP Sky Setup
Assign the Prismatica/Gradient_Skybox_URP shader.
Window → Rendering → Lighting → Skybox Material slot.
Adjust colours, enable sun disc, set brightness. Live in Scene view.
HDRP Sky Setup
Add a GameObject with a Volume component (Global).
In the Volume profile → Add Override → Sky → Visual Environment. Enable the Sky Type checkbox and set it to Gradient Sky.
Add Override → Sky → Gradient Sky. Enable the checkboxes next to at least Top Color and Bottom Color.
Window → Rendering → Lighting → Environment → Sky Type → Gradient Sky.
Skybox defaults: FlowSpeed = 0 (static), UseMidStop = On (horizon colour visible), Brightness range 0–5 for HDR/Bloom skies.
07 — LiquidFill ShadersAnimated Liquid Fill
Animated liquid simulation for 3D meshes, 2D sprites, and UI Canvas. Wave surface, glass shell, rim glow, and specular highlight — all independently toggleable.
Visual Layers
| Layer | Toggle | Description |
|---|---|---|
| Liquid body | Always on | Gradient fill between LiquidColorBottom and LiquidColorTop |
| Wave surface | Always on (fades at extremes) | Sine-wave displacement at the fill level |
| Surface edge glow | Always on (fades at extremes) | Bright glow strip at the liquid surface line |
| Glass shell | UseGlass | Translucent outer container shell |
| Rim glow | UseGlass | Fresnel-approximation rim glow around the edge |
| Specular highlight | UseGlass | Smooth circular specular dot on the glass surface |
Choosing the right LiquidFill shader: For 3D meshes (capsule, sphere, cylinder) use LiquidFill_URP on a Mesh Renderer. For shaped 2D containers (test tube, flask, bottle sprite) use LiquidFillUI_URP on a Canvas UI Image — Unity's UI system handles silhouette clipping automatically. For simple rectangular sprites (health bars, progress fills) use LiquidFill_URP on a Sprite Renderer with the sprite's Mesh Type set to Full Rect in import settings.
Wave seam on capsule/cylinder: Unity's meshes have a UV seam where uv.x wraps 1→0. The 3D pass uses positionOS.x instead — no seam, no configuration needed.
FillScale / FillBias
// Maps objectY range to fill level REAL fillT = saturate(objectY * _FillScale + _FillBias + _FillAmount - 0.5);
Default maps objectY −0.5 → +0.5, matching Unity unit-scale meshes. Adjust for custom geometry.
08 — Use Case GuideWhich Shader to Use
| Use Case | Pipeline | Shader | Cull |
|---|---|---|---|
| 3D mesh (sphere, cube, capsule, cylinder) | URP | Gradient_URP | Back |
| 3D mesh | HDRP | Gradient_HDRP | — |
| Quad / Plane | URP | Gradient_URP | Off |
| UI Raw Image | URP | Gradient_URP or GradientUI_URP | Off |
| UI Raw Image | HDRP | GradientUI_HDRP | Off |
| Sprite Renderer 2D | URP | Gradient_URP | Off |
| Shape mask / cooldown ring / metallic button | URP | GradientUI_URP | Off |
| Shape mask / cooldown ring | HDRP | GradientUI_HDRP | Off |
| Skybox | URP | Gradient_Skybox_URP | — |
| Skybox | HDRP | Gradient_Skybox_HDRP via Volume | — |
| Liquid fill — 3D mesh | URP | LiquidFill_URP | Back |
| Liquid fill — 2D shaped sprite (test tube, flask) | URP | LiquidFillUI_URP on Canvas UI Image | Off |
| Liquid fill — rectangular sprite (health bar) | URP | LiquidFill_URP — Sprite Renderer, Mesh Type: Full Rect | Off |
| Liquid fill — UI Canvas | URP | LiquidFillUI_URP | Off |
| Liquid fill — 3D mesh | HDRP | LiquidFill_HDRP | — |
| Liquid fill — UI Canvas | HDRP | LiquidFillUI_HDRP | — |
09 — Properties ReferenceAll Shader Properties
Gradient Shaders — Mesh & UI
Gradient_URP · Gradient_HDRP · GradientUI_URP · GradientUI_HDRP
| Property | Type | Default | Notes |
|---|---|---|---|
TopColor | HDR Color | Blue | Top / start colour |
BottomColor | HDR Color | Dark blue | Bottom / end colour |
TargetTopColor | HDR Color | Orange | Animation target for top |
TargetBottomColor | HDR Color | Purple | Animation target for bottom |
UseMidStop | Toggle | Off | Enable three-stop gradient |
MidColor | HDR Color | Grey | Middle colour stop |
MidPoint | 0.01–0.99 | 0.5 | Position of mid stop |
GradientType | KeywordEnum | Linear | Linear / Radial / Angular / Diamond |
GradientAngle | 0–360 | 0 | Rotation of gradient direction |
HorizonOffset | −0.5–0.5 | 0 | Vertical shift of blend band |
FlowSpeed | 0–10 | 1.0 | Animation speed. 0 = static. |
FlowOffset | 0–6.28 | 0 | Phase offset |
ScrollSpeedX / Y | −5–5 | 0 | UV scroll per axis |
Sharpness | 0.1–8 | 1.0 | Power curve on ramp |
Distortion | 0–1 | 0 | Noise warp amount |
DistortionScale | 0.5–20 | 4.0 | Noise scale |
DitherAmount | 0–1 | 0 | Dissolve threshold |
DitherScale | 1–50 | 10.0 | Dither noise scale |
Brightness | 0–3 | 1.0 | Output multiplier |
CullMode | Enum | Back (2) | URP only — Off (0) for quads/UI |
GradientUI Only
| Property | Type | Description |
|---|---|---|
UseSweep | Toggle | Enable sweep arc mask |
FillAmount | 0–1 | Arc fill fraction |
SweepStartAngle | 0–360 | Arc start rotation |
SweepSoftness | Range | Arc tip softness |
UseMetallic | Toggle | Enable metallic streak |
StreakAngle | 0–360 | Highlight band direction |
StreakPosition | 0–1 | Position on surface |
StreakWidth | Range | Specular band width |
StreakIntensity | Range | Additive brightness |
LiquidFill Shaders
| Property | Type | Default | Notes |
|---|---|---|---|
FillAmount | 0–1 | 0.6 | 0 = empty, 1 = full |
LiquidColorBottom | HDR Color | Cyan | Bottom colour |
LiquidColorTop | HDR Color | Light cyan | Top colour |
LiquidOpacity | 0–1 | 1.0 | Body opacity |
SurfaceEdgeColor | HDR Color | White | Glow strip colour |
SurfaceEdgeWidth | Range | 0.022 | Glow strip thickness |
SurfaceEdgeIntensity | Range | 2.2 | Glow strip brightness |
WaveSpeed | Range | 2.0 | Animation speed |
WaveAmplitude | Range | 0.015 | Wave height |
WaveFrequency | Range | 4.0 | Spatial frequency |
GlassColor | HDR Color | Warm white | Shell tint |
GlassOpacity | 0–1 | 0.10 | Shell transparency |
RimColor | HDR Color | Orange | Rim glow colour |
RimIntensity | Range | 1.2 | Rim brightness |
RimPower | Range | 2.0 | Falloff sharpness |
HighlightColor | HDR Color | White | Specular dot colour |
HighlightPosX / PosY | 0–1 | 0.62 / 0.82 | UV position |
HighlightSize | Range | 0.045 | Dot size |
HighlightIntensity | Range | 2.5 | Dot brightness |
FillScale / FillBias | Range | 1.0 / 0.0 | 3D mesh fill calibration |
UseGlass | Toggle | On | Off = disables glass, rim, highlight |
Brightness | 0–3 | 1.0 | Output multiplier |
10 — Custom InspectorGradientShaderGUI
One inspector class covers all Prismatica gradient shaders. Sections appear and disappear based on which properties exist in the active shader.
Collapsible Sections
Foldout sections styled with EditorStyles.helpBox. Pro and Light skin aware.
Live Gradient Preview
Preview strip renders live — showing top/mid/bottom blend and animation target colours.
Hex Colour Input
Accepts #RGB, #RRGGBB, #RRGGBBAA. Bidirectional — hex updates the picker and vice versa.
Contextual Greying
Irrelevant properties grey out automatically based on active toggles and settings.
11 — Pipeline DetectionGradientShaderSetup
Editor-only script — handles all pipeline configuration automatically.
What It Does
- Queries the Package Manager for HDRP (
com.unity.render-pipelines.high-definition) - Writes
GradientPipelineDefines.hlslwith or without the HDRP define - Adds or removes
PRISMATICA_HDRP_AVAILABLEfrom Player Settings scripting defines - Scans all shader files and patches
#includepaths to actual file locations - Only logs when something actually changes — silent on Play presses
Move the entire Prismatica folder anywhere inside Assets/ — the Move Watcher detects it and re-runs the path fixer automatically. Shaders stay green.
12 — WebGL & MobilePlatform Compatibility
| Platform | Pipeline | Status | Notes |
|---|---|---|---|
| Windows / macOS / Linux | URP + HDRP | ✓ Supported | Full feature set |
| Android | URP | ✓ Supported | half on GLES3 / Vulkan |
| iOS | URP | ✓ Supported | half on Metal |
| WebGL 2.0 | URP | ✓ Supported | half via SHADER_API_WEBGL |
| WebGL 1.0 | URP | ⚠ Untested | May work — not validated |
| Console (PS5, Xbox) | URP + HDRP | ⚠ Untested | No platform-specific code |
WebGL noise: GradientNoise() uses sin() hashing — can be slow on some WebGL drivers. Only active when Distortion > 0 or DitherAmount > 0. Both default to 0.
13 — HDRP NotesHDRP-Specific Details
Automatic Detection
When HDRP is installed, the setup script adds PRISMATICA_HDRP_AVAILABLE to Scripting Define Symbols automatically, enabling all HDRP shaders and the sky C# runtime files.
Time Variable
HDRP shaders use _TimeParameters.x instead of _Time.y — handled automatically.
Screen Space — Overlay canvas not supported in HDRP. Engine constraint — use Screen Space — Camera or World Space canvas mode instead.
HDRP Sky Volume
GradientSkySettings and GradientSkyRenderer are wrapped in #if PRISMATICA_HDRP_AVAILABLE — no errors in URP projects. Uses [SkyUniqueID(20260222)] to prevent ID collisions.
14 — PerformanceOptimisation Notes
SRP Batcher
All properties in a single CBUFFER_START(UnityPerMaterial) block. Confirm in the Frame Debugger — look for SRP Batch.
Shader Variants
shader_feature_local on all toggles — unused variants stripped at build time. Zero runtime branching cost.
half Precision
All gradient math runs as half on mobile and WebGL. 2× ALU throughput on Mali, Adreno, and Apple GPU.
Zero Textures
All effects are procedural — no baked textures. Saves memory on mobile, eliminates load overhead on WebGL.
Mobile Tips
- Keep
DistortionandDitherAmountat 0 unless needed - Set
FlowSpeed = 0for static materials — skips per-frame sine evaluation - Disable
UseGlasson LiquidFill materials that don't need the glass shell - Use
Gradient_URPoverGradientUI_URPwhen sweep/metallic aren't needed