thanh-kit 2.5.0 → 2.5.2

package/templates/skills/shader/references/glsl-patterns-tiling-fract-matrices-transformations.md

@@ -0,0 +1,133 @@
+# Patterns in GLSL
+
+Create repeating patterns using tiling and coordinate transformations.
+
+## Basic Tiling with fract()
+
+```glsl
+// Tile space into grid
+vec2 tile(vec2 st, float n) {
+    return fract(st * n);
+}
+
+// Usage: 4x4 grid
+vec2 tiled = tile(st, 4.0);
+```
+
+## Grid with Cell Index
+
+```glsl
+// Get both cell index and position within cell
+vec2 grid(vec2 st, float n, out vec2 cellIndex) {
+    st *= n;
+    cellIndex = floor(st);
+    return fract(st);
+}
+
+// Usage
+vec2 idx;
+vec2 local = grid(st, 4.0, idx);
+```
+
+## Brick Pattern (Offset Rows)
+
+```glsl
+vec2 brickTile(vec2 st, float n) {
+    st *= n;
+    float row = floor(st.y);
+    st.x += mod(row, 2.0) * 0.5;  // Offset odd rows
+    return fract(st);
+}
+```
+
+## Hex Grid
+
+```glsl
+vec2 hexGrid(vec2 st, float scale) {
+    st *= scale;
+    vec2 r = vec2(1.0, 1.73205);  // sqrt(3)
+    vec2 h = r * 0.5;
+    vec2 a = mod(st, r) - h;
+    vec2 b = mod(st - h, r) - h;
+    return dot(a, a) < dot(b, b) ? a : b;
+}
+```
+
+## 2D Rotation Matrix
+
+```glsl
+mat2 rotate2d(float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    return mat2(c, -s, s, c);
+}
+
+// Rotate around center
+vec2 rotateAround(vec2 st, vec2 center, float angle) {
+    return rotate2d(angle) * (st - center) + center;
+}
+```
+
+## Scale Matrix
+
+```glsl
+mat2 scale2d(vec2 scale) {
+    return mat2(scale.x, 0.0, 0.0, scale.y);
+}
+
+vec2 scaleFrom(vec2 st, vec2 center, vec2 s) {
+    return scale2d(s) * (st - center) + center;
+}
+```
+
+## Checkerboard
+
+```glsl
+float checker(vec2 st, float n) {
+    st *= n;
+    vec2 idx = floor(st);
+    return mod(idx.x + idx.y, 2.0);
+}
+```
+
+## Stripes
+
+```glsl
+// Horizontal stripes
+float stripes(float y, float n) {
+    return step(0.5, fract(y * n));
+}
+
+// Diagonal stripes
+float diagonalStripes(vec2 st, float n, float angle) {
+    vec2 rotated = rotate2d(angle) * st;
+    return step(0.5, fract(rotated.x * n));
+}
+```
+
+## Polar Patterns
+
+```glsl
+// Convert to polar for radial patterns
+vec2 toPolar(vec2 st) {
+    vec2 pos = st - 0.5;
+    float r = length(pos) * 2.0;
+    float a = atan(pos.y, pos.x);
+    return vec2(r, a);
+}
+
+// Repeat around center
+float radialRepeat(vec2 st, float n) {
+    vec2 polar = toPolar(st);
+    polar.y = fract(polar.y * n / TWO_PI);
+    return polar.y;
+}
+
+// Spiral
+float spiral(vec2 st, float turns) {
+    vec2 polar = toPolar(st);
+    return fract(polar.x - polar.y * turns / TWO_PI);
+}
+```
+
+See also: `glsl-pattern-symmetry-truchet-domain-warping.md`

package/templates/skills/shader/references/glsl-procedural-textures-clouds-marble-wood-terrain.md

