Skill v2.0.0
currentAutomated scan100/100name: shader-techniques version: "2.0.0" description: | Advanced shader programming, visual effects, custom materials, and rendering optimization for stunning game graphics. sasmp_version: "1.3.0" bonded_agent: 03-graphics-rendering bond_type: PRIMARY_BOND
parameters:
- name: shader_type
type: string required: false validation: enum: [surface, unlit, post_process, compute, particle]
- name: platform
type: string required: false validation: enum: [pc, console, mobile, vr]
retry_policy: enabled: true max_attempts: 3 backoff: exponential
observability: log_events: [start, complete, error, compile] metrics: [shader_variants, compile_time, gpu_time_ms]
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 200CGPROGRAM#pragma surface surf Standard fullforwardshadows#pragma target 3.0sampler2D _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){// Albedohalf4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;o.Albedo = c.rgb;// Normal mappinghalf3 normal = UnpackNormal(tex2D(_NormalMap, IN.uv_NormalMap));normal.xy *= _NormalStrength;o.Normal = normalize(normal);// PBR propertieso.Metallic = _Metallic;o.Smoothness = _Smoothness;o.Alpha = c.a;}ENDCG}FallBack "Diffuse"}
Advanced Effects
Toon/Cel Shading
// ✅ Production-Ready: Toon ShaderShader "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 PassPass{Cull FrontCGPROGRAM#pragma vertex vert#pragma fragment fragstruct 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 normalsfloat3 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 PassPass{CGPROGRAM#pragma vertex vert#pragma fragment fragsampler2D _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 albedohalf4 col = tex2D(_MainTex, i.uv) * _Color;// Calculate diffuse with rampfloat3 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 ShaderShader "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 fragsampler2D _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 pixelsclip(noise - _DissolveAmount);// Add edge glowfloat 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 VignetteShader "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 fragsampler2D _MainTex;float _Intensity;float _Smoothness;half4 frag(v2f_img i) : SV_Target{half4 col = tex2D(_MainTex, i.uv);// Calculate vignettefloat2 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.