Seamless RGB Stripes Shader + Glass Sphere

Showcase
, , ,
1

Experience a mesmerizing real-time shader effect featuring perfectly seamless RGB stripes with ultra-smooth transitions! This demo showcases a custom GLSL fragment shader that generates animated red, green, and blue bands with soft, feathered edges—ideal for creative coding, VJ visuals, and generative art.

:sparkles: Features:

True RGB color stripes with equal width and smooth, seamless blending
Animated, noise-driven movement for organic, flowing visuals
Fully customizable stripe frequency, edge softness, and animation speed
Written in GLSL (OpenGL Shading Language) for use in WebGL, Three.js, or any modern graphics pipeline
:hammer_and_wrench: How it works:
The shader uses a raised-cosine blending function to ensure each color band transitions smoothly into the next, with no harsh edges or visible seams. Animated noise and rotation add organic movement, making the effect dynamic and visually engaging.

:globe_with_meridians: Reflection and Refraction (Center Sphere):
The center sphere in the scene demonstrates both reflection and refraction effects. Reflection is achieved by sampling the environment map in the direction of the reflected view vector, simulating how light bounces off the sphere’s surface. Refraction is simulated by bending the view vector as it passes through the sphere, using Snell’s law, and then sampling the environment map along this refracted direction. The shader blends these two effects based on the viewing angle and the sphere’s material properties, creating a realistic glass-like appearance with both mirrored highlights and color-bending transparency.

:light_bulb: Perfect for:

VJ and live performance visuals
Generative art installations
Shader learning and experimentation
Creative coding projects

33
331888×1067 164 KB

2 Likes
2

Sliders are broken.

precision highp float;
precision highp int;

uniform sampler2D trailTexture;
uniform float uTime;

varying vec2 vUv;
varying vec3 vPosition;

float PI = 3.141592653589793238;

float mod289(float x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 perm(vec4 x) {
     return mod289(((x*34.0)+1.0)*x);
}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
    return o4.y * d.y + o4.x * (1.0 - d.y);
}

mat2 rotate2D(float angle){
    return mat2(cos(angle), -sin(angle),
                sin(angle),  cos(angle));
}

void main() {

    float time = uTime * 0.5;

    vec3 baseFirst = vec3(1.0, 0.0, 0.0);
    vec3 accent = vec3(0.0, 1.0, 0.0);
    vec3 baseSecond = vec3(0.0, 0.0, 1.0);

    float n = noise(vPosition + time);

    vec2 baseUV = rotate2D(n) * vPosition.xy * 0.2;

    
    
    float stripeFreq = 4.0;
    float t = fract(baseUV.x * stripeFreq + n * 0.35);

    
    

    
    float radius = 0.4;

    
    float dR = min(abs(t - 0.0), 1.0 - abs(t - 0.0)); 
    float dG = min(abs(t - 1.0 / 3.0), 1.0 - abs(t - 1.0 / 3.0)); 
    float dB = min(abs(t - 2.0 / 3.0), 1.0 - abs(t - 2.0 / 3.0)); 

    
    float xR = clamp(dR / radius, 0.0, 1.0);
    float xG = clamp(dG / radius, 0.0, 1.0);
    float xB = clamp(dB / radius, 0.0, 1.0);

    
    float wR = 0.5 + 0.5 * cos(PI * xR); 
    float wG = 0.5 + 0.5 * cos(PI * xG); 
    float wB = 0.5 + 0.5 * cos(PI * xB); 

    
    float wSum = max(0.00001, wR + wG + wB);
    
    
    vec3 stripeColor = (baseFirst * wR + accent * wG + baseSecond * wB) / wSum;

	gl_FragColor = vec4(stripeColor, 1.0);

}
1 Like
3

I could not find the error.

4

when I try to drag a slider i get:

fwdds.js:27053 Uncaught TypeError: Cannot set properties of undefined (setting 'value')
    at NumberControllerSlider2.__onChange (fwdds.js:27053:56)
    at NumberControllerSlider2.setValue (fwdds.js:24854:25)
    at NumberControllerSlider2.setValue (fwdds.js:25227:129)
    at NumberControllerSlider2.setValue (fwdds.js:24267:27)
    at onMouseDrag (fwdds.js:25343:13)
    at HTMLDivElement.onMouseDown (fwdds.js:25338:7)

in the console.. and the slider doesn’t change.

5

That’s wired I can’t seam to get that error, I will look into it!

6

Got the same:

изображение
изображение629×115 10.8 KB

Both in Chrome and in Firefox.

7

I will look into it again but I can’t get this error :slight_smile:

Thank you for spoting this.