@@ -0,0 +1,144 @@
+# Procedural Textures
+
+Practical texture recipes using fBm and noise. See `glsl-fbm-fractional-brownian-motion-turbulence-octaves.md` for core functions.
+
+## Clouds
+
+```glsl
+vec3 clouds(vec2 st, float time) {
+    float n = fbm(st * 3.0 + vec2(time * 0.1, 0.0));
+    n = smoothstep(0.4, 0.6, n);
+    return mix(vec3(0.4, 0.6, 0.9), vec3(1.0), n);
+}
+```
+
+## Marble
+
+```glsl
+float marble(vec2 st) {
+    float n = fbm(st * 4.0);
+    return sin(st.x * 10.0 + n * 20.0) * 0.5 + 0.5;
+}
+
+vec3 marbleColor(vec2 st) {
+    float v = marble(st);
+    vec3 white = vec3(0.95);
+    vec3 gray = vec3(0.3);
+    return mix(gray, white, v);
+}
+```
+
+## Wood Grain
+
+```glsl
+float wood(vec2 st) {
+    float n = fbm(st * 2.0);
+    float grain = sin((st.x + n * 0.5) * 50.0) * 0.5 + 0.5;
+    return mix(0.3, 0.6, grain);
+}
+
+vec3 woodColor(vec2 st) {
+    float v = wood(st);
+    vec3 light = vec3(0.76, 0.60, 0.42);
+    vec3 dark = vec3(0.44, 0.30, 0.18);
+    return mix(dark, light, v);
+}
+```
+
+## Terrain Height
+
+```glsl
+float terrain(vec2 st) {
+    float h = fbm(st * 2.0);
+    h += ridged(st * 4.0) * 0.5;
+    return h;
+}
+
+vec3 terrainColor(vec2 st) {
+    float h = terrain(st);
+    vec3 water = vec3(0.1, 0.3, 0.5);
+    vec3 sand = vec3(0.76, 0.70, 0.50);
+    vec3 grass = vec3(0.2, 0.5, 0.2);
+    vec3 rock = vec3(0.5, 0.5, 0.5);
+    vec3 snow = vec3(1.0);
+
+    if (h < 0.3) return mix(water, sand, h / 0.3);
+    if (h < 0.5) return mix(sand, grass, (h - 0.3) / 0.2);
+    if (h < 0.7) return mix(grass, rock, (h - 0.5) / 0.2);
+    return mix(rock, snow, (h - 0.7) / 0.3);
+}
+```
+
+## Fire / Smoke
+
+```glsl
+vec3 fire(vec2 st, float time) {
+    vec2 q = st;
+    q.y -= time * 0.5;  // Rise
+
+    float n = turbulence(q * 3.0);
+    n *= smoothstep(1.0, 0.0, st.y);  // Fade at top
+
+    vec3 col = mix(vec3(1.0, 0.0, 0.0), vec3(1.0, 1.0, 0.0), n);
+    return col * n;
+}
+
+vec3 smoke(vec2 st, float time) {
+    vec2 q = st;
+    q.y -= time * 0.2;
+
+    float n = fbm(q * 4.0);
+    n *= smoothstep(1.0, 0.0, st.y);
+
+    return vec3(0.3 + n * 0.3) * n;
+}
+```
+
+## Water Caustics
+
+```glsl
+float caustics(vec2 st, float time) {
+    vec2 p = st * 8.0;
+    float c = 0.0;
+    for (int i = 0; i < 3; i++) {
+        float t = time * (0.5 + float(i) * 0.1);
+        c += abs(sin(p.x + sin(p.y + t)) * sin(p.y + sin(p.x + t * 1.3)));
+        p *= 1.5;
+    }
+    return c / 3.0;
+}
+```
+
+## Lava
+
+```glsl
+vec3 lava(vec2 st, float time) {
+    float n = warpedFbm(st + vec2(time * 0.05));
+    vec3 cold = vec3(0.1, 0.0, 0.0);
+    vec3 hot = vec3(1.0, 0.3, 0.0);
+    vec3 bright = vec3(1.0, 0.9, 0.3);
+    return mix(cold, mix(hot, bright, n), smoothstep(0.3, 0.7, n));
+}
+```
+
+## Grass/Fur
+
+```glsl
+float grass(vec2 st) {
+    float n = fbm(st * 20.0);
+    float blade = smoothstep(0.3, 0.5, n);
+    return blade * (0.8 + fbm(st * 5.0) * 0.2);
+}
+```
+
+## Stone/Rock
+
+```glsl
+vec3 stone(vec2 st) {
+    float n1 = fbm(st * 4.0);
+    float n2 = fbm(st * 8.0 + 5.0) * 0.5;
+    float crack = smoothstep(0.48, 0.52, n1);
+    vec3 base = vec3(0.5 + n2 * 0.2);
+    return mix(base * 0.7, base, crack);
+}
+```

