claude-code-arcane 2.9.8 → 2.10.0

package/skills/shader-dev/techniques/particle-system.md

@@ -1,14 +1,14 @@
 # Particle System
 
-**IMPORTANT: GLSL ES 3.0 return values**: All code paths in non-void functions must return a value. Every branch of an if statement must have a return.
+**GLSL ES 3.0 return values**: All code paths in non-void functions must return a value. Every branch of an if statement must have a return.
 
-**IMPORTANT: Particle system time cycling**: Must use `mod(time - offset, period)` for cycle computation. **Never use `floor(time / period) * period`**! The latter causes all particles to have negative time initially, resulting in startup delay or blank rendering.
+**Particle system time cycling**: Must use `mod(time - offset, period)` for cycle computation. **Never use `floor(time / period) * period`**! The latter causes all particles to have negative time initially, resulting in startup delay or blank rendering.
 
-**IMPORTANT: Brightness budget (most common failure cause!)**: Each particle's `numerator / (dist² + epsilon)` peak = `numerator / epsilon`. **Total peak = N_particles x (numerator / epsilon) must be < 5.0** (single pass). Exceeding this budget causes washout even with Reinhard. See specific reference values in the comments of each template below. Multi-pass ping-pong systems have a stricter budget, see below.
+**Brightness budget (most common failure cause!)**: Each particle's `numerator / (dist² + epsilon)` peak = `numerator / epsilon`. **Total peak = N_particles x (numerator / epsilon) must be < 5.0** (single pass). Exceeding this budget causes washout even with Reinhard. See specific reference values in the comments of each template below. Multi-pass ping-pong systems have a stricter budget, see below.
 
-**IMPORTANT: Particle color vs background contrast**: When particle color is close to the background (sand dust/snow/fog), visibility must be enhanced through at least one method: (1) brightness significantly higher than background (2) different hue (3) visible motion trail.
+**Particle color vs background contrast**: When particle color is close to the background (sand dust/snow/fog), visibility must be enhanced through at least one method: (1) brightness significantly higher than background (2) different hue (3) visible motion trail.
 
-**IMPORTANT: Elongated glow (meteor/trail lines)**: Do not use `1/(distPerp² + tiny_epsilon)` for line glow — too-small epsilon makes the line center extremely bright. Correct approach: use `smoothstep` or `exp(-dist)` for lines, see meteor template below.
+**Elongated glow (meteor/trail lines)**: Do not use `1/(distPerp² + tiny_epsilon)` for line glow — too-small epsilon makes the line center extremely bright. Correct approach: use `smoothstep` or `exp(-dist)` for lines, see meteor template below.
 
 ### Correct Pattern
 ```glsl
@@ -133,7 +133,7 @@ void main() {
                 float fade = smoothstep(1.0, 0.0, burstPhase);
                 fade *= fade;
 
-                // IMPORTANT: Brightness budget: peak = 0.015/0.03 = 0.5, x 40 particles x fade ≈ total peak < 5.0
+                // Brightness budget: peak = 0.015/0.03 = 0.5, x 40 particles x fade ≈ total peak < 5.0
                 float intensity = fade * 0.015 / (dist * dist + 0.03);
 
                 float hueOffset = (hash11(pId * 3.7 + fwId * 11.0) - 0.5) * 0.15;
@@ -330,7 +330,7 @@ requestAnimationFrame(render);
 
 ### Star Field Function Template (For Meteors, Fireworks, and Other Night Sky Scenes)
 
-**IMPORTANT: Star visibility**: Stars must be clearly visible in screenshots as individual light points. Use `exp(-dist*dist*k)` for sharp Gaussian dots rather than `1/(dist²+eps)` broad glow. Each star's peak brightness should be at least 0.3 to be visible against a dark background.
+**Star visibility**: Stars must be clearly visible in screenshots as individual light points. Use `exp(-dist*dist*k)` for sharp Gaussian dots rather than `1/(dist²+eps)` broad glow. Each star's peak brightness should be at least 0.3 to be visible against a dark background.
 
 ```glsl
 #define NUM_STARS 200
