Skip to content

Instantly share code, notes, and snippets.

@hughsk
Created January 17, 2017 02:04
Show Gist options
  • Save hughsk/bf60d12b1ef7de4805a14762849d0a42 to your computer and use it in GitHub Desktop.
Save hughsk/bf60d12b1ef7de4805a14762849d0a42 to your computer and use it in GitHub Desktop.
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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment