omgkit 2.13.0 → 2.16.0

package/plugin/skills/game/shader-programming/SKILL.md

@@ -0,0 +1,492 @@
+# Shader Programming
+
+GPU shader development including HLSL/GLSL, vertex/fragment shaders, compute shaders, and visual effects.
+
+## Overview
+
+Shader programming enables custom rendering effects, visual styles, and GPU-accelerated computations through programmable graphics pipeline stages.
+
+## Core Concepts
+
+### Shader Types
+- **Vertex Shader**: Transform vertices
+- **Fragment/Pixel Shader**: Calculate pixel colors
+- **Geometry Shader**: Generate/modify primitives
+- **Compute Shader**: General-purpose GPU computing
+
+### Rendering Pipeline
+```
+Vertices → Vertex Shader → Rasterization → Fragment Shader → Output
+```
+
+## HLSL Basics (Unity/DirectX)
+
+### Simple Unlit Shader
+```hlsl
+Shader "Custom/SimpleUnlit"
+{
+    Properties
+    {
+        _MainTex ("Texture", 2D) = "white" {}
+        _Color ("Color", Color) = (1,1,1,1)
+    }
+
+    SubShader
+    {
+        Tags { "RenderType"="Opaque" }
+        LOD 100
+
+        Pass
+        {
+            CGPROGRAM
+            #pragma vertex vert
+            #pragma fragment frag
+
+            #include "UnityCG.cginc"
+
+            struct appdata
+            {
+                float4 vertex : POSITION;
+                float2 uv : TEXCOORD0;
+            };
+
+            struct v2f
+            {
+                float2 uv : TEXCOORD0;
+                float4 vertex : SV_POSITION;
+            };
+
+            sampler2D _MainTex;
+            float4 _MainTex_ST;
+            float4 _Color;
+
+            v2f vert (appdata v)
+            {
+                v2f o;
+                o.vertex = UnityObjectToClipPos(v.vertex);
+                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
+                return o;
+            }
+
+            fixed4 frag (v2f i) : SV_Target
+            {
+                fixed4 col = tex2D(_MainTex, i.uv) * _Color;
+                return col;
+            }
+            ENDCG
+        }
+    }
+}
+```
+
+### Lit Shader with Normal Mapping
+```hlsl
+Shader "Custom/NormalMapped"
+{
+    Properties
+    {
+        _MainTex ("Albedo", 2D) = "white" {}
+        _BumpMap ("Normal Map", 2D) = "bump" {}
+        _BumpScale ("Normal Scale", Range(0, 2)) = 1.0
+        _Metallic ("Metallic", Range(0, 1)) = 0.0
+        _Smoothness ("Smoothness", Range(0, 1)) = 0.5
+    }
+
+    SubShader
+    {
+        Tags { "RenderType"="Opaque" }
+
+        CGPROGRAM
+        #pragma surface surf Standard fullforwardshadows
+        #pragma target 3.0
+
+        sampler2D _MainTex;
+        sampler2D _BumpMap;
+        half _BumpScale;
+        half _Metallic;
+        half _Smoothness;
+
+        struct Input
+        {
+            float2 uv_MainTex;
+            float2 uv_BumpMap;
+        };
+
+        void surf (Input IN, inout SurfaceOutputStandard o)
+        {
+            fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
+            o.Albedo = c.rgb;
+
+            o.Normal = UnpackScaleNormal(
+                tex2D(_BumpMap, IN.uv_BumpMap),
+                _BumpScale
+            );
+
+            o.Metallic = _Metallic;
+            o.Smoothness = _Smoothness;
+            o.Alpha = c.a;
+        }
+        ENDCG
+    }
+
+    FallBack "Diffuse"
+}
+```
+
+## Visual Effects
+
+### Dissolve Effect
+```hlsl
+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"="Transparent" "Queue"="Transparent" }
+        Blend SrcAlpha OneMinusSrcAlpha
+
+        Pass
+        {
+            CGPROGRAM
+            #pragma vertex vert
+            #pragma fragment frag
+
+            #include "UnityCG.cginc"
+
+            struct appdata
+            {
+                float4 vertex : POSITION;
+                float2 uv : TEXCOORD0;
+            };
+
+            struct v2f
+            {
+                float2 uv : TEXCOORD0;
+                float4 vertex : SV_POSITION;
+            };
+
+            sampler2D _MainTex;
+            sampler2D _NoiseTex;
+            float _DissolveAmount;
+            float4 _EdgeColor;
+            float _EdgeWidth;
+
+            v2f vert (appdata v)
+            {
+                v2f o;
+                o.vertex = UnityObjectToClipPos(v.vertex);
+                o.uv = v.uv;
+                return o;
+            }
+
+            fixed4 frag (v2f i) : SV_Target
+            {
+                fixed4 col = tex2D(_MainTex, i.uv);
+                float noise = tex2D(_NoiseTex, i.uv).r;
+
+                // Dissolve threshold
+                float dissolve = noise - _DissolveAmount;
+
+                // Clip pixels below threshold
+                clip(dissolve);
+
+                // Edge glow
+                if (dissolve < _EdgeWidth)
+                {
+                    float edgeBlend = dissolve / _EdgeWidth;
+                    col.rgb = lerp(_EdgeColor.rgb, col.rgb, edgeBlend);
+                    col.rgb += _EdgeColor.rgb * (1 - edgeBlend) * 2;
+                }
+
+                return col;
+            }
+            ENDCG
+        }
+    }
+}
+```
+
+### Outline Shader
+```hlsl
+Shader "Custom/Outline"
+{
+    Properties
+    {
+        _MainTex ("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
+
+            #include "UnityCG.cginc"
+
+            float _OutlineWidth;
+            float4 _OutlineColor;
+
+            struct appdata
+            {
+                float4 vertex : POSITION;
+                float3 normal : NORMAL;
+            };
+
+            struct v2f
+            {
+                float4 vertex : SV_POSITION;
+            };
+
+            v2f vert (appdata v)
+            {
+                v2f o;
+                // Expand vertices along normals
+                float3 expandedPos = v.vertex.xyz + v.normal * _OutlineWidth;
+                o.vertex = UnityObjectToClipPos(float4(expandedPos, 1));
+                return o;
+            }
+
+            fixed4 frag (v2f i) : SV_Target
+            {
+                return _OutlineColor;
+            }
+            ENDCG
+        }
+
+        // Regular pass
+        Pass
+        {
+            CGPROGRAM
+            #pragma vertex vert
+            #pragma fragment frag
+
+            #include "UnityCG.cginc"
+
+            sampler2D _MainTex;
+
+            struct appdata
+            {
+                float4 vertex : POSITION;
+                float2 uv : TEXCOORD0;
+            };
+
+            struct v2f
+            {
+                float2 uv : TEXCOORD0;
+                float4 vertex : SV_POSITION;
+            };
+
+            v2f vert (appdata v)
+            {
+                v2f o;
+                o.vertex = UnityObjectToClipPos(v.vertex);
+                o.uv = v.uv;
+                return o;
+            }
+
+            fixed4 frag (v2f i) : SV_Target
+            {
+                return tex2D(_MainTex, i.uv);
+            }
+            ENDCG
+        }
+    }
+}
+```
+
+## GLSL (WebGL/OpenGL)
+
+### Basic Fragment Shader
+```glsl
+#version 300 es
+precision highp float;
+
+uniform sampler2D uTexture;
+uniform float uTime;
+uniform vec2 uResolution;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+void main() {
+    vec2 uv = vUv;
+
+    // Animated wave distortion
+    uv.x += sin(uv.y * 10.0 + uTime) * 0.02;
+    uv.y += cos(uv.x * 10.0 + uTime) * 0.02;
+
+    vec4 color = texture(uTexture, uv);
+    fragColor = color;
+}
+```
+
+### Post-Processing Effect
+```glsl
+#version 300 es
+precision highp float;
+
+uniform sampler2D uSceneTexture;
+uniform float uVignetteStrength;
+uniform float uSaturation;
+uniform vec3 uColorGrade;
+
+in vec2 vUv;
+out vec4 fragColor;
+
+vec3 adjustSaturation(vec3 color, float saturation) {
+    vec3 grey = vec3(dot(color, vec3(0.299, 0.587, 0.114)));
+    return mix(grey, color, saturation);
+}
+
+float vignette(vec2 uv, float strength) {
+    vec2 center = uv - 0.5;
+    float dist = length(center);
+    return 1.0 - smoothstep(0.3, 0.7, dist * strength);
+}
+
+void main() {
+    vec4 scene = texture(uSceneTexture, vUv);
+
+    // Apply saturation
+    vec3 color = adjustSaturation(scene.rgb, uSaturation);
+
+    // Apply color grading
+    color *= uColorGrade;
+
+    // Apply vignette
+    float vig = vignette(vUv, uVignetteStrength);
+    color *= vig;
+
+    fragColor = vec4(color, scene.a);
+}
+```
+
+## Compute Shaders
+
+### Particle Simulation
+```hlsl
+#pragma kernel UpdateParticles
+
+struct Particle
+{
+    float3 position;
+    float3 velocity;
+    float life;
+    float size;
+};
+
+RWStructuredBuffer<Particle> particles;
+float deltaTime;
+float3 gravity;
+int particleCount;
+
+[numthreads(256, 1, 1)]
+void UpdateParticles(uint3 id : SV_DispatchThreadID)
+{
+    if (id.x >= (uint)particleCount) return;
+
+    Particle p = particles[id.x];
+
+    // Update physics
+    p.velocity += gravity * deltaTime;
+    p.position += p.velocity * deltaTime;
+
+    // Update life
+    p.life -= deltaTime;
+
+    // Respawn if dead
+    if (p.life <= 0)
+    {
+        p.position = float3(0, 0, 0);
+        p.velocity = float3(
+            (frac(sin(id.x * 12.9898) * 43758.5453) - 0.5) * 2,
+            frac(sin(id.x * 78.233) * 43758.5453) * 5 + 2,
+            (frac(sin(id.x * 45.164) * 43758.5453) - 0.5) * 2
+        );
+        p.life = 3.0;
+    }
+
+    particles[id.x] = p;
+}
+```
+
+## Unity Shader Graph
+
+### Custom Function Node
+```hlsl
+// Custom function for Shader Graph
+void Fresnel_float(
+    float3 Normal,
+    float3 ViewDir,
+    float Power,
+    out float Out)
+{
+    Out = pow(1.0 - saturate(dot(Normal, ViewDir)), Power);
+}
+
+void Triplanar_float(
+    Texture2D Tex,
+    SamplerState SS,
+    float3 Position,
+    float3 Normal,
+    float Blend,
+    out float4 Out)
+{
+    float3 bf = pow(abs(Normal), Blend);
+    bf /= dot(bf, 1.0);
+
+    float4 xAxis = SAMPLE_TEXTURE2D(Tex, SS, Position.yz);
+    float4 yAxis = SAMPLE_TEXTURE2D(Tex, SS, Position.xz);
+    float4 zAxis = SAMPLE_TEXTURE2D(Tex, SS, Position.xy);
+
+    Out = xAxis * bf.x + yAxis * bf.y + zAxis * bf.z;
+}
+```
+
+## Best Practices
+
+1. **Minimize Branching**: GPUs prefer uniform execution
+2. **Batch Draw Calls**: Combine similar materials
+3. **LOD Shaders**: Simpler shaders for distant objects
+4. **Profile GPU**: Use tools like RenderDoc
+5. **Fallbacks**: Provide simpler shader alternatives
+
+## Anti-Patterns
+
+- Complex math in fragment shader
+- Too many texture samples
+- Dynamic branching in loops
+- Ignoring precision (mobile)
+- No shader variants
+
+## When to Use
+
+- Custom visual styles
+- Performance-critical effects
+- GPU-accelerated computation
+- Unique rendering techniques
+- VFX and post-processing
+
+## When NOT to Use
+
+- Standard rendering suffices
+- Prototyping phase
+- No GPU expertise on team
+- Target hardware too weak