shader-techniques

Q: How do I install shader-techniques?

Run npx skills add https://github.com/pluginagentmarketplace/custom-plugin-game-developer --skill shader-techniques in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shader-techniques/ (personal) or .claude/skills/shader-techniques/ (project).

by pluginagentmarketplaceMedia & Creative

Advanced shader programming, visual effects, custom materials, and rendering optimization for stunning game graphics.

Installs: 100
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/pluginagentmarketplace/custom-plugin-game-developer --skill shader-techniques

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads shader-techniques automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Shader Techniques

Shader Pipeline Overview

┌─────────────────────────────────────────────────────────────┐
│                    RENDERING PIPELINE                        │
├─────────────────────────────────────────────────────────────┤
│  CPU (Game Logic)                                            │
│       ↓                                                      │
│  VERTEX SHADER                                               │
│  ├─ Transform vertices to clip space                        │
│  ├─ Calculate normals, tangents                             │
│  └─ Pass data to fragment shader                            │
│       ↓                                                      │
│  RASTERIZATION (Fixed function)                              │
│  ├─ Triangle setup                                          │
│  ├─ Pixel coverage                                          │
│  └─ Interpolation                                           │
│       ↓                                                      │
│  FRAGMENT/PIXEL SHADER                                       │
│  ├─ Sample textures                                         │
│  ├─ Calculate lighting                                      │
│  └─ Output final color                                      │
│       ↓                                                      │
│  OUTPUT (Framebuffer)                                        │
└─────────────────────────────────────────────────────────────┘

Basic Shader Structure

// ✅ Production-Ready: Basic Surface Shader (Unity HLSL)
Shader "Custom/BasicSurface"
{
    Properties
    {
        _MainTex ("Albedo", 2D) = "white" {}
        _Color ("Color Tint", Color) = (1,1,1,1)
        _Metallic ("Metallic", Range(0,1)) = 0.0
        _Smoothness ("Smoothness", Range(0,1)) = 0.5
        _NormalMap ("Normal Map", 2D) = "bump" {}
        _NormalStrength ("Normal Strength", Range(0,2)) = 1.0
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue"="Geometry" }
        LOD 200

        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows
        #pragma target 3.0

        sampler2D _MainTex;
        sampler2D _NormalMap;
        half4 _Color;
        half _Metallic;
        half _Smoothness;
        half _NormalStrength;

        struct Input
        {
            float2 uv_MainTex;
            float2 uv_NormalMap;
        };

        void surf(Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo
            half4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;

            // Normal mapping
            half3 normal = UnpackNormal(tex2D(_NormalMap, IN.uv_NormalMap));
            normal.xy *= _NormalStrength;
            o.Normal = normalize(normal);

            // PBR properties
            o.Metallic = _Metallic;
            o.Smoothness = _Smoothness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

Advanced Effects

Toon/Cel Shading

// ✅ Production-Ready: Toon Shader
Shader "Custom/Toon"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1,1,1,1)
        _RampTex ("Ramp Texture", 2D) = "white" {}
        _OutlineColor ("Outline Color", Color) = (0,0,0,1)
        _OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.02
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" }

        // Outline Pass
        Pass
        {
            Cull Front

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
            };

            float _OutlineWidth;
            float4 _OutlineColor;

            v2f vert(appdata v)
            {
                v2f o;
                // Expand vertices along normals
                float3 scaled = v.vertex.xyz + v.normal * _OutlineWidth;
                o.pos = UnityObjectToClipPos(float4(scaled, 1.0));
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                return _OutlineColor;
            }
            ENDCG
        }

        // Main Toon Pass
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;
            sampler2D _RampTex;
            float4 _Color;

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 worldNormal : TEXCOORD1;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                // Sample albedo
                half4 col = tex2D(_MainTex, i.uv) * _Color;

                // Calculate diffuse with ramp
                float3 lightDir = normalize(_WorldSpaceLightPos0.xyz);
                float NdotL = dot(i.worldNormal, lightDir) * 0.5 + 0.5;
                float3 ramp = tex2D(_RampTex, float2(NdotL, 0.5)).rgb;

                col.rgb *= ramp;
                return col;
            }
            ENDCG
        }
    }
}

Dissolve Effect

// ✅ Production-Ready: Dissolve Shader
Shader "Custom/Dissolve"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _NoiseTex ("Noise Texture", 2D) = "white" {}
        _DissolveAmount ("Dissolve Amount", Range(0, 1)) = 0
        _EdgeColor ("Edge Color", Color) = (1, 0.5, 0, 1)
        _EdgeWidth ("Edge Width", Range(0, 0.2)) = 0.05
    }

    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            sampler2D _MainTex;
            sampler2D _NoiseTex;
            float _DissolveAmount;
            float4 _EdgeColor;
            float _EdgeWidth;

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            v2f vert(appdata_base v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
                return o;
            }

            half4 frag(v2f i) : SV_Target
            {
                half4 col = tex2D(_MainTex, i.uv);
                float noise = tex2D(_NoiseTex, i.uv).r;

                // Discard dissolved pixels
                clip(noise - _DissolveAmount);

                // Add edge glow
                float edge = 1 - smoothstep(0, _EdgeWidth, noise - _DissolveAmount);
                col.rgb = lerp(col.rgb, _EdgeColor.rgb, edge);

                return col;
            }
            ENDCG
        }
    }
}

