Flat Kit: Toon Shading and Water

About Flat Kit: Toon Shading and Water – Unity VFX & Shader Pack

Flat Kit: Toon Shading and Water Unity Asset Overview

Flat Kit: Toon Shading and Water provides a comprehensive, production-ready visual framework designed primary for non-photorealistic rendering (NPR). Built natively to support Unity's Universal Render Pipeline (URP) while maintaining legacy support for the Built-in Render Pipeline, the asset structures its shaders using hand-written HLSL custom include files rather than node-heavy Shader Graph graphs. This architectural choice minimizes compilation overhead, eliminates unnecessary shader variants, and allows precise control over light loop evaluations within custom render passes.

Render Pipeline Integration

The core pipeline design decouples material shading from post-processing effects through specialized pipeline extension points:

• URP Compatibility: Utilizes native ScriptableRendererFeature passes to inject custom depth-normal evaluations and screen-space blit passes directly into the URP frame graph.
• Built-in Pipeline Support: Executes post-processing using standard OnRenderImage command buffer hooks for legacy visual stacks.
• HLSL Modular Shader Libraries: Internal functions (e.g., lighting calculation, toon ramp step evaluations, and wave vertex displacements) reside in modular .hlsl files, making them easily extensible by technical artists.

Render Pass Architecture

The standard Toon shader operates across multiple passes within the URP rendering execution graph:

• UniversalForward Pass: Computes cell-shaded diffuse bands, specular highlights, environment reflections, and per-pixel rim lighting.
• ShadowCaster Pass: Generates clean shadow maps with custom bias thresholds to prevent self-shadowing artifacts on low-poly geometry.
• DepthNormals Pass: Writes screen-space geometry normals and depth directly into URP render targets, enabling high-precision screen-space outline post-processing.

Toon Lighting, Water Mechanics & Depth Buffer Interactions

Flat Kit achieves its signature stylized look through custom lighting models and real-time buffer reads. Understanding these mechanics is crucial when integrating the shaders into custom lighting pipelines or complex scene layouts.

Stylized Toon Lighting & Step Functions

The main Toon shader replaces standard Lambertian or Phong light attenuation with a quantized step function. Instead of evaluating continuous dot products (N · L), the lighting intensity passes through custom color ramps or mathematical quantization functions. Developers can select between a procedural Step/Cel mode or a Curve-based Ramp Texture mode. Additional lighting features include controlled specular glints, dark shadow tints independent of ambient light, and customizable object-space or screen-space rim lights.

Stylized Water Engine

The water shader relies on a single-pass transparent or opaque rendering path combined with depth buffer sampling. Key structural elements include:

• Depth Intersection Foam: Samples the _CameraDepthTexture to compare scene geometry depth against the water plane's depth, generating dynamic foam bands where objects intersect the water surface.
• Vertex Displacement: Uses combined directional sine and Gerstner wave calculations directly in the vertex shader to modulate surface geometry in real time.
• Color Gradient Mapping: Interpolates between shallow and deep color parameters based on vertical depth differences captured via camera depth reads.

Depth Buffer & Framebuffer Dependencies

To use advanced features like edge detection outlines and water foam, the target camera must explicitly enable Depth Texture and Opaque Texture generation (Requires Depth Texture and Requires Opaque Texture enabled on the URP Asset). On mobile pipelines, sampling the depth buffer introduces an extra memory bandwidth cost, which must be accounted for during performance profiling.

Mobile GPU Performance & Overdraw Analysis

Deploying toon-shaded visuals and stylized water onto mobile architectures (such as ARM Mali or Qualcomm Adreno GPUs) requires strict management of Tile-Based Deferred Rendering (TBDR) constraints, overdraw, and fragment shader complexity.

Overdraw and Transparency Profiling

The toon surface shader is an opaque material, which minimizes blending costs and maximizes early-Z rejection on modern hardware. However, the stylized water shader relies on alpha blending or depth texture reads, which can impact performance when stacked across large surfaces.

• Hull Extrusion Outlines vs. Post-Processing Outlines: Hull-based object outlines (drawing an inverted mesh pass) double vertex counts and increase overdraw along geometry edges. Screen-space post-processing outlines use a single full-screen blit pass based on depth/normals, which avoids vertex duplication but requires extra depth buffer sampling.
• Shader Feature Keywords: Flat Kit uses #pragma shader_feature compilation directives. Unused shader options (such as detail maps or secondary specular highlights) are stripped out during build time, preventing shader binary bloat and reducing variant branching on mobile GPUs.

