Бесконечное движение вперед по шахматной доске

* {
  margin: 0;
  padding: 0;
}

.wrp {
  position: relative;
  overflow: hidden;
  height: 100vh;
  perspective: 100vh;
}

#chessboard {
  width: 200%;
  height: 120vh;
  background: linear-gradient(rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 600px), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-color: white;
  background-size: 100% 100%, 60px 60px, 60px 60px;
  background-position: 0 0, 0 0, 30px 30px;
  margin-left: -50%;
  transform: rotateX(75deg);
  animation: chessboard .5s infinite linear;
}

@keyframes chessboard {
  to {
    background-position: 0 0, 0 60px, 30px 90px;
  }
}

<div class="wrp">
  <div id="chessboard"></div>
</div>

let canvas = document.querySelector('canvas');
let gl = canvas.getContext('webgl');
let pid = gl.createProgram();

shader(`
  attribute vec2 coords;
  void main(void) {
    gl_Position = vec4(coords.xy, 0.0, 1.0);
  }
`, gl.VERTEX_SHADER);

shader(`
  precision highp float; 
  uniform vec2 res; 
  uniform float time; 

  float rayMarch( in vec3 ro, in vec3 rd, float tmax ){
      float t = 0.0;
      float h = (1.0-ro.y)/rd.y;
      for( int i=0; i<9; i++ ){        
          vec3 pos = ro + t*rd;
          float h = pos.y;
          if( h<0.001 || t>tmax ) break;
          t += h;
      }
      return t;    
  }

  vec3 render( in vec3 ro, in vec3 rd ) {
      vec3 col = vec3(0.); 
      float t = rayMarch( ro, rd, 10. );    
      vec3 pos = ro + t*rd;
      if (fract(pos.x)>0.5 && fract(pos.z)<0.5) 
        return vec3(1.);
      if (fract(pos.x)<0.5 && fract(pos.z)>0.5) 
        return vec3(1.);
      return vec3(0.);
  }

  mat3 setCamera( in vec3 ro, in vec3 rt, in float cr ) {
    vec3 cw = normalize(rt-ro);
    vec3 cp = vec3(sin(cr), cos(cr),0.0);
    vec3 cu = normalize( cross(cw,cp) );
    vec3 cv = normalize( cross(cu,cw) );
    return mat3( cu, cv, -cw );
  }

  void main(void) {
    vec2 uv = gl_FragCoord.xy/res;
	  vec2 p = uv-0.5;
    vec3 ro = vec3( sin(time), 1.0, time);
    vec3 rt = vec3( sin(time), 0.3, time+1. );
    mat3 cam = setCamera( ro, rt, 0.0 );
    vec3 rd = normalize( cam * vec3( p, -1.0) );
    vec3 c = render( ro, rd );
    gl_FragColor = vec4(c, 1.0 ); 
  }
`, gl.FRAGMENT_SHADER);

gl.linkProgram(pid);
gl.useProgram(pid);

let array = new Float32Array([-1,  3, -1, -1, 3, -1]);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

let coords = gl.getAttribLocation(pid, "coords");
gl.vertexAttribPointer(coords, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coords);

let res = gl.getUniformLocation(pid, 'res');
let time = gl.getUniformLocation(pid, 'time');
let x = 0, y = 0;
let changeCenter = e => {
  e = e.touches ? e.touches[0] : e;
  let z = window.getComputedStyle(canvas).zoom || 1;
  let d = document.documentElement;
  x = (e.clientX + d.scrollLeft - canvas.offsetLeft*z) / z;
  y = (e.clientY + d.scrollTop - canvas.offsetTop*z) / z
}

window.addEventListener('resize', resize);
resize();
requestAnimationFrame(draw)
 
function draw(t) {
  gl.uniform2f(res, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.uniform1f(time, t/1000);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(draw)
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  gl.attachShader(pid, sid);
}

function resize(){
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
}

body {
  margin:0;
  overflow:hidden;
}

<canvas/>