package/templates/skills/shader/references/glsl-shader-builtin-functions-complete-api-reference.md

@@ -0,0 +1,112 @@
+# GLSL Built-in Functions Reference
+
+Complete reference for GLSL ES 1.0 / WebGL functions.
+
+## Trigonometric Functions
+
+| Function | Description | Range |
+|----------|-------------|-------|
+| `sin(x)` | Sine | [-1, 1] |
+| `cos(x)` | Cosine | [-1, 1] |
+| `tan(x)` | Tangent | unbounded |
+| `asin(x)` | Arc sine | [-PI/2, PI/2] |
+| `acos(x)` | Arc cosine | [0, PI] |
+| `atan(y, x)` | Arc tangent (quadrant-aware) | [-PI, PI] |
+| `atan(y_over_x)` | Arc tangent | [-PI/2, PI/2] |
+
+All accept float, vec2, vec3, vec4. Input in radians.
+
+## Exponential Functions
+
+| Function | Description |
+|----------|-------------|
+| `pow(x, y)` | x raised to power y |
+| `exp(x)` / `exp2(x)` | e^x / 2^x |
+| `log(x)` / `log2(x)` | Natural / Base-2 logarithm |
+| `sqrt(x)` / `inversesqrt(x)` | Square root / 1/sqrt(x) |
+
+## Common Functions
+
+| Function | Description |
+|----------|-------------|
+| `abs(x)` / `sign(x)` | Absolute value / -1, 0, or 1 |
+| `floor(x)` / `ceil(x)` | Round down / up |
+| `fract(x)` | x - floor(x) |
+| `mod(x, y)` | x - y * floor(x/y) |
+| `min(x, y)` / `max(x, y)` | Minimum / Maximum |
+| `clamp(x, min, max)` | Constrain to range |
+| `mix(a, b, t)` | Linear interpolation: a*(1-t) + b*t |
+| `step(edge, x)` | 0.0 if x < edge, else 1.0 |
+| `smoothstep(e0, e1, x)` | Hermite interpolation |
+
+## Geometric Functions
+
+| Function | Description |
+|----------|-------------|
+| `length(v)` / `distance(a, b)` | Magnitude / Distance |
+| `dot(a, b)` / `cross(a, b)` | Dot / Cross product |
+| `normalize(v)` | Unit vector |
+| `reflect(i, n)` / `refract(i, n, eta)` | Reflection / Refraction |
+
+## Vector Relational Functions
+
+`lessThan`, `lessThanEqual`, `greaterThan`, `greaterThanEqual`, `equal`, `notEqual` - Return bvec.
+`any(bvec)`, `all(bvec)`, `not(bvec)` - Boolean operations.
+
+## Texture Functions
+
+| Function | Description |
+|----------|-------------|
+| `texture2D(sampler, coord)` | Sample 2D texture |
+| `textureCube(sampler, coord)` | Sample cube map |
+
+## Constants
+
+```glsl
+#define PI 3.14159265359
+#define TWO_PI 6.28318530718
+#define HALF_PI 1.57079632679
+```
+
+## Type Constructors
+
+```glsl
+vec2(x), vec2(x, y)
+vec3(x), vec3(xy, z), vec3(x, y, z)
+vec4(x), vec4(xyz, w), vec4(xy, zw)
+mat2(a, b, c, d), mat3(...), mat4(...)
+```
+
+## Operators
+
+```glsl
++  -  *  /           // Arithmetic (component-wise)
+<  >  <=  >=  ==  != // Comparison
+&&  ||  !            // Logical
+mat * mat            // Matrix multiply
+mat * vec            // Transform vector
+```
+
+## Qualifiers
+
+```glsl
+attribute  // Vertex input
+uniform    // Constant across draw
+varying    // Interpolated vertex->fragment
+lowp / mediump / highp  // Precision
+in / out / inout / const // Parameters
+```
+
+## Built-in Variables
+
+```glsl
+// Fragment Shader
+vec4 gl_FragCoord;   // Window coordinates
+vec4 gl_FragColor;   // Output color (write only)
+bool gl_FrontFacing; // Front face?
+vec2 gl_PointCoord;  // Point sprite [0,1]
+
+// Vertex Shader
+vec4 gl_Position;    // Clip-space position
+float gl_PointSize;  // Point size
+```

