How to achieve this material effect [gif image]?

Questions
,
5

A very rough solution, based on this cool shader: http://madebyevan.com/shaders/grid/

jsfiddle example

Grid

Code of shaders:

  var vertexShader = `
    uniform float time;
    varying vec3 pos;
    void main()	{
      pos = position;
      vec3 p = position;
      p.y = sin(p.x * .1 - time) * cos(p.z * .1 - time) * 5.;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(p,1.0);
    }
  `;
  var fragmentShader = `
    /* based on http://madebyevan.com/shaders/grid/ */
  
    #extension GL_OES_standard_derivatives : enable

    varying vec3 pos;
    uniform float time;
    
    float line(float width, vec3 step){
      vec3 tempCoord = pos / step;
      
      vec2 coord = tempCoord.xz;

      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., vec3(1.)) + line(1.5, vec3(10.));      
      vec3 c = v * vec3(0., 1., 1.) * (sin(time * 5. - pos.z * .25) * .5 + .5);
      c = mix(vec3(1), c, v);
      
      gl_FragColor = vec4(c, 1.0);
    }
  `;
10 Likes