How to achieve this material effect [gif image]?

Questions
,
18

Do you know that you will owe me six pack :beer:, if you won’t start to think yourself? :smile:

vUv_lines
vUv_lines864×475 118 KB

https://jsfiddle.net/prisoner849/hg90shov/

You should pass uv to the fragment shader:

  var vertexShader = `
    uniform float time;
    uniform vec3 basePos;
    varying vec3 vPos;
    varying vec2 vUv;
    void main()	{
      vPos = position + basePos;
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `;
  var fragmentShader = `
  
    #extension GL_OES_standard_derivatives : enable

    varying vec3 vPos;
    varying vec2 vUv;
    uniform float time;
    uniform vec3 color;
    
    float line(float width, vec2 step){
      
      vec2 coord = vUv / step;

      vec2 grid = abs(fract(coord - 0.5) - 0.5) / fwidth(coord * width);
      float line = min(grid.x, grid.y);
      
      return 1. - min(line, 1.0);
    }
    
    void main() {
      float v = line(1., vec2(1. / 30., 0.1));
      
      float s = 500.; // step
      float mp = mod(vPos.z - time * 100., s);
      float smooth = 1. - smoothstep(0., 5., mp) * (1. - smoothstep(s - 20.,s,mp));
      
      vec3 c = v * vec3(0., 1., 1.) * smooth;
      c = mix(color, c, v);
      
      gl_FragColor = vec4(c, 1.0);
    }
  `;

Just for reference, I’ve put it on Shadertoy: Shader - Shadertoy BETA

4 Likes