Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const regl = require('regl')()
const calcNormals = require('angle-normals')
const mat4 = require('gl-mat4')
const bunny = require('bunny')
// coordinate systems:
//
// data --model--> world --view--> camera --projection--> device
//
var mouse = [0, 0]
window.addEventListener('mousemove', ({clientX, clientY}) => {
mouse[0] = 2 * clientX / window.innerWidth - 1
mouse[1] = 1 - 2 * clientY / window.innerHeight
})
// normal = direction (orientation) of plane tangent to surface at a point
const draw = regl({
attributes: {
position: bunny.positions,
normal: calcNormals(bunny.cells, bunny.positions)
},
elements: bunny.cells,
vert: `
precision highp float;
attribute vec3 position, normal;
uniform mat4 projection, view, model;
varying vec3 color;
uniform float fatness;
void main () {
color = 0.5 * (1. + normal);
gl_Position = projection * view * model *
vec4(
fatness * normal + position,
1);
}
`,
frag: `
precision highp float;
varying vec3 color;
void main () {
gl_FragColor = vec4(color, 1);
}
`,
uniforms: {
model: () =>
mat4.translate([],
mat4.identity([]),
[0, -2.5, 0]),
view: (_, {mouse}) =>
mat4.lookAt([],
[10 * mouse[0], 10 * mouse[1], 30],
[0, 0, 0],
[0, 1, 0]),
projection: ({viewportWidth, viewportHeight}) =>
mat4.perspective([],
Math.PI / 4,
viewportWidth / viewportHeight,
0.01,
1000),
fatness: regl.prop('fatness')
}
})
regl.frame(function (context) {
regl.clear({
color: [0, 0, 0, 1],
depth: 1
})
draw({
mouse,
fatness: mouse[0]
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment