jam-3-exploding-bunny-regl

exploding-bunny-regl.js

const regl = require('regl')();
const mat4 = require('gl-mat4');
const fNormals = require('face-normals');
const unindex = require('unindex-mesh');
const bunny = require('bunny');

const pos = unindex(bunny);

const draw = regl({
  frag: `
  precision mediump float;

  varying vec3 vNormal;

  void main() {
    gl_FragColor = vec4(vNormal, 1.0);
  }
  `,

  vert: `
  precision mediump float;
  attribute vec3 position;
  attribute vec3 normal;
  uniform mat4 model, view, projection;
  uniform float t;

  varying vec3 vNormal;

  void main() {
    vNormal = normal;
    vec4 offset = vec4(position, 1);
    float dist = sin(t) * 1.0 + 1.0;
    offset.xyz += normal * dist;
    gl_Position = projection * view * model * offset;
  }
  `,

  attributes: {
    position: pos,
    normal: fNormals(pos)
  },

  count: pos.length / 3,

  uniforms: {
    model: mat4.identity([]),
    view: mat4.lookAt([],
      [-10, 2.5, 20],
      [0, 4, 0],
      [0, 1, 0]
    ),
    projection: ({ viewportWidth, viewportHeight }) => {
      return mat4.perspective([],
      Math.PI / 4,
      viewportWidth / viewportHeight,
      0.01,
      1000)
    },
    t: ({ time }) => time
  }
});

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

https://github.com/Jam3/jam3-lesson-webgl-shader-threejs