shader-techniques
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseShader Techniques
Shader技术
Shader Pipeline Overview
Shader渲染管线概述
┌─────────────────────────────────────────────────────────────┐
│ 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) │
└─────────────────────────────────────────────────────────────┘┌─────────────────────────────────────────────────────────────┐
│ RENDERING PIPELINE │
├─────────────────────────────────────────────────────────────┤
│ CPU (游戏逻辑) │
│ ↓ │
│ VERTEX SHADER │
│ ├─ 将顶点转换到裁剪空间 │
│ ├─ 计算法线、切线 │
│ └─ 向片段着色器传递数据 │
│ ↓ │
│ RASTERIZATION (固定功能管线) │
│ ├─ 三角形设置 │
│ ├─ 像素覆盖 │
│ └─ 插值 │
│ ↓ │
│ FRAGMENT/PIXEL SHADER │
│ ├─ 采样纹理 │
│ ├─ 计算光照 │
│ └─ 输出最终颜色 │
│ ↓ │
│ OUTPUT (帧缓冲) │
└─────────────────────────────────────────────────────────────┘Basic Shader Structure
基础Shader结构
hlsl
// ✅ 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"
}hlsl
// ✅ 生产可用：基础表面Shader（Unity HLSL）
Shader "Custom/BasicSurface"
{
Properties
{
_MainTex ("Albedo", 2D) = "white" {}
_Color ("颜色色调", Color) = (1,1,1,1)
_Metallic ("金属度", Range(0,1)) = 0.0
_Smoothness ("光滑度", Range(0,1)) = 0.5
_NormalMap ("法线贴图", 2D) = "bump" {}
_NormalStrength ("法线强度", 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)
{
// 反照率
half4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb;
// 法线贴图
half3 normal = UnpackNormal(tex2D(_NormalMap, IN.uv_NormalMap));
normal.xy *= _NormalStrength;
o.Normal = normalize(normal);
// PBR属性
o.Metallic = _Metallic;
o.Smoothness = _Smoothness;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}Advanced Effects
高级效果
Toon/Cel Shading
卡通/赛璐璐着色
hlsl
// ✅ 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
}
}
}hlsl
// ✅ 生产可用：卡通Shader
Shader "Custom/Toon"
{
Properties
{
_MainTex ("纹理", 2D) = "white" {}
_Color ("颜色", Color) = (1,1,1,1)
_RampTex ("渐变纹理", 2D) = "white" {}
_OutlineColor ("描边颜色", Color) = (0,0,0,1)
_OutlineWidth ("描边宽度", Range(0, 0.1)) = 0.02
}
SubShader
{
Tags { "RenderType"="Opaque" }
// 描边通道
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;
// 沿法线方向扩展顶点
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
}
// 主卡通通道
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
{
// 采样反照率
half4 col = tex2D(_MainTex, i.uv) * _Color;
// 使用渐变纹理计算漫反射
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
溶解效果
hlsl
// ✅ 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
}
}
}hlsl
// ✅ 生产可用：溶解Shader
Shader "Custom/Dissolve"
{
Properties
{
_MainTex ("纹理", 2D) = "white" {}
_NoiseTex ("噪声纹理", 2D) = "white" {}
_DissolveAmount ("溶解程度", Range(0, 1)) = 0
_EdgeColor ("边缘颜色", Color) = (1, 0.5, 0, 1)
_EdgeWidth ("边缘宽度", 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;
// 丢弃已溶解的像素
clip(noise - _DissolveAmount);
// 添加边缘发光
float edge = 1 - smoothstep(0, _EdgeWidth, noise - _DissolveAmount);
col.rgb = lerp(col.rgb, _EdgeColor.rgb, edge);
return col;
}
ENDCG
}
}
}Post-Processing Effects
后处理效果
hlsl
// ✅ 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
}
}
}hlsl
// ✅ 生产可用：屏幕空间暗角
Shader "PostProcess/Vignette"
{
Properties
{
_MainTex ("纹理", 2D) = "white" {}
_Intensity ("强度", Range(0, 1)) = 0.5
_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);
// 计算暗角
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
Shader优化
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 │
└─────────────────────┴───────┴───────────────────────────────┘优化技巧:
┌─────────────────────────────────────────────────────────────┐
│ 精度优化: │
│ • 尽可能使用half而非float │
│ • 移动端：优先使用half/fixed │
│ • PC端：位置使用float，颜色使用half │
├─────────────────────────────────────────────────────────────┤
│ 纹理采样优化: │
│ • 减少纹理采样次数 │
│ • 使用纹理图集 │
│ • 避免依赖纹理读取 │
│ • 远处物体使用低等级Mipmap │
├─────────────────────────────────────────────────────────────┤
│ 数学运算优化: │
│ • 用乘法替代除法（x/2 → x*0.5） │
│ • 使用MAD运算（a*b+c） │
│ • 避免在片段着色器中使用分支 │
│ • 预计算常量 │
├─────────────────────────────────────────────────────────────┤
│ 变体优化: │
│ • 减少Shader关键字 │
│ • 使用multi_compile_local │
│ • 移除未使用的变体 │
└─────────────────────────────────────────────────────────────┘
相对成本对比:
┌─────────────────────────────────────────────────────────────┐
│ 操作 │ 成本 │ 说明 │
├─────────────────────┼───────┼───────────────────────────────┤
│ 加法/乘法 │ 1x │ 基准值 │
│ 除法 │ 4x │ 避免在循环中使用 │
│ 平方根 │ 4x │ 尽可能使用rsqrt │
│ 正弦/余弦 │ 8x │ 移动端使用查找表 │
│ 纹理采样 │ 4-8x │ 因硬件而异 │
│ 幂运算 │ 8x │ 使用exp2(x*log2(y)) │
│ 归一化 │ 4x │ 在顶点着色器中预归一化 │
└─────────────────────┴───────┴───────────────────────────────┘🔧 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编译失败 │
├─────────────────────────────────────────────────────────────┤
│ 解决方案: │
│ → 检查语法错误（缺失分号） │
│ → 验证所有变量已声明 │
│ → 检查目标平台兼容性 │
│ → 查找不匹配的语义 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 问题：材质显示为粉/品红色 │
├─────────────────────────────────────────────────────────────┤
│ 解决方案: │
│ → Shader编译失败 - 检查控制台 │
│ → 目标平台缺失对应的Shader │
│ → 添加回退Shader │
│ → 检查渲染管线兼容性 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 问题：Shader运行过慢 │
├─────────────────────────────────────────────────────────────┤
│ 解决方案: │
│ → 使用GPU调试器分析性能（RenderDoc） │
│ → 减少纹理采样次数 │
│ → 使用更低精度 │
│ → 简化数学运算 │
│ → 将计算转移到顶点着色器 │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ 问题：Shader变体过多 │
├─────────────────────────────────────────────────────────────┤
│ 解决方案: │
│ → 使用shader_feature替代multi_compile │
│ → 在构建设置中移除未使用的变体 │
│ → 尽可能合并关键字 │
│ → 使用材质属性块 │
└─────────────────────────────────────────────────────────────┘Shader Languages by Engine
各引擎对应的Shader语言
| 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.
| 引擎 | 语言 | 说明 |
|---|---|---|
| Unity URP/HDRP | HLSL + ShaderGraph | 可视化+代码 |
| Unity 内置管线 | CG/HLSL | 传统表面Shader |
| Unreal | HLSL + 材质编辑器 | 优先使用节点式 |
| Godot | Godot Shading Language | 类似GLSL |
| OpenGL | GLSL | 跨平台 |
| DirectX | HLSL | Windows/Xbox |
| Vulkan | SPIR-V（基于GLSL） | 底层 |
使用场景：创建自定义视觉效果、优化渲染性能或实现高级特效时。