@firecms/neat 0.7.1 → 0.9.0

package/src/shaders.ts

@@ -1,5 +1,6 @@
 export const vertexShaderSource = `void main() {
     vUv = uv;
+    vPosition = position;
 
     // SCROLLING LOGIC
     // Separate multipliers for wave, color, and flow offsets
@@ -41,11 +42,36 @@ export const vertexShaderSource = `void main() {
     // We take the computed flow UVs and apply the color offset
     // Scale by plane height to match wave offset speed (world space vs UV space)
     vec3 color = u_colors[0].color;
-    // ...
-    vec2 adjustedUv = flowUv;
-    adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
 
-    vec2 noise_cord = adjustedUv * u_color_pressure;
+    vec3 distortedPos = position;
+    if (u_shape_type > 0.5) {
+        if (u_flow_enabled > 0.5) {
+            if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
+                vec3 ppp = position / 25.0;
+                ppp.xyz += 0.1 * cos((1.5 * u_flow_scale) * ppp.yxz + 1.1 * u_time + vec3(0.1, 1.1, 2.1));
+                ppp.xyz += 0.1 * cos((2.3 * u_flow_scale) * ppp.zxy + 1.3 * u_time + vec3(3.2, 3.4, 1.2));
+                ppp.xyz += 0.1 * cos((2.2 * u_flow_scale) * ppp.yxz + 1.7 * u_time + vec3(1.8, 5.2, 3.1));
+                ppp.xyz += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.zxy + 1.4 * u_time + vec3(6.3, 3.9, 4.5));
+
+                float r = length(ppp);
+                distortedPos = mix(position, vec3(
+                    position.x * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0,
+                    position.y,
+                    position.z * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0
+                ), u_flow_ease);
+            }
+        }
+    }
+
+    vec3 noise_cord;
+    if (u_shape_type > 0.5) {
+        noise_cord = vec3(distortedPos.x / 50.0, (distortedPos.y + colorOffset) / 50.0, distortedPos.z / 50.0);
+    } else {
+        vec2 adjustedUv = flowUv;
+        adjustedUv.y += colorOffset / u_plane_height;
+        noise_cord = vec3(adjustedUv, 0.0);
+    }
+
     const float minNoise = .0;
     const float maxNoise = .9;
 
