claude-code-arcane 2.9.8 → 2.10.0

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

@@ -50,12 +50,12 @@ Numerical viscosity over-smooths small-scale vortices. Vorticity confinement com
 
 **Why**: GPU shaders cannot simultaneously read and write the same buffer. The ping-pong strategy reads from one buffer (previous frame's data) and writes to the other each frame, then swaps on the next frame.
 
-**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. However, in WebGL2 there's only one shader program doing ping-pong, and the write target texture cannot be simultaneously read. The solution is **dual-channel encoding** (R=current height, G=previous frame height).
+**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. However, in WebGL2 there's only one shader program doing ping-pong, and the write target texture cannot be simultaneously read. The solution is **dual-channel encoding** (R=current height, G=previous frame height).
 
 **Code** (WebGL2-safe version, reads only from iChannel0, with RGBA8-compatible encoding):
 ```glsl
-// IMPORTANT: Only use iChannel0 (read currentBuf), write to nextBuf (must be different!)
-// IMPORTANT: encode/decode ensure signed values aren't clipped on RGBA8 (no float textures/SwiftShader)
+// Only use iChannel0 (read currentBuf), write to nextBuf (must be different!)
+// encode/decode ensure signed values aren't clipped on RGBA8 (no float textures/SwiftShader)
 uniform int useFloatTex;
 float decode(float v) { return useFloatTex == 1 ? v : v * 2.0 - 1.0; }
 float encode(float v) { return useFloatTex == 1 ? v : v * 0.5 + 0.5; }
@@ -244,7 +244,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord)
 #define SIZY 64.0   // adjustable: cloth height (particle count)
 
 // Left half [0, SIZX) stores positions, right half [SIZX, 2*SIZX) stores velocities
-// IMPORTANT: In WebGL2, getpos/getvel both read from iChannel0 (currentBuf, read-only),
+// In WebGL2, getpos/getvel both read from iChannel0 (currentBuf, read-only),
 //    write target is nextBuf (separate buffer), avoiding read-write conflict
 vec3 getpos(vec2 id)
 {
@@ -298,7 +298,7 @@ void edge(vec2 dif)
     vec3 posdif = getpos(dif + c) - pos;
     vec3 veldif = getvel(dif + c) - ovel;
 
-    // IMPORTANT: Must check for zero length, otherwise normalize(vec3(0)) produces NaN
+    // Must check for zero length, otherwise normalize(vec3(0)) produces NaN
     float plen = length(posdif);
     if (plen < 0.0001) return;
     vec3 dir = posdif / plen;
@@ -498,7 +498,7 @@ if (length(pos - ballPos) < ballRadius) {
 }
 ```
 
-> **IMPORTANT: Common Pitfalls**:
+> **Common Pitfalls**:
 > - **Cloth Image Pass must project world coordinates to screen**: You cannot use `uv * vec2(SIZX, SIZY)` to map screen UV to grid ID, because particles have moved from their initial positions, producing scattered fragments. You must iterate over mesh faces, projecting vertex world coordinates to screen space for triangle rasterization
 > - GLSL is strictly typed; you cannot write `float / vec2`. Wrong example: `length(dif) / vec2(SIZX, SIZY).x` will first execute float/vec2 causing a compile error; use `length(dif) / SIZX` instead
 > - `normalize(vec3(0))` produces NaN; all `normalize()` calls must include a length check beforehand

package/skills/shader-dev/reference/voxel-rendering.md

@@ -619,7 +619,7 @@ A complete voxel water scene with surface wave reflections, underwater refractio
 float waterY = 0.0;
 
 // Underwater voxel scene (sand + seaweed)
-// IMPORTANT: c.xz returns vec2, which only has .x/.y components — never use .z!
+// c.xz returns vec2, which only has .x/.y components — never use .z!
 int getVoxel(vec3 c) {
     float sandHeight = -3.0 + 0.5 * sin(c.x * 0.3) * cos(c.z * 0.4);
     if (c.y < sandHeight) return 1;      // Sand interior

package/skills/shader-dev/techniques/ambient-occlusion.md

@@ -1,6 +1,6 @@
 ## WebGL2 Adaptation Requirements
 
-**IMPORTANT: GLSL Type Strictness**: float and vec types cannot be implicitly converted. `vec3 v = 1.0;` is illegal; you must use the vector form (e.g., `vec3(1.0)`, `vec3(1.0) * x`, `value * vec3(1.0)`).
+**GLSL Type Strictness**: float and vec types cannot be implicitly converted. `vec3 v = 1.0;` is illegal; you must use the vector form (e.g., `vec3(1.0)`, `vec3(1.0) * x`, `value * vec3(1.0)`).
 
 The code templates in this document use ShaderToy GLSL style. When generating standalone HTML pages, you must adapt for WebGL2:
 

package/skills/shader-dev/techniques/analytic-ray-tracing.md

@@ -193,7 +193,7 @@ vec3 shade(vec3 pos, vec3 normal, vec3 rd, vec3 albedo) {
 }
 ```
 
-> **IMPORTANT: Critical pitfall**: `d.xy` must be passed as distBound, and `d.y` must be updated each time a closer intersection is found! If the deployed code passes the original `dist` directly without updating, the intersection logic will fail (all object distance tests become invalid), resulting in a completely black screen.
+> **Critical pitfall**: `d.xy` must be passed as distBound, and `d.y` must be updated each time a closer intersection is found! If the deployed code passes the original `dist` directly without updating, the intersection logic will fail (all object distance tests become invalid), resulting in a completely black screen.
 
 ```glsl
 #define MAX_BOUNCES 4
@@ -229,7 +229,7 @@ vec3 radiance(vec3 ro, vec3 rd) {
 
 Runs directly on ShaderToy, includes sphere, plane, and box primitives with reflection and Blinn-Phong shading.
 
-> **IMPORTANT: Must follow**: All intersection function calls must use `d.xy` as the `distBound` parameter, and update `d.y` after each closer intersection is found. Incorrect usage: `iSphere(ro, rd, dist, ...)` (always using the original dist). Correct usage: `iSphere(ro, rd, d.xy, ...)` followed by `if (t < d.y) { d.y = t; ... }` to update.
+> **Must follow**: All intersection function calls must use `d.xy` as the `distBound` parameter, and update `d.y` after each closer intersection is found. Incorrect usage: `iSphere(ro, rd, dist, ...)` (always using the original dist). Correct usage: `iSphere(ro, rd, d.xy, ...)` followed by `if (t < d.y) { d.y = t; ... }` to update.
 
 ```glsl
 // Analytic Ray Tracing - Complete ShaderToy Template

package/skills/shader-dev/techniques/domain-warping.md

@@ -117,8 +117,8 @@ float fbm(vec2 p) {
 
 ```glsl
 // Map scalar field (0~1) to color using a mix chain
-// IMPORTANT: Note: GLSL is strictly typed. Variable declarations must be complete, e.g. vec3 col = vec3(0.2, 0.1, 0.4)
-// IMPORTANT: Decimals must be written as 0.x, not .x (division by zero errors)
+// GLSL is strictly typed. Variable declarations must be complete, e.g. vec3 col = vec3(0.2, 0.1, 0.4)
+// Decimals must be written as 0.x, not .x (division by zero errors)
 vec3 palette(float t) {
     vec3 col = vec3(0.2, 0.1, 0.4);                               // deep purple base
     col = mix(col, vec3(0.3, 0.05, 0.05), t);                     // dark red

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

@@ -13,23 +13,23 @@ const source = document.getElementById('fs').textContent.trim();
 // ...
 ```
 
-### IMPORTANT: Float Texture Compatibility (Most Critical Issue for Fluid Simulation)
+### Float Texture Compatibility (Most Critical Issue for Fluid Simulation)
 
 Fluid simulation requires float textures to store velocity (can be negative), pressure, and ink concentration (can exceed 1.0).
 
-**IMPORTANT: Must use RGBA16F instead of RGBA32F**: Many environments (headless Chrome, SwiftShader, mobile) do not support `RGBA32F` render targets. Even when the `EXT_color_buffer_float` extension claims to be available, `RGBA32F` FBOs may silently fail (framebuffer reports complete but renders all zeros or all ones). `RGBA16F + HALF_FLOAT` has far better compatibility than `RGBA32F`, and its precision is more than sufficient for fluid simulation.
+**Must use RGBA16F instead of RGBA32F**: Many environments (headless Chrome, SwiftShader, mobile) do not support `RGBA32F` render targets. Even when the `EXT_color_buffer_float` extension claims to be available, `RGBA32F` FBOs may silently fail (framebuffer reports complete but renders all zeros or all ones). `RGBA16F + HALF_FLOAT` has far better compatibility than `RGBA32F`, and its precision is more than sufficient for fluid simulation.
 
 ```javascript
 const gl = canvas.getContext("webgl2");
 if (!gl) { /* error handling */ }
 
 const ext = gl.getExtension("EXT_color_buffer_float");
-// IMPORTANT: Continue even if ext is null — some environments support RGBA16F without this extension
+// Continue even if ext is null — some environments support RGBA16F without this extension
 
 function createFloatTexture(w, h) {
     const tex = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, tex);
-    // IMPORTANT: Must use RGBA16F + HALF_FLOAT, do NOT use RGBA32F + FLOAT
+    // Must use RGBA16F + HALF_FLOAT, do NOT use RGBA32F + FLOAT
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, w, h, 0, gl.RGBA, gl.HALF_FLOAT, null);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -57,7 +57,7 @@ function createFBO(w, h) {
 Fluid simulation requires tracking mouse position and drag direction. iMouse uniform convention: **xy=current mouse position, z=mouse down flag (>0 means pressed), w=unused**. Mouse velocity is calculated from the position difference between current and previous frames:
 
 ```javascript
-// IMPORTANT: iMouse convention: xy=current position, z=pressed flag (1.0=down, 0.0=up), w=0
+// iMouse convention: xy=current position, z=pressed flag (1.0=down, 0.0=up), w=0
 // Mouse velocity is computed via prevMouse on the JS side, passed through a separate uniform
 let iMouse = [0, 0, 0, 0]; // [x, y, pressed, 0]
 let prevMouse = [0, 0];
@@ -93,7 +93,7 @@ canvas.addEventListener('mouseup', () => {
 // Pass uniforms in render loop
 // iMouse: xy=position, z=pressed flag, w=0
 gl.uniform4f(uMouse, iMouse[0], iMouse[1], iMouse[2], 0.0);
-// IMPORTANT: Mouse velocity must be clamped, otherwise fast dragging produces huge velocity deltas causing NaN explosion
+// Mouse velocity must be clamped, otherwise fast dragging produces huge velocity deltas causing NaN explosion
 const mvx = Math.max(-50, Math.min(50, iMouse[0] - prevMouse[0]));
 const mvy = Math.max(-50, Math.min(50, iMouse[1] - prevMouse[1]));
 gl.uniform2f(uMouseVel, mvx, mvy);
@@ -211,9 +211,9 @@ c.z -= DT * (dx.z * c.x + dy.z * c.y + div * c.z);
 
 ### Step 6: Mouse Interaction
 ```glsl
-// IMPORTANT: iMouse.z is the mouse-down flag (>0=pressed), not a position coordinate
+// iMouse.z is the mouse-down flag (>0=pressed), not a position coordinate
 // iMouseVel is mouse movement velocity, passed via a separate uniform
-// IMPORTANT: Must clamp mouseVel to prevent NaN explosion
+// Must clamp mouseVel to prevent NaN explosion
 if (iMouse.z > 0.0) {
     vec2 mouseVel = clamp(iMouseVel, vec2(-50.0), vec2(50.0));
     float dist2 = dot(p - iMouse.xy, p - iMouse.xy);
@@ -225,7 +225,7 @@ if (iMouse.z > 0.0) {
 
 ### Step 6b: Vorticity Confinement (Required for Ink Curling Effects)
 ```glsl
-// IMPORTANT: Ink diffusion/swirl effects require vorticity confinement, otherwise small vortices dissipate quickly leaving only smooth flow
+// Ink diffusion/swirl effects require vorticity confinement, otherwise small vortices dissipate quickly leaving only smooth flow
 // Vorticity confinement re-injects energy into small-scale vortices, producing characteristic curling textures
 #define VORT_STR 0.035  // [0.01=subtle, 0.05=noticeable, 0.1=strong]
 float curl_c = dx.y - dy.x;
@@ -243,9 +243,9 @@ c.xy += DT * VORT_STR * vec2(eta.y, -eta.x) * curl_c;
 
 ### Step 7: Automatic Ink Sources (Critical: Ensures Visible Output Without Interaction)
 ```glsl
-// IMPORTANT: Must have automatic ink sources! Otherwise the screen is completely black without mouse interaction
-// IMPORTANT: Ink injection and decay must be balanced! Too-strong injection or too-weak decay causes ink saturation across the entire screen → solid color with no features
-// IMPORTANT: Gaussian denominator controls emitter radius — larger denominator means larger emitter!
+// Must have automatic ink sources! Otherwise the screen is completely black without mouse interaction
+// Ink injection and decay must be balanced! Too-strong injection or too-weak decay causes ink saturation across the entire screen → solid color with no features
+// Gaussian denominator controls emitter radius — larger denominator means larger emitter!
 //     Denominator > 300 makes emitter cover most of the screen, ink saturates quickly
 //     Recommended 100~200, keeping it locally concentrated with visible gradient falloff at distance
 float t = iTime;
@@ -277,7 +277,7 @@ if (p.x < 1.0 || p.y < 1.0 ||
     c.xyw *= 0.0;
 }
 
-// IMPORTANT: Ink decay — must use multiplicative decay (e.g., *= 0.99), NOT subtractive decay (-= constant)
+// Ink decay — must use multiplicative decay (e.g., *= 0.99), NOT subtractive decay (-= constant)
 // Subtractive decay zeros out quickly at small ink values and decays too slowly at large values, causing saturation
 // Multiplicative decay scales proportionally, maintaining contrast at any concentration
 c.w *= 0.99;  // 1% decay per frame, adjustable [0.98=fast dissipation, 0.995=persistent]
@@ -291,19 +291,19 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec2 uv = fragCoord / iResolution.xy;
     vec4 c = texture(iChannel0, uv);
 
-    // IMPORTANT: Color base must be bright enough! 0.5+0.5*cos produces [0,1] range bright colors
+    // Color base must be bright enough! 0.5+0.5*cos produces [0,1] range bright colors
     // Never use vec3(0.02, 0.01, 0.08) or similar near-zero base colors — they become invisible when multiplied by ink
     float angle = atan(c.y, c.x);
     vec3 col = 0.5 + 0.5 * cos(angle + vec3(0.0, 2.1, 4.2));
 
-    // IMPORTANT: Use smoothstep to map ink concentration; upper limit should exceed actual ink range to preserve gradients
+    // Use smoothstep to map ink concentration; upper limit should exceed actual ink range to preserve gradients
     float ink = smoothstep(0.0, 2.0, c.w);
     col *= ink;
 
     // Pressure highlights
     col += vec3(0.05) * clamp(c.z - 1.0, 0.0, 1.0);
 
-    // IMPORTANT: Background color must be visible (RGB at least > 5/255 ≈ 0.02), otherwise users think the page is all black
+    // Background color must be visible (RGB at least > 5/255 ≈ 0.02), otherwise users think the page is all black
     col = max(col, vec3(0.02, 0.012, 0.035));
 
     fragColor = vec4(col, 1.0);
@@ -315,7 +315,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 Lava/fire requires FBM noise for turbulent textures + temperature color band mapping. **Key: Must use FBM noise to distort UV coordinates and temperature values, otherwise the image is too smooth and looks like a plain gradient rather than lava.**
 
 ```glsl
-// IMPORTANT: FBM noise is the core of lava/fire visualization! Without it the image is a smooth gradient with no lava texture
+// FBM noise is the core of lava/fire visualization! Without it the image is a smooth gradient with no lava texture
 // These noise functions must be defined in the Image Pass
 
 float hash(vec2 p) {
@@ -333,7 +333,7 @@ float noise(vec2 p) {
     return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
 }
 
-// IMPORTANT: octaves=4~6 produces sufficient detail; fewer than 3 gives too-coarse textures
+// octaves=4~6 produces sufficient detail; fewer than 3 gives too-coarse textures
 float fbm(vec2 p, int octaves) {
     float val = 0.0;
     float amp = 0.5;
@@ -360,7 +360,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     float speed = length(c.xy);
 
     // Temperature = ink concentration + noise perturbation + speed contribution
-    // IMPORTANT: Noise perturbation amplitude of 0.2~0.4 produces visible texture without becoming noisy
+    // Noise perturbation amplitude of 0.2~0.4 produces visible texture without becoming noisy
     float temp = ink * 0.7 + n1 * 0.25 + speed * 0.1;
     // Second noise layer for cracks/dark veins
     temp -= (1.0 - n2) * 0.15 * ink;
@@ -399,14 +399,14 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec2 uv = fragCoord / iResolution.xy;
     vec2 texel = 1.0 / iResolution.xy;
 
-    // IMPORTANT: Sample from wave height field: .g channel stores current frame height
+    // Sample from wave height field: .g channel stores current frame height
     float h = texture(iChannel0, uv).g;
     float hn = texture(iChannel0, uv + vec2(0.0, texel.y)).g;
     float hs = texture(iChannel0, uv - vec2(0.0, texel.y)).g;
     float he = texture(iChannel0, uv + vec2(texel.x, 0.0)).g;
     float hw = texture(iChannel0, uv - vec2(texel.x, 0.0)).g;
 
-    // IMPORTANT: Normal perturbation factor must be large enough (50~100), otherwise ripples are invisible
+    // Normal perturbation factor must be large enough (50~100), otherwise ripples are invisible
     // If drop strength is 1.0 and radius is 8~15px, using 80.0 produces clearly visible ripples
     vec3 normal = normalize(vec3((hw - he) * 80.0, (hs - hn) * 80.0, 1.0));
 
@@ -417,7 +417,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     float diffuse = max(dot(normal, lightDir), 0.0);
     float specular = pow(max(dot(normal, halfVec), 0.0), 64.0);
 
-    // IMPORTANT: Water base color must be bright enough! Deep color no darker than vec3(0.02, 0.08, 0.2), shallow color use vec3(0.1, 0.3, 0.6)
+    // Water base color must be bright enough! Deep color no darker than vec3(0.02, 0.08, 0.2), shallow color use vec3(0.1, 0.3, 0.6)
     vec3 deepColor = vec3(0.02, 0.08, 0.22);
     vec3 shallowColor = vec3(0.1, 0.35, 0.65);
     vec3 waterColor = mix(deepColor, shallowColor, 0.5 + h * 5.0);
@@ -439,7 +439,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 }
 ```
 
-## IMPORTANT: Common Fatal Errors
+## Common Fatal Errors
 
 1. **RGBA32F silently fails in headless/SwiftShader environments**: Must use `RGBA16F + HALF_FLOAT`
 2. **Ink saturates entire screen**: Gaussian denominator too large (>300) or decay too weak (>0.995). Fix: denominator 100~200, decay `*= 0.99`
@@ -464,7 +464,7 @@ Fluid simulation requires framebuffer self-feedback + float textures. The follow
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Fluid Simulation</title>
 <style>
-/* IMPORTANT: Critical: canvas must fill the viewport, otherwise it may be invisible or clipped */
+/* canvas must fill the viewport, otherwise it may be invisible or clipped */
 *{margin:0;padding:0}
 html,body{width:100%;height:100%;overflow:hidden;background:#000}
 canvas{display:block;width:100%;height:100%}
@@ -474,7 +474,7 @@ canvas{display:block;width:100%;height:100%}
 <canvas id="c"></canvas>
 <script>
 let frameCount = 0;
-// IMPORTANT: iMouse convention: [x, y, pressedFlag, 0] — z is the pressed flag (1 or 0), not a coordinate
+// iMouse convention: [x, y, pressedFlag, 0] — z is the pressed flag (1 or 0), not a coordinate
 let mouse = [0, 0, 0, 0];
 let prevMouse = [0, 0];
 let mouseDown = false;
@@ -510,7 +510,7 @@ in vec2 pos;
 void main(){ gl_Position=vec4(pos,0,1); }`;
 
 // fsBuffer / fsImage: adapt from the Buffer A / Image templates below
-// IMPORTANT: Fragment shaders must declare these uniforms:
+// Fragment shaders must declare these uniforms:
 //   uniform sampler2D iChannel0;
 //   uniform vec2 iResolution;
 //   uniform float iTime;
@@ -521,7 +521,7 @@ void main(){ gl_Position=vec4(pos,0,1); }`;
 const progBuf = createProgram(vsSource, fsBuffer);
 const progImg = createProgram(vsSource, fsImage);
 
-// IMPORTANT: Must use RGBA16F + HALF_FLOAT, do NOT use RGBA32F + FLOAT
+// Must use RGBA16F + HALF_FLOAT, do NOT use RGBA32F + FLOAT
 // RGBA32F may render all zeros in headless Chrome / SwiftShader even when framebuffer reports complete
 function createFBO(w, h) {
     const tex = gl.createTexture();
@@ -573,12 +573,12 @@ canvas.addEventListener('mousedown', e => {
     const dpr = Math.min(devicePixelRatio, 1.5);
     mouse[0] = e.clientX * dpr;
     mouse[1] = H - e.clientY * dpr;
-    mouse[2] = 1.0; // IMPORTANT: Pressed flag, not a coordinate
+    mouse[2] = 1.0; // Pressed flag, not a coordinate
     prevMouse[0] = mouse[0]; prevMouse[1] = mouse[1];
 });
 canvas.addEventListener('mouseup', () => {
     mouseDown = false;
-    mouse[2] = 0.0; // IMPORTANT: Released flag
+    mouse[2] = 0.0; // Released flag
 });
 
 // Touch events (mobile)
@@ -628,7 +628,7 @@ function render(t) {
     gl.uniform1f(uBuf.time, t);
     gl.uniform1i(uBuf.frame, frameCount);
     gl.uniform4f(uBuf.mouse, mouse[0], mouse[1], mouse[2], 0.0);
-    // IMPORTANT: Must clamp mouse velocity! Fast movement or first-frame clicks can produce huge velocity values,
+    // Must clamp mouse velocity! Fast movement or first-frame clicks can produce huge velocity values,
     // causing shader velocity explosion → NaN propagation → page crash
     const mvx = Math.max(-50, Math.min(50, mouse[0] - prevMouse[0]));
     const mvy = Math.max(-50, Math.min(50, mouse[1] - prevMouse[1]));
@@ -699,7 +699,7 @@ void mainImage(out vec4 fragColor, in vec2 p) {
     c.xy -= K * vec2(dx.z, dy.z);
 
     // Mouse interaction: iMouse.z is the pressed flag (>0), velocity obtained via iMouseVel uniform
-    // IMPORTANT: mouseVel must be clamped to prevent NaN explosion (JS side should also clamp — double safety)
+    // mouseVel must be clamped to prevent NaN explosion (JS side should also clamp — double safety)
     if (iMouse.z > 0.0) {
         vec2 mouseVel = clamp(iMouseVel, vec2(-50.0), vec2(50.0));
         float dist2 = dot(p - iMouse.xy, p - iMouse.xy);
@@ -709,7 +709,7 @@ void mainImage(out vec4 fragColor, in vec2 p) {
     }
 
     // Vorticity confinement: prevents small vortices from dissipating too quickly, producing curling textures
-    // IMPORTANT: Ink diffusion/swirl effects (e.g., ink diffusing in water) require vorticity confinement, otherwise curl dissipates quickly leaving only smooth flow
+    // Ink diffusion/swirl effects (e.g., ink diffusing in water) require vorticity confinement, otherwise curl dissipates quickly leaving only smooth flow
     float curl_c = dx.y - dy.x;
     float curl_n = (T(p + vec2(1,1)).y - T(p + vec2(-1,1)).y) / 2.0
                  - (T(p + vec2(0,2)).x - T(p).x) / 2.0;
@@ -723,7 +723,7 @@ void mainImage(out vec4 fragColor, in vec2 p) {
     eta = normalize(eta + vec2(1e-5));
     c.xy += DT * 0.035 * vec2(eta.y, -eta.x) * curl_c;
 
-    // IMPORTANT: Automatic ink sources: ensure visible fluid motion without mouse interaction
+    // Automatic ink sources: ensure visible fluid motion without mouse interaction
     // Emitter positions must move over time, and Gaussian radius must be small enough to maintain locality
     float t = iTime;
     vec2 em1 = iResolution.xy * vec2(0.25, 0.5 + 0.2 * sin(t * 0.7));
@@ -739,7 +739,7 @@ void mainImage(out vec4 fragColor, in vec2 p) {
     c.xy += DT * r3 * vec2(sin(t * 1.1), -cos(t)) * 2.0;
     c.w += DT * (r1 + r2 + r3) * 2.0;
 
-    // IMPORTANT: Ink decay: must use multiplicative decay, do NOT use subtractive (subtractive causes saturation)
+    // Ink decay: must use multiplicative decay, do NOT use subtractive (subtractive causes saturation)
     c.w *= 0.99;
 
     c = clamp(c, vec4(-5, -5, 0.5, 0), vec4(5, 5, 3, 5));
@@ -762,19 +762,19 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec2 uv = fragCoord / iResolution.xy;
     vec4 c = texture(iChannel0, uv);
 
-    // IMPORTANT: Color base must be bright enough! 0.5+0.5*cos produces [0,1] range bright colors
+    // Color base must be bright enough! 0.5+0.5*cos produces [0,1] range bright colors
     // Never use vec3(0.02, 0.01, 0.08) or similar extremely dark base colors — they become invisible when multiplied by ink
     float angle = atan(c.y, c.x);
     vec3 col = 0.5 + 0.5 * cos(angle + vec3(0.0, 2.1, 4.2));
 
-    // IMPORTANT: smoothstep upper limit should cover actual ink range to preserve gradient variation
+    // smoothstep upper limit should cover actual ink range to preserve gradient variation
     float ink = smoothstep(0.0, 2.0, c.w);
     col *= ink;
 
     // Pressure highlights
     col += vec3(0.05) * clamp(c.z - 1.0, 0.0, 1.0);
 
-    // IMPORTANT: Background color must be visible (RGB at least > 5/255 ≈ 0.02), otherwise users think the page is all black
+    // Background color must be visible (RGB at least > 5/255 ≈ 0.02), otherwise users think the page is all black
     col = max(col, vec3(0.02, 0.012, 0.035));
 
     fragColor = vec4(col, 1.0);
@@ -785,7 +785,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 
 Water surface ripples use the wave equation rather than Navier-Stokes. Clicks/touches generate concentric ripples that interfere with each other and gradually decay.
 
-**IMPORTANT: Water ripple drop injection must be implemented directly in the shader using iMouse**, do not use custom uniform arrays to pass click positions — that adds complexity on both JS/GLSL sides and is error-prone (uniform location not found, array length mismatch, etc.).
+**Water ripple drop injection must be implemented directly in the shader using iMouse**, do not use custom uniform arrays to pass click positions — that adds complexity on both JS/GLSL sides and is error-prone (uniform location not found, array length mismatch, etc.).
 
 ### Water Ripple Buffer Pass (Wave Equation Solver)
 
@@ -793,7 +793,7 @@ Water surface ripples use the wave equation rather than Navier-Stokes. Clicks/to
 // Water Ripple — Buffer Pass (Wave Equation Solver)
 // Data encoding: .r = previous frame height (prev), .g = current frame height (curr)
 // iChannel0 = self-feedback (ping-pong)
-// IMPORTANT: Drop injection is done directly in the shader via iMouse, no custom uniforms needed
+// Drop injection is done directly in the shader via iMouse, no custom uniforms needed
 
 void main() {
     vec2 p = gl_FragCoord.xy;
@@ -823,7 +823,7 @@ void main() {
     float damping = 0.996;
     next *= damping;
 
-    // IMPORTANT: Mouse click drop injection — directly using iMouse, simple and reliable
+    // Mouse click drop injection — directly using iMouse, simple and reliable
     // iMouse.z > 0 indicates mouse is pressed
     if (iMouse.z > 0.0) {
         float dist = length(p - iMouse.xy);
@@ -832,7 +832,7 @@ void main() {
         next += strength * exp(-dist * dist / (2.0 * radius * radius));
     }
 
-    // IMPORTANT: Automatic ripples: ensure visible ripples even without interaction
+    // Automatic ripples: ensure visible ripples even without interaction
     // Use periodic functions of iTime to control auto-drop position and timing
     float autoPhase = iTime * 0.5;
     float autoPeriod = fract(autoPhase);
@@ -854,7 +854,7 @@ void main() {
         next *= 0.0;
     }
 
-    // IMPORTANT: Output: .r = current frame (becomes next frame's prev), .g = newly computed (becomes next frame's curr)
+    // Output: .r = current frame (becomes next frame's prev), .g = newly computed (becomes next frame's curr)
     fragColor = vec4(curr, next, 0.0, 1.0);
 }
 ```
@@ -877,7 +877,7 @@ See Step 9c above.
 
 When multiple ink colors need to interpenetrate and blend, a single scalar `c.w` is insufficient. You need **two Buffers**: Buffer A stores velocity/pressure (same as above), Buffer B stores RGB three-channel ink concentration, sharing the same velocity field for advection.
 
-**IMPORTANT: Key for multi-color ink: Buffer B's RGB channels independently store the concentration of each ink color, using Buffer A's velocity field for semi-Lagrangian advection. Different ink colors naturally blend during advection and diffusion.**
+**Key for multi-color ink: Buffer B's RGB channels independently store the concentration of each ink color, using Buffer A's velocity field for semi-Lagrangian advection. Different ink colors naturally blend during advection and diffusion.**
 
 ### JS Side Changes (Three Buffer Ping-Pong)
 
@@ -1020,7 +1020,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec3 mapped = smoothstep(vec3(0.0), vec3(2.5), ink);
 
     // Color mapping: map RGB concentrations to actual visible colors
-    // IMPORTANT: Base colors must be bright, do not use extremely dark values
+    // Base colors must be bright, do not use extremely dark values
     vec3 col1 = vec3(0.9, 0.15, 0.2);  // red ink
     vec3 col2 = vec3(0.1, 0.8, 0.3);   // green ink
     vec3 col3 = vec3(0.15, 0.3, 0.95); // blue ink
@@ -1040,7 +1040,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 }
 ```
 
-**IMPORTANT: The multi-color ink Buffer A velocity field template is identical to the single-color version**, except `c.w` is no longer used for ink (ink is in Buffer B). Buffer A only handles velocity + pressure.
+**The multi-color ink Buffer A velocity field template is identical to the single-color version**, except `c.w` is no longer used for ink (ink is in Buffer B). Buffer A only handles velocity + pressure.
 
 ## Common Variants
 

package/skills/shader-dev/techniques/multipass-buffer.md

@@ -1,6 +1,6 @@
 ### Standalone HTML Complete Shader Template (Must Be Strictly Followed)
 
-**IMPORTANT: The following template can be copied directly; every line must be strictly followed**:
+**The following template can be copied directly; every line must be strictly followed**:
 
 **Vertex Shader** (common to all shaders):
 ```glsl
@@ -16,13 +16,13 @@ void main() {
 #version 300 es
 precision highp float;
 
-// IMPORTANT: Critical: uniforms must be declared; ShaderToy's iTime/iResolution etc. are global variables
+// uniforms must be declared; ShaderToy's iTime/iResolution etc. are global variables
 uniform float iTime;
 uniform vec2 iResolution;
 uniform int iFrame;
 uniform vec4 iMouse;
 
-// IMPORTANT: Critical: mainImage parameters need manual extraction
+// mainImage parameters need manual extraction
 // ShaderToy: void mainImage(out vec4 fragColor, in vec2 fragCoord)
 // Adapted to:
 out vec4 fragColor;
@@ -30,7 +30,7 @@ void main() {
     vec2 fragCoord = gl_FragCoord.xy;
     vec2 uv = fragCoord / iResolution;
 
-    // IMPORTANT: Critical: texture2D → texture
+    // texture2D → texture
     vec4 prev = texture(iChannel0, uv);
 
     // ... particle physics logic ...
@@ -56,7 +56,7 @@ void main() {
     vec2 fragCoord = gl_FragCoord.xy;
     vec2 uv = fragCoord / iResolution;
 
-    // IMPORTANT: Critical: texture2D → texture, mainImage → standard main
+    // texture2D → texture, mainImage → standard main
     vec4 col = texture(iChannel0, uv);
 
     // Rendering logic
@@ -66,7 +66,7 @@ void main() {
 }
 ```
 
-**IMPORTANT: Common GLSL ES 3.00 Errors** (must be avoided):
+**Common GLSL ES 3.00 Errors** (must be avoided):
 1. **#version must be on the first line** - Any comments/blank lines will cause "version directive must occur on the first line" error
 2. **in/out qualifiers** - WebGL1's attribute/varying must be changed to in/out in ES3
 3. **texture function** - ES3 uses `texture(sampler, uv)`, not `texture2D(sampler, uv)`
@@ -74,7 +74,7 @@ void main() {
 
 ## Standalone HTML Multi-Channel Framebuffer Implementation
 
-**IMPORTANT: Multi-Channel Rendering Pipeline Core Pitfalls**: ShaderToy code requires manual Framebuffer rendering pipeline implementation. The following template demonstrates the correct approach:
+**Multi-Channel Rendering Pipeline Core Pitfalls**: ShaderToy code requires manual Framebuffer rendering pipeline implementation. The following template demonstrates the correct approach:
 
 ```javascript
 // Correct multi-channel Framebuffer creation
@@ -91,7 +91,7 @@ for (let i = 0; i < NUM_BUFFERS; i++) {
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
 
-    // IMPORTANT: Critical: Must use UNSIGNED_BYTE format without EXT_color_buffer_float extension!
+    // Must use UNSIGNED_BYTE format without EXT_color_buffer_float extension!
     // RGBA16F/RGBA32F require the extension, otherwise GL_INVALID_OPERATION
     // Float textures need EXT_color_buffer_float; RGBA16F supports HDR data
     if (ext) {
@@ -100,14 +100,14 @@ for (let i = 0; i < NUM_BUFFERS; i++) {
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     }
 
-    // IMPORTANT: Critical: Texture parameters must be set, otherwise GL_INVALID_FRAMEBUFFER
-    // IMPORTANT: Float textures use NEAREST, or require OES_texture_float_linear extension for LINEAR
-    // IMPORTANT: Critical: Float textures must use CLAMP_TO_EDGE wrap mode; REPEAT is not supported for float textures
-    // IMPORTANT: Critical: Must fall back to UNSIGNED_BYTE format without EXT_color_buffer_float extension
+    // Texture parameters must be set, otherwise GL_INVALID_FRAMEBUFFER
+    // Float textures use NEAREST, or require OES_texture_float_linear extension for LINEAR
+    // Float textures must use CLAMP_TO_EDGE wrap mode; REPEAT is not supported for float textures
+    // Must fall back to UNSIGNED_BYTE format without EXT_color_buffer_float extension
     const filterMode = (ext && floatLinear) ? gl.LINEAR : gl.NEAREST;
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode);
-    // IMPORTANT: Must use CLAMP_TO_EDGE: float textures do not support REPEAT
+    // Must use CLAMP_TO_EDGE: float textures do not support REPEAT
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
@@ -115,7 +115,7 @@ for (let i = 0; i < NUM_BUFFERS; i++) {
     gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
 
-    // IMPORTANT: Critical: Check Framebuffer completeness
+    // Check Framebuffer completeness
     const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
     if (status !== gl.FRAMEBUFFER_COMPLETE) {
         console.error("Framebuffer incomplete:", status);
@@ -138,7 +138,7 @@ function render() {
     // Execute shader rendering
 
     // 2. Swap Buffers (simulate self-feedback)
-    // IMPORTANT: Critical: Must swap textures for next frame reading; FBO handles remain unchanged
+    // Must swap textures for next frame reading; FBO handles remain unchanged
     [textures[0], textures[1]] = [textures[1], textures[0]];
 
     // 3. Render to screen
@@ -150,7 +150,7 @@ function render() {
 }
 ```
 
-**IMPORTANT: Common Errors** (JavaScript/WebGL side):
+**Common Errors** (JavaScript/WebGL side):
 1. **Missing texture parameters** - Must set `TEXTURE_MIN_FILTER`, `TEXTURE_MAG_FILTER`, `TEXTURE_WRAP_S/T`
 2. **Missing Framebuffer completeness check** - `gl.checkFramebufferStatus()` must return `FRAMEBUFFER_COMPLETE` before use
 3. **Float texture extension** - `gl.RGBA16F` requires `EXT_color_buffer_float` extension, otherwise fall back to `gl.UNSIGNED_BYTE`
@@ -620,13 +620,13 @@ for (int i = 0; i < NUM_SCALES; i++) {
 
 ### Variant 6: Particle System (Position-Velocity Storage)
 
-**IMPORTANT: Particle System Implementation Key**: Particle state is stored in texture pixels, one particle per pixel. Rendering must iterate over the particle texture for sampling.
+**Particle System Implementation Key**: Particle state is stored in texture pixels, one particle per pixel. Rendering must iterate over the particle texture for sampling.
 
 **Buffer A (Particle Physics Simulation)**:
 ```glsl
 // Each texture pixel stores one particle: xy=position, zw=velocity
 
-// IMPORTANT: Critical: hash function must return vec2! Returning float causes type mismatch errors
+// hash function must return vec2! Returning float causes type mismatch errors
 vec2 hash2(vec2 p) {
     return fract(sin(mat2(127.1, 311.7, 269.5, 183.3) * p) * 43758.5453);
 }
@@ -638,10 +638,10 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec2 pos = prev.xy;
     vec2 vel = prev.zw;
 
-    // IMPORTANT: Initialization guard: use integer comparison + pixel-coordinate-based random (avoids particle overlap when time is too small)
+    // Initialization guard: use integer comparison + pixel-coordinate-based random (avoids particle overlap when time is too small)
     if (iFrame < 3) {
         // Use fragCoord (pixel coordinates) to ensure each particle has a unique position, independent of time
-        // IMPORTANT: Critical: hash2 returns vec2, assign directly to pos/vel
+        // hash2 returns vec2, assign directly to pos/vel
         pos = hash2(fragCoord * 0.01 + vec2(1.7, 9.3));
         vel = (hash2(fragCoord * 0.01 + vec2(5.3, 2.8)) - 0.5) * 0.02;
         fragColor = vec4(pos, vel);
@@ -676,7 +676,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 
     // Iterate over particle texture for sampling (performance-sensitive, balance sample count)
     float glow = 0.0;
-    for (float y = 0.0; y < 1.0; y += 0.02) {  // IMPORTANT: Step size determines sampling density
+    for (float y = 0.0; y < 1.0; y += 0.02) {  // Step size determines sampling density
         for (float x = 0.0; x < 1.0; x += 0.02) {
             vec4 particle = texture(iChannel0, vec2(x, y));
             vec2 pPos = particle.xy;
@@ -712,7 +712,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 // Buffer B: Density accumulation (reads Buffer A) - uses FBO 2/3 ping-pong
 // Image: Final rendering (reads Buffer A + Buffer B)
 
-// IMPORTANT: Critical: Must use 2 FBOs for ping-pong! Single FBO + texture swap causes
+// Must use 2 FBOs for ping-pong! Single FBO + texture swap causes
 // "Feedback loop formed between Framebuffer and active Texture" error
 const buffers = [null, null, null, null];  // [A_FBO0, A_FBO1, B_FBO0, B_FBO1]
 const textures = [null, null, null, null];  // [A_tex0, A_tex1, B_tex0, B_tex1]
@@ -741,7 +741,7 @@ function createBuffers() {
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 }
 
-// IMPORTANT: Critical: Initialization pre-rendering - must execute before the first frame!
+// Initialization pre-rendering - must execute before the first frame!
 // Empty textures cause particle initialization failure (reading 0,0,0,0 makes all particles overlap)
 let aReadIdx = 0;  // Current read FBO index (0 or 1)
 let bReadIdx = 0;  // Buffer B current read FBO index (0 or 1)
@@ -893,7 +893,7 @@ function render() {
 }
 ```
 
-**IMPORTANT: Key Points**:
+**Key Points**:
 - **Must use 2 FBOs for ping-pong**: Each Buffer needs two independent FBOs (read FBO + write FBO); a single FBO + texture swap causes "Feedback loop" error
 - Use FBO index switching (not texture swapping): bind target FBO when writing, bind source texture when reading
 - Image pass binds the latest Buffer results (obtained via read index)

package/skills/shader-dev/techniques/normal-estimation.md

@@ -1,6 +1,6 @@
 ## WebGL2 Adaptation Requirements
 
-**IMPORTANT: GLSL Type Strictness Warning**:
+**GLSL Type Strictness Warning**:
 - GLSL is a strongly typed language with **no `string` type**; using string types is forbidden
 - Common illegal types: `string`, `int` (can only use `int` literals, cannot declare variable types as `int`)
 - vec2/vec3/vec4 cannot be implicitly converted between each other; explicit construction is required