graphics-rendering

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Graphics & Rendering

图形与渲染

Rendering Pipeline

渲染管线

┌─────────────────────────────────────────────────────────────┐
│                    RENDERING PIPELINE                        │
├─────────────────────────────────────────────────────────────┤
│  VERTEX STAGE:                                               │
│  Model Space → World Space → View Space → Clip Space        │
│                              ↓                               │
│  RASTERIZATION: Triangles → Fragments                       │
│                              ↓                               │
│  FRAGMENT STAGE: Color, Lighting, Texturing                 │
│                              ↓                               │
│  OUTPUT: Final pixel color to framebuffer                   │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    RENDERING PIPELINE                        │
├─────────────────────────────────────────────────────────────┤
│  VERTEX STAGE:                                               │
│  Model Space → World Space → View Space → Clip Space        │
│                              ↓                               │
│  RASTERIZATION: Triangles → Fragments                       │
│                              ↓                               │
│  FRAGMENT STAGE: Color, Lighting, Texturing                 │
│                              ↓                               │
│  OUTPUT: Final pixel color to framebuffer                   │
└─────────────────────────────────────────────────────────────┘

Shader Programming

着色器编程

Standard PBR Shader (HLSL)

标准PBR着色器（HLSL）

hlsl

// ✅ Production-Ready: PBR Surface Shader
struct SurfaceData
{
    float3 Albedo;
    float3 Normal;
    float Metallic;
    float Roughness;
    float AO;
};

float3 FresnelSchlick(float cosTheta, float3 F0)
{
    return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0);
}

float DistributionGGX(float3 N, float3 H, float roughness)
{
    float a = roughness * roughness;
    float a2 = a * a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH * NdotH;

    float denom = (NdotH2 * (a2 - 1.0) + 1.0);
    return a2 / (PI * denom * denom);
}

float4 PBRLighting(SurfaceData surface, float3 viewDir, float3 lightDir)
{
    float3 H = normalize(viewDir + lightDir);
    float3 F0 = lerp(0.04, surface.Albedo, surface.Metallic);

    float D = DistributionGGX(surface.Normal, H, surface.Roughness);
    float3 F = FresnelSchlick(max(dot(H, viewDir), 0.0), F0);

    float3 diffuse = surface.Albedo * (1.0 - surface.Metallic);
    float3 specular = D * F;

    return float4((diffuse + specular) * surface.AO, 1.0);
}

hlsl

// ✅ Production-Ready: PBR Surface Shader
struct SurfaceData
{
    float3 Albedo;
    float3 Normal;
    float Metallic;
    float Roughness;
    float AO;
};

float3 FresnelSchlick(float cosTheta, float3 F0)
{
    return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0);
}

float DistributionGGX(float3 N, float3 H, float roughness)
{
    float a = roughness * roughness;
    float a2 = a * a;
    float NdotH = max(dot(N, H), 0.0);
    float NdotH2 = NdotH * NdotH;

    float denom = (NdotH2 * (a2 - 1.0) + 1.0);
    return a2 / (PI * denom * denom);
}

float4 PBRLighting(SurfaceData surface, float3 viewDir, float3 lightDir)
{
    float3 H = normalize(viewDir + lightDir);
    float3 F0 = lerp(0.04, surface.Albedo, surface.Metallic);

    float D = DistributionGGX(surface.Normal, H, surface.Roughness);
    float3 F = FresnelSchlick(max(dot(H, viewDir), 0.0), F0);

    float3 diffuse = surface.Albedo * (1.0 - surface.Metallic);
    float3 specular = D * F;

    return float4((diffuse + specular) * surface.AO, 1.0);
}

Toon/Cel Shader

卡通/赛璐珞着色器

hlsl

// ✅ Production-Ready: Toon Shader
float4 ToonShading(float3 normal, float3 lightDir, float4 baseColor)
{
    float NdotL = dot(normal, lightDir);

    // Step function for cel shading
    float toonRamp;
    if (NdotL > 0.7) toonRamp = 1.0;
    else if (NdotL > 0.3) toonRamp = 0.6;
    else if (NdotL > 0.0) toonRamp = 0.3;
    else toonRamp = 0.1;

    return baseColor * toonRamp;
}

// Outline pass (inverted hull method)
float4 OutlineVertex(float4 position, float3 normal, float outlineWidth)
{
    position.xyz += normal * outlineWidth;
    return position;
}

hlsl

// ✅ Production-Ready: Toon Shader
float4 ToonShading(float3 normal, float3 lightDir, float4 baseColor)
{
    float NdotL = dot(normal, lightDir);

    // Step function for cel shading
    float toonRamp;
    if (NdotL > 0.7) toonRamp = 1.0;
    else if (NdotL > 0.3) toonRamp = 0.6;
    else if (NdotL > 0.0) toonRamp = 0.3;
    else toonRamp = 0.1;

    return baseColor * toonRamp;
}

// Outline pass (inverted hull method)
float4 OutlineVertex(float4 position, float3 normal, float outlineWidth)
{
    position.xyz += normal * outlineWidth;
    return position;
}

Visual Effects (VFX)

视觉特效（VFX）

Particle System Setup

粒子系统设置