package/templates/skills/shader/references/glsl-shapes-polygon-star-polar-sdf-combinations.md

@@ -0,0 +1,124 @@
+# Advanced Shapes & SDF Combinations
+
+Polygons, stars, polar shapes, and combining multiple SDFs.
+
+## Regular Polygon (N sides)
+
+```glsl
+float polygonSDF(vec2 st, vec2 center, float radius, int sides) {
+    st -= center;
+    float a = atan(st.y, st.x) + PI;
+    float r = TWO_PI / float(sides);
+    float d = cos(floor(0.5 + a / r) * r - a) * length(st);
+    return d - radius;
+}
+
+// Usage: hexagon
+float hex = polygonSDF(st, vec2(0.5), 0.3, 6);
+```
+
+## Star Shape
+
+```glsl
+float starSDF(vec2 st, vec2 center, float r1, float r2, int points) {
+    st -= center;
+    float a = atan(st.y, st.x);
+    float seg = TWO_PI / float(points);
+    a = mod(a, seg) - seg * 0.5;
+    float r = length(st);
+    float inner = r2 / cos(seg * 0.5);
+    float d = mix(r1, inner, step(0.0, a) * 2.0 - 1.0);
+    return r - d;
+}
+```
+
+## Polar Shapes
+
+```glsl
+// Convert to polar coordinates
+vec2 toPolar(vec2 st) {
+    vec2 pos = st - 0.5;
+    float r = length(pos) * 2.0;
+    float a = atan(pos.y, pos.x);
+    return vec2(r, a);
+}
+
+// Polar flower
+float flowerSDF(vec2 st, int petals, float amplitude) {
+    vec2 polar = toPolar(st);
+    float shape = 0.5 + amplitude * cos(float(petals) * polar.y);
+    return polar.x - shape;
+}
+
+// Gear shape
+float gearSDF(vec2 st, int teeth, float innerR, float outerR) {
+    vec2 polar = toPolar(st);
+    float tooth = step(0.5, fract(polar.y * float(teeth) / TWO_PI));
+    float radius = mix(innerR, outerR, tooth);
+    return polar.x - radius;
+}
+
+// Heart
+float heartSDF(vec2 st) {
+    st -= vec2(0.5, 0.4);
+    st.x *= 0.8;
+    float a = atan(st.x, st.y) / PI;
+    float r = length(st);
+    float h = abs(a);
+    float d = (13.0 * h - 22.0 * h * h + 10.0 * h * h * h) / (6.0 - 5.0 * h);
+    return r - d * 0.3;
+}
+```
+
+## Combining SDFs
+
+```glsl
+// Union (OR) - combine shapes
+float sdfUnion(float d1, float d2) {
+    return min(d1, d2);
+}
+
+// Intersection (AND) - overlap only
+float sdfIntersect(float d1, float d2) {
+    return max(d1, d2);
+}
+
+// Subtraction - cut out
+float sdfSubtract(float d1, float d2) {
+    return max(d1, -d2);
+}
+
+// XOR - either but not both
+float sdfXor(float d1, float d2) {
+    return max(min(d1, d2), -max(d1, d2));
+}
+```
+
+## Smooth Boolean Operations
+
+```glsl
+// Smooth union (blended edges)
+float sdfSmoothUnion(float d1, float d2, float k) {
+    float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);
+    return mix(d2, d1, h) - k * h * (1.0 - h);
+}
+
+// Smooth subtraction
+float sdfSmoothSubtract(float d1, float d2, float k) {
+    float h = clamp(0.5 - 0.5 * (d2 + d1) / k, 0.0, 1.0);
+    return mix(d1, -d2, h) + k * h * (1.0 - h);
+}
+
+// Smooth intersection
+float sdfSmoothIntersect(float d1, float d2, float k) {
+    float h = clamp(0.5 - 0.5 * (d2 - d1) / k, 0.0, 1.0);
+    return mix(d2, d1, h) + k * h * (1.0 - h);
+}
+```
+
+## SDF Modifications
+
+```glsl
+float ring(float d, float thickness) { return abs(d) - thickness; }
+float roundSDF(float d, float r) { return d - r; }
+```

