Codepen

ShaderStart

========== HTML ===============

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="host"></div>

<script>
  var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;
  var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.context.getExtension('OES_standard_derivatives');
  renderer.setSize(WIDTH, HEIGHT);
 
  document.getElementById('host').appendChild(renderer.domElement);

  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0';
  document.body.appendChild(stats.domElement);


  var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
  camera.position.z = 250;


  var scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x323232 );
  var light = new THREE.PointLight(0xffffff, 1, Infinity);
  camera.add(light);

  scene.add(light);

  function render() {
    if (typeof updateVertices !== "undefined") {
      updateVertices();
    }
    renderer.render(scene, camera);
    stats.update();
  }


</script>

============= CSS =============

html * {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}


=========== JS =============

var vertexShader = `
  varying vec2 vUv;
  varying vec4 _pos;
  varying vec3 cam;
  void main(){
    cam = cameraPosition;
    vUv = uv;    
    vec4 mvPosition = modelViewMatrix * vec4( position,  1.0 );
    _pos = mvPosition;
    gl_Position = projectionMatrix * mvPosition;
  }
`;

var fragmentShader = `
  varying vec2 vUv;
  uniform sampler2D texture;
  uniform sampler2D texture2;
  uniform sampler2D texture3;
  uniform float time;
  varying vec4 _pos;
  varying vec3 cam;
  uniform vec2 u_resolution;

  void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    float t = abs(dFdx(st.x)) / abs(dFdy(st.y));
    float s = dFdx(st.x) / dFdy(vUv.x) * 0.02;

    if(s == 0.19){
        gl_FragColor = vec4(1.);
    } else {
        gl_FragColor = vec4(_pos.x, t, 0., 1.);
    }

    
    


  }
`;

var texture = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Farsash/farsash.github.io/master/p.jpg" );
 texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

var texture2 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Farsash/farsash.github.io/master/p2.jpg" );
 texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;

var texture3 = new THREE.TextureLoader().load("https://raw.githubusercontent.com/Farsash/farsash.github.io/master/p1.jpg" );
 texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;

var material = new THREE.ShaderMaterial({ 
  uniforms: { texture: { type: "t", value: texture },
             texture2: { type: "t", value: texture2 },
             texture3: { type: "t", value: texture3 },
              time: { type: "f", value: 0.0 },
              u_resolution: { type: "v2", value: new THREE.Vector2(renderer.domElement.width, renderer.domElement.width) }
            }, 
  vertexShader: vertexShader, 
  fragmentShader: fragmentShader,
  extensions: {
    derivatives: true, // set to use derivatives
    fragDepth: false, // set to use fragment depth values
    drawBuffers: false, // set to use draw buffers
    shaderTextureLOD: false // set to use shader texture LOD
  }
});


var geometry = new THREE.BoxBufferGeometry( 80, 80, 80 );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
let t = 0;
let k = 0;

function animate() {
  requestAnimationFrame(animate);
  render();
}

animate();