@@ -56,11 +82,16 @@ export const vertexShaderSource = `void main() {
                 float noiseSpeed = (1. + float(i)) * 0.11;
                 float noiseSeed = 13. + float(i) * 7.;
 
+                float noise_z = u_time * noiseSpeed;
+                if (u_shape_type > 0.5) {
+                    noise_z = noise_cord.z * u_color_pressure.x * u_color_pressure.x + u_time * noiseSpeed;
+                }
+
                 float noise = snoise(
                     vec3(
-                        noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
-                        noise_cord.y * u_color_pressure.y,
-                        u_time * noiseSpeed
+                        noise_cord.x * u_color_pressure.x * u_color_pressure.x + u_time * noiseFlow * 2.,
+                        noise_cord.y * u_color_pressure.y * u_color_pressure.y,
+                        noise_z
                     ) + noiseSeed
                 ) - (.1 * float(i)) + (.5 * u_color_blending);
 
@@ -72,9 +103,15 @@ export const vertexShaderSource = `void main() {
 
     v_color = color;
 
-    // 4. VERTEX POSITION
+    // 4. FRESNEL (rim glow)
+    // (Calculated in fragment shader using displacement slope approximation)
+
+    // 5. VERTEX POSITION
     vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+    vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
+    vViewPosition = mvPosition.xyz;
+    vNormal = normalize((modelViewMatrix * vec4(normal, 0.0)).xyz);
+    gl_Position = projectionMatrix * mvPosition;
     v_new_position = gl_Position;
 }
 `;
@@ -95,58 +132,182 @@ float fbm(vec3 x) {
     return value;
 }
 
+// Branchless HSL to RGB for iridescence
+vec3 hsl2rgb(float h, float s, float l) {
+    vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+    return l + s * (rgb - 0.5) * (1.0 - abs(2.0 * l - 1.0));
+}
+
 void main() {
     vec2 finalUv = vFlowUv;
     
     vec3 baseColor;
+    float texAlpha = 1.0;
 
     if (u_enable_procedural_texture > 0.5) {
-        // Calculate flow field distance for ease effect
-        vec2 ppp = -1.0 + 2.0 * finalUv;
-        ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
-        ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
-        ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
-        ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
-        float r = length(ppp); // Flow distance
-        
-        // Ease blending: 0 = topographic (flow), 1 = image (UV)
-        float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
-        float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
-        vec2 texUv = vec2(vx, vy);
-
-        // PARALLAX SCROLLING
-        // We manually apply a smaller offset here to make the texture lag behind
-        float parallaxFactor = 0.25; // 25% speed of the color mixing
-        texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
-
-        texUv *= 1.5; // Tiling scale
-
-        vec4 texSample = texture2D(u_procedural_texture, texUv);
-        baseColor = texSample.rgb;
+        if (u_shape_type > 0.5) {
+            float parallaxFactor = 0.25;
+            float scrollOffset = (u_y_offset * u_y_offset_color_multiplier) * parallaxFactor;
+            vec3 scrolledPos = vPosition;
+            scrolledPos.y -= scrollOffset;
+            
+            vec3 p = (scrolledPos * 1.5) / 50.0;
+            vec2 uvX = p.yz + vec2(0.5);
+            vec2 uvY = p.zx + vec2(0.5);
+            vec2 uvZ = p.xy + vec2(0.5);
+            
+            vec4 colX = texture2D(u_procedural_texture, fract(uvX));
+            vec4 colY = texture2D(u_procedural_texture, fract(uvY));
+            vec4 colZ = texture2D(u_procedural_texture, fract(uvZ));
+            
+            vec3 n = normalize(vNormal);
+            vec3 blendWeights = abs(n);
+            blendWeights = blendWeights / (blendWeights.x + blendWeights.y + blendWeights.z + 0.0001);
+            
+            vec4 texSample = colX * blendWeights.x + colY * blendWeights.y + colZ * blendWeights.z;
+            baseColor = texSample.rgb;
+            if (u_transparent_texture_void > 0.5) {
+                texAlpha = texSample.a;
+            }
+        } else {
+            vec2 ppp = -1.0 + 2.0 * finalUv;
+            ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
+            ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
+            ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
+            ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
+            float r = length(ppp);
+            
+            float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
+            float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
+            vec2 texUv = vec2(vx, vy);
+
+            float parallaxFactor = 0.25;
+            texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
+            texUv *= 1.5;
+
+            vec4 texSample = texture2D(u_procedural_texture, fract(texUv));
+            baseColor = texSample.rgb;
+            if (u_transparent_texture_void > 0.5) {
+                texAlpha = texSample.a;
+            }
+        }
     } else {
         baseColor = v_color;
     }
 
     vec3 color = baseColor;
 
+    // === DOMAIN WARPING (simplified: 3 fbm calls instead of 5) ===
+    if (u_domain_warp_enabled > 0.5) {
+        vec3 p;
+        if (u_shape_type > 0.5) {
+            p = vec3((vPosition / 50.0 + vec3(0.5)) * u_domain_warp_scale);
+            p.z += u_time * 0.15;
+        } else {
+            p = vec3(finalUv * u_domain_warp_scale, u_time * 0.15);
+        }
+        vec2 q = vec2(fbm(p), fbm(p + vec3(5.2, 1.3, 0.0)));
+        float f = fbm(p + vec3(4.0 * q, 0.0));
+        vec3 warpColor = color * (1.0 + f * 0.8 * u_domain_warp_intensity);
+        float pattern = clamp(f * f * f + 0.6 * f * f + 0.5 * f, 0.0, 1.0);
+        color = mix(color, warpColor * (0.6 + pattern * 0.8), u_domain_warp_intensity * 0.7);
+    }
+
     // Post-processing
-    color += v_displacement_amount * u_highlights;
-    // Replace pow() with direct multiplication to avoid negative base undefined behavior in GLSL
-    float shadowFactor = 1.0 - v_displacement_amount;
-    color -= shadowFactor * shadowFactor * u_shadows;
+    // Compute dynamic pixel-perfect normal using smooth normal
+    vec3 normal = normalize(vNormal);
+    vec3 viewDir = vec3(0.0, 0.0, 1.0);
+    float ndotv = dot(normal, viewDir);
+    
+    // Cull back-faces for closed 3D shapes (Sphere=1, Torus=2, Cylinder=3)
+    if (u_shape_type > 0.5 && u_shape_type < 3.5) {
+        if (ndotv < 0.0) {
+            discard;
+        }
+    } else {
+        // Double-sided shapes (Plane, Ribbon): flip normal if back-facing
+        if (ndotv < 0.0) {
+            normal = -normal;
+            ndotv = -ndotv;
+        }
+    }
+    vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
+    float diffuse = max(dot(normal, lightDir), 0.0);
+    vec3 halfDir = normalize(lightDir + viewDir);
+    float specular = pow(max(dot(normal, halfDir), 0.0), 32.0);
+
+    // Blend smooth 3D shading with smooth height-based wave shading
+    if (u_shape_type <= 0.5) {
+        // Original height-based wave shading
+        color += v_displacement_amount * u_highlights;
+        float heightShadow = 1.0 - v_displacement_amount;
+        color -= heightShadow * heightShadow * u_shadows;
+    } else {
+        // 3D shading
+        color += specular * u_highlights;
+        color += v_displacement_amount * u_highlights * 0.5;
+        float heightShadow = 1.0 - v_displacement_amount;
+        color -= heightShadow * heightShadow * u_shadows * 0.5;
+        color -= (1.0 - diffuse) * u_shadows * 0.5;
+    }
     color = saturation(color, 1.0 + u_saturation);
     color = color * u_brightness;
 
-    // Grain
-    vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
+    // === IRIDESCENCE ===
+    if (u_iridescence_enabled > 0.5) {
+        float hue = fract(v_displacement_amount * 0.5 + 0.5 + u_time * u_iridescence_speed * 0.05);
+        vec3 iriColor = hsl2rgb(hue, 0.8, 0.6);
+        color = mix(color, iriColor, u_iridescence_intensity * abs(v_displacement_amount) * 0.6);
+    }
+
+    // === FRESNEL (Rim glow) ===
+    if (u_fresnel_enabled > 0.5) {
+        float slope = 1.0 - abs(v_displacement_amount);
+        float fresnel = pow(max(slope, 0.0), u_fresnel_power);
+        color += u_fresnel_color * fresnel * u_fresnel_intensity;
+    }
+
+    // === VIGNETTE ===
+    if (u_vignette_intensity > 0.0) {
+        vec2 vigUv = vUv;
+        if (u_shape_type > 0.5) {
+            vigUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
+        }
+        float dist = length(vigUv - vec2(0.5));
+        float vig = smoothstep(u_vignette_radius, u_vignette_radius * 0.3, dist);
+        color *= mix(1.0, vig, u_vignette_intensity);
+    }
+
+    // === FAKE BLOOM ===
+    if (u_bloom_intensity > 0.0) {
+        float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
+        float bloomMask = smoothstep(u_bloom_threshold, 1.0, luma);
+        color += color * bloomMask * u_bloom_intensity;
+    }
+
+    // === CHROMATIC ABERRATION ===
+    if (u_chromatic_aberration > 0.0) {
+        float caAmount = u_chromatic_aberration * 0.008;
+        vec2 caUv = vUv;
+        if (u_shape_type > 0.5) {
+            caUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
+        }
+        float dist = length(caUv - vec2(0.5));
+        float rShift = v_displacement_amount + caAmount * dist;
+        float bShift = v_displacement_amount - caAmount * dist;
+        color.r *= 1.0 + rShift * caAmount * 10.0;
+        color.b *= 1.0 - bShift * caAmount * 10.0;
+    }
+
+    // Grain (use cheap hash noise instead of expensive fbm when static)
     float grain = 0.0;
-    
-    // Completely bypass expensive noise generation if grain is disabled
     if (u_grain_intensity > 0.0) {
-        if (u_grain_speed != 0.0) {
+        vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
+        if (u_grain_speed != 0.0 || u_shape_type <= 0.5) {
             grain = fbm(vec3(noiseCoords, u_time * u_grain_speed));
         } else {
-            grain = fbm(vec3(noiseCoords, 0.0));
+            // Static grain: use cheap hash instead of fbm
+            grain = random(noiseCoords) - 0.5;
         }
 
         grain = grain * 0.5 + 0.5;
@@ -157,7 +318,25 @@ void main() {
 
     color += vec3(grain);
 
-    gl_FragColor = vec4(color, 1.0);
+    float edgeAlpha = 1.0;
+    
+    // Silhouette falloff for 3D shapes
+    if (u_shape_type > 0.5) {
+        edgeAlpha = smoothstep(0.0, u_silhouette_fade, ndotv);
+    }
+    
+    // UV boundary falloff for open shapes
+    if (u_shape_type == 3.0) { // Cylinder: fade top/bottom ends
+        float vFade = smoothstep(0.0, u_cylinder_fade, vUv.y) * smoothstep(1.0, 1.0 - u_cylinder_fade, vUv.y);
+        edgeAlpha *= vFade;
+    } else if (u_shape_type == 4.0) { // Ribbon: fade all 4 borders
+        float uFade = smoothstep(0.0, u_ribbon_fade, vUv.x) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.x);
+        float vFade = smoothstep(0.0, u_ribbon_fade, vUv.y) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.y);
+        edgeAlpha *= uFade * vFade;
+    }
+
+    edgeAlpha *= texAlpha;
+    gl_FragColor = vec4(color, edgeAlpha);
 }
 `;
 
