split-grid.js

const unindex = require('unindex-mesh')
const normals = require('face-normals')
const glsl = require('glslify')

const regl = require('regl')({ extensions: ['ANGLE_instanced_arrays'] })
const cube = unindex(require('primitive-cube')())
const camera = require('regl-camera')(regl)

const { translations, scales } = generateSplitGrid()

document.body.style.overflow = 'hidden'

const grid = regl({
  instances: translations.length,
  count: cube.length / 3,
  uniforms: {
    time: (props) => props.time * 0.06125
  },
  attributes: {
    position: cube,
    normal: normals(cube),
    translate: {
      buffer: regl.buffer(translations),
      divisor: 1
    },
    scale: {
      buffer: regl.buffer(scales),
      divisor: 1
    }
  },
  vert: glsl`
    precision mediump float;

    uniform mat4 projection, view;
    uniform float time;
    attribute vec3 scale, translate;
    attribute vec3 position, normal;
    varying vec3 vNorm, vPos;

    #pragma glslify: noise = require('glsl-noise/simplex/3d')

    float fnoise (vec3 coord) {
      return noise(coord) * 0.5 + 0.5;
    }

    void main() {
      vec2 seed = translate.xz;
      float growth = (
        fnoise(vec3(seed, time * 0.25)) * 2.0 +
        fnoise(vec3(seed, time * 0.25) * 8.0)
      );

      vPos = 3.0 * (vec3(1, growth, 1) * position * scale + translate);
      vNorm = normalize(normal);
      gl_Position = projection * view * vec4(vPos, 1);
    }
  `,
  frag: glsl`
    precision mediump float;

    varying vec3 vNorm;

    void main() {
      gl_FragColor = vec4(vNorm * 0.5 + 0.5, 1);
    }
  `
})

const clear = { color: [0, 0, 0, 1] }

regl.frame(() => {
  regl.clear(clear)
  camera(draw)
})

function draw () {
  grid()
}

function generateSplitGrid () {
  var translations = [[0, 0, 0]]
  var scales = [[1, 1, 1]]

  for (var n = 0; n < 14; n++) {
    var limit = translations.length
    for (var i = 0; i < limit; i++) {
      if (Math.random() > 0.75) continue

      var axis = Math.random() > 0.5 ? 0 : 2
      var axisScale = (scales[i][axis] /= 2)
      var newScale = [scales[i][0], scales[i][1], scales[i][2]]
      var newTranslation = [
        translations[i][0],
        translations[i][1],
        translations[i][2]
      ]

      newTranslation[axis] += axisScale / 2
      translations[i][axis] -= axisScale / 2

      translations[translations.length] = newTranslation
      scales[scales.length] = newScale
    }
  }

  for (var s = 0; s < scales.length; s++) {
    scales[s][0] *= 0.9
    scales[s][1] = 0.1
    scales[s][2] *= 0.9
  }

  return {
    translations: translations,
    scales: scales
  }
}