wip-rendering.js

const regl = require('regl')({
  extensions: 'OES_texture_float'
})

const LAPLACIAN_SHADER = `
vec4 laplacian (sampler2D img, vec2 id, float DX) {
  return -texture2D(img, id) + 0.25 * (
    texture2D(img, id + DX * vec2(-1, 0))
    + texture2D(img, id + DX * vec2(1, 0))
    + texture2D(img, id + DX * vec2(0, -1))
    + texture2D(img, id + DX * vec2(0, 1)));
}
`

const FIELD_SIZE = 512
const RADIUS = 8
const NUM_STATES = 2

const state = ((new Array(NUM_STATES)).fill().map(() =>
  regl.framebuffer({
    color: regl.texture({
      shape: [FIELD_SIZE, FIELD_SIZE, 4],
      type: 'float'
    }),
    depthStencil: false
  })))

const update = regl({
  framebuffer: ({tick}) => state[tick % NUM_STATES],

  uniforms: {
    state: ({tick}) => state[(tick + 1) % NUM_STATES]
  },

  frag: `
  precision highp float;
  varying vec2 id;
  uniform sampler2D state;
  void main () {
    vec4 s = texture2D(state, id);
    gl_FragColor = vec4(s.rgb + vec3(0.001, 0, 0), 1);
  }
  `
})

const drawPoints = regl({
  vert: `
  precision highp float;
  attribute vec2 id;
  uniform float t;
  void main () {
    gl_PointSize = 8.;
    gl_Position = vec4(id + vec2(cos(t + id.x + 0.2 * id.y)), 0, 1);
    // gl_Position = vec4(id, 0, 1);
  }`,

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

  attributes: {
    id: (() => {
      const result = new Float32Array(2 * RADIUS * RADIUS)
      var ptr = 0
      for (var i = 0; i < RADIUS; ++i) {
        for (var j = 0; j < RADIUS; ++j) {
          result[ptr++] = i / RADIUS
          result[ptr++] = j / RADIUS
        }
      }
      return result
    })()
  },

  uniforms: {
    t: ({tick}) => 0.01 * tick
  },

  count: RADIUS * RADIUS,

  primitive: 'points'
})

const drawTexture = regl({
  frag: `
  precision highp float;
  varying vec2 id;
  uniform sampler2D img;

  void main () {
    gl_FragColor = texture2D(img, id);
  }`,

  uniforms: {
    img: regl.prop('img')
  }
})

const drawTriangle = regl({
  vert: `
  precision highp float;
  attribute vec2 position;
  varying vec2 id;
  void main () {
    id = 0.5 * (position + 1.0);
    gl_Position = vec4(position, 0, 1);
  }`,

  frag: `
  precision highp float;
  varying vec2 id;
  void main () {
    gl_FragColor = vec4(id, 0, 1);
  }`,

  attributes: {
    position: [
      [-4, 0],
      [4, 4],
      [4, -4]
    ]
  },

  count: 3
})

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

  /*
  renderToFBO(() => {
    drawTriangle(() => {
      drawTexture({
        img: texture
      })
    })
  })

  */

  /*
  renderToFBO(() => {
    regl.clear({
      color: [0, 1, 0, 1],
      depth: 1
    })
    drawPoints()
  })
  */

  drawTriangle(() => {
    update()

    drawTexture({
      img: state[tick % NUM_STATES]
    })
  })

})