PARTICLE SYSTEM ARCHITECTURE:
┌─────────────────────────────────────────────────────────────┐
│  EMITTER: Rate, Bursts, Shape                               │
│                    ↓                                         │
│  SPAWN: Initial velocity, Size, Color, Lifetime             │
│                    ↓                                         │
│  UPDATE: Forces, Collisions, Color over life               │
│                    ↓                                         │
│  RENDER: Billboard, Mesh, Trail                             │
└─────────────────────────────────────────────────────────────┘

COMMON VFX RECIPES:
┌────────────────┬────────────────────────────────────────────┐
│ Fire           │ Orange→Yellow gradient, upward velocity   │
│ Smoke          │ Gray billboards, turbulence noise         │
│ Sparks         │ Point emitter, gravity, short lifetime    │
│ Magic          │ Spiral path, glow, color cycling          │
│ Blood          │ Burst, gravity, decal on collision        │
└────────────────┴────────────────────────────────────────────┘

粒子系统架构：
┌─────────────────────────────────────────────────────────────┐
│  发射器：发射速率、爆发发射、形状                               │
│                    ↓                                         │
│  生成：初始速度、大小、颜色、生命周期             │
│                    ↓                                         │
│  更新：作用力、碰撞、生命周期颜色变化               │
│                    ↓                                         │
│  渲染：公告板、网格、拖尾                             │
└─────────────────────────────────────────────────────────────┘

常见VFX实现方案：
┌────────────────┬────────────────────────────────────────────┐
│ 火焰           │ 橙→黄渐变、向上速度   │
│ 烟雾          │ 灰色公告板、湍流噪声         │
│ 火花         │ 点发射器、重力、短生命周期    │
│ 魔法          │ 螺旋路径、发光、颜色循环          │
│ 血液          │ 爆发发射、重力、碰撞时生成贴花        │
└────────────────┴────────────────────────────────────────────┘

Optimization Techniques

优化技巧

Technique	Draw Call Reduction	When to Use
Static Batching	90%+	Static geometry
Dynamic Batching	50-80%	Small moving objects
GPU Instancing	95%+	Many identical objects
LOD System	40-60%	Distant objects
Occlusion Culling	30-70%	Indoor scenes

技巧	绘制调用减少率	适用场景
静态批处理	90%+	静态几何体
动态批处理	50-80%	小型移动物体
GPU实例化	95%+	大量相同物体
LOD系统	40-60%	远距离物体
遮挡剔除	30-70%	室内场景

LOD Configuration

LOD配置

LOD DISTANCE SETUP:
┌─────────────────────────────────────────────────────────────┐
│  LOD0 (100% tris): 0-20m   → Full detail                   │
│  LOD1 (50% tris):  20-50m  → Reduced detail                │
│  LOD2 (25% tris):  50-100m → Low detail                    │
│  LOD3 (10% tris):  100m+   → Billboard/Impostor            │
└─────────────────────────────────────────────────────────────┘

LOD距离设置：
┌─────────────────────────────────────────────────────────────┐
│  LOD0（100%三角形数量）：0-20米   → 全细节                   │
│  LOD1（50%三角形数量）：20-50米  → 简化细节                │
│  LOD2（25%三角形数量）：50-100米 → 低细节                    │
│  LOD3（10%三角形数量）：100米以上   → 公告板/Impostor            │
└─────────────────────────────────────────────────────────────┘

🔧 Troubleshooting

🔧 故障排查

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Too many draw calls (>2000)                        │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Enable GPU instancing for repeated objects               │
│ → Use texture atlases                                       │
│ → Merge static meshes                                       │
│ → Implement LOD system                                      │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ PROBLEM: Shader artifacts / visual glitches                 │
├─────────────────────────────────────────────────────────────┤
│ SOLUTIONS:                                                   │
│ → Check for division by zero                                │
│ → Validate normal vectors                                   │
│ → Use saturate() on color outputs                           │
│ → Check texture sampling modes                              │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ 问题：绘制调用过多（>2000）                        │
├─────────────────────────────────────────────────────────────┤
│ 解决方案：                                                   │
│ → 对重复物体启用GPU实例化               │
│ → 使用纹理图集                                       │
│ → 合并静态网格                                       │
│ → 实现LOD系统                                      │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ 问题：着色器异常/视觉故障                 │
├─────────────────────────────────────────────────────────────┤
│ 解决方案：                                                   │
│ → 检查是否存在除零错误                                │
│ → 验证法线向量                                   │
│ → 对颜色输出使用saturate()函数                           │
│ → 检查纹理采样模式                              │
└─────────────────────────────────────────────────────────────┘

Platform Guidelines

平台指南

Platform	Max Draw Calls	Shader Complexity	Texture Size
Mobile	100-200	Low	1024px max
Console	2000-3000	High	4096px
PC	3000-5000	Very High	8192px
VR	100-150	Low	2048px

Use this skill: When creating shaders, optimizing visuals, or implementing effects.

平台	最大绘制调用数	着色器复杂度	纹理尺寸
移动端	100-200	低	最大1024px
主机平台	2000-3000	高	4096px
PC端	3000-5000	极高	8192px
VR	100-150	低	2048px

使用场景：创建着色器、优化视觉效果或实现特效时。