[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-minimax-shader-dev":3,"mdc--a15z7v-key":37,"related-org-minimax-shader-dev":3215,"related-repo-minimax-shader-dev":3408},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"shader-dev","create visual effects with GLSL shaders","Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"minimax","MiniMax","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fminimax.jpg","MiniMax-AI",[13,17,20,23],{"name":14,"slug":15,"type":16},"Graphics","graphics","tag",{"name":18,"slug":19,"type":16},"Creative","creative",{"name":21,"slug":22,"type":16},"Animation","animation",{"name":24,"slug":25,"type":16},"Design","design",13030,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills","2026-07-16T06:02:05.645449","MIT",1118,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],null,"https:\u002F\u002Fgithub.com\u002FMiniMax-AI\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fshader-dev","---\nname: shader-dev\ndescription: Comprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.\nlicense: MIT\nmetadata:\n  version: \"1.0\"\n  category: graphics\n---\n\n# Shader Craft\n\nA unified skill covering 36 GLSL shader techniques (ShaderToy-compatible) for real-time visual effects.\n\n## Invocation\n\n```\n\u002Fshader-dev \u003Crequest>\n```\n\n`$ARGUMENTS` contains the user's request (e.g. \"create a raymarched SDF scene with soft shadows\").\n\n## Skill Structure\n\n```\nshader-dev\u002F\n├── SKILL.md                      # Core skill (this file)\n├── techniques\u002F                   # Implementation guides (read per routing table)\n│   ├── ray-marching.md           # Sphere tracing with SDF\n│   ├── sdf-3d.md                 # 3D signed distance functions\n│   ├── lighting-model.md         # PBR, Phong, toon shading\n│   ├── procedural-noise.md       # Perlin, Simplex, FBM\n│   └── ...                       # 34 more technique files\n└── reference\u002F                    # Detailed guides (read as needed)\n    ├── ray-marching.md           # Math derivations & advanced patterns\n    ├── sdf-3d.md                 # Extended SDF theory\n    ├── lighting-model.md         # Lighting math deep-dive\n    ├── procedural-noise.md       # Noise function theory\n    └── ...                       # 34 more reference files\n```\n\n## How to Use\n\n1. Read the **Technique Routing Table** below to identify which technique(s) match the user's request\n2. Read the relevant file(s) from `techniques\u002F` — each file contains core principles, implementation steps, and complete code templates\n3. If you need deeper understanding (math derivations, advanced patterns), follow the reference link at the bottom of each technique file to `reference\u002F`\n4. Apply the **WebGL2 Adaptation Rules** below when generating standalone HTML pages\n\n## Technique Routing Table\n\n| User wants to create... | Primary technique | Combine with |\n|---|---|---|\n| 3D objects \u002F scenes from math | [ray-marching](techniques\u002Fray-marching.md) + [sdf-3d](techniques\u002Fsdf-3d.md) | lighting-model, shadow-techniques |\n| Complex 3D shapes (booleans, blends) | [csg-boolean-operations](techniques\u002Fcsg-boolean-operations.md) | sdf-3d, ray-marching |\n| Infinite repeating patterns in 3D | [domain-repetition](techniques\u002Fdomain-repetition.md) | sdf-3d, ray-marching |\n| Organic \u002F warped shapes | [domain-warping](techniques\u002Fdomain-warping.md) | procedural-noise |\n| Fluid \u002F smoke \u002F ink effects | [fluid-simulation](techniques\u002Ffluid-simulation.md) | multipass-buffer |\n| Particle effects (fire, sparks, snow) | [particle-system](techniques\u002Fparticle-system.md) | procedural-noise, color-palette |\n| Physically-based simulations | [simulation-physics](techniques\u002Fsimulation-physics.md) | multipass-buffer |\n| Game of Life \u002F reaction-diffusion | [cellular-automata](techniques\u002Fcellular-automata.md) | multipass-buffer, color-palette |\n| Ocean \u002F water surface | [water-ocean](techniques\u002Fwater-ocean.md) | atmospheric-scattering, lighting-model |\n| Terrain \u002F landscape | [terrain-rendering](techniques\u002Fterrain-rendering.md) | atmospheric-scattering, procedural-noise |\n| Clouds \u002F fog \u002F volumetric fire | [volumetric-rendering](techniques\u002Fvolumetric-rendering.md) | procedural-noise, atmospheric-scattering |\n| Sky \u002F sunset \u002F atmosphere | [atmospheric-scattering](techniques\u002Fatmospheric-scattering.md) | volumetric-rendering |\n| Realistic lighting (PBR, Phong) | [lighting-model](techniques\u002Flighting-model.md) | shadow-techniques, ambient-occlusion |\n| Shadows (soft \u002F hard) | [shadow-techniques](techniques\u002Fshadow-techniques.md) | lighting-model |\n| Ambient occlusion | [ambient-occlusion](techniques\u002Fambient-occlusion.md) | lighting-model, normal-estimation |\n| Path tracing \u002F global illumination | [path-tracing-gi](techniques\u002Fpath-tracing-gi.md) | analytic-ray-tracing, multipass-buffer |\n| Precise ray-geometry intersections | [analytic-ray-tracing](techniques\u002Fanalytic-ray-tracing.md) | lighting-model |\n| Voxel worlds (Minecraft-style) | [voxel-rendering](techniques\u002Fvoxel-rendering.md) | lighting-model, shadow-techniques |\n| Noise \u002F FBM textures | [procedural-noise](techniques\u002Fprocedural-noise.md) | domain-warping |\n| Tiled 2D patterns | [procedural-2d-pattern](techniques\u002Fprocedural-2d-pattern.md) | polar-uv-manipulation |\n| Voronoi \u002F cell patterns | [voronoi-cellular-noise](techniques\u002Fvoronoi-cellular-noise.md) | color-palette |\n| Fractals (Mandelbrot, Julia, 3D) | [fractal-rendering](techniques\u002Ffractal-rendering.md) | color-palette, polar-uv-manipulation |\n| Color grading \u002F palettes | [color-palette](techniques\u002Fcolor-palette.md) | — |\n| Bloom \u002F tone mapping \u002F glitch | [post-processing](techniques\u002Fpost-processing.md) | multipass-buffer |\n| Multi-pass ping-pong buffers | [multipass-buffer](techniques\u002Fmultipass-buffer.md) | — |\n| Texture \u002F sampling techniques | [texture-sampling](techniques\u002Ftexture-sampling.md) | — |\n| Camera \u002F matrix transforms | [matrix-transform](techniques\u002Fmatrix-transform.md) | — |\n| Surface normals | [normal-estimation](techniques\u002Fnormal-estimation.md) | — |\n| Polar coords \u002F kaleidoscope | [polar-uv-manipulation](techniques\u002Fpolar-uv-manipulation.md) | procedural-2d-pattern |\n| 2D shapes \u002F UI from SDF | [sdf-2d](techniques\u002Fsdf-2d.md) | color-palette |\n| Procedural audio \u002F music | [sound-synthesis](techniques\u002Fsound-synthesis.md) | — |\n| SDF tricks \u002F optimization | [sdf-tricks](techniques\u002Fsdf-tricks.md) | sdf-3d, ray-marching |\n| Anti-aliased rendering | [anti-aliasing](techniques\u002Fanti-aliasing.md) | sdf-2d, post-processing |\n| Depth of field \u002F motion blur \u002F lens effects | [camera-effects](techniques\u002Fcamera-effects.md) | post-processing, multipass-buffer |\n| Advanced texture mapping \u002F no-tile textures | [texture-mapping-advanced](techniques\u002Ftexture-mapping-advanced.md) | terrain-rendering, texture-sampling |\n| WebGL2 shader errors \u002F debugging | [webgl-pitfalls](techniques\u002Fwebgl-pitfalls.md) | — |\n\n## Technique Index\n\n### Geometry & SDF\n- **sdf-2d** — 2D signed distance functions for shapes, UI, anti-aliased rendering\n- **sdf-3d** — 3D signed distance functions for real-time implicit surface modeling\n- **csg-boolean-operations** — Constructive solid geometry: union, subtraction, intersection with smooth blending\n- **domain-repetition** — Infinite space repetition, folding, and limited tiling\n- **domain-warping** — Distort domains with noise for organic, flowing shapes\n- **sdf-tricks** — SDF optimization, bounding volumes, binary search refinement, hollowing, layered edges, debug visualization\n\n### Ray Casting & Lighting\n- **ray-marching** — Sphere tracing with SDF for 3D scene rendering\n- **analytic-ray-tracing** — Closed-form ray-primitive intersections (sphere, plane, box, torus)\n- **path-tracing-gi** — Monte Carlo path tracing for photorealistic global illumination\n- **lighting-model** — Phong, Blinn-Phong, PBR (Cook-Torrance), and toon shading\n- **shadow-techniques** — Hard shadows, soft shadows (penumbra estimation), cascade shadows\n- **ambient-occlusion** — SDF-based AO, screen-space AO approximation\n- **normal-estimation** — Finite-difference normals, tetrahedron technique\n\n### Simulation & Physics\n- **fluid-simulation** — Navier-Stokes fluid solver with advection, diffusion, pressure projection\n- **simulation-physics** — GPU-based physics: springs, cloth, N-body gravity, collision\n- **particle-system** — Stateless and stateful particle systems (fire, rain, sparks, galaxies)\n- **cellular-automata** — Game of Life, reaction-diffusion (Turing patterns), sand simulation\n\n### Natural Phenomena\n- **water-ocean** — Gerstner waves, FFT ocean, caustics, underwater fog\n- **terrain-rendering** — Heightfield ray marching, FBM terrain, erosion\n- **atmospheric-scattering** — Rayleigh\u002FMie scattering, god rays, SSS approximation\n- **volumetric-rendering** — Volume ray marching for clouds, fog, fire, explosions\n\n### Procedural Generation\n- **procedural-noise** — Value noise, Perlin, Simplex, Worley, FBM, ridged noise\n- **procedural-2d-pattern** — Brick, hexagon, truchet, Islamic geometric patterns\n- **voronoi-cellular-noise** — Voronoi diagrams, Worley noise, cracked earth, crystal\n- **fractal-rendering** — Mandelbrot, Julia sets, 3D fractals (Mandelbox, Mandelbulb)\n- **color-palette** — Cosine palettes, HSL\u002FHSV\u002FOklab, dynamic color mapping\n\n### Post-Processing & Infrastructure\n- **post-processing** — Bloom, tone mapping (ACES, Reinhard), vignette, chromatic aberration, glitch\n- **multipass-buffer** — Ping-pong FBO setup, state persistence across frames\n- **texture-sampling** — Bilinear, bicubic, mipmap, procedural texture lookup\n- **matrix-transform** — Camera look-at, projection, rotation, orbit controls\n- **polar-uv-manipulation** — Polar\u002Flog-polar coordinates, kaleidoscope, spiral mapping\n- **anti-aliasing** — SSAA, SDF analytical AA, temporal anti-aliasing (TAA), FXAA post-process\n- **camera-effects** — Depth of field (thin lens), motion blur, lens distortion, film grain, vignette\n- **texture-mapping-advanced** — Biplanar mapping, texture repetition avoidance, ray differential filtering\n\n### Audio\n- **sound-synthesis** — Procedural audio in GLSL: oscillators, envelopes, filters, FM synthesis\n\n### Debugging & Validation\n- **webgl-pitfalls** — Common WebGL2\u002FGLSL errors: `fragCoord`, `main()` wrapper, function order, macro limitations, uniform null\n\n## WebGL2 Adaptation Rules\n\nAll technique files use ShaderToy GLSL style. When generating standalone HTML pages, apply these adaptations:\n\n### Shader Version & Output\n- Use `canvas.getContext(\"webgl2\")`\n- Shader first line: `#version 300 es`, fragment shader adds `precision highp float;`\n- Fragment shader must declare: `out vec4 fragColor;`\n- Vertex shader: `attribute` → `in`, `varying` → `out`\n- Fragment shader: `varying` → `in`, `gl_FragColor` → `fragColor`, `texture2D()` → `texture()`\n\n### Fragment Coordinate\n- **Use `gl_FragCoord.xy`** instead of `fragCoord` (WebGL2 does not have `fragCoord` built-in)\n```glsl\n\u002F\u002F WRONG\nvec2 uv = (2.0 * fragCoord - iResolution.xy) \u002F iResolution.y;\n\u002F\u002F CORRECT\nvec2 uv = (2.0 * gl_FragCoord.xy - iResolution.xy) \u002F iResolution.y;\n```\n\n### main() Wrapper for ShaderToy Templates\n- ShaderToy uses `void mainImage(out vec4 fragColor, in vec2 fragCoord)`\n- WebGL2 requires standard `void main()` entry point — always wrap mainImage:\n```glsl\nvoid mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    \u002F\u002F shader code...\n    fragColor = vec4(col, 1.0);\n}\n\nvoid main() {\n    mainImage(fragColor, gl_FragCoord.xy);\n}\n```\n\n### Function Declaration Order\n- GLSL requires functions to be declared before use — either declare before use or reorder:\n```glsl\n\u002F\u002F WRONG — getAtmosphere() calls getSunDirection() before it's defined\nvec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Error!\nvec3 getSunDirection() { return normalize(vec3(1.0)); }\n\n\u002F\u002F CORRECT — define callee first\nvec3 getSunDirection() { return normalize(vec3(1.0)); }\nvec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Works\n```\n\n### Macro Limitations\n- `#define` cannot use function calls — use `const` instead:\n```glsl\n\u002F\u002F WRONG\n#define SUN_DIR normalize(vec3(0.8, 0.4, -0.6))\n\n\u002F\u002F CORRECT\nconst vec3 SUN_DIR = vec3(0.756, 0.378, -0.567); \u002F\u002F Pre-computed normalized value\n```\n\n### Script Tag Extraction\n- When extracting shader source from `\u003Cscript>` tags, ensure `#version` is the **first character** — use `.trim()`:\n```javascript\nconst fs = document.getElementById('fs').text.trim();\n```\n\n### Common Pitfalls\n- **Unused uniforms**: Compiler may optimize away unused uniforms, causing `gl.getUniformLocation()` to return `null` — always use uniforms in a way the compiler cannot optimize out\n- **Loop indices**: Use runtime constants in loops, not `#define` macros in some ES versions\n- **Terrain functions**: Functions like `terrainM(vec2)` need XZ components — use `terrainM(pos.xz + offset)` not `terrainM(pos + offset)`\n\n## HTML Page Setup\n\nWhen generating a standalone HTML page:\n\n- Canvas fills the entire viewport, auto-resizes on window resize\n- Page background black, no scrollbars: `body { margin: 0; overflow: hidden; background: #000; }`\n- Implement ShaderToy-compatible uniforms: `iTime`, `iResolution`, `iMouse`, `iFrame`\n- For multi-pass effects (Buffer A\u002FB), use WebGL2 framebuffer + ping-pong (see multipass-buffer technique)\n\n## Common Pitfalls\n\n### JS Variable Declaration Order (TDZ — causes white screen crash)\n\n`let`\u002F`const` variables must be declared at the **top** of the `\u003Cscript>` block, before any function that references them:\n\n```javascript\n\u002F\u002F 1. State variables FIRST\nlet frameCount = 0;\nlet startTime = Date.now();\n\n\u002F\u002F 2. Canvas\u002FGL init, shader compile, FBO creation\nconst canvas = document.getElementById('canvas');\nconst gl = canvas.getContext('webgl2');\n\u002F\u002F ...\n\n\u002F\u002F 3. Functions and event bindings LAST\nfunction resize() { \u002F* can now safely reference frameCount *\u002F }\nfunction render() { \u002F* ... *\u002F }\nwindow.addEventListener('resize', resize);\n```\n\nReason: `let`\u002F`const` have a Temporal Dead Zone — referencing them before declaration throws `ReferenceError`, causing a white screen.\n\n### GLSL Compilation Errors (self-check after writing shaders)\n\n- **Function signature mismatch**: Call must exactly match definition in parameter count and types. If defined as `float fbm(vec3 p)`, cannot call `fbm(uv)` with a `vec2`\n- **Reserved words as variable names**: Do not use: `patch`, `cast`, `sample`, `filter`, `input`, `output`, `common`, `partition`, `active`\n- **Strict type matching**: `vec3 x = 1.0` is illegal — use `vec3 x = vec3(1.0)`; cannot use `.z` to access a `vec2`\n- **No ternary on structs**: ESSL does not allow ternary operator on struct types — use `if`\u002F`else` instead\n\n### Performance Budget\n\nDeployment environments may use headless software rendering with limited GPU power. Stay within these limits:\n\n- Ray marching main loop: ≤ 128 steps\n- Volume sampling \u002F lighting inner loops: ≤ 32 steps\n- FBM octaves: ≤ 6 layers\n- Total nested loop iterations per pixel: ≤ 1000 (exceeding this freezes the browser)\n\n## Quick Recipes\n\nCommon effect combinations — complete rendering pipelines assembled from technique modules.\n\n### Photorealistic SDF Scene\n1. **Geometry**: sdf-3d (extended primitives) + csg-boolean-operations (cubic\u002Fquartic smin)\n2. **Rendering**: ray-marching + normal-estimation (tetrahedron method)\n3. **Lighting**: lighting-model (outdoor three-light model) + shadow-techniques (improved soft shadow) + ambient-occlusion\n4. **Atmosphere**: atmospheric-scattering (height-based fog with sun tint)\n5. **Post**: post-processing (ACES tone mapping) + anti-aliasing (2x SSAA) + camera-effects (vignette)\n\n### Organic \u002F Biological Forms\n1. **Geometry**: sdf-3d (extended primitives + deformation operators: twist, bend) + csg-boolean (gradient-aware smin for material blending)\n2. **Detail**: procedural-noise (FBM with derivatives) + domain-warping\n3. **Surface**: lighting-model (subsurface scattering approximation via half-Lambert)\n\n### Procedural Landscape\n1. **Terrain**: terrain-rendering + procedural-noise (erosion FBM with derivatives)\n2. **Texturing**: texture-mapping-advanced (biplanar mapping + no-tile)\n3. **Sky**: atmospheric-scattering (Rayleigh\u002FMie + height fog)\n4. **Water**: water-ocean (Gerstner waves) + lighting-model (Fresnel reflections)\n\n### Stylized 2D Art\n1. **Shapes**: sdf-2d (extended library) + sdf-tricks (layered edges, hollowing)\n2. **Color**: color-palette (cosine palettes) + polar-uv-manipulation (kaleidoscope)\n3. **Polish**: anti-aliasing (SDF analytical AA) + post-processing (bloom, chromatic aberration)\n\n## Shader Debugging Techniques\n\nVisual debugging methods — temporarily replace your output to diagnose issues.\n\n| What to check | Code | What to look for |\n|---|---|---|\n| Surface normals | `col = nor * 0.5 + 0.5;` | Smooth gradients = correct normals; banding = epsilon too large |\n| Ray march step count | `col = vec3(float(steps) \u002F float(MAX_STEPS));` | Red hotspots = performance bottleneck; uniform = wasted iterations |\n| Depth \u002F distance | `col = vec3(t \u002F MAX_DIST);` | Verify correct hit distances |\n| UV coordinates | `col = vec3(uv, 0.0);` | Check coordinate mapping |\n| SDF distance field | `col = (d > 0.0 ? vec3(0.9,0.6,0.3) : vec3(0.4,0.7,0.85)) * (0.8 + 0.2*cos(150.0*d));` | Visualize SDF bands and zero-crossing |\n| Checker pattern (UV) | `col = vec3(mod(floor(uv.x*10.)+floor(uv.y*10.), 2.0));` | Verify UV distortion, seams |\n| Lighting only | `col = vec3(shadow);` or `col = vec3(ao);` | Isolate shadow\u002FAO contributions |\n| Material ID | `col = palette(matId \u002F maxMatId);` | Verify material assignment |\n",{"data":38,"body":41},{"name":4,"description":6,"license":29,"metadata":39},{"version":40,"category":15},"1.0",{"type":42,"children":43},"root",[44,53,59,66,79,90,96,105,111,165,170,983,989,996,1054,1060,1126,1131,1170,1176,1215,1221,1269,1275,1350,1356,1368,1374,1402,1407,1412,1418,1539,1545,1577,1624,1630,1657,1732,1738,1746,1807,1813,1835,1879,1885,1924,2021,2027,2105,2111,2116,2172,2177,2183,2215,2555,2581,2587,2758,2764,2769,2792,2798,2803,2809,2862,2868,2900,2906,2949,2955,2988,2994,2999,3209],{"type":45,"tag":46,"props":47,"children":49},"element","h1",{"id":48},"shader-craft",[50],{"type":51,"value":52},"text","Shader Craft",{"type":45,"tag":54,"props":55,"children":56},"p",{},[57],{"type":51,"value":58},"A unified skill covering 36 GLSL shader techniques (ShaderToy-compatible) for real-time visual effects.",{"type":45,"tag":60,"props":61,"children":63},"h2",{"id":62},"invocation",[64],{"type":51,"value":65},"Invocation",{"type":45,"tag":67,"props":68,"children":72},"pre",{"className":69,"code":71,"language":51},[70],"language-text","\u002Fshader-dev \u003Crequest>\n",[73],{"type":45,"tag":74,"props":75,"children":77},"code",{"__ignoreMap":76},"",[78],{"type":51,"value":71},{"type":45,"tag":54,"props":80,"children":81},{},[82,88],{"type":45,"tag":74,"props":83,"children":85},{"className":84},[],[86],{"type":51,"value":87},"$ARGUMENTS",{"type":51,"value":89}," contains the user's request (e.g. \"create a raymarched SDF scene with soft shadows\").",{"type":45,"tag":60,"props":91,"children":93},{"id":92},"skill-structure",[94],{"type":51,"value":95},"Skill Structure",{"type":45,"tag":67,"props":97,"children":100},{"className":98,"code":99,"language":51},[70],"shader-dev\u002F\n├── SKILL.md                      # Core skill (this file)\n├── techniques\u002F                   # Implementation guides (read per routing table)\n│   ├── ray-marching.md           # Sphere tracing with SDF\n│   ├── sdf-3d.md                 # 3D signed distance functions\n│   ├── lighting-model.md         # PBR, Phong, toon shading\n│   ├── procedural-noise.md       # Perlin, Simplex, FBM\n│   └── ...                       # 34 more technique files\n└── reference\u002F                    # Detailed guides (read as needed)\n    ├── ray-marching.md           # Math derivations & advanced patterns\n    ├── sdf-3d.md                 # Extended SDF theory\n    ├── lighting-model.md         # Lighting math deep-dive\n    ├── procedural-noise.md       # Noise function theory\n    └── ...                       # 34 more reference files\n",[101],{"type":45,"tag":74,"props":102,"children":103},{"__ignoreMap":76},[104],{"type":51,"value":99},{"type":45,"tag":60,"props":106,"children":108},{"id":107},"how-to-use",[109],{"type":51,"value":110},"How to Use",{"type":45,"tag":112,"props":113,"children":114},"ol",{},[115,129,142,153],{"type":45,"tag":116,"props":117,"children":118},"li",{},[119,121,127],{"type":51,"value":120},"Read the ",{"type":45,"tag":122,"props":123,"children":124},"strong",{},[125],{"type":51,"value":126},"Technique Routing Table",{"type":51,"value":128}," below to identify which technique(s) match the user's request",{"type":45,"tag":116,"props":130,"children":131},{},[132,134,140],{"type":51,"value":133},"Read the relevant file(s) from ",{"type":45,"tag":74,"props":135,"children":137},{"className":136},[],[138],{"type":51,"value":139},"techniques\u002F",{"type":51,"value":141}," — each file contains core principles, implementation steps, and complete code templates",{"type":45,"tag":116,"props":143,"children":144},{},[145,147],{"type":51,"value":146},"If you need deeper understanding (math derivations, advanced patterns), follow the reference link at the bottom of each technique file to ",{"type":45,"tag":74,"props":148,"children":150},{"className":149},[],[151],{"type":51,"value":152},"reference\u002F",{"type":45,"tag":116,"props":154,"children":155},{},[156,158,163],{"type":51,"value":157},"Apply the ",{"type":45,"tag":122,"props":159,"children":160},{},[161],{"type":51,"value":162},"WebGL2 Adaptation Rules",{"type":51,"value":164}," below when generating standalone HTML pages",{"type":45,"tag":60,"props":166,"children":168},{"id":167},"technique-routing-table",[169],{"type":51,"value":126},{"type":45,"tag":171,"props":172,"children":173},"table",{},[174,198],{"type":45,"tag":175,"props":176,"children":177},"thead",{},[178],{"type":45,"tag":179,"props":180,"children":181},"tr",{},[182,188,193],{"type":45,"tag":183,"props":184,"children":185},"th",{},[186],{"type":51,"value":187},"User wants to create...",{"type":45,"tag":183,"props":189,"children":190},{},[191],{"type":51,"value":192},"Primary technique",{"type":45,"tag":183,"props":194,"children":195},{},[196],{"type":51,"value":197},"Combine with",{"type":45,"tag":199,"props":200,"children":201},"tbody",{},[202,234,256,277,299,321,343,364,386,408,430,452,473,495,516,538,560,581,602,622,644,666,688,709,730,750,771,792,813,833,854,875,896,918,940,962],{"type":45,"tag":179,"props":203,"children":204},{},[205,211,229],{"type":45,"tag":206,"props":207,"children":208},"td",{},[209],{"type":51,"value":210},"3D objects \u002F scenes from math",{"type":45,"tag":206,"props":212,"children":213},{},[214,221,223],{"type":45,"tag":215,"props":216,"children":218},"a",{"href":217},"techniques\u002Fray-marching.md",[219],{"type":51,"value":220},"ray-marching",{"type":51,"value":222}," + ",{"type":45,"tag":215,"props":224,"children":226},{"href":225},"techniques\u002Fsdf-3d.md",[227],{"type":51,"value":228},"sdf-3d",{"type":45,"tag":206,"props":230,"children":231},{},[232],{"type":51,"value":233},"lighting-model, shadow-techniques",{"type":45,"tag":179,"props":235,"children":236},{},[237,242,251],{"type":45,"tag":206,"props":238,"children":239},{},[240],{"type":51,"value":241},"Complex 3D shapes (booleans, blends)",{"type":45,"tag":206,"props":243,"children":244},{},[245],{"type":45,"tag":215,"props":246,"children":248},{"href":247},"techniques\u002Fcsg-boolean-operations.md",[249],{"type":51,"value":250},"csg-boolean-operations",{"type":45,"tag":206,"props":252,"children":253},{},[254],{"type":51,"value":255},"sdf-3d, ray-marching",{"type":45,"tag":179,"props":257,"children":258},{},[259,264,273],{"type":45,"tag":206,"props":260,"children":261},{},[262],{"type":51,"value":263},"Infinite repeating patterns in 3D",{"type":45,"tag":206,"props":265,"children":266},{},[267],{"type":45,"tag":215,"props":268,"children":270},{"href":269},"techniques\u002Fdomain-repetition.md",[271],{"type":51,"value":272},"domain-repetition",{"type":45,"tag":206,"props":274,"children":275},{},[276],{"type":51,"value":255},{"type":45,"tag":179,"props":278,"children":279},{},[280,285,294],{"type":45,"tag":206,"props":281,"children":282},{},[283],{"type":51,"value":284},"Organic \u002F warped shapes",{"type":45,"tag":206,"props":286,"children":287},{},[288],{"type":45,"tag":215,"props":289,"children":291},{"href":290},"techniques\u002Fdomain-warping.md",[292],{"type":51,"value":293},"domain-warping",{"type":45,"tag":206,"props":295,"children":296},{},[297],{"type":51,"value":298},"procedural-noise",{"type":45,"tag":179,"props":300,"children":301},{},[302,307,316],{"type":45,"tag":206,"props":303,"children":304},{},[305],{"type":51,"value":306},"Fluid \u002F smoke \u002F ink effects",{"type":45,"tag":206,"props":308,"children":309},{},[310],{"type":45,"tag":215,"props":311,"children":313},{"href":312},"techniques\u002Ffluid-simulation.md",[314],{"type":51,"value":315},"fluid-simulation",{"type":45,"tag":206,"props":317,"children":318},{},[319],{"type":51,"value":320},"multipass-buffer",{"type":45,"tag":179,"props":322,"children":323},{},[324,329,338],{"type":45,"tag":206,"props":325,"children":326},{},[327],{"type":51,"value":328},"Particle effects (fire, sparks, snow)",{"type":45,"tag":206,"props":330,"children":331},{},[332],{"type":45,"tag":215,"props":333,"children":335},{"href":334},"techniques\u002Fparticle-system.md",[336],{"type":51,"value":337},"particle-system",{"type":45,"tag":206,"props":339,"children":340},{},[341],{"type":51,"value":342},"procedural-noise, color-palette",{"type":45,"tag":179,"props":344,"children":345},{},[346,351,360],{"type":45,"tag":206,"props":347,"children":348},{},[349],{"type":51,"value":350},"Physically-based simulations",{"type":45,"tag":206,"props":352,"children":353},{},[354],{"type":45,"tag":215,"props":355,"children":357},{"href":356},"techniques\u002Fsimulation-physics.md",[358],{"type":51,"value":359},"simulation-physics",{"type":45,"tag":206,"props":361,"children":362},{},[363],{"type":51,"value":320},{"type":45,"tag":179,"props":365,"children":366},{},[367,372,381],{"type":45,"tag":206,"props":368,"children":369},{},[370],{"type":51,"value":371},"Game of Life \u002F reaction-diffusion",{"type":45,"tag":206,"props":373,"children":374},{},[375],{"type":45,"tag":215,"props":376,"children":378},{"href":377},"techniques\u002Fcellular-automata.md",[379],{"type":51,"value":380},"cellular-automata",{"type":45,"tag":206,"props":382,"children":383},{},[384],{"type":51,"value":385},"multipass-buffer, color-palette",{"type":45,"tag":179,"props":387,"children":388},{},[389,394,403],{"type":45,"tag":206,"props":390,"children":391},{},[392],{"type":51,"value":393},"Ocean \u002F water surface",{"type":45,"tag":206,"props":395,"children":396},{},[397],{"type":45,"tag":215,"props":398,"children":400},{"href":399},"techniques\u002Fwater-ocean.md",[401],{"type":51,"value":402},"water-ocean",{"type":45,"tag":206,"props":404,"children":405},{},[406],{"type":51,"value":407},"atmospheric-scattering, lighting-model",{"type":45,"tag":179,"props":409,"children":410},{},[411,416,425],{"type":45,"tag":206,"props":412,"children":413},{},[414],{"type":51,"value":415},"Terrain \u002F landscape",{"type":45,"tag":206,"props":417,"children":418},{},[419],{"type":45,"tag":215,"props":420,"children":422},{"href":421},"techniques\u002Fterrain-rendering.md",[423],{"type":51,"value":424},"terrain-rendering",{"type":45,"tag":206,"props":426,"children":427},{},[428],{"type":51,"value":429},"atmospheric-scattering, procedural-noise",{"type":45,"tag":179,"props":431,"children":432},{},[433,438,447],{"type":45,"tag":206,"props":434,"children":435},{},[436],{"type":51,"value":437},"Clouds \u002F fog \u002F volumetric fire",{"type":45,"tag":206,"props":439,"children":440},{},[441],{"type":45,"tag":215,"props":442,"children":444},{"href":443},"techniques\u002Fvolumetric-rendering.md",[445],{"type":51,"value":446},"volumetric-rendering",{"type":45,"tag":206,"props":448,"children":449},{},[450],{"type":51,"value":451},"procedural-noise, atmospheric-scattering",{"type":45,"tag":179,"props":453,"children":454},{},[455,460,469],{"type":45,"tag":206,"props":456,"children":457},{},[458],{"type":51,"value":459},"Sky \u002F sunset \u002F atmosphere",{"type":45,"tag":206,"props":461,"children":462},{},[463],{"type":45,"tag":215,"props":464,"children":466},{"href":465},"techniques\u002Fatmospheric-scattering.md",[467],{"type":51,"value":468},"atmospheric-scattering",{"type":45,"tag":206,"props":470,"children":471},{},[472],{"type":51,"value":446},{"type":45,"tag":179,"props":474,"children":475},{},[476,481,490],{"type":45,"tag":206,"props":477,"children":478},{},[479],{"type":51,"value":480},"Realistic lighting (PBR, Phong)",{"type":45,"tag":206,"props":482,"children":483},{},[484],{"type":45,"tag":215,"props":485,"children":487},{"href":486},"techniques\u002Flighting-model.md",[488],{"type":51,"value":489},"lighting-model",{"type":45,"tag":206,"props":491,"children":492},{},[493],{"type":51,"value":494},"shadow-techniques, ambient-occlusion",{"type":45,"tag":179,"props":496,"children":497},{},[498,503,512],{"type":45,"tag":206,"props":499,"children":500},{},[501],{"type":51,"value":502},"Shadows (soft \u002F hard)",{"type":45,"tag":206,"props":504,"children":505},{},[506],{"type":45,"tag":215,"props":507,"children":509},{"href":508},"techniques\u002Fshadow-techniques.md",[510],{"type":51,"value":511},"shadow-techniques",{"type":45,"tag":206,"props":513,"children":514},{},[515],{"type":51,"value":489},{"type":45,"tag":179,"props":517,"children":518},{},[519,524,533],{"type":45,"tag":206,"props":520,"children":521},{},[522],{"type":51,"value":523},"Ambient occlusion",{"type":45,"tag":206,"props":525,"children":526},{},[527],{"type":45,"tag":215,"props":528,"children":530},{"href":529},"techniques\u002Fambient-occlusion.md",[531],{"type":51,"value":532},"ambient-occlusion",{"type":45,"tag":206,"props":534,"children":535},{},[536],{"type":51,"value":537},"lighting-model, normal-estimation",{"type":45,"tag":179,"props":539,"children":540},{},[541,546,555],{"type":45,"tag":206,"props":542,"children":543},{},[544],{"type":51,"value":545},"Path tracing \u002F global illumination",{"type":45,"tag":206,"props":547,"children":548},{},[549],{"type":45,"tag":215,"props":550,"children":552},{"href":551},"techniques\u002Fpath-tracing-gi.md",[553],{"type":51,"value":554},"path-tracing-gi",{"type":45,"tag":206,"props":556,"children":557},{},[558],{"type":51,"value":559},"analytic-ray-tracing, multipass-buffer",{"type":45,"tag":179,"props":561,"children":562},{},[563,568,577],{"type":45,"tag":206,"props":564,"children":565},{},[566],{"type":51,"value":567},"Precise ray-geometry intersections",{"type":45,"tag":206,"props":569,"children":570},{},[571],{"type":45,"tag":215,"props":572,"children":574},{"href":573},"techniques\u002Fanalytic-ray-tracing.md",[575],{"type":51,"value":576},"analytic-ray-tracing",{"type":45,"tag":206,"props":578,"children":579},{},[580],{"type":51,"value":489},{"type":45,"tag":179,"props":582,"children":583},{},[584,589,598],{"type":45,"tag":206,"props":585,"children":586},{},[587],{"type":51,"value":588},"Voxel worlds (Minecraft-style)",{"type":45,"tag":206,"props":590,"children":591},{},[592],{"type":45,"tag":215,"props":593,"children":595},{"href":594},"techniques\u002Fvoxel-rendering.md",[596],{"type":51,"value":597},"voxel-rendering",{"type":45,"tag":206,"props":599,"children":600},{},[601],{"type":51,"value":233},{"type":45,"tag":179,"props":603,"children":604},{},[605,610,618],{"type":45,"tag":206,"props":606,"children":607},{},[608],{"type":51,"value":609},"Noise \u002F FBM textures",{"type":45,"tag":206,"props":611,"children":612},{},[613],{"type":45,"tag":215,"props":614,"children":616},{"href":615},"techniques\u002Fprocedural-noise.md",[617],{"type":51,"value":298},{"type":45,"tag":206,"props":619,"children":620},{},[621],{"type":51,"value":293},{"type":45,"tag":179,"props":623,"children":624},{},[625,630,639],{"type":45,"tag":206,"props":626,"children":627},{},[628],{"type":51,"value":629},"Tiled 2D patterns",{"type":45,"tag":206,"props":631,"children":632},{},[633],{"type":45,"tag":215,"props":634,"children":636},{"href":635},"techniques\u002Fprocedural-2d-pattern.md",[637],{"type":51,"value":638},"procedural-2d-pattern",{"type":45,"tag":206,"props":640,"children":641},{},[642],{"type":51,"value":643},"polar-uv-manipulation",{"type":45,"tag":179,"props":645,"children":646},{},[647,652,661],{"type":45,"tag":206,"props":648,"children":649},{},[650],{"type":51,"value":651},"Voronoi \u002F cell patterns",{"type":45,"tag":206,"props":653,"children":654},{},[655],{"type":45,"tag":215,"props":656,"children":658},{"href":657},"techniques\u002Fvoronoi-cellular-noise.md",[659],{"type":51,"value":660},"voronoi-cellular-noise",{"type":45,"tag":206,"props":662,"children":663},{},[664],{"type":51,"value":665},"color-palette",{"type":45,"tag":179,"props":667,"children":668},{},[669,674,683],{"type":45,"tag":206,"props":670,"children":671},{},[672],{"type":51,"value":673},"Fractals (Mandelbrot, Julia, 3D)",{"type":45,"tag":206,"props":675,"children":676},{},[677],{"type":45,"tag":215,"props":678,"children":680},{"href":679},"techniques\u002Ffractal-rendering.md",[681],{"type":51,"value":682},"fractal-rendering",{"type":45,"tag":206,"props":684,"children":685},{},[686],{"type":51,"value":687},"color-palette, polar-uv-manipulation",{"type":45,"tag":179,"props":689,"children":690},{},[691,696,704],{"type":45,"tag":206,"props":692,"children":693},{},[694],{"type":51,"value":695},"Color grading \u002F palettes",{"type":45,"tag":206,"props":697,"children":698},{},[699],{"type":45,"tag":215,"props":700,"children":702},{"href":701},"techniques\u002Fcolor-palette.md",[703],{"type":51,"value":665},{"type":45,"tag":206,"props":705,"children":706},{},[707],{"type":51,"value":708},"—",{"type":45,"tag":179,"props":710,"children":711},{},[712,717,726],{"type":45,"tag":206,"props":713,"children":714},{},[715],{"type":51,"value":716},"Bloom \u002F tone mapping \u002F glitch",{"type":45,"tag":206,"props":718,"children":719},{},[720],{"type":45,"tag":215,"props":721,"children":723},{"href":722},"techniques\u002Fpost-processing.md",[724],{"type":51,"value":725},"post-processing",{"type":45,"tag":206,"props":727,"children":728},{},[729],{"type":51,"value":320},{"type":45,"tag":179,"props":731,"children":732},{},[733,738,746],{"type":45,"tag":206,"props":734,"children":735},{},[736],{"type":51,"value":737},"Multi-pass ping-pong buffers",{"type":45,"tag":206,"props":739,"children":740},{},[741],{"type":45,"tag":215,"props":742,"children":744},{"href":743},"techniques\u002Fmultipass-buffer.md",[745],{"type":51,"value":320},{"type":45,"tag":206,"props":747,"children":748},{},[749],{"type":51,"value":708},{"type":45,"tag":179,"props":751,"children":752},{},[753,758,767],{"type":45,"tag":206,"props":754,"children":755},{},[756],{"type":51,"value":757},"Texture \u002F sampling techniques",{"type":45,"tag":206,"props":759,"children":760},{},[761],{"type":45,"tag":215,"props":762,"children":764},{"href":763},"techniques\u002Ftexture-sampling.md",[765],{"type":51,"value":766},"texture-sampling",{"type":45,"tag":206,"props":768,"children":769},{},[770],{"type":51,"value":708},{"type":45,"tag":179,"props":772,"children":773},{},[774,779,788],{"type":45,"tag":206,"props":775,"children":776},{},[777],{"type":51,"value":778},"Camera \u002F matrix transforms",{"type":45,"tag":206,"props":780,"children":781},{},[782],{"type":45,"tag":215,"props":783,"children":785},{"href":784},"techniques\u002Fmatrix-transform.md",[786],{"type":51,"value":787},"matrix-transform",{"type":45,"tag":206,"props":789,"children":790},{},[791],{"type":51,"value":708},{"type":45,"tag":179,"props":793,"children":794},{},[795,800,809],{"type":45,"tag":206,"props":796,"children":797},{},[798],{"type":51,"value":799},"Surface normals",{"type":45,"tag":206,"props":801,"children":802},{},[803],{"type":45,"tag":215,"props":804,"children":806},{"href":805},"techniques\u002Fnormal-estimation.md",[807],{"type":51,"value":808},"normal-estimation",{"type":45,"tag":206,"props":810,"children":811},{},[812],{"type":51,"value":708},{"type":45,"tag":179,"props":814,"children":815},{},[816,821,829],{"type":45,"tag":206,"props":817,"children":818},{},[819],{"type":51,"value":820},"Polar coords \u002F kaleidoscope",{"type":45,"tag":206,"props":822,"children":823},{},[824],{"type":45,"tag":215,"props":825,"children":827},{"href":826},"techniques\u002Fpolar-uv-manipulation.md",[828],{"type":51,"value":643},{"type":45,"tag":206,"props":830,"children":831},{},[832],{"type":51,"value":638},{"type":45,"tag":179,"props":834,"children":835},{},[836,841,850],{"type":45,"tag":206,"props":837,"children":838},{},[839],{"type":51,"value":840},"2D shapes \u002F UI from SDF",{"type":45,"tag":206,"props":842,"children":843},{},[844],{"type":45,"tag":215,"props":845,"children":847},{"href":846},"techniques\u002Fsdf-2d.md",[848],{"type":51,"value":849},"sdf-2d",{"type":45,"tag":206,"props":851,"children":852},{},[853],{"type":51,"value":665},{"type":45,"tag":179,"props":855,"children":856},{},[857,862,871],{"type":45,"tag":206,"props":858,"children":859},{},[860],{"type":51,"value":861},"Procedural audio \u002F music",{"type":45,"tag":206,"props":863,"children":864},{},[865],{"type":45,"tag":215,"props":866,"children":868},{"href":867},"techniques\u002Fsound-synthesis.md",[869],{"type":51,"value":870},"sound-synthesis",{"type":45,"tag":206,"props":872,"children":873},{},[874],{"type":51,"value":708},{"type":45,"tag":179,"props":876,"children":877},{},[878,883,892],{"type":45,"tag":206,"props":879,"children":880},{},[881],{"type":51,"value":882},"SDF tricks \u002F optimization",{"type":45,"tag":206,"props":884,"children":885},{},[886],{"type":45,"tag":215,"props":887,"children":889},{"href":888},"techniques\u002Fsdf-tricks.md",[890],{"type":51,"value":891},"sdf-tricks",{"type":45,"tag":206,"props":893,"children":894},{},[895],{"type":51,"value":255},{"type":45,"tag":179,"props":897,"children":898},{},[899,904,913],{"type":45,"tag":206,"props":900,"children":901},{},[902],{"type":51,"value":903},"Anti-aliased rendering",{"type":45,"tag":206,"props":905,"children":906},{},[907],{"type":45,"tag":215,"props":908,"children":910},{"href":909},"techniques\u002Fanti-aliasing.md",[911],{"type":51,"value":912},"anti-aliasing",{"type":45,"tag":206,"props":914,"children":915},{},[916],{"type":51,"value":917},"sdf-2d, post-processing",{"type":45,"tag":179,"props":919,"children":920},{},[921,926,935],{"type":45,"tag":206,"props":922,"children":923},{},[924],{"type":51,"value":925},"Depth of field \u002F motion blur \u002F lens effects",{"type":45,"tag":206,"props":927,"children":928},{},[929],{"type":45,"tag":215,"props":930,"children":932},{"href":931},"techniques\u002Fcamera-effects.md",[933],{"type":51,"value":934},"camera-effects",{"type":45,"tag":206,"props":936,"children":937},{},[938],{"type":51,"value":939},"post-processing, multipass-buffer",{"type":45,"tag":179,"props":941,"children":942},{},[943,948,957],{"type":45,"tag":206,"props":944,"children":945},{},[946],{"type":51,"value":947},"Advanced texture mapping \u002F no-tile textures",{"type":45,"tag":206,"props":949,"children":950},{},[951],{"type":45,"tag":215,"props":952,"children":954},{"href":953},"techniques\u002Ftexture-mapping-advanced.md",[955],{"type":51,"value":956},"texture-mapping-advanced",{"type":45,"tag":206,"props":958,"children":959},{},[960],{"type":51,"value":961},"terrain-rendering, texture-sampling",{"type":45,"tag":179,"props":963,"children":964},{},[965,970,979],{"type":45,"tag":206,"props":966,"children":967},{},[968],{"type":51,"value":969},"WebGL2 shader errors \u002F debugging",{"type":45,"tag":206,"props":971,"children":972},{},[973],{"type":45,"tag":215,"props":974,"children":976},{"href":975},"techniques\u002Fwebgl-pitfalls.md",[977],{"type":51,"value":978},"webgl-pitfalls",{"type":45,"tag":206,"props":980,"children":981},{},[982],{"type":51,"value":708},{"type":45,"tag":60,"props":984,"children":986},{"id":985},"technique-index",[987],{"type":51,"value":988},"Technique Index",{"type":45,"tag":990,"props":991,"children":993},"h3",{"id":992},"geometry-sdf",[994],{"type":51,"value":995},"Geometry & SDF",{"type":45,"tag":997,"props":998,"children":999},"ul",{},[1000,1009,1018,1027,1036,1045],{"type":45,"tag":116,"props":1001,"children":1002},{},[1003,1007],{"type":45,"tag":122,"props":1004,"children":1005},{},[1006],{"type":51,"value":849},{"type":51,"value":1008}," — 2D signed distance functions for shapes, UI, anti-aliased rendering",{"type":45,"tag":116,"props":1010,"children":1011},{},[1012,1016],{"type":45,"tag":122,"props":1013,"children":1014},{},[1015],{"type":51,"value":228},{"type":51,"value":1017}," — 3D signed distance functions for real-time implicit surface modeling",{"type":45,"tag":116,"props":1019,"children":1020},{},[1021,1025],{"type":45,"tag":122,"props":1022,"children":1023},{},[1024],{"type":51,"value":250},{"type":51,"value":1026}," — Constructive solid geometry: union, subtraction, intersection with smooth blending",{"type":45,"tag":116,"props":1028,"children":1029},{},[1030,1034],{"type":45,"tag":122,"props":1031,"children":1032},{},[1033],{"type":51,"value":272},{"type":51,"value":1035}," — Infinite space repetition, folding, and limited tiling",{"type":45,"tag":116,"props":1037,"children":1038},{},[1039,1043],{"type":45,"tag":122,"props":1040,"children":1041},{},[1042],{"type":51,"value":293},{"type":51,"value":1044}," — Distort domains with noise for organic, flowing shapes",{"type":45,"tag":116,"props":1046,"children":1047},{},[1048,1052],{"type":45,"tag":122,"props":1049,"children":1050},{},[1051],{"type":51,"value":891},{"type":51,"value":1053}," — SDF optimization, bounding volumes, binary search refinement, hollowing, layered edges, debug visualization",{"type":45,"tag":990,"props":1055,"children":1057},{"id":1056},"ray-casting-lighting",[1058],{"type":51,"value":1059},"Ray Casting & Lighting",{"type":45,"tag":997,"props":1061,"children":1062},{},[1063,1072,1081,1090,1099,1108,1117],{"type":45,"tag":116,"props":1064,"children":1065},{},[1066,1070],{"type":45,"tag":122,"props":1067,"children":1068},{},[1069],{"type":51,"value":220},{"type":51,"value":1071}," — Sphere tracing with SDF for 3D scene rendering",{"type":45,"tag":116,"props":1073,"children":1074},{},[1075,1079],{"type":45,"tag":122,"props":1076,"children":1077},{},[1078],{"type":51,"value":576},{"type":51,"value":1080}," — Closed-form ray-primitive intersections (sphere, plane, box, torus)",{"type":45,"tag":116,"props":1082,"children":1083},{},[1084,1088],{"type":45,"tag":122,"props":1085,"children":1086},{},[1087],{"type":51,"value":554},{"type":51,"value":1089}," — Monte Carlo path tracing for photorealistic global illumination",{"type":45,"tag":116,"props":1091,"children":1092},{},[1093,1097],{"type":45,"tag":122,"props":1094,"children":1095},{},[1096],{"type":51,"value":489},{"type":51,"value":1098}," — Phong, Blinn-Phong, PBR (Cook-Torrance), and toon shading",{"type":45,"tag":116,"props":1100,"children":1101},{},[1102,1106],{"type":45,"tag":122,"props":1103,"children":1104},{},[1105],{"type":51,"value":511},{"type":51,"value":1107}," — Hard shadows, soft shadows (penumbra estimation), cascade shadows",{"type":45,"tag":116,"props":1109,"children":1110},{},[1111,1115],{"type":45,"tag":122,"props":1112,"children":1113},{},[1114],{"type":51,"value":532},{"type":51,"value":1116}," — SDF-based AO, screen-space AO approximation",{"type":45,"tag":116,"props":1118,"children":1119},{},[1120,1124],{"type":45,"tag":122,"props":1121,"children":1122},{},[1123],{"type":51,"value":808},{"type":51,"value":1125}," — Finite-difference normals, tetrahedron technique",{"type":45,"tag":990,"props":1127,"children":1128},{"id":359},[1129],{"type":51,"value":1130},"Simulation & Physics",{"type":45,"tag":997,"props":1132,"children":1133},{},[1134,1143,1152,1161],{"type":45,"tag":116,"props":1135,"children":1136},{},[1137,1141],{"type":45,"tag":122,"props":1138,"children":1139},{},[1140],{"type":51,"value":315},{"type":51,"value":1142}," — Navier-Stokes fluid solver with advection, diffusion, pressure projection",{"type":45,"tag":116,"props":1144,"children":1145},{},[1146,1150],{"type":45,"tag":122,"props":1147,"children":1148},{},[1149],{"type":51,"value":359},{"type":51,"value":1151}," — GPU-based physics: springs, cloth, N-body gravity, collision",{"type":45,"tag":116,"props":1153,"children":1154},{},[1155,1159],{"type":45,"tag":122,"props":1156,"children":1157},{},[1158],{"type":51,"value":337},{"type":51,"value":1160}," — Stateless and stateful particle systems (fire, rain, sparks, galaxies)",{"type":45,"tag":116,"props":1162,"children":1163},{},[1164,1168],{"type":45,"tag":122,"props":1165,"children":1166},{},[1167],{"type":51,"value":380},{"type":51,"value":1169}," — Game of Life, reaction-diffusion (Turing patterns), sand simulation",{"type":45,"tag":990,"props":1171,"children":1173},{"id":1172},"natural-phenomena",[1174],{"type":51,"value":1175},"Natural Phenomena",{"type":45,"tag":997,"props":1177,"children":1178},{},[1179,1188,1197,1206],{"type":45,"tag":116,"props":1180,"children":1181},{},[1182,1186],{"type":45,"tag":122,"props":1183,"children":1184},{},[1185],{"type":51,"value":402},{"type":51,"value":1187}," — Gerstner waves, FFT ocean, caustics, underwater fog",{"type":45,"tag":116,"props":1189,"children":1190},{},[1191,1195],{"type":45,"tag":122,"props":1192,"children":1193},{},[1194],{"type":51,"value":424},{"type":51,"value":1196}," — Heightfield ray marching, FBM terrain, erosion",{"type":45,"tag":116,"props":1198,"children":1199},{},[1200,1204],{"type":45,"tag":122,"props":1201,"children":1202},{},[1203],{"type":51,"value":468},{"type":51,"value":1205}," — Rayleigh\u002FMie scattering, god rays, SSS approximation",{"type":45,"tag":116,"props":1207,"children":1208},{},[1209,1213],{"type":45,"tag":122,"props":1210,"children":1211},{},[1212],{"type":51,"value":446},{"type":51,"value":1214}," — Volume ray marching for clouds, fog, fire, explosions",{"type":45,"tag":990,"props":1216,"children":1218},{"id":1217},"procedural-generation",[1219],{"type":51,"value":1220},"Procedural Generation",{"type":45,"tag":997,"props":1222,"children":1223},{},[1224,1233,1242,1251,1260],{"type":45,"tag":116,"props":1225,"children":1226},{},[1227,1231],{"type":45,"tag":122,"props":1228,"children":1229},{},[1230],{"type":51,"value":298},{"type":51,"value":1232}," — Value noise, Perlin, Simplex, Worley, FBM, ridged noise",{"type":45,"tag":116,"props":1234,"children":1235},{},[1236,1240],{"type":45,"tag":122,"props":1237,"children":1238},{},[1239],{"type":51,"value":638},{"type":51,"value":1241}," — Brick, hexagon, truchet, Islamic geometric patterns",{"type":45,"tag":116,"props":1243,"children":1244},{},[1245,1249],{"type":45,"tag":122,"props":1246,"children":1247},{},[1248],{"type":51,"value":660},{"type":51,"value":1250}," — Voronoi diagrams, Worley noise, cracked earth, crystal",{"type":45,"tag":116,"props":1252,"children":1253},{},[1254,1258],{"type":45,"tag":122,"props":1255,"children":1256},{},[1257],{"type":51,"value":682},{"type":51,"value":1259}," — Mandelbrot, Julia sets, 3D fractals (Mandelbox, Mandelbulb)",{"type":45,"tag":116,"props":1261,"children":1262},{},[1263,1267],{"type":45,"tag":122,"props":1264,"children":1265},{},[1266],{"type":51,"value":665},{"type":51,"value":1268}," — Cosine palettes, HSL\u002FHSV\u002FOklab, dynamic color mapping",{"type":45,"tag":990,"props":1270,"children":1272},{"id":1271},"post-processing-infrastructure",[1273],{"type":51,"value":1274},"Post-Processing & Infrastructure",{"type":45,"tag":997,"props":1276,"children":1277},{},[1278,1287,1296,1305,1314,1323,1332,1341],{"type":45,"tag":116,"props":1279,"children":1280},{},[1281,1285],{"type":45,"tag":122,"props":1282,"children":1283},{},[1284],{"type":51,"value":725},{"type":51,"value":1286}," — Bloom, tone mapping (ACES, Reinhard), vignette, chromatic aberration, glitch",{"type":45,"tag":116,"props":1288,"children":1289},{},[1290,1294],{"type":45,"tag":122,"props":1291,"children":1292},{},[1293],{"type":51,"value":320},{"type":51,"value":1295}," — Ping-pong FBO setup, state persistence across frames",{"type":45,"tag":116,"props":1297,"children":1298},{},[1299,1303],{"type":45,"tag":122,"props":1300,"children":1301},{},[1302],{"type":51,"value":766},{"type":51,"value":1304}," — Bilinear, bicubic, mipmap, procedural texture lookup",{"type":45,"tag":116,"props":1306,"children":1307},{},[1308,1312],{"type":45,"tag":122,"props":1309,"children":1310},{},[1311],{"type":51,"value":787},{"type":51,"value":1313}," — Camera look-at, projection, rotation, orbit controls",{"type":45,"tag":116,"props":1315,"children":1316},{},[1317,1321],{"type":45,"tag":122,"props":1318,"children":1319},{},[1320],{"type":51,"value":643},{"type":51,"value":1322}," — Polar\u002Flog-polar coordinates, kaleidoscope, spiral mapping",{"type":45,"tag":116,"props":1324,"children":1325},{},[1326,1330],{"type":45,"tag":122,"props":1327,"children":1328},{},[1329],{"type":51,"value":912},{"type":51,"value":1331}," — SSAA, SDF analytical AA, temporal anti-aliasing (TAA), FXAA post-process",{"type":45,"tag":116,"props":1333,"children":1334},{},[1335,1339],{"type":45,"tag":122,"props":1336,"children":1337},{},[1338],{"type":51,"value":934},{"type":51,"value":1340}," — Depth of field (thin lens), motion blur, lens distortion, film grain, vignette",{"type":45,"tag":116,"props":1342,"children":1343},{},[1344,1348],{"type":45,"tag":122,"props":1345,"children":1346},{},[1347],{"type":51,"value":956},{"type":51,"value":1349}," — Biplanar mapping, texture repetition avoidance, ray differential filtering",{"type":45,"tag":990,"props":1351,"children":1353},{"id":1352},"audio",[1354],{"type":51,"value":1355},"Audio",{"type":45,"tag":997,"props":1357,"children":1358},{},[1359],{"type":45,"tag":116,"props":1360,"children":1361},{},[1362,1366],{"type":45,"tag":122,"props":1363,"children":1364},{},[1365],{"type":51,"value":870},{"type":51,"value":1367}," — Procedural audio in GLSL: oscillators, envelopes, filters, FM synthesis",{"type":45,"tag":990,"props":1369,"children":1371},{"id":1370},"debugging-validation",[1372],{"type":51,"value":1373},"Debugging & Validation",{"type":45,"tag":997,"props":1375,"children":1376},{},[1377],{"type":45,"tag":116,"props":1378,"children":1379},{},[1380,1384,1386,1392,1394,1400],{"type":45,"tag":122,"props":1381,"children":1382},{},[1383],{"type":51,"value":978},{"type":51,"value":1385}," — Common WebGL2\u002FGLSL errors: ",{"type":45,"tag":74,"props":1387,"children":1389},{"className":1388},[],[1390],{"type":51,"value":1391},"fragCoord",{"type":51,"value":1393},", ",{"type":45,"tag":74,"props":1395,"children":1397},{"className":1396},[],[1398],{"type":51,"value":1399},"main()",{"type":51,"value":1401}," wrapper, function order, macro limitations, uniform null",{"type":45,"tag":60,"props":1403,"children":1405},{"id":1404},"webgl2-adaptation-rules",[1406],{"type":51,"value":162},{"type":45,"tag":54,"props":1408,"children":1409},{},[1410],{"type":51,"value":1411},"All technique files use ShaderToy GLSL style. When generating standalone HTML pages, apply these adaptations:",{"type":45,"tag":990,"props":1413,"children":1415},{"id":1414},"shader-version-output",[1416],{"type":51,"value":1417},"Shader Version & Output",{"type":45,"tag":997,"props":1419,"children":1420},{},[1421,1432,1451,1462,1495],{"type":45,"tag":116,"props":1422,"children":1423},{},[1424,1426],{"type":51,"value":1425},"Use ",{"type":45,"tag":74,"props":1427,"children":1429},{"className":1428},[],[1430],{"type":51,"value":1431},"canvas.getContext(\"webgl2\")",{"type":45,"tag":116,"props":1433,"children":1434},{},[1435,1437,1443,1445],{"type":51,"value":1436},"Shader first line: ",{"type":45,"tag":74,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":51,"value":1442},"#version 300 es",{"type":51,"value":1444},", fragment shader adds ",{"type":45,"tag":74,"props":1446,"children":1448},{"className":1447},[],[1449],{"type":51,"value":1450},"precision highp float;",{"type":45,"tag":116,"props":1452,"children":1453},{},[1454,1456],{"type":51,"value":1455},"Fragment shader must declare: ",{"type":45,"tag":74,"props":1457,"children":1459},{"className":1458},[],[1460],{"type":51,"value":1461},"out vec4 fragColor;",{"type":45,"tag":116,"props":1463,"children":1464},{},[1465,1467,1473,1475,1481,1482,1488,1489],{"type":51,"value":1466},"Vertex shader: ",{"type":45,"tag":74,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":51,"value":1472},"attribute",{"type":51,"value":1474}," → ",{"type":45,"tag":74,"props":1476,"children":1478},{"className":1477},[],[1479],{"type":51,"value":1480},"in",{"type":51,"value":1393},{"type":45,"tag":74,"props":1483,"children":1485},{"className":1484},[],[1486],{"type":51,"value":1487},"varying",{"type":51,"value":1474},{"type":45,"tag":74,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":51,"value":1494},"out",{"type":45,"tag":116,"props":1496,"children":1497},{},[1498,1500,1505,1506,1511,1512,1518,1519,1525,1526,1532,1533],{"type":51,"value":1499},"Fragment shader: ",{"type":45,"tag":74,"props":1501,"children":1503},{"className":1502},[],[1504],{"type":51,"value":1487},{"type":51,"value":1474},{"type":45,"tag":74,"props":1507,"children":1509},{"className":1508},[],[1510],{"type":51,"value":1480},{"type":51,"value":1393},{"type":45,"tag":74,"props":1513,"children":1515},{"className":1514},[],[1516],{"type":51,"value":1517},"gl_FragColor",{"type":51,"value":1474},{"type":45,"tag":74,"props":1520,"children":1522},{"className":1521},[],[1523],{"type":51,"value":1524},"fragColor",{"type":51,"value":1393},{"type":45,"tag":74,"props":1527,"children":1529},{"className":1528},[],[1530],{"type":51,"value":1531},"texture2D()",{"type":51,"value":1474},{"type":45,"tag":74,"props":1534,"children":1536},{"className":1535},[],[1537],{"type":51,"value":1538},"texture()",{"type":45,"tag":990,"props":1540,"children":1542},{"id":1541},"fragment-coordinate",[1543],{"type":51,"value":1544},"Fragment Coordinate",{"type":45,"tag":997,"props":1546,"children":1547},{},[1548],{"type":45,"tag":116,"props":1549,"children":1550},{},[1551,1561,1563,1568,1570,1575],{"type":45,"tag":122,"props":1552,"children":1553},{},[1554,1555],{"type":51,"value":1425},{"type":45,"tag":74,"props":1556,"children":1558},{"className":1557},[],[1559],{"type":51,"value":1560},"gl_FragCoord.xy",{"type":51,"value":1562}," instead of ",{"type":45,"tag":74,"props":1564,"children":1566},{"className":1565},[],[1567],{"type":51,"value":1391},{"type":51,"value":1569}," (WebGL2 does not have ",{"type":45,"tag":74,"props":1571,"children":1573},{"className":1572},[],[1574],{"type":51,"value":1391},{"type":51,"value":1576}," built-in)",{"type":45,"tag":67,"props":1578,"children":1582},{"className":1579,"code":1580,"language":1581,"meta":76,"style":76},"language-glsl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F WRONG\nvec2 uv = (2.0 * fragCoord - iResolution.xy) \u002F iResolution.y;\n\u002F\u002F CORRECT\nvec2 uv = (2.0 * gl_FragCoord.xy - iResolution.xy) \u002F iResolution.y;\n","glsl",[1583],{"type":45,"tag":74,"props":1584,"children":1585},{"__ignoreMap":76},[1586,1597,1606,1615],{"type":45,"tag":1587,"props":1588,"children":1591},"span",{"class":1589,"line":1590},"line",1,[1592],{"type":45,"tag":1587,"props":1593,"children":1594},{},[1595],{"type":51,"value":1596},"\u002F\u002F WRONG\n",{"type":45,"tag":1587,"props":1598,"children":1600},{"class":1589,"line":1599},2,[1601],{"type":45,"tag":1587,"props":1602,"children":1603},{},[1604],{"type":51,"value":1605},"vec2 uv = (2.0 * fragCoord - iResolution.xy) \u002F iResolution.y;\n",{"type":45,"tag":1587,"props":1607,"children":1609},{"class":1589,"line":1608},3,[1610],{"type":45,"tag":1587,"props":1611,"children":1612},{},[1613],{"type":51,"value":1614},"\u002F\u002F CORRECT\n",{"type":45,"tag":1587,"props":1616,"children":1618},{"class":1589,"line":1617},4,[1619],{"type":45,"tag":1587,"props":1620,"children":1621},{},[1622],{"type":51,"value":1623},"vec2 uv = (2.0 * gl_FragCoord.xy - iResolution.xy) \u002F iResolution.y;\n",{"type":45,"tag":990,"props":1625,"children":1627},{"id":1626},"main-wrapper-for-shadertoy-templates",[1628],{"type":51,"value":1629},"main() Wrapper for ShaderToy Templates",{"type":45,"tag":997,"props":1631,"children":1632},{},[1633,1644],{"type":45,"tag":116,"props":1634,"children":1635},{},[1636,1638],{"type":51,"value":1637},"ShaderToy uses ",{"type":45,"tag":74,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":51,"value":1643},"void mainImage(out vec4 fragColor, in vec2 fragCoord)",{"type":45,"tag":116,"props":1645,"children":1646},{},[1647,1649,1655],{"type":51,"value":1648},"WebGL2 requires standard ",{"type":45,"tag":74,"props":1650,"children":1652},{"className":1651},[],[1653],{"type":51,"value":1654},"void main()",{"type":51,"value":1656}," entry point — always wrap mainImage:",{"type":45,"tag":67,"props":1658,"children":1660},{"className":1579,"code":1659,"language":1581,"meta":76,"style":76},"void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n    \u002F\u002F shader code...\n    fragColor = vec4(col, 1.0);\n}\n\nvoid main() {\n    mainImage(fragColor, gl_FragCoord.xy);\n}\n",[1661],{"type":45,"tag":74,"props":1662,"children":1663},{"__ignoreMap":76},[1664,1672,1680,1688,1696,1706,1715,1724],{"type":45,"tag":1587,"props":1665,"children":1666},{"class":1589,"line":1590},[1667],{"type":45,"tag":1587,"props":1668,"children":1669},{},[1670],{"type":51,"value":1671},"void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n",{"type":45,"tag":1587,"props":1673,"children":1674},{"class":1589,"line":1599},[1675],{"type":45,"tag":1587,"props":1676,"children":1677},{},[1678],{"type":51,"value":1679},"    \u002F\u002F shader code...\n",{"type":45,"tag":1587,"props":1681,"children":1682},{"class":1589,"line":1608},[1683],{"type":45,"tag":1587,"props":1684,"children":1685},{},[1686],{"type":51,"value":1687},"    fragColor = vec4(col, 1.0);\n",{"type":45,"tag":1587,"props":1689,"children":1690},{"class":1589,"line":1617},[1691],{"type":45,"tag":1587,"props":1692,"children":1693},{},[1694],{"type":51,"value":1695},"}\n",{"type":45,"tag":1587,"props":1697,"children":1699},{"class":1589,"line":1698},5,[1700],{"type":45,"tag":1587,"props":1701,"children":1703},{"emptyLinePlaceholder":1702},true,[1704],{"type":51,"value":1705},"\n",{"type":45,"tag":1587,"props":1707,"children":1709},{"class":1589,"line":1708},6,[1710],{"type":45,"tag":1587,"props":1711,"children":1712},{},[1713],{"type":51,"value":1714},"void main() {\n",{"type":45,"tag":1587,"props":1716,"children":1718},{"class":1589,"line":1717},7,[1719],{"type":45,"tag":1587,"props":1720,"children":1721},{},[1722],{"type":51,"value":1723},"    mainImage(fragColor, gl_FragCoord.xy);\n",{"type":45,"tag":1587,"props":1725,"children":1727},{"class":1589,"line":1726},8,[1728],{"type":45,"tag":1587,"props":1729,"children":1730},{},[1731],{"type":51,"value":1695},{"type":45,"tag":990,"props":1733,"children":1735},{"id":1734},"function-declaration-order",[1736],{"type":51,"value":1737},"Function Declaration Order",{"type":45,"tag":997,"props":1739,"children":1740},{},[1741],{"type":45,"tag":116,"props":1742,"children":1743},{},[1744],{"type":51,"value":1745},"GLSL requires functions to be declared before use — either declare before use or reorder:",{"type":45,"tag":67,"props":1747,"children":1749},{"className":1579,"code":1748,"language":1581,"meta":76,"style":76},"\u002F\u002F WRONG — getAtmosphere() calls getSunDirection() before it's defined\nvec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Error!\nvec3 getSunDirection() { return normalize(vec3(1.0)); }\n\n\u002F\u002F CORRECT — define callee first\nvec3 getSunDirection() { return normalize(vec3(1.0)); }\nvec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Works\n",[1750],{"type":45,"tag":74,"props":1751,"children":1752},{"__ignoreMap":76},[1753,1761,1769,1777,1784,1792,1799],{"type":45,"tag":1587,"props":1754,"children":1755},{"class":1589,"line":1590},[1756],{"type":45,"tag":1587,"props":1757,"children":1758},{},[1759],{"type":51,"value":1760},"\u002F\u002F WRONG — getAtmosphere() calls getSunDirection() before it's defined\n",{"type":45,"tag":1587,"props":1762,"children":1763},{"class":1589,"line":1599},[1764],{"type":45,"tag":1587,"props":1765,"children":1766},{},[1767],{"type":51,"value":1768},"vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Error!\n",{"type":45,"tag":1587,"props":1770,"children":1771},{"class":1589,"line":1608},[1772],{"type":45,"tag":1587,"props":1773,"children":1774},{},[1775],{"type":51,"value":1776},"vec3 getSunDirection() { return normalize(vec3(1.0)); }\n",{"type":45,"tag":1587,"props":1778,"children":1779},{"class":1589,"line":1617},[1780],{"type":45,"tag":1587,"props":1781,"children":1782},{"emptyLinePlaceholder":1702},[1783],{"type":51,"value":1705},{"type":45,"tag":1587,"props":1785,"children":1786},{"class":1589,"line":1698},[1787],{"type":45,"tag":1587,"props":1788,"children":1789},{},[1790],{"type":51,"value":1791},"\u002F\u002F CORRECT — define callee first\n",{"type":45,"tag":1587,"props":1793,"children":1794},{"class":1589,"line":1708},[1795],{"type":45,"tag":1587,"props":1796,"children":1797},{},[1798],{"type":51,"value":1776},{"type":45,"tag":1587,"props":1800,"children":1801},{"class":1589,"line":1717},[1802],{"type":45,"tag":1587,"props":1803,"children":1804},{},[1805],{"type":51,"value":1806},"vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } \u002F\u002F Works\n",{"type":45,"tag":990,"props":1808,"children":1810},{"id":1809},"macro-limitations",[1811],{"type":51,"value":1812},"Macro Limitations",{"type":45,"tag":997,"props":1814,"children":1815},{},[1816],{"type":45,"tag":116,"props":1817,"children":1818},{},[1819,1825,1827,1833],{"type":45,"tag":74,"props":1820,"children":1822},{"className":1821},[],[1823],{"type":51,"value":1824},"#define",{"type":51,"value":1826}," cannot use function calls — use ",{"type":45,"tag":74,"props":1828,"children":1830},{"className":1829},[],[1831],{"type":51,"value":1832},"const",{"type":51,"value":1834}," instead:",{"type":45,"tag":67,"props":1836,"children":1838},{"className":1579,"code":1837,"language":1581,"meta":76,"style":76},"\u002F\u002F WRONG\n#define SUN_DIR normalize(vec3(0.8, 0.4, -0.6))\n\n\u002F\u002F CORRECT\nconst vec3 SUN_DIR = vec3(0.756, 0.378, -0.567); \u002F\u002F Pre-computed normalized value\n",[1839],{"type":45,"tag":74,"props":1840,"children":1841},{"__ignoreMap":76},[1842,1849,1857,1864,1871],{"type":45,"tag":1587,"props":1843,"children":1844},{"class":1589,"line":1590},[1845],{"type":45,"tag":1587,"props":1846,"children":1847},{},[1848],{"type":51,"value":1596},{"type":45,"tag":1587,"props":1850,"children":1851},{"class":1589,"line":1599},[1852],{"type":45,"tag":1587,"props":1853,"children":1854},{},[1855],{"type":51,"value":1856},"#define SUN_DIR normalize(vec3(0.8, 0.4, -0.6))\n",{"type":45,"tag":1587,"props":1858,"children":1859},{"class":1589,"line":1608},[1860],{"type":45,"tag":1587,"props":1861,"children":1862},{"emptyLinePlaceholder":1702},[1863],{"type":51,"value":1705},{"type":45,"tag":1587,"props":1865,"children":1866},{"class":1589,"line":1617},[1867],{"type":45,"tag":1587,"props":1868,"children":1869},{},[1870],{"type":51,"value":1614},{"type":45,"tag":1587,"props":1872,"children":1873},{"class":1589,"line":1698},[1874],{"type":45,"tag":1587,"props":1875,"children":1876},{},[1877],{"type":51,"value":1878},"const vec3 SUN_DIR = vec3(0.756, 0.378, -0.567); \u002F\u002F Pre-computed normalized value\n",{"type":45,"tag":990,"props":1880,"children":1882},{"id":1881},"script-tag-extraction",[1883],{"type":51,"value":1884},"Script Tag Extraction",{"type":45,"tag":997,"props":1886,"children":1887},{},[1888],{"type":45,"tag":116,"props":1889,"children":1890},{},[1891,1893,1899,1901,1907,1909,1914,1916,1922],{"type":51,"value":1892},"When extracting shader source from ",{"type":45,"tag":74,"props":1894,"children":1896},{"className":1895},[],[1897],{"type":51,"value":1898},"\u003Cscript>",{"type":51,"value":1900}," tags, ensure ",{"type":45,"tag":74,"props":1902,"children":1904},{"className":1903},[],[1905],{"type":51,"value":1906},"#version",{"type":51,"value":1908}," is the ",{"type":45,"tag":122,"props":1910,"children":1911},{},[1912],{"type":51,"value":1913},"first character",{"type":51,"value":1915}," — use ",{"type":45,"tag":74,"props":1917,"children":1919},{"className":1918},[],[1920],{"type":51,"value":1921},".trim()",{"type":51,"value":1923},":",{"type":45,"tag":67,"props":1925,"children":1929},{"className":1926,"code":1927,"language":1928,"meta":76,"style":76},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const fs = document.getElementById('fs').text.trim();\n","javascript",[1930],{"type":45,"tag":74,"props":1931,"children":1932},{"__ignoreMap":76},[1933],{"type":45,"tag":1587,"props":1934,"children":1935},{"class":1589,"line":1590},[1936,1941,1947,1953,1958,1963,1969,1974,1979,1985,1989,1994,1998,2002,2006,2011,2016],{"type":45,"tag":1587,"props":1937,"children":1939},{"style":1938},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1940],{"type":51,"value":1832},{"type":45,"tag":1587,"props":1942,"children":1944},{"style":1943},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1945],{"type":51,"value":1946}," fs ",{"type":45,"tag":1587,"props":1948,"children":1950},{"style":1949},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1951],{"type":51,"value":1952},"=",{"type":45,"tag":1587,"props":1954,"children":1955},{"style":1943},[1956],{"type":51,"value":1957}," document",{"type":45,"tag":1587,"props":1959,"children":1960},{"style":1949},[1961],{"type":51,"value":1962},".",{"type":45,"tag":1587,"props":1964,"children":1966},{"style":1965},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1967],{"type":51,"value":1968},"getElementById",{"type":45,"tag":1587,"props":1970,"children":1971},{"style":1943},[1972],{"type":51,"value":1973},"(",{"type":45,"tag":1587,"props":1975,"children":1976},{"style":1949},[1977],{"type":51,"value":1978},"'",{"type":45,"tag":1587,"props":1980,"children":1982},{"style":1981},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1983],{"type":51,"value":1984},"fs",{"type":45,"tag":1587,"props":1986,"children":1987},{"style":1949},[1988],{"type":51,"value":1978},{"type":45,"tag":1587,"props":1990,"children":1991},{"style":1943},[1992],{"type":51,"value":1993},")",{"type":45,"tag":1587,"props":1995,"children":1996},{"style":1949},[1997],{"type":51,"value":1962},{"type":45,"tag":1587,"props":1999,"children":2000},{"style":1943},[2001],{"type":51,"value":51},{"type":45,"tag":1587,"props":2003,"children":2004},{"style":1949},[2005],{"type":51,"value":1962},{"type":45,"tag":1587,"props":2007,"children":2008},{"style":1965},[2009],{"type":51,"value":2010},"trim",{"type":45,"tag":1587,"props":2012,"children":2013},{"style":1943},[2014],{"type":51,"value":2015},"()",{"type":45,"tag":1587,"props":2017,"children":2018},{"style":1949},[2019],{"type":51,"value":2020},";\n",{"type":45,"tag":990,"props":2022,"children":2024},{"id":2023},"common-pitfalls",[2025],{"type":51,"value":2026},"Common Pitfalls",{"type":45,"tag":997,"props":2028,"children":2029},{},[2030,2056,2073],{"type":45,"tag":116,"props":2031,"children":2032},{},[2033,2038,2040,2046,2048,2054],{"type":45,"tag":122,"props":2034,"children":2035},{},[2036],{"type":51,"value":2037},"Unused uniforms",{"type":51,"value":2039},": Compiler may optimize away unused uniforms, causing ",{"type":45,"tag":74,"props":2041,"children":2043},{"className":2042},[],[2044],{"type":51,"value":2045},"gl.getUniformLocation()",{"type":51,"value":2047}," to return ",{"type":45,"tag":74,"props":2049,"children":2051},{"className":2050},[],[2052],{"type":51,"value":2053},"null",{"type":51,"value":2055}," — always use uniforms in a way the compiler cannot optimize out",{"type":45,"tag":116,"props":2057,"children":2058},{},[2059,2064,2066,2071],{"type":45,"tag":122,"props":2060,"children":2061},{},[2062],{"type":51,"value":2063},"Loop indices",{"type":51,"value":2065},": Use runtime constants in loops, not ",{"type":45,"tag":74,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":51,"value":1824},{"type":51,"value":2072}," macros in some ES versions",{"type":45,"tag":116,"props":2074,"children":2075},{},[2076,2081,2083,2089,2091,2097,2099],{"type":45,"tag":122,"props":2077,"children":2078},{},[2079],{"type":51,"value":2080},"Terrain functions",{"type":51,"value":2082},": Functions like ",{"type":45,"tag":74,"props":2084,"children":2086},{"className":2085},[],[2087],{"type":51,"value":2088},"terrainM(vec2)",{"type":51,"value":2090}," need XZ components — use ",{"type":45,"tag":74,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":51,"value":2096},"terrainM(pos.xz + offset)",{"type":51,"value":2098}," not ",{"type":45,"tag":74,"props":2100,"children":2102},{"className":2101},[],[2103],{"type":51,"value":2104},"terrainM(pos + offset)",{"type":45,"tag":60,"props":2106,"children":2108},{"id":2107},"html-page-setup",[2109],{"type":51,"value":2110},"HTML Page Setup",{"type":45,"tag":54,"props":2112,"children":2113},{},[2114],{"type":51,"value":2115},"When generating a standalone HTML page:",{"type":45,"tag":997,"props":2117,"children":2118},{},[2119,2124,2135,2167],{"type":45,"tag":116,"props":2120,"children":2121},{},[2122],{"type":51,"value":2123},"Canvas fills the entire viewport, auto-resizes on window resize",{"type":45,"tag":116,"props":2125,"children":2126},{},[2127,2129],{"type":51,"value":2128},"Page background black, no scrollbars: ",{"type":45,"tag":74,"props":2130,"children":2132},{"className":2131},[],[2133],{"type":51,"value":2134},"body { margin: 0; overflow: hidden; background: #000; }",{"type":45,"tag":116,"props":2136,"children":2137},{},[2138,2140,2146,2147,2153,2154,2160,2161],{"type":51,"value":2139},"Implement ShaderToy-compatible uniforms: ",{"type":45,"tag":74,"props":2141,"children":2143},{"className":2142},[],[2144],{"type":51,"value":2145},"iTime",{"type":51,"value":1393},{"type":45,"tag":74,"props":2148,"children":2150},{"className":2149},[],[2151],{"type":51,"value":2152},"iResolution",{"type":51,"value":1393},{"type":45,"tag":74,"props":2155,"children":2157},{"className":2156},[],[2158],{"type":51,"value":2159},"iMouse",{"type":51,"value":1393},{"type":45,"tag":74,"props":2162,"children":2164},{"className":2163},[],[2165],{"type":51,"value":2166},"iFrame",{"type":45,"tag":116,"props":2168,"children":2169},{},[2170],{"type":51,"value":2171},"For multi-pass effects (Buffer A\u002FB), use WebGL2 framebuffer + ping-pong (see multipass-buffer technique)",{"type":45,"tag":60,"props":2173,"children":2175},{"id":2174},"common-pitfalls-1",[2176],{"type":51,"value":2026},{"type":45,"tag":990,"props":2178,"children":2180},{"id":2179},"js-variable-declaration-order-tdz-causes-white-screen-crash",[2181],{"type":51,"value":2182},"JS Variable Declaration Order (TDZ — causes white screen crash)",{"type":45,"tag":54,"props":2184,"children":2185},{},[2186,2192,2194,2199,2201,2206,2208,2213],{"type":45,"tag":74,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":51,"value":2191},"let",{"type":51,"value":2193},"\u002F",{"type":45,"tag":74,"props":2195,"children":2197},{"className":2196},[],[2198],{"type":51,"value":1832},{"type":51,"value":2200}," variables must be declared at the ",{"type":45,"tag":122,"props":2202,"children":2203},{},[2204],{"type":51,"value":2205},"top",{"type":51,"value":2207}," of the ",{"type":45,"tag":74,"props":2209,"children":2211},{"className":2210},[],[2212],{"type":51,"value":1898},{"type":51,"value":2214}," block, before any function that references them:",{"type":45,"tag":67,"props":2216,"children":2218},{"className":1926,"code":2217,"language":1928,"meta":76,"style":76},"\u002F\u002F 1. State variables FIRST\nlet frameCount = 0;\nlet startTime = Date.now();\n\n\u002F\u002F 2. Canvas\u002FGL init, shader compile, FBO creation\nconst canvas = document.getElementById('canvas');\nconst gl = canvas.getContext('webgl2');\n\u002F\u002F ...\n\n\u002F\u002F 3. Functions and event bindings LAST\nfunction resize() { \u002F* can now safely reference frameCount *\u002F }\nfunction render() { \u002F* ... *\u002F }\nwindow.addEventListener('resize', resize);\n",[2219],{"type":45,"tag":74,"props":2220,"children":2221},{"__ignoreMap":76},[2222,2231,2257,2295,2302,2310,2363,2418,2426,2434,2443,2476,2506],{"type":45,"tag":1587,"props":2223,"children":2224},{"class":1589,"line":1590},[2225],{"type":45,"tag":1587,"props":2226,"children":2228},{"style":2227},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2229],{"type":51,"value":2230},"\u002F\u002F 1. State variables FIRST\n",{"type":45,"tag":1587,"props":2232,"children":2233},{"class":1589,"line":1599},[2234,2238,2243,2247,2253],{"type":45,"tag":1587,"props":2235,"children":2236},{"style":1938},[2237],{"type":51,"value":2191},{"type":45,"tag":1587,"props":2239,"children":2240},{"style":1943},[2241],{"type":51,"value":2242}," frameCount ",{"type":45,"tag":1587,"props":2244,"children":2245},{"style":1949},[2246],{"type":51,"value":1952},{"type":45,"tag":1587,"props":2248,"children":2250},{"style":2249},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2251],{"type":51,"value":2252}," 0",{"type":45,"tag":1587,"props":2254,"children":2255},{"style":1949},[2256],{"type":51,"value":2020},{"type":45,"tag":1587,"props":2258,"children":2259},{"class":1589,"line":1608},[2260,2264,2269,2273,2278,2282,2287,2291],{"type":45,"tag":1587,"props":2261,"children":2262},{"style":1938},[2263],{"type":51,"value":2191},{"type":45,"tag":1587,"props":2265,"children":2266},{"style":1943},[2267],{"type":51,"value":2268}," startTime ",{"type":45,"tag":1587,"props":2270,"children":2271},{"style":1949},[2272],{"type":51,"value":1952},{"type":45,"tag":1587,"props":2274,"children":2275},{"style":1943},[2276],{"type":51,"value":2277}," Date",{"type":45,"tag":1587,"props":2279,"children":2280},{"style":1949},[2281],{"type":51,"value":1962},{"type":45,"tag":1587,"props":2283,"children":2284},{"style":1965},[2285],{"type":51,"value":2286},"now",{"type":45,"tag":1587,"props":2288,"children":2289},{"style":1943},[2290],{"type":51,"value":2015},{"type":45,"tag":1587,"props":2292,"children":2293},{"style":1949},[2294],{"type":51,"value":2020},{"type":45,"tag":1587,"props":2296,"children":2297},{"class":1589,"line":1617},[2298],{"type":45,"tag":1587,"props":2299,"children":2300},{"emptyLinePlaceholder":1702},[2301],{"type":51,"value":1705},{"type":45,"tag":1587,"props":2303,"children":2304},{"class":1589,"line":1698},[2305],{"type":45,"tag":1587,"props":2306,"children":2307},{"style":2227},[2308],{"type":51,"value":2309},"\u002F\u002F 2. Canvas\u002FGL init, shader compile, FBO creation\n",{"type":45,"tag":1587,"props":2311,"children":2312},{"class":1589,"line":1708},[2313,2317,2322,2326,2330,2334,2338,2342,2346,2351,2355,2359],{"type":45,"tag":1587,"props":2314,"children":2315},{"style":1938},[2316],{"type":51,"value":1832},{"type":45,"tag":1587,"props":2318,"children":2319},{"style":1943},[2320],{"type":51,"value":2321}," canvas ",{"type":45,"tag":1587,"props":2323,"children":2324},{"style":1949},[2325],{"type":51,"value":1952},{"type":45,"tag":1587,"props":2327,"children":2328},{"style":1943},[2329],{"type":51,"value":1957},{"type":45,"tag":1587,"props":2331,"children":2332},{"style":1949},[2333],{"type":51,"value":1962},{"type":45,"tag":1587,"props":2335,"children":2336},{"style":1965},[2337],{"type":51,"value":1968},{"type":45,"tag":1587,"props":2339,"children":2340},{"style":1943},[2341],{"type":51,"value":1973},{"type":45,"tag":1587,"props":2343,"children":2344},{"style":1949},[2345],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2347,"children":2348},{"style":1981},[2349],{"type":51,"value":2350},"canvas",{"type":45,"tag":1587,"props":2352,"children":2353},{"style":1949},[2354],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2356,"children":2357},{"style":1943},[2358],{"type":51,"value":1993},{"type":45,"tag":1587,"props":2360,"children":2361},{"style":1949},[2362],{"type":51,"value":2020},{"type":45,"tag":1587,"props":2364,"children":2365},{"class":1589,"line":1717},[2366,2370,2375,2379,2384,2388,2393,2397,2401,2406,2410,2414],{"type":45,"tag":1587,"props":2367,"children":2368},{"style":1938},[2369],{"type":51,"value":1832},{"type":45,"tag":1587,"props":2371,"children":2372},{"style":1943},[2373],{"type":51,"value":2374}," gl ",{"type":45,"tag":1587,"props":2376,"children":2377},{"style":1949},[2378],{"type":51,"value":1952},{"type":45,"tag":1587,"props":2380,"children":2381},{"style":1943},[2382],{"type":51,"value":2383}," canvas",{"type":45,"tag":1587,"props":2385,"children":2386},{"style":1949},[2387],{"type":51,"value":1962},{"type":45,"tag":1587,"props":2389,"children":2390},{"style":1965},[2391],{"type":51,"value":2392},"getContext",{"type":45,"tag":1587,"props":2394,"children":2395},{"style":1943},[2396],{"type":51,"value":1973},{"type":45,"tag":1587,"props":2398,"children":2399},{"style":1949},[2400],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2402,"children":2403},{"style":1981},[2404],{"type":51,"value":2405},"webgl2",{"type":45,"tag":1587,"props":2407,"children":2408},{"style":1949},[2409],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2411,"children":2412},{"style":1943},[2413],{"type":51,"value":1993},{"type":45,"tag":1587,"props":2415,"children":2416},{"style":1949},[2417],{"type":51,"value":2020},{"type":45,"tag":1587,"props":2419,"children":2420},{"class":1589,"line":1726},[2421],{"type":45,"tag":1587,"props":2422,"children":2423},{"style":2227},[2424],{"type":51,"value":2425},"\u002F\u002F ...\n",{"type":45,"tag":1587,"props":2427,"children":2429},{"class":1589,"line":2428},9,[2430],{"type":45,"tag":1587,"props":2431,"children":2432},{"emptyLinePlaceholder":1702},[2433],{"type":51,"value":1705},{"type":45,"tag":1587,"props":2435,"children":2437},{"class":1589,"line":2436},10,[2438],{"type":45,"tag":1587,"props":2439,"children":2440},{"style":2227},[2441],{"type":51,"value":2442},"\u002F\u002F 3. Functions and event bindings LAST\n",{"type":45,"tag":1587,"props":2444,"children":2446},{"class":1589,"line":2445},11,[2447,2452,2457,2461,2466,2471],{"type":45,"tag":1587,"props":2448,"children":2449},{"style":1938},[2450],{"type":51,"value":2451},"function",{"type":45,"tag":1587,"props":2453,"children":2454},{"style":1965},[2455],{"type":51,"value":2456}," resize",{"type":45,"tag":1587,"props":2458,"children":2459},{"style":1949},[2460],{"type":51,"value":2015},{"type":45,"tag":1587,"props":2462,"children":2463},{"style":1949},[2464],{"type":51,"value":2465}," {",{"type":45,"tag":1587,"props":2467,"children":2468},{"style":2227},[2469],{"type":51,"value":2470}," \u002F* can now safely reference frameCount *\u002F",{"type":45,"tag":1587,"props":2472,"children":2473},{"style":1949},[2474],{"type":51,"value":2475}," }\n",{"type":45,"tag":1587,"props":2477,"children":2479},{"class":1589,"line":2478},12,[2480,2484,2489,2493,2497,2502],{"type":45,"tag":1587,"props":2481,"children":2482},{"style":1938},[2483],{"type":51,"value":2451},{"type":45,"tag":1587,"props":2485,"children":2486},{"style":1965},[2487],{"type":51,"value":2488}," render",{"type":45,"tag":1587,"props":2490,"children":2491},{"style":1949},[2492],{"type":51,"value":2015},{"type":45,"tag":1587,"props":2494,"children":2495},{"style":1949},[2496],{"type":51,"value":2465},{"type":45,"tag":1587,"props":2498,"children":2499},{"style":2227},[2500],{"type":51,"value":2501}," \u002F* ... *\u002F",{"type":45,"tag":1587,"props":2503,"children":2504},{"style":1949},[2505],{"type":51,"value":2475},{"type":45,"tag":1587,"props":2507,"children":2509},{"class":1589,"line":2508},13,[2510,2515,2519,2524,2528,2532,2537,2541,2546,2551],{"type":45,"tag":1587,"props":2511,"children":2512},{"style":1943},[2513],{"type":51,"value":2514},"window",{"type":45,"tag":1587,"props":2516,"children":2517},{"style":1949},[2518],{"type":51,"value":1962},{"type":45,"tag":1587,"props":2520,"children":2521},{"style":1965},[2522],{"type":51,"value":2523},"addEventListener",{"type":45,"tag":1587,"props":2525,"children":2526},{"style":1943},[2527],{"type":51,"value":1973},{"type":45,"tag":1587,"props":2529,"children":2530},{"style":1949},[2531],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2533,"children":2534},{"style":1981},[2535],{"type":51,"value":2536},"resize",{"type":45,"tag":1587,"props":2538,"children":2539},{"style":1949},[2540],{"type":51,"value":1978},{"type":45,"tag":1587,"props":2542,"children":2543},{"style":1949},[2544],{"type":51,"value":2545},",",{"type":45,"tag":1587,"props":2547,"children":2548},{"style":1943},[2549],{"type":51,"value":2550}," resize)",{"type":45,"tag":1587,"props":2552,"children":2553},{"style":1949},[2554],{"type":51,"value":2020},{"type":45,"tag":54,"props":2556,"children":2557},{},[2558,2560,2565,2566,2571,2573,2579],{"type":51,"value":2559},"Reason: ",{"type":45,"tag":74,"props":2561,"children":2563},{"className":2562},[],[2564],{"type":51,"value":2191},{"type":51,"value":2193},{"type":45,"tag":74,"props":2567,"children":2569},{"className":2568},[],[2570],{"type":51,"value":1832},{"type":51,"value":2572}," have a Temporal Dead Zone — referencing them before declaration throws ",{"type":45,"tag":74,"props":2574,"children":2576},{"className":2575},[],[2577],{"type":51,"value":2578},"ReferenceError",{"type":51,"value":2580},", causing a white screen.",{"type":45,"tag":990,"props":2582,"children":2584},{"id":2583},"glsl-compilation-errors-self-check-after-writing-shaders",[2585],{"type":51,"value":2586},"GLSL Compilation Errors (self-check after writing shaders)",{"type":45,"tag":997,"props":2588,"children":2589},{},[2590,2622,2694,2733],{"type":45,"tag":116,"props":2591,"children":2592},{},[2593,2598,2600,2606,2608,2614,2616],{"type":45,"tag":122,"props":2594,"children":2595},{},[2596],{"type":51,"value":2597},"Function signature mismatch",{"type":51,"value":2599},": Call must exactly match definition in parameter count and types. If defined as ",{"type":45,"tag":74,"props":2601,"children":2603},{"className":2602},[],[2604],{"type":51,"value":2605},"float fbm(vec3 p)",{"type":51,"value":2607},", cannot call ",{"type":45,"tag":74,"props":2609,"children":2611},{"className":2610},[],[2612],{"type":51,"value":2613},"fbm(uv)",{"type":51,"value":2615}," with a ",{"type":45,"tag":74,"props":2617,"children":2619},{"className":2618},[],[2620],{"type":51,"value":2621},"vec2",{"type":45,"tag":116,"props":2623,"children":2624},{},[2625,2630,2632,2638,2639,2645,2646,2652,2653,2659,2660,2666,2667,2673,2674,2680,2681,2687,2688],{"type":45,"tag":122,"props":2626,"children":2627},{},[2628],{"type":51,"value":2629},"Reserved words as variable names",{"type":51,"value":2631},": Do not use: ",{"type":45,"tag":74,"props":2633,"children":2635},{"className":2634},[],[2636],{"type":51,"value":2637},"patch",{"type":51,"value":1393},{"type":45,"tag":74,"props":2640,"children":2642},{"className":2641},[],[2643],{"type":51,"value":2644},"cast",{"type":51,"value":1393},{"type":45,"tag":74,"props":2647,"children":2649},{"className":2648},[],[2650],{"type":51,"value":2651},"sample",{"type":51,"value":1393},{"type":45,"tag":74,"props":2654,"children":2656},{"className":2655},[],[2657],{"type":51,"value":2658},"filter",{"type":51,"value":1393},{"type":45,"tag":74,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":51,"value":2665},"input",{"type":51,"value":1393},{"type":45,"tag":74,"props":2668,"children":2670},{"className":2669},[],[2671],{"type":51,"value":2672},"output",{"type":51,"value":1393},{"type":45,"tag":74,"props":2675,"children":2677},{"className":2676},[],[2678],{"type":51,"value":2679},"common",{"type":51,"value":1393},{"type":45,"tag":74,"props":2682,"children":2684},{"className":2683},[],[2685],{"type":51,"value":2686},"partition",{"type":51,"value":1393},{"type":45,"tag":74,"props":2689,"children":2691},{"className":2690},[],[2692],{"type":51,"value":2693},"active",{"type":45,"tag":116,"props":2695,"children":2696},{},[2697,2702,2704,2710,2712,2718,2720,2726,2728],{"type":45,"tag":122,"props":2698,"children":2699},{},[2700],{"type":51,"value":2701},"Strict type matching",{"type":51,"value":2703},": ",{"type":45,"tag":74,"props":2705,"children":2707},{"className":2706},[],[2708],{"type":51,"value":2709},"vec3 x = 1.0",{"type":51,"value":2711}," is illegal — use ",{"type":45,"tag":74,"props":2713,"children":2715},{"className":2714},[],[2716],{"type":51,"value":2717},"vec3 x = vec3(1.0)",{"type":51,"value":2719},"; cannot use ",{"type":45,"tag":74,"props":2721,"children":2723},{"className":2722},[],[2724],{"type":51,"value":2725},".z",{"type":51,"value":2727}," to access a ",{"type":45,"tag":74,"props":2729,"children":2731},{"className":2730},[],[2732],{"type":51,"value":2621},{"type":45,"tag":116,"props":2734,"children":2735},{},[2736,2741,2743,2749,2750,2756],{"type":45,"tag":122,"props":2737,"children":2738},{},[2739],{"type":51,"value":2740},"No ternary on structs",{"type":51,"value":2742},": ESSL does not allow ternary operator on struct types — use ",{"type":45,"tag":74,"props":2744,"children":2746},{"className":2745},[],[2747],{"type":51,"value":2748},"if",{"type":51,"value":2193},{"type":45,"tag":74,"props":2751,"children":2753},{"className":2752},[],[2754],{"type":51,"value":2755},"else",{"type":51,"value":2757}," instead",{"type":45,"tag":990,"props":2759,"children":2761},{"id":2760},"performance-budget",[2762],{"type":51,"value":2763},"Performance Budget",{"type":45,"tag":54,"props":2765,"children":2766},{},[2767],{"type":51,"value":2768},"Deployment environments may use headless software rendering with limited GPU power. Stay within these limits:",{"type":45,"tag":997,"props":2770,"children":2771},{},[2772,2777,2782,2787],{"type":45,"tag":116,"props":2773,"children":2774},{},[2775],{"type":51,"value":2776},"Ray marching main loop: ≤ 128 steps",{"type":45,"tag":116,"props":2778,"children":2779},{},[2780],{"type":51,"value":2781},"Volume sampling \u002F lighting inner loops: ≤ 32 steps",{"type":45,"tag":116,"props":2783,"children":2784},{},[2785],{"type":51,"value":2786},"FBM octaves: ≤ 6 layers",{"type":45,"tag":116,"props":2788,"children":2789},{},[2790],{"type":51,"value":2791},"Total nested loop iterations per pixel: ≤ 1000 (exceeding this freezes the browser)",{"type":45,"tag":60,"props":2793,"children":2795},{"id":2794},"quick-recipes",[2796],{"type":51,"value":2797},"Quick Recipes",{"type":45,"tag":54,"props":2799,"children":2800},{},[2801],{"type":51,"value":2802},"Common effect combinations — complete rendering pipelines assembled from technique modules.",{"type":45,"tag":990,"props":2804,"children":2806},{"id":2805},"photorealistic-sdf-scene",[2807],{"type":51,"value":2808},"Photorealistic SDF Scene",{"type":45,"tag":112,"props":2810,"children":2811},{},[2812,2822,2832,2842,2852],{"type":45,"tag":116,"props":2813,"children":2814},{},[2815,2820],{"type":45,"tag":122,"props":2816,"children":2817},{},[2818],{"type":51,"value":2819},"Geometry",{"type":51,"value":2821},": sdf-3d (extended primitives) + csg-boolean-operations (cubic\u002Fquartic smin)",{"type":45,"tag":116,"props":2823,"children":2824},{},[2825,2830],{"type":45,"tag":122,"props":2826,"children":2827},{},[2828],{"type":51,"value":2829},"Rendering",{"type":51,"value":2831},": ray-marching + normal-estimation (tetrahedron method)",{"type":45,"tag":116,"props":2833,"children":2834},{},[2835,2840],{"type":45,"tag":122,"props":2836,"children":2837},{},[2838],{"type":51,"value":2839},"Lighting",{"type":51,"value":2841},": lighting-model (outdoor three-light model) + shadow-techniques (improved soft shadow) + ambient-occlusion",{"type":45,"tag":116,"props":2843,"children":2844},{},[2845,2850],{"type":45,"tag":122,"props":2846,"children":2847},{},[2848],{"type":51,"value":2849},"Atmosphere",{"type":51,"value":2851},": atmospheric-scattering (height-based fog with sun tint)",{"type":45,"tag":116,"props":2853,"children":2854},{},[2855,2860],{"type":45,"tag":122,"props":2856,"children":2857},{},[2858],{"type":51,"value":2859},"Post",{"type":51,"value":2861},": post-processing (ACES tone mapping) + anti-aliasing (2x SSAA) + camera-effects (vignette)",{"type":45,"tag":990,"props":2863,"children":2865},{"id":2864},"organic-biological-forms",[2866],{"type":51,"value":2867},"Organic \u002F Biological Forms",{"type":45,"tag":112,"props":2869,"children":2870},{},[2871,2880,2890],{"type":45,"tag":116,"props":2872,"children":2873},{},[2874,2878],{"type":45,"tag":122,"props":2875,"children":2876},{},[2877],{"type":51,"value":2819},{"type":51,"value":2879},": sdf-3d (extended primitives + deformation operators: twist, bend) + csg-boolean (gradient-aware smin for material blending)",{"type":45,"tag":116,"props":2881,"children":2882},{},[2883,2888],{"type":45,"tag":122,"props":2884,"children":2885},{},[2886],{"type":51,"value":2887},"Detail",{"type":51,"value":2889},": procedural-noise (FBM with derivatives) + domain-warping",{"type":45,"tag":116,"props":2891,"children":2892},{},[2893,2898],{"type":45,"tag":122,"props":2894,"children":2895},{},[2896],{"type":51,"value":2897},"Surface",{"type":51,"value":2899},": lighting-model (subsurface scattering approximation via half-Lambert)",{"type":45,"tag":990,"props":2901,"children":2903},{"id":2902},"procedural-landscape",[2904],{"type":51,"value":2905},"Procedural Landscape",{"type":45,"tag":112,"props":2907,"children":2908},{},[2909,2919,2929,2939],{"type":45,"tag":116,"props":2910,"children":2911},{},[2912,2917],{"type":45,"tag":122,"props":2913,"children":2914},{},[2915],{"type":51,"value":2916},"Terrain",{"type":51,"value":2918},": terrain-rendering + procedural-noise (erosion FBM with derivatives)",{"type":45,"tag":116,"props":2920,"children":2921},{},[2922,2927],{"type":45,"tag":122,"props":2923,"children":2924},{},[2925],{"type":51,"value":2926},"Texturing",{"type":51,"value":2928},": texture-mapping-advanced (biplanar mapping + no-tile)",{"type":45,"tag":116,"props":2930,"children":2931},{},[2932,2937],{"type":45,"tag":122,"props":2933,"children":2934},{},[2935],{"type":51,"value":2936},"Sky",{"type":51,"value":2938},": atmospheric-scattering (Rayleigh\u002FMie + height fog)",{"type":45,"tag":116,"props":2940,"children":2941},{},[2942,2947],{"type":45,"tag":122,"props":2943,"children":2944},{},[2945],{"type":51,"value":2946},"Water",{"type":51,"value":2948},": water-ocean (Gerstner waves) + lighting-model (Fresnel reflections)",{"type":45,"tag":990,"props":2950,"children":2952},{"id":2951},"stylized-2d-art",[2953],{"type":51,"value":2954},"Stylized 2D Art",{"type":45,"tag":112,"props":2956,"children":2957},{},[2958,2968,2978],{"type":45,"tag":116,"props":2959,"children":2960},{},[2961,2966],{"type":45,"tag":122,"props":2962,"children":2963},{},[2964],{"type":51,"value":2965},"Shapes",{"type":51,"value":2967},": sdf-2d (extended library) + sdf-tricks (layered edges, hollowing)",{"type":45,"tag":116,"props":2969,"children":2970},{},[2971,2976],{"type":45,"tag":122,"props":2972,"children":2973},{},[2974],{"type":51,"value":2975},"Color",{"type":51,"value":2977},": color-palette (cosine palettes) + polar-uv-manipulation (kaleidoscope)",{"type":45,"tag":116,"props":2979,"children":2980},{},[2981,2986],{"type":45,"tag":122,"props":2982,"children":2983},{},[2984],{"type":51,"value":2985},"Polish",{"type":51,"value":2987},": anti-aliasing (SDF analytical AA) + post-processing (bloom, chromatic aberration)",{"type":45,"tag":60,"props":2989,"children":2991},{"id":2990},"shader-debugging-techniques",[2992],{"type":51,"value":2993},"Shader Debugging Techniques",{"type":45,"tag":54,"props":2995,"children":2996},{},[2997],{"type":51,"value":2998},"Visual debugging methods — temporarily replace your output to diagnose issues.",{"type":45,"tag":171,"props":3000,"children":3001},{},[3002,3023],{"type":45,"tag":175,"props":3003,"children":3004},{},[3005],{"type":45,"tag":179,"props":3006,"children":3007},{},[3008,3013,3018],{"type":45,"tag":183,"props":3009,"children":3010},{},[3011],{"type":51,"value":3012},"What to check",{"type":45,"tag":183,"props":3014,"children":3015},{},[3016],{"type":51,"value":3017},"Code",{"type":45,"tag":183,"props":3019,"children":3020},{},[3021],{"type":51,"value":3022},"What to look for",{"type":45,"tag":199,"props":3024,"children":3025},{},[3026,3047,3069,3091,3113,3135,3157,3187],{"type":45,"tag":179,"props":3027,"children":3028},{},[3029,3033,3042],{"type":45,"tag":206,"props":3030,"children":3031},{},[3032],{"type":51,"value":799},{"type":45,"tag":206,"props":3034,"children":3035},{},[3036],{"type":45,"tag":74,"props":3037,"children":3039},{"className":3038},[],[3040],{"type":51,"value":3041},"col = nor * 0.5 + 0.5;",{"type":45,"tag":206,"props":3043,"children":3044},{},[3045],{"type":51,"value":3046},"Smooth gradients = correct normals; banding = epsilon too large",{"type":45,"tag":179,"props":3048,"children":3049},{},[3050,3055,3064],{"type":45,"tag":206,"props":3051,"children":3052},{},[3053],{"type":51,"value":3054},"Ray march step count",{"type":45,"tag":206,"props":3056,"children":3057},{},[3058],{"type":45,"tag":74,"props":3059,"children":3061},{"className":3060},[],[3062],{"type":51,"value":3063},"col = vec3(float(steps) \u002F float(MAX_STEPS));",{"type":45,"tag":206,"props":3065,"children":3066},{},[3067],{"type":51,"value":3068},"Red hotspots = performance bottleneck; uniform = wasted iterations",{"type":45,"tag":179,"props":3070,"children":3071},{},[3072,3077,3086],{"type":45,"tag":206,"props":3073,"children":3074},{},[3075],{"type":51,"value":3076},"Depth \u002F distance",{"type":45,"tag":206,"props":3078,"children":3079},{},[3080],{"type":45,"tag":74,"props":3081,"children":3083},{"className":3082},[],[3084],{"type":51,"value":3085},"col = vec3(t \u002F MAX_DIST);",{"type":45,"tag":206,"props":3087,"children":3088},{},[3089],{"type":51,"value":3090},"Verify correct hit distances",{"type":45,"tag":179,"props":3092,"children":3093},{},[3094,3099,3108],{"type":45,"tag":206,"props":3095,"children":3096},{},[3097],{"type":51,"value":3098},"UV coordinates",{"type":45,"tag":206,"props":3100,"children":3101},{},[3102],{"type":45,"tag":74,"props":3103,"children":3105},{"className":3104},[],[3106],{"type":51,"value":3107},"col = vec3(uv, 0.0);",{"type":45,"tag":206,"props":3109,"children":3110},{},[3111],{"type":51,"value":3112},"Check coordinate mapping",{"type":45,"tag":179,"props":3114,"children":3115},{},[3116,3121,3130],{"type":45,"tag":206,"props":3117,"children":3118},{},[3119],{"type":51,"value":3120},"SDF distance field",{"type":45,"tag":206,"props":3122,"children":3123},{},[3124],{"type":45,"tag":74,"props":3125,"children":3127},{"className":3126},[],[3128],{"type":51,"value":3129},"col = (d > 0.0 ? vec3(0.9,0.6,0.3) : vec3(0.4,0.7,0.85)) * (0.8 + 0.2*cos(150.0*d));",{"type":45,"tag":206,"props":3131,"children":3132},{},[3133],{"type":51,"value":3134},"Visualize SDF bands and zero-crossing",{"type":45,"tag":179,"props":3136,"children":3137},{},[3138,3143,3152],{"type":45,"tag":206,"props":3139,"children":3140},{},[3141],{"type":51,"value":3142},"Checker pattern (UV)",{"type":45,"tag":206,"props":3144,"children":3145},{},[3146],{"type":45,"tag":74,"props":3147,"children":3149},{"className":3148},[],[3150],{"type":51,"value":3151},"col = vec3(mod(floor(uv.x*10.)+floor(uv.y*10.), 2.0));",{"type":45,"tag":206,"props":3153,"children":3154},{},[3155],{"type":51,"value":3156},"Verify UV distortion, seams",{"type":45,"tag":179,"props":3158,"children":3159},{},[3160,3165,3182],{"type":45,"tag":206,"props":3161,"children":3162},{},[3163],{"type":51,"value":3164},"Lighting only",{"type":45,"tag":206,"props":3166,"children":3167},{},[3168,3174,3176],{"type":45,"tag":74,"props":3169,"children":3171},{"className":3170},[],[3172],{"type":51,"value":3173},"col = vec3(shadow);",{"type":51,"value":3175}," or ",{"type":45,"tag":74,"props":3177,"children":3179},{"className":3178},[],[3180],{"type":51,"value":3181},"col = vec3(ao);",{"type":45,"tag":206,"props":3183,"children":3184},{},[3185],{"type":51,"value":3186},"Isolate shadow\u002FAO contributions",{"type":45,"tag":179,"props":3188,"children":3189},{},[3190,3195,3204],{"type":45,"tag":206,"props":3191,"children":3192},{},[3193],{"type":51,"value":3194},"Material ID",{"type":45,"tag":206,"props":3196,"children":3197},{},[3198],{"type":45,"tag":74,"props":3199,"children":3201},{"className":3200},[],[3202],{"type":51,"value":3203},"col = palette(matId \u002F maxMatId);",{"type":45,"tag":206,"props":3205,"children":3206},{},[3207],{"type":51,"value":3208},"Verify material assignment",{"type":45,"tag":3210,"props":3211,"children":3212},"style",{},[3213],{"type":51,"value":3214},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3216,"total":3407},[3217,3239,3251,3268,3283,3303,3319,3337,3352,3368,3387,3397],{"slug":3218,"name":3218,"fn":3219,"description":3220,"org":3221,"tags":3222,"stars":26,"repoUrl":27,"updatedAt":3238},"android-native-dev","develop Android native applications","Android native application development and UI design guide. Covers Material Design 3, Kotlin\u002FCompose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3223,3226,3229,3232,3235],{"name":3224,"slug":3225,"type":16},"Accessibility","accessibility",{"name":3227,"slug":3228,"type":16},"Android","android",{"name":3230,"slug":3231,"type":16},"Kotlin","kotlin",{"name":3233,"slug":3234,"type":16},"Mobile","mobile",{"name":3236,"slug":3237,"type":16},"UI Components","ui-components","2026-07-13T06:16:54.247834",{"slug":3240,"name":3240,"fn":3241,"description":3242,"org":3243,"tags":3244,"stars":26,"repoUrl":27,"updatedAt":3250},"buddy-sings","generate singing performances for AI companions","Use when user wants their Claude Code pet (\u002Fbuddy) to sing a song. Triggers on any request that combines the concept of their Claude Code buddy, pet, or companion with singing or music. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3245,3248,3249],{"name":3246,"slug":3247,"type":16},"Agents","agents",{"name":1355,"slug":1352,"type":16},{"name":18,"slug":19,"type":16},"2026-07-13T06:16:35.130644",{"slug":3252,"name":3252,"fn":3253,"description":3254,"org":3255,"tags":3256,"stars":26,"repoUrl":27,"updatedAt":3267},"color-font-skill","select color palettes and font pairings","Choose presentation-ready color palettes and font pairings for PPT\u002Fdesign tasks. Use when users ask for visual theme choices, brand-safe palettes, or font recommendations. Triggers include: 配色, 色板, 字体, color palette, font, PPT配色, 字体搭配.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3257,3258,3261,3264],{"name":24,"slug":25,"type":16},{"name":3259,"slug":3260,"type":16},"Presentations","presentations",{"name":3262,"slug":3263,"type":16},"Themes","themes",{"name":3265,"slug":3266,"type":16},"Typography","typography","2026-07-13T06:17:02.785587",{"slug":3269,"name":3269,"fn":3270,"description":3271,"org":3272,"tags":3273,"stars":26,"repoUrl":27,"updatedAt":3282},"design-style-skill","select visual design systems for presentations","Select a consistent visual design system for PPT slides using radius\u002Fspacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp\u002FSoft\u002FRounded\u002FPill recipes, component mappings, typography\u002Fspacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3274,3275,3278,3281],{"name":24,"slug":25,"type":16},{"name":3276,"slug":3277,"type":16},"Design System","design-system",{"name":3279,"slug":3280,"type":16},"PowerPoint","powerpoint",{"name":3259,"slug":3260,"type":16},"2026-07-13T06:17:10.398389",{"slug":3284,"name":3284,"fn":3285,"description":3286,"org":3287,"tags":3288,"stars":26,"repoUrl":27,"updatedAt":3302},"flutter-dev","build cross-platform apps with Flutter","Flutter cross-platform development guide covering widget patterns, Riverpod\u002FBloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.\nUse when: building Flutter apps, implementing state management (Riverpod\u002FBloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3289,3292,3295,3296,3299],{"name":3290,"slug":3291,"type":16},"Dart","dart",{"name":3293,"slug":3294,"type":16},"Flutter","flutter",{"name":3233,"slug":3234,"type":16},{"name":3297,"slug":3298,"type":16},"Performance","performance",{"name":3300,"slug":3301,"type":16},"State Management","state-management","2026-07-13T06:16:36.626679",{"slug":3304,"name":3304,"fn":3305,"description":3306,"org":3307,"tags":3308,"stars":26,"repoUrl":27,"updatedAt":3318},"frontend-dev","build visually striking frontend web pages","Full-stack frontend development combining premium UI design, cinematic animations,\nAI-generated media assets, persuasive copywriting, and visual art. Builds complete,\nvisually striking web pages with real media, advanced motion, and compelling copy.\nUse when: building landing pages, marketing sites, product pages, dashboards,\ngenerating media assets (image\u002Fvideo\u002Faudio\u002Fmusic), writing conversion copy,\ncreating generative art, or implementing cinematic scroll animations.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3309,3310,3311,3312,3315],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},{"name":3313,"slug":3314,"type":16},"Frontend","frontend",{"name":3316,"slug":3317,"type":16},"Web Development","web-development","2026-07-13T06:16:39.108827",{"slug":3320,"name":3320,"fn":3321,"description":3322,"org":3323,"tags":3324,"stars":26,"repoUrl":27,"updatedAt":3336},"fullstack-dev","build full-stack web applications","Full-stack backend architecture and frontend-backend integration guide.\nTRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service,\nbuilding todo app, building CRUD app, building real-time app, building chat app,\nExpress + React, Next.js API, Node.js backend, Python backend, Go backend,\ndesigning service layers, implementing error handling, managing config\u002Fauth,\nsetting up API clients, implementing auth flows, handling file uploads,\nadding real-time features (SSE\u002FWebSocket), hardening for production.\nDO NOT TRIGGER when: pure frontend UI work, pure CSS\u002Fstyling, database schema only.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3325,3328,3329,3332,3335],{"name":3326,"slug":3327,"type":16},"Backend","backend",{"name":3313,"slug":3314,"type":16},{"name":3330,"slug":3331,"type":16},"Full-stack","full-stack",{"name":3333,"slug":3334,"type":16},"REST API","rest-api",{"name":3316,"slug":3317,"type":16},"2026-07-13T06:16:43.219005",{"slug":3338,"name":3338,"fn":3339,"description":3340,"org":3341,"tags":3342,"stars":26,"repoUrl":27,"updatedAt":3351},"gif-sticker-maker","create animated GIF stickers from photos","Convert photos (people, pets, objects, logos) into 4 animated GIF stickers with captions.\nUse when: user wants to create cartoon stickers, GIF expressions, emoji packs, animated avatars,\nor convert photos to Funko Pop \u002F Pop Mart blind box style animations.\nTriggers: sticker, GIF, cartoon, emoji, expression pack, avatar animation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3343,3344,3345,3348],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":3346,"slug":3347,"type":16},"Images","images",{"name":3349,"slug":3350,"type":16},"Media","media","2026-07-13T06:16:51.74461",{"slug":3353,"name":3353,"fn":3354,"description":3355,"org":3356,"tags":3357,"stars":26,"repoUrl":27,"updatedAt":3367},"ios-application-dev","develop iOS applications with SwiftUI and UIKit","iOS application development guide covering UIKit, SnapKit, and SwiftUI. Includes touch targets, safe areas, navigation patterns, Dynamic Type, Dark Mode, accessibility, collection views, common UI components, and SwiftUI design guidelines. For detailed references on specific topics, see the reference files.\nUse when: developing iOS apps, implementing UI, reviewing iOS code, working with UIKit\u002FSnapKit\u002FSwiftUI layouts, building iPhone interfaces, Swift mobile development, Apple HIG compliance, iOS accessibility implementation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3358,3359,3362,3363,3366],{"name":3224,"slug":3225,"type":16},{"name":3360,"slug":3361,"type":16},"iOS","ios",{"name":3233,"slug":3234,"type":16},{"name":3364,"slug":3365,"type":16},"SwiftUI","swiftui",{"name":3236,"slug":3237,"type":16},"2026-07-13T06:16:55.686092",{"slug":3369,"name":3369,"fn":3370,"description":3371,"org":3372,"tags":3373,"stars":26,"repoUrl":27,"updatedAt":3386},"minimax-docx","create and edit DOCX documents","Professional DOCX document creation, editing, and formatting using OpenXML SDK (.NET). Three pipelines: (A) create new documents from scratch, (B) fill\u002Fedit content in existing documents, (C) apply template formatting with XSD validation gate-check. MUST use this skill whenever the user wants to produce, modify, or format a Word document — including when they say \"write a report\", \"draft a proposal\", \"make a contract\", \"fill in this form\", \"reformat to match this template\", or any task whose final output is a .docx file. Even if the user doesn't mention \"docx\" explicitly, if the task implies a printable\u002Fformal document, use this skill.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3374,3377,3380,3383],{"name":3375,"slug":3376,"type":16},"Documents","documents",{"name":3378,"slug":3379,"type":16},"DOCX","docx",{"name":3381,"slug":3382,"type":16},"Office","office",{"name":3384,"slug":3385,"type":16},"Templates","templates","2026-07-13T06:16:40.461868",{"slug":3388,"name":3388,"fn":3389,"description":3390,"org":3391,"tags":3392,"stars":26,"repoUrl":27,"updatedAt":3396},"minimax-music-gen","generate music and audio tracks","Use when user wants to generate music, songs, or audio tracks. Triggers on any request involving music creation, song writing, lyrics generation, audio production, or covers. Also triggers when user provides lyrics and wants them turned into a song, or describes a mood\u002Fscene and wants background music. Supports multilingual triggers — match equivalent phrases in any language. Do NOT use for music playback of existing files, music theory questions, or music recommendation without generation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3393,3394,3395],{"name":1355,"slug":1352,"type":16},{"name":18,"slug":19,"type":16},{"name":3349,"slug":3350,"type":16},"2026-07-13T06:16:50.381758",{"slug":3398,"name":3398,"fn":3399,"description":3400,"org":3401,"tags":3402,"stars":26,"repoUrl":27,"updatedAt":3406},"minimax-music-playlist","generate personalized music playlists","Generate personalized music playlists by analyzing the user's music taste and generation feedback history. Triggers on any request involving playlist generation, music taste profiling, or personalized music recommendations. Supports multilingual triggers — match equivalent phrases in any language.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3403,3404,3405],{"name":1355,"slug":1352,"type":16},{"name":18,"slug":19,"type":16},{"name":3349,"slug":3350,"type":16},"2026-07-13T06:16:57.002997",37,{"items":3409,"total":3462},[3410,3418,3424,3431,3438,3446,3454],{"slug":3218,"name":3218,"fn":3219,"description":3220,"org":3411,"tags":3412,"stars":26,"repoUrl":27,"updatedAt":3238},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3413,3414,3415,3416,3417],{"name":3224,"slug":3225,"type":16},{"name":3227,"slug":3228,"type":16},{"name":3230,"slug":3231,"type":16},{"name":3233,"slug":3234,"type":16},{"name":3236,"slug":3237,"type":16},{"slug":3240,"name":3240,"fn":3241,"description":3242,"org":3419,"tags":3420,"stars":26,"repoUrl":27,"updatedAt":3250},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3421,3422,3423],{"name":3246,"slug":3247,"type":16},{"name":1355,"slug":1352,"type":16},{"name":18,"slug":19,"type":16},{"slug":3252,"name":3252,"fn":3253,"description":3254,"org":3425,"tags":3426,"stars":26,"repoUrl":27,"updatedAt":3267},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3427,3428,3429,3430],{"name":24,"slug":25,"type":16},{"name":3259,"slug":3260,"type":16},{"name":3262,"slug":3263,"type":16},{"name":3265,"slug":3266,"type":16},{"slug":3269,"name":3269,"fn":3270,"description":3271,"org":3432,"tags":3433,"stars":26,"repoUrl":27,"updatedAt":3282},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3434,3435,3436,3437],{"name":24,"slug":25,"type":16},{"name":3276,"slug":3277,"type":16},{"name":3279,"slug":3280,"type":16},{"name":3259,"slug":3260,"type":16},{"slug":3284,"name":3284,"fn":3285,"description":3286,"org":3439,"tags":3440,"stars":26,"repoUrl":27,"updatedAt":3302},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3441,3442,3443,3444,3445],{"name":3290,"slug":3291,"type":16},{"name":3293,"slug":3294,"type":16},{"name":3233,"slug":3234,"type":16},{"name":3297,"slug":3298,"type":16},{"name":3300,"slug":3301,"type":16},{"slug":3304,"name":3304,"fn":3305,"description":3306,"org":3447,"tags":3448,"stars":26,"repoUrl":27,"updatedAt":3318},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3449,3450,3451,3452,3453],{"name":21,"slug":22,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},{"name":3313,"slug":3314,"type":16},{"name":3316,"slug":3317,"type":16},{"slug":3320,"name":3320,"fn":3321,"description":3322,"org":3455,"tags":3456,"stars":26,"repoUrl":27,"updatedAt":3336},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[3457,3458,3459,3460,3461],{"name":3326,"slug":3327,"type":16},{"name":3313,"slug":3314,"type":16},{"name":3330,"slug":3331,"type":16},{"name":3333,"slug":3334,"type":16},{"name":3316,"slug":3317,"type":16},22]