Performance Optimization Matrix

The following profiling guidelines highlight optimal configurations based on target execution hardware:

• High-End PC / Console: Enable screen-space outlines via URP ScriptableRendererFeature, dynamic Gerstner wave displacement, multi-band color ramps, and high-precision depth-based water foam.
• Mid-Tier Mobile / Standalone VR: Utilize procedural step-based toon shading, disable hull-extrusion outlines in favor of texture-baked details, use single-sine-wave water displacement, and limit full-screen post-processing effects.

Inspector Properties & Scripting Guide

To modify material properties at runtime without triggering heavy memory allocations or creating redundant material instances, developers should use Unity's MaterialPropertyBlock API. Modifying Material.color directly generates duplicate material assets in memory, breaking batching and increasing draw calls.

Runtime Manipulation via C# Scripting

The following example demonstrates how to dynamically update toon lighting parameters—such as color tint, rim light intensity, and toon step thresholds—using MaterialPropertyBlock on an animated character or object.

using UnityEngine;

[RequireComponent(typeof(Renderer))]
public class ToonMaterialController : MonoBehaviour
{
    [Header("Toon Shader Controls")]
    [SerializeField] private Color surfaceColor = Color.white;
    [SerializeField] private Color shadowColor = Color.gray;
    [SerializeField, Range(0f, 1f)] private float rimPower = 0.5f;

    private Renderer meshRenderer;
    private MaterialPropertyBlock propertyBlock;

    // Shader property ID caching to avoid string lookup overhead
    private static readonly int BaseColorID = Shader.PropertyToID("_BaseColor");
    private static readonly int ShadowColorID = Shader.PropertyToID("_ShadowColor");
    private static readonly int RimPowerID = Shader.PropertyToID("_RimPower");

    private void Awake()
    {
        meshRenderer = GetComponent<Renderer>();
        propertyBlock = new MaterialPropertyBlock();
    }

    private void Update()
    {
        // Fetch current property block state
        meshRenderer.GetPropertyBlock(propertyBlock);

        // Assign dynamic properties
        propertyBlock.SetColor(BaseColorID, surfaceColor);
        propertyBlock.SetColor(ShadowColorID, shadowColor);
        propertyBlock.SetFloat(RimPowerID, rimPower);

        // Push values back to renderer without breaking material instancing
        meshRenderer.SetPropertyBlock(propertyBlock);
    }
}

Configuring Render Features in URP

To establish the post-processing outline and custom height fog included with Flat Kit, follow this setup process within your URP configuration:

1. Locate your active UniversalRendererData asset in the Project window.
2. Click Add Renderer Feature at the bottom of the Inspector panel and select Flat Kit Outline or Flat Kit Fog.
3. Set the feature event injection point (typically After Rendering Transparents or Before Rendering Post Processing).
4. Configure the depth threshold, normal threshold, and edge color parameters directly inside the Renderer Feature inspector.

Frequently Asked Questions (FAQ)

Which render pipelines are natively supported by Flat Kit?

Flat Kit includes native implementations for the Universal Render Pipeline (URP) and the legacy Built-in Render Pipeline. Due to architectural differences in lighting and pass management, the high-definition pipeline (HDRP) is not natively targeted by these specific HLSL shader passes.

Why are screen-space outlines or water foam effects missing in my URP build?

Missing depth-dependent visual effects typically occur when the depth texture feature is disabled. To fix this, select your active URP Pipeline Asset and ensure that Require Depth Texture and Require Opaque Texture are explicitly checked. Additionally, verify that the Flat Kit Outline Render Feature has been added to your target Renderer Data asset.

Does Flat Kit rely on Shader Graph?

No. Flat Kit's core shaders are written directly in custom HLSL code. This avoids the node overhead associated with large Shader Graph assets and allows fine-grained optimizations for mobile hardware, draw-call batching, and SRP batcher compatibility.

What is the official licensing and usage policy for this asset release?

Assets provided through this platform are strictly intended for educational, testing, and evaluation purposes only. Usage in commercial production builds is prohibited. Developers planning to release commercial projects must purchase an official license directly from the original publisher via the Unity Asset Store to support the developers and ensure access to official updates and technical support.

Developers Who Downloaded This Also Downloaded

Related Unity VFX Assets