@@ -484,7 +484,7 @@ vec2 particlePosition(int id, float time) {
 ### Step 4: Buffer-Stored Particle State (Stateful System)
 ```glsl
 // === Buffer A: Particle Physics Update ===
-// IMPORTANT: Multi-pass system warning: each fragment shader is compiled independently, helper functions must be redefined in each shader!
+// Multi-pass system warning: each fragment shader is compiled independently, helper functions must be redefined in each shader!
 #define NUM_PARTICLES 40
 #define MAX_VEL 0.5
 #define MAX_ACC 3.0
@@ -547,7 +547,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 ```
 
 ### Step 5: Particle Rendering — Metaball Style
-// IMPORTANT: Multi-pass system warning: Image shader must define all the following helper functions (compiled independently)!
+// Multi-pass system warning: Image shader must define all the following helper functions (compiled independently)!
 ```glsl
 #define BRIGHTNESS 0.002
 #define COLOR_START vec3(0.0, 0.64, 0.2)
@@ -595,7 +595,7 @@ vec3 renderParticles(vec2 uv) {
 
 ### Step 6: Frame Feedback Motion Blur
 ```glsl
-// IMPORTANT: Ping-pong brightness budget (most common washout cause!):
+// Ping-pong brightness budget (most common washout cause!):
 // Steady-state brightness = singleFrameContribution / (1 - TRAIL_DECAY)
 // decay=0.88 → 8.3x amplification, decay=0.95 → 20x amplification
 // Budget formula: N_particles x (numerator/epsilon) x 1/(1-decay) < 10.0
@@ -834,8 +834,8 @@ if (particle.z > particle.a) {
 Uses stateless single pass. Key: spiral trajectory + high-visibility particles + vortex eye dark zone + separated background fog layer.
 
 ```glsl
-// IMPORTANT: Particle color must be 2-3x brighter than background to be visible (sand-colored particles on sand-colored background easily disappear)
-// IMPORTANT: Brightness budget: 150 particles x peak(0.005/0.003=1.67) x fade(avg~0.3) ≈ 75, overexposed!
+// Particle color must be 2-3x brighter than background to be visible (sand-colored particles on sand-colored background easily disappear)
+// Brightness budget: 150 particles x peak(0.005/0.003=1.67) x fade(avg~0.3) ≈ 75, overexposed!
 //    Must increase epsilon or decrease numerator. Safe values: numerator=0.002, epsilon=0.008 → peak=0.25, total=11 → OK after Reinhard
 #define NUM_DUST 150
 #define VORTEX_CENTER vec2(0.0)
@@ -886,7 +886,7 @@ void main() {
 
 Meteors, magic projectiles, etc. need elongated glow (stretched luminous lines). **Do not use `1/(distPerp² + tiny_epsilon)` for lines** — too-small epsilon makes line centers extremely bright and washed out. Use `exp(-dist)` or `smoothstep` for safe line glow.
 
-**IMPORTANT: Common meteor failures**: (1) Star background too dark to see — must call `starField()` above and ensure stars use Gaussian dots `exp(-dist²*k)` for rendering (2) Meteor trail too faint — `core` multiplier should be at least 0.15, each step after dividing by `NUM_TRAIL_STEPS` still needs >= 0.005 contribution
+**Common meteor failures**: (1) Star background too dark to see — must call `starField()` above and ensure stars use Gaussian dots `exp(-dist²*k)` for rendering (2) Meteor trail too faint — `core` multiplier should be at least 0.15, each step after dividing by `NUM_TRAIL_STEPS` still needs >= 0.005 contribution
 
 ```glsl
 #define NUM_METEORS 6
@@ -959,7 +959,7 @@ void main() {
 
 Water/sparks jetting upward from a point, parabolic descent. Key: **Particles must be sharp, individually visible points** (small epsilon), not just a diffuse glow blob. Must include: (1) main water column particles (upward jet + parabola) (2) splash particles (spread sideways after hitting water) (3) water surface/pool visuals.
 
-**IMPORTANT: Most common fountain failure**: Only produces blurry glow without visible individual water droplet trajectories! Must use small epsilon (<=0.002) so each particle is clearly visible as an individual light point. Numerator must also be proportionally reduced to control total brightness.
+**Most common fountain failure**: Only produces blurry glow without visible individual water droplet trajectories! Must use small epsilon (<=0.002) so each particle is clearly visible as an individual light point. Numerator must also be proportionally reduced to control total brightness.
 
 ```glsl
 #define NUM_WATER 60
@@ -1042,7 +1042,7 @@ void main() {
 
 Flame effects must include **two layers**: (1) smooth flame body at the base (noise-driven cone gradient) (2) many **discrete ember/spark particles** above, drifting upward and gradually extinguishing. Using only a smooth gradient will be judged as "no particle system."
 
-**IMPORTANT: Most common flame failure**: Only draws a smooth gradient without discrete particles! Must have NUM_SPARKS individual point-like particles drifting out from the flame top.
+**Most common flame failure**: Only draws a smooth gradient without discrete particles! Must have NUM_SPARKS individual point-like particles drifting out from the flame top.
 
 ```glsl
 #define NUM_SPARKS 60
@@ -1112,7 +1112,7 @@ void main() {
 
 Magic effects, spiral ascent, magic circles, etc. require particles arranged in **geometric arrays** with **iridescent shimmer**. Key: particles must be individually visible glowing points (not a blurry glow blob), and the spiral structure must be clearly discernible.
 
-**IMPORTANT: Most common magic failure**: Only produces a blob of blurry light (diffuse glow blob) without visible individual particles or geometric structure! Ensure each particle is an independently visible small light point, and the overall arrangement forms spiral/ring/other geometric shapes. Reduce epsilon to make each particle sharper (small light dot) rather than a large blurry halo.
+**Most common magic failure**: Only produces a blob of blurry light (diffuse glow blob) without visible individual particles or geometric structure! Ensure each particle is an independently visible small light point, and the overall arrangement forms spiral/ring/other geometric shapes. Reduce epsilon to make each particle sharper (small light dot) rather than a large blurry halo.
 
 ```glsl
 #define NUM_SPIRAL 80

package/skills/shader-dev/techniques/polar-uv-manipulation.md

@@ -9,7 +9,7 @@ Code templates in this document use ShaderToy GLSL style. When generating standa
 - Fragment shader: `varying` → `in`, `gl_FragColor` → custom `out vec4 fragColor`, `texture2D()` → `texture()`
 - ShaderToy's `void mainImage(out vec4 fragColor, in vec2 fragCoord)` must be adapted to standard `void main()` entry
 
-**IMPORTANT: GLSL Type Strictness Warning**:
+**GLSL Type Strictness Warning**:
 - `vec2 = float` is illegal: types must match exactly, e.g., `float r = length(uv)` not `vec2 r = length(uv)`
 - Function return types must match: commonly used `fbm()` / `noise()` return `float`, cannot be assigned to `vec2`
 - If you need a vec2 type, use `vec2(fbm(...), fbm(...))` or `vec2(value)` constructor

package/skills/shader-dev/techniques/post-processing.md

@@ -1,11 +1,11 @@
 ## WebGL2 Adaptation Requirements
 
-**IMPORTANT: Critical Warning for Standalone HTML Deployment**: Post-processing effects require an input texture to work. When generating standalone HTML, you must:
+**Critical Warning for Standalone HTML Deployment**: Post-processing effects require an input texture to work. When generating standalone HTML, you must:
 1. Set `#define USE_DEMO_SCENE 1` to use the built-in demo scene (recommended), or
 2. Pass a valid input texture to the `iChannel0` channel, otherwise the screen will be completely black
 3. **Critical**: When USE_DEMO_SCENE=1, ensure the #else branch code does not reference non-existent uniforms (e.g., iChannel0)
 
-**IMPORTANT: GLSL Type Strictness Rules**:
+**GLSL Type Strictness Rules**:
 - `vec2 = float` is illegal — must use `vec2(x, x)` or `vec2(x)`
 - Function parameters must be defined before use; using a variable name in its own initializer is forbidden (e.g., `float w = filmicCurve(w, w)` is an error)
 - Variables must be declared before use
@@ -203,7 +203,7 @@ const progPost = createProgram(vsSource, fsPost);
 function createFBO(w, h) {
     const tex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, tex);
-    // IMPORTANT: Critical: Check for float texture extension, fall back to RGBA8 if unsupported
+    // Check for float texture extension, fall back to RGBA8 if unsupported
     const fmt = ext ? gl.RGBA16F : gl.RGBA;
     const typ = ext ? gl.FLOAT : gl.UNSIGNED_BYTE;
     gl.texImage2D(gl.TEXTURE_2D, 0, fmt, w, h, 0, gl.RGBA, typ, null);
@@ -293,7 +293,7 @@ The essence of post-processing is **per-pixel transformation of an already-rende
 vec3 reinhard(vec3 color) { return color / (1.0 + color); }
 
 // Filmic Reinhard (W=white point, T2=shoulder parameter)
-// IMPORTANT: GLSL critical rule: function parameters must be defined before use; using a variable name in its own initializer is forbidden
+// GLSL critical rule: function parameters must be defined before use; using a variable name in its own initializer is forbidden
 const float W = 1.2, T2 = 7.5; // adjustable
 float filmic_reinhard_curve(float x) {
     float q = (T2 * T2 + 1.0) * x * x;
@@ -440,7 +440,7 @@ color += (orderedDither(fragCoord) - 0.5) * 4.0 / 255.0;
 
 ### Step 10: Demo Scene (Required for Standalone HTML!)
 
-**IMPORTANT: Critical Warning**: Standalone HTML deployment must provide an input texture, otherwise post-processing effects will output solid black.
+**Critical Warning**: Standalone HTML deployment must provide an input texture, otherwise post-processing effects will output solid black.
 
 ```glsl
 // Demo scene fallback: used when no valid input texture is available
@@ -541,7 +541,7 @@ vec3 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution) {
 
 Can be run directly in ShaderToy. `iChannel0` is the scene texture.
 
-**IMPORTANT: Important Warning**: For standalone HTML deployment, you must:
+**Important Warning**: For standalone HTML deployment, you must:
 1. Pass a valid input texture to iChannel0 (or uChannel0)
 2. Or set `#define USE_DEMO_SCENE 1` to use the built-in demo scene
 
@@ -589,7 +589,7 @@ vec3 demoScene(vec2 uv, float time) {
 }
 
 vec3 tonemapReinhard(vec3 c) { return c / (1.0 + c); }
-// IMPORTANT: Critical: filmicCurve takes only one parameter x; w is computed externally via WHITE_POINT
+// filmicCurve takes only one parameter x; w is computed externally via WHITE_POINT
 float filmicCurve(float x) {
     float q = (SHOULDER*SHOULDER+1.0)*x*x; return q/(q+x+SHOULDER*SHOULDER);
 }

package/skills/shader-dev/techniques/sdf-3d.md

@@ -36,7 +36,7 @@ Key math:
 
 Runs directly in ShaderToy. Includes multi-primitive scene, smooth blending, soft shadows, AO, and material system.
 
-**IMPORTANT:** When using the `vec2(distance, materialID)` material system, `smin` needs to handle `vec2` types. The template includes a `vec2 smin(vec2 a, vec2 b, float k)` overload that ensures the material ID is correctly passed through during smooth blending (taking the material of the closer distance).
+**** When using the `vec2(distance, materialID)` material system, `smin` needs to handle `vec2` types. The template includes a `vec2 smin(vec2 a, vec2 b, float k)` overload that ensures the material ID is correctly passed through during smooth blending (taking the material of the closer distance).
 
 ```glsl
 // 3D SDF Full Rendering Pipeline Template - Runs in ShaderToy

package/skills/shader-dev/techniques/simulation-physics.md

@@ -4,7 +4,7 @@
 
 Below is a complete standalone HTML template demonstrating how to set up WebGL2 double buffering (ping-pong) for physics simulation:
 
-**IMPORTANT: WebGL2 ping-pong core rule: The texture bound to the write-target framebuffer must never simultaneously serve as input for any iChannel.** Violating this rule causes undefined behavior (typically all-black/all-zero output).
+**WebGL2 ping-pong core rule: The texture bound to the write-target framebuffer must never simultaneously serve as input for any iChannel.** Violating this rule causes undefined behavior (typically all-black/all-zero output).
 
 For simulations requiring "current frame" and "previous frame" two time steps (such as the wave equation), use **dual-channel encoding**: R channel stores current height, G channel stores previous frame height. This way only one buffer is read from (iChannel0 = currentBuf), writing to another buffer (nextBuf), avoiding read-write conflicts.
 
@@ -62,9 +62,9 @@ void main() {
 }`;
 
 // === Buffer Pass Shader (physics simulation) ===
-// IMPORTANT: Only uses iChannel0 (reads currentBuf), writes to nextBuf
+// Only uses iChannel0 (reads currentBuf), writes to nextBuf
 // R channel = current height, G channel = previous frame height (dual-channel encoding avoids read-write conflict)
-// IMPORTANT: RGBA8 compatible: use encode/decode to map signed values to [0,1], ensuring SwiftShader/no-float-texture environments work correctly
+// RGBA8 compatible: use encode/decode to map signed values to [0,1], ensuring SwiftShader/no-float-texture environments work correctly
 const fsBuffer = `#version 300 es
 precision highp float;
 uniform sampler2D iChannel0;
@@ -161,7 +161,7 @@ gl.enableVertexAttribArray(posLoc);
 gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
 
 // === Render loop ===
-// IMPORTANT: Key: currentBuf (read-only) and nextBuf (write-only) must be different buffers
+// currentBuf (read-only) and nextBuf (write-only) must be different buffers
 let frame = 0;
 function render(time) {
     time *= 0.001;
@@ -207,7 +207,7 @@ requestAnimationFrame(render);
 </script></body></html>
 ```
 
-**IMPORTANT: Common errors**:
+**Common errors**:
 1. **RGBA8 signed value truncation (fatal)**: Environments like SwiftShader that don't support `EXT_color_buffer_float` fall back to RGBA8 where values are clamped to [0,1]. Simulations requiring negative values (like the wave equation) will all zero out and produce a static image. **Must** use encode/decode functions: store as `v * 0.5 + 0.5`, read as `v * 2.0 - 1.0`, switching at runtime via `uniform int useFloatTex`. See the `encode()`/`decode()` functions in the template above
 2. **Ping-pong read-write conflict (fatal)**: When rendering to a framebuffer, the texture bound to that framebuffer cannot simultaneously serve as input. The wave equation uses dual-channel encoding (R=current, G=previous) requiring only one input buffer; cloth/particle systems read getpos/getvel both from iChannel0
 3. **Cloth rendering must use world coordinate projection (fatal)**: The cloth Image Pass cannot use `uv * vec2(SIZX, SIZY)` to map screen UV directly to grid ID. It must iterate over mesh faces, project vertex world coordinates to screen space via `worldToScreen()`, and perform triangle rasterization
@@ -253,14 +253,14 @@ Vorticity confinement:     curl = ∂v_x/∂y - ∂v_y/∂x
 
 ### Step 1: Ping-Pong Double Buffering (Correct WebGL2 Implementation)
 
-**IMPORTANT: Key difference between ShaderToy and WebGL2**: In ShaderToy, Buffer A/B are two independent passes with separate write targets, so `iChannel0=self, iChannel1=other` doesn't conflict. But in WebGL2 with a single shader program doing ping-pong, the write-target texture cannot be read simultaneously.
+**Key difference between ShaderToy and WebGL2**: In ShaderToy, Buffer A/B are two independent passes with separate write targets, so `iChannel0=self, iChannel1=other` doesn't conflict. But in WebGL2 with a single shader program doing ping-pong, the write-target texture cannot be read simultaneously.
 
 **Solution: Dual-channel encoding** — R channel stores current height, G channel stores previous frame height, requiring only one input buffer:
 
 ```glsl
 // WebGL2 Wave Equation Buffer Pass
-// IMPORTANT: Only iChannel0 (reads currentBuf), writes to nextBuf (must be different!)
-// IMPORTANT: encode/decode ensures signed values aren't truncated under RGBA8 (no float textures)
+// Only iChannel0 (reads currentBuf), writes to nextBuf (must be different!)
+// encode/decode ensures signed values aren't truncated under RGBA8 (no float textures)
 
 uniform int useFloatTex;
 float decode(float v) { return useFloatTex == 1 ? v : v * 2.0 - 1.0; }
@@ -298,7 +298,7 @@ gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, currentBuf.tex);    // read from currentBuf
 gl.uniform1i(gl.getUniformLocation(progBuffer, 'iChannel0'), 0);
 gl.uniform1i(gl.getUniformLocation(progBuffer, 'useFloatTex'), useFloat ? 1 : 0);
-// IMPORTANT: Do NOT bind iChannel1 to nextBuf/otherBuf!
+// Do NOT bind iChannel1 to nextBuf/otherBuf!
 ```
 
 ### Step 2: Interaction-Driven (External Force Injection)
@@ -328,7 +328,7 @@ next += force;
 ### Step 3: Height Field Rendering (Image Pass)
 
 ```glsl
-// IMPORTANT: Image Pass also needs decode
+// Image Pass also needs decode
 uniform int useFloatTex;
 float decode(float v) { return useFloatTex == 1 ? v : v * 2.0 - 1.0; }
 
@@ -429,9 +429,9 @@ Texture regions are partitioned to store different attributes:
 #define SIZX 128.0
 #define SIZY 64.0
 
-// IMPORTANT: Cloth/particle systems: getpos/getvel both read from iChannel0 (not iChannel1)
+// Cloth/particle systems: getpos/getvel both read from iChannel0 (not iChannel1)
 // Because iChannel0 = currentBuf (read-only), write target is nextBuf (separate buffer)
-// IMPORTANT: Use +0.5 to sample texel centers (not +0.01)
+// Use +0.5 to sample texel centers (not +0.01)
 vec3 getpos(vec2 id) {
     return texture(iChannel0, (id + 0.5) / iResolution.xy).xyz;
 }
@@ -566,8 +566,8 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord)
 
 ```glsl
 // === Buffer Pass (Wave Equation) ===
-// IMPORTANT: Only uses iChannel0 = currentBuf (read-only), writes to nextBuf
-// IMPORTANT: encode/decode ensures signed values aren't truncated under RGBA8 (SwiftShader compatible)
+// Only uses iChannel0 = currentBuf (read-only), writes to nextBuf
+// encode/decode ensures signed values aren't truncated under RGBA8 (SwiftShader compatible)
 
 uniform int useFloatTex;
 float decode(float v) { return useFloatTex == 1 ? v : v * 2.0 - 1.0; }
@@ -611,7 +611,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord)
 
 ```glsl
 // === Image Pass ===
-// IMPORTANT: Also needs decode to correctly read signed height values
+// Also needs decode to correctly read signed height values
 
 uniform int useFloatTex;
 float decode(float v) { return useFloatTex == 1 ? v : v * 2.0 - 1.0; }
@@ -744,7 +744,7 @@ void main() {
 ```glsl
 // === Image Pass (Smoke Rendering) ===
 // Reads density (z channel) and velocity (xy channels) from buffer, renders dense layered smoke + light scattering
-// IMPORTANT: Smoke brightness key: absorption coefficient must be large enough (>=3.0), background not too dark, lightTransmit must not over-attenuate
+// Smoke brightness key: absorption coefficient must be large enough (>=3.0), background not too dark, lightTransmit must not over-attenuate
 
 void main() {
     vec2 uv = vUv;
@@ -812,7 +812,7 @@ Cloth simulation requires 2 buffers for ping-pong alternating read/write, with a
 
 ```glsl
 // WebGL2-adapted cloth simulation Buffer Pass
-// IMPORTANT: getpos/getvel both read from iChannel0! iChannel0 = currentBuf (read-only), writes to nextBuf
+// getpos/getvel both read from iChannel0! iChannel0 = currentBuf (read-only), writes to nextBuf
 
 #define SIZX 128.0
 #define SIZY 64.0
@@ -889,12 +889,12 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 
 #### Cloth Rendering Pass (Image Pass) Complete Template
 
-**IMPORTANT: Cloth rendering core principle**: After physics simulation, cloth particle world positions (pos.xy) will deviate from their initial grid positions (due to gravity, collisions, etc.). The Image Pass must render based on particles' **actual world positions** projected to the screen — you cannot use `uv * vec2(SIZX, SIZY)` to directly map screen UV to grid ID (that would produce scattered dots/fragments rather than a continuous cloth surface).
+**Cloth rendering core principle**: After physics simulation, cloth particle world positions (pos.xy) will deviate from their initial grid positions (due to gravity, collisions, etc.). The Image Pass must render based on particles' **actual world positions** projected to the screen — you cannot use `uv * vec2(SIZX, SIZY)` to directly map screen UV to grid ID (that would produce scattered dots/fragments rather than a continuous cloth surface).
 
 Correct approach: iterate over all cloth mesh cells, project each cell's 4 vertex world coordinates to screen space, determine if the current pixel falls within that quad, then interpolate shading.
 
 ```glsl
-// IMPORTANT: Key: must pass additional uniform vec2 iSimResolution (simulation resolution)
+// must pass additional uniform vec2 iSimResolution (simulation resolution)
 //    getpos/getvel use iSimResolution, not iResolution
 //    Rendering method: iterate cloth mesh, project world coordinates to screen coordinates
 
@@ -1035,11 +1035,11 @@ void main() {
 }
 ```
 
-**IMPORTANT: Cloth rendering performance note**: The above template uses a double loop to iterate all mesh faces for triangle rasterization. For a 128x64 mesh this is about 8000 quads per frame. If GPU performance is insufficient, reduce mesh resolution (e.g., SIZX=64, SIZY=32) or use `texelFetch` instead of `texture` for speed. Another approach is to partition the cloth into blocks (e.g., 4x4), each with an independent bounding box for early culling.
+**Cloth rendering performance note**: The above template uses a double loop to iterate all mesh faces for triangle rasterization. For a 128x64 mesh this is about 8000 quads per frame. If GPU performance is insufficient, reduce mesh resolution (e.g., SIZX=64, SIZY=32) or use `texelFetch` instead of `texture` for speed. Another approach is to partition the cloth into blocks (e.g., 4x4), each with an independent bounding box for early culling.
 
 #### Cloth Simulation Complete HTML Template (Multi-Substep Iteration)
 
-**IMPORTANT: Key notes (must-read for cloth template)**:
+**Key notes (must-read for cloth template)**:
 1. **No read-write conflict**: In the Buffer Pass, iChannel0 is bound to currentBuf (read-only), the write target is nextBuf (separate buffer). getpos/getvel both read from iChannel0
 2. **iSimResolution uniform**: Image Pass must have `uniform vec2 iSimResolution` passing `(SIM_W, SIM_H)`, and `getpos`/`getvel` internally use `iSimResolution` for UV calculation
 3. **iFrame value passing**: In substep loops, iFrame should pass `frame * SUBSTEPS + substep`, ensuring the initialization condition `iFrame < SUBSTEPS` only triggers on the first frame
@@ -1130,7 +1130,7 @@ float getBallRadius() { return 0.12; }
 vec3 pos, vel, ovel;
 vec2 c;
 
-// IMPORTANT: Both read from iChannel0 (currentBuf), not iChannel1
+// Both read from iChannel0 (currentBuf), not iChannel1
 vec3 getpos(vec2 id) {
     return texture(iChannel0, (id + 0.5) / iResolution.xy).xyz;
 }
@@ -1414,7 +1414,7 @@ function render(time) {
     time *= 0.001;
 
     for (let substep = 0; substep < SUBSTEPS; substep++) {
-        // IMPORTANT: ping-pong: read from currentBuf (iChannel0), write to nextBuf
+        // ping-pong: read from currentBuf (iChannel0), write to nextBuf
         let currentBuf = (globalStep % 2 === 0) ? bufA : bufB;
         let nextBuf = (globalStep % 2 === 0) ? bufB : bufA;
 
@@ -1422,7 +1422,7 @@ function render(time) {
         gl.viewport(0, 0, SIM_W, SIM_H);
         gl.useProgram(progBuffer);
 
-        // IMPORTANT: Only bind iChannel0 = currentBuf (read-only)
+        // Only bind iChannel0 = currentBuf (read-only)
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, currentBuf.tex);
         gl.uniform1i(gl.getUniformLocation(progBuffer, 'iChannel0'), 0);

package/skills/shader-dev/techniques/sound-synthesis.md

@@ -157,7 +157,7 @@ const float NOTES[16] = float[16](
 
 float melody_array(float time, float bpm) {
     float beat = time * bpm / 60.0;
-    int idx = int(mod(beat, 16.0));  // IMPORTANT: Must use int() conversion
+    int idx = int(mod(beat, 16.0));  // Must use int() conversion
     float noteTime = fract(beat);
     float freq = noteFreq(NOTES[idx]);
     return instrument_additive(freq, noteTime * 60.0 / bpm);
@@ -241,7 +241,7 @@ vec2 mainSound(int samp, float time) {
     // Arrangement: smoothstep controls intro/outro
     audio *= smoothstep(0.0, 4.0, bar);              // Fade in over first 4 bars
     audio *= 0.35 * smoothstep(0.0, 0.5, time);
-    // IMPORTANT: Array indices must be int type
+    // Array indices must be int type
     // float idx = mod(beat, 16.0);        // WRONG: float cannot be used as index
     int idx = int(mod(beat, 16.0));       // CORRECT: int(mod(...)) conversion
     return clamp(audio, -1.0, 1.0);

package/skills/shader-dev/techniques/voronoi-cellular-noise.md

@@ -1,4 +1,4 @@
-- **IMPORTANT:** All declared `uniform` variables must be used in the shader code, otherwise the compiler will optimize them away. After optimization, `gl.getUniformLocation()` returns `null`, and setting that uniform triggers a WebGL `INVALID_OPERATION` error, which may cause rendering failure. Ensure uniforms like `iTime` are actually used in `main()` (e.g., `float t = iTime * 1.0;`)
+- **** All declared `uniform` variables must be used in the shader code, otherwise the compiler will optimize them away. After optimization, `gl.getUniformLocation()` returns `null`, and setting that uniform triggers a WebGL `INVALID_OPERATION` error, which may cause rendering failure. Ensure uniforms like `iTime` are actually used in `main()` (e.g., `float t = iTime * 1.0;`)
 
 # Voronoi & Cellular Noise