package/templates/skills/shader/references/glsl-shapes-sdf-circles-rectangles-polar-distance-fields.md

@@ -0,0 +1,106 @@
+# Shapes in GLSL
+
+Drawing shapes using Signed Distance Fields (SDF) and distance calculations.
+
+## Distance Fields Concept
+
+SDF returns distance from any point to shape edge:
+- **Negative**: Inside shape
+- **Zero**: On edge
+- **Positive**: Outside shape
+
+## Circle
+
+```glsl
+// Basic circle
+float circle(vec2 st, vec2 center, float radius) {
+    float d = distance(st, center);
+    return 1.0 - step(radius, d);
+}
+
+// Smooth edge circle
+float circleSDF(vec2 st, vec2 center, float radius) {
+    return length(st - center) - radius;
+}
+
+// Usage
+float d = circleSDF(st, vec2(0.5), 0.3);
+vec3 color = vec3(1.0 - smoothstep(0.0, 0.01, d));
+```
+
+## Rectangle
+
+```glsl
+// Basic rectangle
+float rect(vec2 st, vec2 pos, vec2 size) {
+    vec2 bl = step(pos, st);
+    vec2 tr = step(1.0 - pos - size, 1.0 - st);
+    return bl.x * bl.y * tr.x * tr.y;
+}
+
+// Rectangle SDF
+float rectSDF(vec2 st, vec2 center, vec2 size) {
+    vec2 d = abs(st - center) - size * 0.5;
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+
+// Rounded rectangle SDF
+float roundedRectSDF(vec2 st, vec2 center, vec2 size, float radius) {
+    vec2 d = abs(st - center) - size * 0.5 + radius;
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0) - radius;
+}
+```
+
+## Line
+
+```glsl
+// Line segment SDF
+float lineSDF(vec2 p, vec2 a, vec2 b) {
+    vec2 pa = p - a;
+    vec2 ba = b - a;
+    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return length(pa - ba * h);
+}
+
+// Draw line with thickness
+float line(vec2 st, vec2 a, vec2 b, float thickness) {
+    float d = lineSDF(st, a, b);
+    return 1.0 - smoothstep(0.0, thickness, d);
+}
+```
+
+## Shape Outlines
+
+```glsl
+// Outline only
+float outline(float d, float thickness) {
+    return 1.0 - smoothstep(0.0, thickness, abs(d));
+}
+
+// Fill with outline
+vec3 fillWithOutline(float d, vec3 fill, vec3 stroke, float thick) {
+    float fillMask = 1.0 - smoothstep(0.0, 0.01, d);
+    float edge = 1.0 - smoothstep(0.0, thick, abs(d));
+    return mix(fill * fillMask, stroke, edge * (1.0 - fillMask));
+}
+```
+
+## 2D Transformations
+
+```glsl
+// Rotate point around center
+vec2 rotate(vec2 st, vec2 center, float angle) {
+    st -= center;
+    float c = cos(angle);
+    float s = sin(angle);
+    st = mat2(c, -s, s, c) * st;
+    return st + center;
+}
+
+// Scale from center
+vec2 scale(vec2 st, vec2 center, vec2 s) {
+    return (st - center) / s + center;
+}
+```
+
+See also: `glsl-shapes-polygon-star-polar-sdf-combinations.md`