workshop-part-1.js

const regl = require('regl')()
const mat4 = require('gl-mat4')
const bunny = require('bunny')
const angleNormals = require('angle-normals')

const setupCamera = regl({
  context: {
    projection: ({viewportWidth, viewportHeight}) =>
      mat4.perspective([],
        Math.PI / 4,
        viewportWidth / viewportHeight,
        0.01,
        1000),
    view: (context, {eye, center}) =>
      mat4.lookAt([],
        eye,
        center,
        [0, 1, 0])
  },

  uniforms: {
    projection: regl.context('projection'),
    view: regl.context('view')
  }
})

const draw = regl({
  vert: `
  precision highp float;
  attribute vec3 position, normal;
  uniform mat4 projection, view, model;
  varying vec3 vcolor;
  void main () {
    vcolor = normal;
    gl_Position = projection * view * model * vec4(position, 1);
  }
  `,

  frag: `
  precision highp float;
  varying vec3 vcolor;
  void main () {
    gl_FragColor = vec4(vcolor, 1);
  }
  `,

  attributes: {
    position: bunny.positions,
    normal: angleNormals(bunny.cells, bunny.positions)
  },

  elements: bunny.cells,

  uniforms: {
    model: () =>
      mat4.translate([], mat4.identity([]), [0, -2.5, 0])
  }
})

const state = {
  mouse: [0, 0]
}

window.addEventListener('mousemove', (event) => {
  state.mouse[0] = 2 * event.clientX / window.innerWidth - 1
  state.mouse[1] = 1 - 2 * event.clientY / window.innerHeight
})


function cameraPoint (t) {
  return [
    10.0 * Math.cos(t),
    2.5 + 10.0 * Math.sin(t),
    -10.0 * Math.cos(2. * t)
  ]
}

regl.frame(({tick}) => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  })

  const eye = cameraPoint(0.01 * tick)
  const center = cameraPoint(0.01 * tick + 1)

  setupCamera({
    eye: [
      eye[0] + 10 * state.mouse[0],
      eye[1] + 10 * state.mouse[1],
      eye[2]
    ],
    center: [
      0.5 * center[0],
      2.5,
      0.5 * center[2]
    ]
  },
  () => {
    draw()
  })
})