threejs(11)-Proficient in shader programming (difficulty) 2

1. Writing advanced patterns with shader

Small Japanese flag

precision lowp float;
varying vec2 vUv;
float strength = step(0.5,distance(vUv,vec2(0.5)) + 0.25);
gl_FragColor =vec4(strength,strength,strength,strength);

Draw a circle

precision lowp float;
varying vec2 vUv;
float strength = 1.0 - step(0.5,distance(vUv,vec2(0.5)) + 0.25);
gl_FragColor =vec4(strength,strength,strength,strength);

Ring

precision lowp float;
varying vec2 vUv;
float strength = step(0.5,distance(vUv,vec2(0.5)) + 0.35);
strength *= (1.0 - step(0.5,distance(vUv,vec2(0.5)) + 0.25));
gl_FragColor =vec4(strength,strength,strength,strength);

Gradient ring

precision lowp float;
varying vec2 vUv;
float strength = abs(distance(vUv,vec2(0.5))-0.25);
gl_FragColor =vec4(strength,strength,strength,1);

Target practice

precision lowp float;
varying vec2 vUv;
float strength = step(0.1,abs(distance(vUv,vec2(0.5))-0.25));
gl_FragColor =vec4(strength,strength,strength,1);

Wave Ring

precision lowp float;
vec2 waveUv = vec2(
    vUv.x,
    vUv.y + sin(vUv.x*30.0)*0.1
   );
loat strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25));
gl_FragColor =vec4(strength,strength,strength,1);

precision lowp float;
vec2 waveUv = vec2(
    vUv.x + sin(vUv.y*30.0)*0.1,
    vUv.y + sin(vUv.x*30.0)*0.1
   );
loat strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25));
gl_FragColor =vec4(strength,strength,strength,1);

precision lowp float;
vec2 waveUv = vec2(
  vUv.x + sin(vUv.y*100.0)*0.1,
   vUv.y + sin(vUv.x*100.0)*0.1
 );
float strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25));
gl_FragColor =vec4(strength,strength,strength,1);

Show view based on angle

precision lowp float;
float angle = atan(vUv.x,vUv.y);
float strength = angle;
gl_FragColor =vec4(strength,strength,strength,1);

Realize spiral gradient radar scanning based on angle

precision lowp float;
float angle = atan(vUv.x-0.5,vUv.y-0.5);
float strength = (angle + 3.14)/6.28;
gl_FragColor =vec4(strength,strength,strength,1);

Realize radar scanning – dynamic selection through time

precision lowp float;
vec2 rotateUv = rotate(vUv,3.14*0.25,vec2(0.5));
vec2 rotateUv = rotate(vUv,-uTime*5.0,vec2(0.5));
float alpha = 1.0 - step(0.5,distance(vUv,vec2(0.5)));
float angle = atan(rotateUv.x-0.5,rotateUv.y-0.5);
float strength = (angle + 3.14)/6.28;
gl_FragColor =vec4(strength,strength,strength,1);

Kaleidoscope

precision lowp float;
float angle = atan(vUv.x-0.5,vUv.y-0.5)/PI;
float strength = mod(angle*10.0,1.0);
gl_FragColor =vec4(strength,strength,strength,1);

Radiant

precision lowp float;
float angle = atan(vUv.x-0.5,vUv.y-0.5)/(2.0*PI);
float strength = sin(angle*100.0);
gl_FragColor =vec4(strength,strength,strength,1);

Use noise to achieve smoke and ripple effects

precision lowp float;
// noise function
float noise (in vec2 _st) {<!-- -->
    vec2 i = floor(_st);
    vec2 f = fract(_st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    vec2 u = f * f * (3.0 - 2.0 * f);

    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}
float strength = noise(vUv);
gl_FragColor =vec4(strength,strength,strength,1);

Set waveform by time

precision lowp float;
// noise function
float noise (in vec2 _st) {<!-- -->
    vec2 i = floor(_st);
    vec2 f = fract(_st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    vec2 u = f * f * (3.0 - 2.0 * f);

    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}
float strength = step(0.5,noise(vUv * 100.0));
gl_FragColor =vec4(strength,strength,strength,1);

Debugging using gui

const params = {<!-- -->
  uFrequency: 10,
  uScale: 0.1,
};

...
//Create shader material;
const shaderMaterial = new THREE.ShaderMaterial({<!-- -->
  vertexShader: basicVertexShader,
  fragmentShader: basicFragmentShader,
  uniforms: {<!-- -->
    uColor: {<!-- -->
      value: new THREE.Color("purple"),
    },
    // frequency of waves
    uFrequency: {<!-- -->
      value: params.uFrequency,
    },
    // Amplitude of wave
    uScale: {<!-- -->
      value: params.uScale,
    },
    // Animation time
    uTime: {<!-- -->
      value: 0,
    },
    uTexture: {<!-- -->
      value: texture,
    },
  },
  side: THREE.DoubleSide,
  transparent: true,
});
....
gui
  .add(params, "uFrequency")
  .min(0)
  .max(50)
  .step(0.1)
  .onChange((value) => {<!-- -->
    shaderMaterial.uniforms.uFrequency.value = value;
  });
gui
  .add(params, "uScale")
  .min(0)
  .max(1)
  .step(0.01)
  .onChange((value) => {<!-- -->
    shaderMaterial.uniforms.uScale.value = value;
  });

float strength = step(uScale,cnoise(vUv * 10.0 + uTime)) ;
gl_FragColor =vec4(strength,strength,strength,1);

Glow path

float strength =1.0 - abs(cnoise(vUv * 10.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);

Use blending functions to mix colors

 // Use blending function to mix colors
    vec3 purpleColor = vec3(1.0, 0.0, 1.0);
    vec3 greenColor = vec3(1.0, 1.0, 1.0);
    vec3 uvColor = vec3(vUv,1.0);
    float strength = step(0.9,sin(cnoise(vUv * 10.0)*20.0));


    vec3 mixColor = mix(greenColor,uvColor,strength);
    // gl_FragColor =vec4(mixColor,1.0);
    gl_FragColor =vec4(mixColor,1.0);