@@ -176,6 +355,9 @@ varying vec2 vFlowUv;
 varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
+varying vec3 vViewPosition;
+varying vec3 vNormal;
+varying vec3 vPosition;
 
 uniform float u_time;
 uniform vec2 u_resolution;
@@ -206,6 +388,14 @@ uniform float u_flow_distortion_b;
 uniform float u_flow_scale;
 uniform float u_flow_ease;
 uniform float u_flow_enabled;
+
+// Fresnel uniforms
+uniform float u_fresnel_enabled;
+uniform float u_fresnel_power;
+uniform float u_fresnel_intensity;
+uniform vec3 u_fresnel_color;
+
+uniform float u_shape_type;
 `;
 }
 
@@ -214,10 +404,15 @@ export function buildFragUniforms(): string {
 
 varying vec2 vUv;
 varying vec2 vFlowUv;
+varying vec4 v_new_position;
 varying vec3 v_color;
 varying float v_displacement_amount;
+varying vec3 vViewPosition;
+varying vec3 vNormal;
+varying vec3 vPosition;
 
 uniform float u_time;
+uniform vec2 u_resolution;
 uniform float u_plane_height;
 
 uniform float u_shadows;
@@ -241,6 +436,40 @@ uniform float u_flow_scale;
 uniform sampler2D u_procedural_texture;
 uniform float u_enable_procedural_texture;
 uniform float u_texture_ease;
+
+// Domain warping uniforms
+uniform float u_domain_warp_enabled;
+uniform float u_domain_warp_intensity;
+uniform float u_domain_warp_scale;
+
+// Vignette uniforms
+uniform float u_vignette_intensity;
+uniform float u_vignette_radius;
+
+// Fresnel uniforms (fragment side)
+uniform float u_fresnel_enabled;
+uniform float u_fresnel_power;
+uniform float u_fresnel_intensity;
+uniform vec3 u_fresnel_color;
+
+
+
+// Iridescence uniforms
+uniform float u_iridescence_enabled;
+uniform float u_iridescence_intensity;
+uniform float u_iridescence_speed;
+
+// Bloom uniforms
+uniform float u_bloom_intensity;
+uniform float u_bloom_threshold;
+
+// Chromatic aberration
+uniform float u_chromatic_aberration;
+uniform float u_shape_type;
+uniform float u_transparent_texture_void;
+uniform float u_silhouette_fade;
+uniform float u_cylinder_fade;
+uniform float u_ribbon_fade;
 `;
 }
 