Post-Processing Effects

// ✅ Production-Ready: Screen-Space Vignette
Shader "PostProcess/Vignette"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Intensity ("Intensity", Range(0, 1)) = 0.5
        _Smoothness ("Smoothness", Range(0.01, 1)) = 0.5
    }

    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag

            sampler2D _MainTex;
            float _Intensity;
            float _Smoothness;

            half4 frag(v2f_img i) : SV_Target
            {
                half4 col = tex2D(_MainTex, i.uv);

                // Calculate vignette
                float2 center = i.uv - 0.5;
                float dist = length(center);
                float vignette = smoothstep(0.5, 0.5 - _Smoothness, dist);
                vignette = lerp(1, vignette, _Intensity);

                col.rgb *= vignette;
                return col;
            }
            ENDCG
        }
    }
}

Shader Optimization

OPTIMIZATION TECHNIQUES:
┌─────────────────────────────────────────────────────────────┐
│  PRECISION:                                                  │
│  • Use half instead of float where possible                 │
│  • Mobile: Always prefer half/fixed                         │
│  • PC: float for positions, half for colors                │
├─────────────────────────────────────────────────────────────┤
│  TEXTURE SAMPLING:                                           │
│  • Minimize texture samples                                 │
│  • Use texture atlases                                      │
│  • Avoid dependent texture reads                            │
│  • Use lower mipmap for distant objects                     │
├─────────────────────────────────────────────────────────────┤
│  MATH OPERATIONS:                                            │
│  • Replace div with mul (x/2 → x*0.5)                       │
│  • Use MAD operations (a*b+c)                               │
│  • Avoid branching in fragment shaders                      │
│  • Pre-compute constants                                    │
├─────────────────────────────────────────────────────────────┤
│  VARIANTS:                                                   │
│  • Minimize shader keywords                                 │
│  • Use multi_compile_local                                  │
│  • Strip unused variants                                    │
└─────────────────────────────────────────────────────────────┘

COST COMPARISON (Relative):
┌─────────────────────────────────────────────────────────────┐
│  Operation          │ Cost  │ Notes                         │
├─────────────────────┼───────┼───────────────────────────────┤
│  Add/Multiply       │ 1x    │ Baseline                      │
│  Divide             │ 4x    │ Avoid in loops                │
│  Sqrt               │ 4x    │ Use rsqrt when possible       │
│  Sin/Cos            │ 8x    │ Use lookup tables on mobile   │
│  Texture Sample     │ 4-8x  │ Varies by hardware            │
│  Pow                │ 8x    │ Use exp2(x*log2(y))          │
│  Normalize          │ 4x    │ Pre-normalize in vertex      │
└─────────────────────┴───────┴───────────────────────────────┘

🔧 Troubleshooting

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Shader not compiling                               │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Check for syntax errors (missing semicolons)              │
│ → Verify all variables are declared                         │
│ → Check target platform compatibility                       │
│ → Look for mismatched semantics                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Pink/magenta material                              │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Shader failed to compile - check console                  │
│ → Missing shader on target platform                         │
│ → Add fallback shader                                       │
│ → Check render pipeline compatibility                       │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Shader too slow                                    │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Profile with GPU debugger (RenderDoc)                     │
│ → Reduce texture samples                                    │
│ → Use lower precision                                       │
│ → Simplify math operations                                  │
│ → Move calculations to vertex shader                        │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Too many shader variants                           │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Use shader_feature instead of multi_compile               │
│ → Strip unused variants in build settings                   │
│ → Combine keywords where possible                           │
│ → Use material property blocks                              │
└─────────────────────────────────────────────────────────────┘

Shader Languages by Engine

Engine	Language	Notes
Unity URP/HDRP	HLSL + ShaderGraph	Visual + code
Unity Built-in	CG/HLSL	Legacy surface shaders
Unreal	HLSL + Material Editor	Node-based preferred
Godot	Godot Shading Language	Similar to GLSL
OpenGL	GLSL	Cross-platform
DirectX	HLSL	Windows/Xbox
Vulkan	SPIR-V (from GLSL)	Low-level

Use this skill: When creating custom visuals, optimizing rendering, or implementing advanced effects.

FAQ

What does the shader-techniques skill do?

Advanced shader programming, visual effects, custom materials, and rendering optimization for stunning game graphics.

How do I install shader-techniques?

Run npx skills add https://github.com/pluginagentmarketplace/custom-plugin-game-developer --skill shader-techniques in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/shader-techniques/ (personal) or .claude/skills/shader-techniques/ (project).

Which AI agents can use shader-techniques?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is shader-techniques safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains shader-techniques?

It is published by pluginagentmarketplace in pluginagentmarketplace/custom-plugin-game-developer. It has 100 recorded installs.