bunny3d.js

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]
  })
})