package/src/types.ts

@@ -41,6 +41,62 @@ export type NeatConfig = {
     textureShapeCircles?: number;
     textureShapeBars?: number;
     textureShapeSquiggles?: number;
+
+    // Domain warping
+    domainWarpEnabled?: boolean;
+    domainWarpIntensity?: number;
+    domainWarpScale?: number;
+
+    // Vignette
+    vignetteIntensity?: number;
+    vignetteRadius?: number;
+
+    // Fresnel (rim glow)
+    fresnelEnabled?: boolean;
+    fresnelPower?: number;
+    fresnelIntensity?: number;
+    fresnelColor?: string;
+
+    // Iridescence
+    iridescenceEnabled?: boolean;
+    iridescenceIntensity?: number;
+    iridescenceSpeed?: number;
+
+    // Bloom (fake)
+    bloomIntensity?: number;
+    bloomThreshold?: number;
+
+    // Chromatic aberration
+    chromaticAberration?: number;
+
+    // 3D Shapes config
+    shapeType?: 'plane' | 'sphere' | 'torus' | 'cylinder' | 'ribbon';
+    shapeRotationX?: number;
+    shapeRotationY?: number;
+    shapeRotationZ?: number;
+    shapeAutoRotateSpeedX?: number;
+    shapeAutoRotateSpeedY?: number;
+    sphereRadius?: number;
+    torusRadius?: number;
+    torusTube?: number;
+    cylinderRadius?: number;
+    cylinderHeight?: number;
+    planeBend?: number;
+    planeTwist?: number;
+    transparentTextureVoid?: boolean;
+    silhouetteFade?: number;
+    cylinderFade?: number;
+    ribbonFade?: number;
+
+    // Camera settings
+    cameraLock?: boolean;
+    cameraX?: number;
+    cameraY?: number;
+    cameraZ?: number;
+    cameraRotationX?: number;
+    cameraRotationY?: number;
+    cameraRotationZ?: number;
+    cameraZoom?: number;
 };
 
 export type NeatColor = {