flow-video

/**

 * Lattice Boltzmann GPGPU CFD

 *  (c) Tom Hansen 2021.

 *   tomh@uwm.edu

 */

​

​

/** code originally forked, and subsequently heavily modified, from the following work

 * by Thomas Diewald (https://www.thomasdiewald.com)

 * This Reaction-Diffusion Demo is a port from the PixelFlow-Library.

 * https://github.com/diwi/PixelFlow/tree/master/examples/Miscellaneous/ReactionDiffusion

 */

​

​

'use strict';

​

​

// framebuffer

var fbo;

​

​

var shader_common;

var shaderfiles = {};

var shaderprog = {};

var fct = 0;

​

var gr_to_comp = 8;

var lbIterPerFrame = 17;

var lbViscosity = 0.0002;

var default_ux = .045;

var default_uy = 0.00;

var ENTROPY_CUTOFF = 0.001;

let physicsFS;

let physicsVS;

let renderFS;

let renderVS;

let debugFS;

let debugVS;

let copyFS;

let copyVS;

let gl;

let gr_w=0;

let gr_h=0;

​

const PARTICLE_COUNT = Math.pow(1600, 2);

const PARTICLE_COUNT_SQRT = Math.sqrt(PARTICLE_COUNT);

const PARTICLE_DATA_SLOTS = 2;

const PARTICLE_DATA_WIDTH = PARTICLE_COUNT_SQRT * PARTICLE_DATA_SLOTS;

const PARTICLE_DATA_HEIGHT = PARTICLE_COUNT_SQRT;

const PARTICLE_EMIT_RATE = 1000;

​

​

//let particleSprite = "particle.png";

​

​

var comp_w, comp_h;

​

var cbfext;

var timeStarted = 0;

var stopRunning = false;

​

var video_w = 640;

var video_h = 480;

var cam;

​

​

// tex-struct (ping-pong)

var tex = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

​

var info = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

var inf_copy = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

​

var dye = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

​

var barrier = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

​

var video = {

  src: null,

  dst: null,

  swap: function() {

    var tmp = this.src;

    this.src = this.dst;

    this.dst = tmp;

  }

};

​

// shader

var shaderfiles = {};

​

// offscreen resolution scale factor.

var SCREEN_SCALE = 1.0;

​

// reaction diffusion settings and presets

var rdDef = {

  name: 'ReactionDiffusion',

  da: 1.0,

  db: 0.6,

  feed: 0.04,

  kill: 0.06,

  dt: 1.0,

  iter: 10,

  reset: initRD,

  preset0: function() {

    this.feed = 0.040;

    this.kill = 0.060;

    this.da = 1.00;

    this.db = 0.60;

  },

  preset1: function() {

    this.feed = 0.034;

    this.kill = 0.059;

    this.da = 1.00;

    this.db = 0.60;

  },

  preset2: function() {

    this.feed = 0.080;

    this.kill = 0.060;

    this.da = 1.00;

    this.db = 0.40;

  },

  preset3: function() {

    this.feed = 0.015;

    this.kill = 0.050;

    this.da = 1.00;

    this.db = 0.60;

  },

  preset4: function() {

    this.feed = 0.072;

    this.kill = 0.062;

    this.da = 0.50;

    this.db = 0.25;

  },

  preset5: function() {

    this.feed = 0.071;

    this.kill = 0.063;

    this.da = 0.40;

    this.db = 0.20;

  },

  preset6: function() {

    this.feed = 0.023;

    this.kill = 0.052;

    this.da = 0.50;

    this.db = 0.50;

  },

  preset7: function() {

    this.feed = 0.029;

    this.kill = 0.056;

    this.da = 0.60;

    this.db = 0.46;

  },

};

​

​

​

// ******************** PARTICLE SYSTEM ************************

​

let physicsInputTexture;

let physicsOutputTexture;

let dataLocationBuffer;

let viewportQuadBuffer;

let particleTexture;

let physicsProgram;

let renderProgram;

let debugProgram;

let copyProgram;

let frameBuffer;

let container;

let emitIndex;

let lastEmit;

let millis;

let height;

let width;

let scale;

let clock;

​

const createShader = (source, type) => {

  const shader = gl.createShader(type);

  gl.shaderSource(shader, source);

  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

    throw gl.getShaderInfoLog(shader);

  }

  return shader;

};

​

const createProgram = (vSource, fSource) => {

  const vs = createShader(vSource, gl.VERTEX_SHADER);

  const fs = createShader(fSource, gl.FRAGMENT_SHADER);

  const program = gl.createProgram();

  gl.attachShader(program, vs);

  gl.attachShader(program, fs);

  gl.linkProgram(program);

  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

    throw gl.getProgramInfoLog(program);

  }

  return program;

};

​

const createImageTexture = (image) => {

  const texture = gl.createTexture();

  gl.bindTexture(gl.TEXTURE_2D, texture);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

  const imgupdate = () => {

    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

    gl.generateMipmap(gl.TEXTURE_2D);

  };

  image.naturalWidth > 0 ? imgupdate() : image.onload = imgupdate;

  return texture;

};

​

const updateImageTexture = (texture,image) => {

  gl.bindTexture(gl.TEXTURE_2D, texture);

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  gl.generateMipmap(gl.TEXTURE_2D);

  return texture;

};

​

​

​

const createDataTexture = (width, height, data) => {

  const texture = gl.createTexture();

  gl.bindTexture(gl.TEXTURE_2D, texture);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, data);

  return texture;

};

​

const createFramebuffer = () => {

  const buffer = gl.createFramebuffer();

  return buffer;

};

​

// ——————————————————————————————————————————————————

// Helpers

// ——————————————————————————————————————————————————

​

const random = (min, max) => {

  if (typeof min !== 'number') min = 1;

  if (typeof max !== 'number') max = min, min = 0;

  return min + Math.random() * (max - min);

};

​

const createPhysicsProgram = () => {

  const program = createProgram(physicsVS, physicsFS);

  program.vertexPosition = gl.getAttribLocation(program, 'vertexPosition');

  program.physicsData = gl.getUniformLocation(program, 'physicsData');

  program.inf_copy = gl.getUniformLocation(program, 'inf_copy');

  program.barrier = gl.getUniformLocation(program, 'barrier');

  program.bounds = gl.getUniformLocation(program, 'bounds');

  program.TM = gl.getUniformLocation(program, 'TM');

  program.UM = gl.getUniformLocation(program, 'UM');

  program.default_u = gl.getUniformLocation(program, 'default_u');

  program.lbIterPerFrame = gl.getUniformLocation(program,"lbIterPerFrame");

  gl.enableVertexAttribArray(program.vertexPosition);

  return program;

};

​

const createRenderProgram = () => {

  const program = createProgram(renderVS, renderFS);

  program.dataLocation = gl.getAttribLocation(program, 'dataLocation');

  //program.particleTexture = gl.getUniformLocation(program, 'particleTexture');

  program.physicsData = gl.getUniformLocation(program, 'physicsData');

  gl.enableVertexAttribArray(program.dataLocation);

  return program;

};

​

const createDebugProgram = () => {

  const program = createProgram(debugVS, debugFS);

  program.vertexPosition = gl.getAttribLocation(program, 'vertexPosition');

  program.texture = gl.getUniformLocation(program, 'texture');

  gl.enableVertexAttribArray(program.vertexPosition);

  return program;

};

​

const createCopyProgram = () => {

  const program = createProgram(copyVS, copyFS);

  program.vertexPosition = gl.getAttribLocation(program, 'vertexPosition');

  program.texture = gl.getUniformLocation(program, 'texture');

  gl.enableVertexAttribArray(program.vertexPosition);

  return program;

};

​

const createPhysicsDataTexture = () => {

  const size = 4 * PARTICLE_COUNT * PARTICLE_DATA_SLOTS;

  const data = new Float32Array(size);

  return createDataTexture(PARTICLE_DATA_WIDTH, PARTICLE_DATA_HEIGHT, data);

};

/*

const createParticleTexture = () => {

  const image = new Image();

  image.src = particleSprite;

  return createImageTexture(image);

};

*/

const createVideoTexture = () => {

  return createImageTexture(cam.elt);

}

​

const createDataLocationBuffer = () => {

  const data = new Float32Array(PARTICLE_COUNT * 2);

  const step = 1 / PARTICLE_COUNT_SQRT;

  for (let u, v, i = 0; i < PARTICLE_COUNT; i++) {

    u = i * 2;

    v = u + 1;

    data[u] = step * Math.floor(i % PARTICLE_COUNT_SQRT);

    data[v] = step * Math.floor(i / PARTICLE_COUNT_SQRT);

  }

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

  return buffer;

};

​

const createViewportQuadBuffer = () => {

  const data = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

  return buffer;

};

​

​

​

const oldemitParticles = (count, origin, velocities = [0, 0, 0]) => {

  gl.bindTexture(gl.TEXTURE_2D, physicsInputTexture);

  const x = Math.floor((emitIndex * PARTICLE_DATA_SLOTS) % PARTICLE_DATA_WIDTH);

  const y = Math.floor(emitIndex / PARTICLE_DATA_HEIGHT);

  const chunks = [[x, y, count * PARTICLE_DATA_SLOTS]];

  const split = (chunk) => {

    const boundary = chunk[0] + chunk[2];

    if (boundary > PARTICLE_DATA_WIDTH) {

      const delta = boundary - PARTICLE_DATA_WIDTH;

      chunk[2] -= delta;

      chunk = [0, (chunk[1] + 1) % PARTICLE_DATA_HEIGHT, delta];

      chunks.push(chunk);

      split(chunk);

    }

  };

  split(chunks[0]);

  let i, j, n, m, chunk, data, force = 1.0;

  for (i = 0, n = chunks.length; i < n; i++) {

    chunk = chunks[i];

    data = [];

    for (j = 0, m = chunk[2]; j < m; j++) {

      data.push(

        origin[0] + random(-0.02, 0.02),

        origin[1] + random(-0.02, 0.02),

        0, //origin[2] + random(-0.01, 0.01),

        0, //random(10),

        velocities[0] + force * random(-1, 1),

        velocities[1] + force * random(-1, 1),

        0, //velocities[2] + force * random(-1, 1),

        0

      );

    }

    gl.texSubImage2D(

      gl.TEXTURE_2D, 0, chunk[0], chunk[1], chunk[2], 1,

      gl.RGBA, gl.FLOAT, new Float32Array(data)

    );

  }

  emitIndex += count;

  emitIndex %= PARTICLE_COUNT;

};

​

​

​

​

const emitParticles = (count, origin, velocities = [0, 0, 0]) => {

  gl.bindTexture(gl.TEXTURE_2D, physicsInputTexture);

  const x = Math.floor((emitIndex * PARTICLE_DATA_SLOTS) % PARTICLE_DATA_WIDTH);

  const y = Math.floor(emitIndex / PARTICLE_DATA_HEIGHT);

  const chunks = [[x, y, count * PARTICLE_DATA_SLOTS]];

  const split = (chunk) => {

    const boundary = chunk[0] + chunk[2];

    if (boundary > PARTICLE_DATA_WIDTH) {

      const delta = boundary - PARTICLE_DATA_WIDTH;

      chunk[2] -= delta;

      chunk = [0, (chunk[1] + 1) % PARTICLE_DATA_HEIGHT, delta];

      chunks.push(chunk);

      split(chunk);

    }

  };

  split(chunks[0]);

  let i, j, n, m, chunk, data, force = 1.0;

  for (i = 0, n = chunks.length; i < n; i++) {

    chunk = chunks[i];

    data = [];

    for (j = 0, m = chunk[2]; j < m; j++) {

      data.push(

        origin[0] + random(-0.5, 0.5),

        origin[1] + random(-0.5, 0.5),

        0, //origin[2] + random(-0.01, 0.01),

        0, //andom(10),

        velocities[0], //+ force * random(-1, 1),

        velocities[1], //+ force * random(-1, 1),

        0, // velocities[2] + force * random(-1, 1),

        0

      );

    }

    gl.texSubImage2D(

      gl.TEXTURE_2D, 0, chunk[0], chunk[1], chunk[2], 1,

      gl.RGBA, gl.FLOAT, new Float32Array(data)

    );

  }

  emitIndex += count;

  emitIndex %= PARTICLE_COUNT;

};

​

const leap = () => {

  if (typeof Leap !== 'undefined') {

    Leap.loop(frame => {

      const fingers = frame.pointables;

      for (let i = 0, n = fingers.length; i < n; i++) {

        const { tipPosition, tipVelocity } = fingers[i];

        const count = random(110, 200);

        const position = [

          (tipPosition.x / 200),

          (tipPosition.y / 200) - 1

          (tipPosition.z / 400) * -1

        ];

        const velocity = [

          tipVelocity.x / 100,

          tipVelocity.y / 120,

          tipVelocity.z / 180

        ];

        emitParticles(count, position, velocity);

      }

    });

  }

};

​

// ——————————————————————————————————————————————————

// Main

// ——————————————————————————————————————————————————

​

const particle_init = () => {

  //gl = createContext();

  //container = document.getElementById('container');

  emitIndex = 0;

  millis = 0;

  clock = Date.now();

  //document.addEventListener('touchmove', touch);

  //document.addEventListener('mousemove', touch);

  //window.addEventListener('resize', resize);

  //container.appendChild(gl.canvas);

  particle_setup();

  //resize();

  update();

  //leap();

};

​

const particle_setup = () => {

  physicsInputTexture = createPhysicsDataTexture();

  physicsOutputTexture = createPhysicsDataTexture();

  dataLocationBuffer = createDataLocationBuffer();

  viewportQuadBuffer = createViewportQuadBuffer();

  //particleTexture = createParticleTexture();

  physicsProgram = createPhysicsProgram();

  renderProgram = createRenderProgram();

  debugProgram = createDebugProgram();

  copyProgram = createCopyProgram();

  frameBuffer = createFramebuffer();

  video.src = createVideoTexture();

};

​

const physics = () => {

  gl.useProgram(physicsProgram);

  gl.viewport(0, 0, PARTICLE_DATA_WIDTH, PARTICLE_DATA_HEIGHT);

  gl.bindBuffer(gl.ARRAY_BUFFER, viewportQuadBuffer);

  gl.vertexAttribPointer(physicsProgram.vertexPosition, 2, gl.FLOAT, gl.FALSE, 0, 0);

  gl.uniform2f(physicsProgram.bounds, PARTICLE_DATA_WIDTH, PARTICLE_DATA_HEIGHT);

  gl.uniform2f(physicsProgram.TM, 1.0/gr_w, 1.0/gr_h);

  gl.uniform2f(physicsProgram.UM, 1.0/comp_w, 1.0/comp_h);

  gl.uniform1f(physicsProgram.lbIterPerFrame, lbIterPerFrame);

  gl.uniform2f(physicsProgram.default_u, default_ux,default_uy);

  gl.activeTexture(gl.TEXTURE0);

  gl.bindTexture(gl.TEXTURE_2D, physicsInputTexture);

  gl.uniform1i(physicsProgram.physicsData, 0);

  gl.activeTexture(gl.TEXTURE0+1);

  gl.bindTexture(gl.TEXTURE_2D, inf_copy.src);

  gl.uniform1i(physicsProgram.inf_copy, 1);

  gl.activeTexture(gl.TEXTURE0+2);

  gl.bindTexture(gl.TEXTURE_2D, barrier.src);

  gl.uniform1i(physicsProgram.barrier, 2);

  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);

  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, physicsOutputTexture, 0);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  gl.bindFramebuffer(gl.FRAMEBUFFER, null);

};

​

const copy = () => {

  gl.useProgram(copyProgram);

  gl.viewport(0, 0, PARTICLE_DATA_WIDTH, PARTICLE_DATA_HEIGHT);

  gl.bindBuffer(gl.ARRAY_BUFFER, viewportQuadBuffer);

  gl.vertexAttribPointer(copyProgram.vertexPosition, 2, gl.FLOAT, gl.FALSE, 0, 0);

  gl.activeTexture(gl.TEXTURE0);

  gl.bindTexture(gl.TEXTURE_2D, physicsOutputTexture);

  gl.uniform1i(copyProgram.physicsData, 0);

  gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);

  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, physicsInputTexture, 0);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  gl.bindFramebuffer(gl.FRAMEBUFFER, null);

};

​

const debug = () => {

  const x = 16 * scale;

  const y = 16 * scale;

  const w = 360 * scale;

  const h = 180 * scale;

  gl.useProgram(debugProgram);

  gl.viewport(x, y, w, h);

  gl.bindBuffer(gl.ARRAY_BUFFER, viewportQuadBuffer);

  gl.vertexAttribPointer(physicsProgram.vertexPosition, 2, gl.FLOAT, gl.FALSE, 0, 0);

  gl.activeTexture(gl.TEXTURE0);

  gl.bindTexture(gl.TEXTURE_2D, physicsOutputTexture);

  gl.uniform1i(debugProgram.texture, 0);

  gl.enable(gl.BLEND);

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  gl.disable(gl.BLEND);

};

​

const render = () => {

  gl.useProgram(renderProgram);

  //gl.clear(gl.COLOR_BUFFER_BIT);

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

  gl.bindBuffer(gl.ARRAY_BUFFER, dataLocationBuffer);

  gl.vertexAttribPointer(renderProgram.dataLocation, 2, gl.FLOAT, gl.FALSE, 0, 0);

  gl.activeTexture(gl.TEXTURE0);

  gl.bindTexture(gl.TEXTURE_2D, physicsOutputTexture);

  gl.uniform1i(renderProgram.physicsData, 0);

  //gl.activeTexture(gl.TEXTURE1);

  //gl.bindTexture(gl.TEXTURE_2D, particleTexture);

  //gl.uniform1i(renderProgram.particleTexture, 1);

  gl.enable(gl.BLEND);

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  //gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

  gl.drawArrays(gl.POINTS, 0, PARTICLE_COUNT);

  gl.disable(gl.BLEND);

};

​

const tick = () => {

  const now = Date.now();

  millis += now - clock || 0;

  clock = now;

};

​

const spawn = () => {

  if (millis < 3000) {

    emitParticles(800, [

      //-1.0 + Math.sin(millis * 0.001) * 2.0,

      //-0.2 + Math.cos(millis * 0.004) * 0.5,

      //Math.sin(millis * 0.015) * -0.05

      random()*2-1,random()*2-1,0

    ]);

  }

};

​

​

​

const newspawn = () => {

  if (millis < 30000) {

    emitParticles(800, [

      0.1,

      0.1, 0.01 

    ]);

  }

};

​

const touch = (event) => {

  if (millis - lastEmit < 20) return;

  const touches = event.changedTouches || [event];

  const limit = PARTICLE_EMIT_RATE / touches.length;

  for (let i = 0; i < touches.length; i++) {

    const touch = touches[i];

    const x = (touch.clientX / width) * 2 - 1;

    const y = (touch.clientY / height) * -2 + 1;

    emitParticles(limit, [x, y, 0]);

  }

  lastEmit = millis;

};

​

const resize = () => {

  scale = window.devicePixelRatio || 1;

  width = window.innerWidth;

  height = window.innerHeight;

  gl.canvas.width = width * scale;

  gl.canvas.height = height * scale;

  gl.canvas.style.width = width + 'px';

  gl.canvas.style.height = height + 'px';

};

​

const update = () => {

  //requestAnimationFrame(update);

  tick();

  spawn();

  physics();

  copy();

  render();

  debug();

};

​

​

function setup() {

  pixelDensity(1);

  frameRate(60);

  // webgl canvas

  createCanvas(windowWidth, windowHeight, WEBGL);

  gr_w = windowWidth;

  gr_h = windowHeight;

  // create gui (dat.gui)

  var gui = new dat.GUI();

  gui.add(rdDef, 'name');

  gui.add(rdDef, 'da', 0, 1).listen();

  gui.add(rdDef, 'db', 0, 1).listen();

  gui.add(rdDef, 'feed', 0.01, 0.09).listen();

  gui.add(rdDef, 'kill', 0.01, 0.09).listen();

  gui.add(rdDef, 'dt', 0, 1);

  gui.add(rdDef, 'iter', 1, 50);

  gui.add(rdDef, 'preset0');

  gui.add(rdDef, 'preset1');

  gui.add(rdDef, 'preset2');

  gui.add(rdDef, 'preset3');

  gui.add(rdDef, 'preset4');

  gui.add(rdDef, 'preset5');

  gui.add(rdDef, 'preset6');

  gui.add(rdDef, 'preset7');

  gui.add(rdDef, 'reset');

​

​

  // webgl context

  gl = this._renderer.GL;

​

  // webgl version (1=webgl1, 2=webgl2)

  var VERSION = gl.getVersion();

​

  console.log("WebGL Version: " + VERSION);

​

​

  // get some webgl extensions

  // if(VERSION === 1){

  // var ext = gl.newExt(['OES_texture_float', 'OES_texture_float_linear'], true);

  // }

  // if(VERSION === 2){

  // var ext = gl.newExt(['EXT_color_buffer_float'], true);

  // }

​

  // beeing lazy ... load all available extensions.

  gl.newExt(gl.getSupportedExtensions(), true);

​

​

  // create FrameBuffer for offscreen rendering

  fbo = gl.newFramebuffer();

​

  // create Textures for multipass rendering

  var def_gr = {

    target: gl.TEXTURE_2D,

    iformat: gl.RGBA32F,

    format: gl.RGBA,

    type: gl.FLOAT,

    wrap: gl.REPEAT,

    filter: [gl.LINEAR, gl.LINEAR]

  }

  var def_tex = {

    target: gl.TEXTURE_2D,

    iformat: gl.RGBA32F,

    format: gl.RGBA,

    type: gl.FLOAT,

    wrap: gl.REPEAT,

    filter: [gl.NEAREST, gl.NEAREST]

  }

  var def_info = {

    target: gl.TEXTURE_2D,

    iformat: gl.RGBA32F,

    format: gl.RGBA,

    type: gl.FLOAT,

    wrap: gl.REPEAT,

    filter: [gl.NEAREST, gl.NEAREST]

  }

  var def_inf_copy = {

    target: gl.TEXTURE_2D,

    iformat: gl.RGBA32F,

    format: gl.RGBA,

    type: gl.FLOAT,

    wrap: gl.REPEAT,

    filter: [gl.LINEAR, gl.LINEAR]

  }

  var def_video = {

    target: gl.TEXTURE_2D,

    iformat: gl.RGBA,

    format: gl.RGBA,

    type: gl.UNSIGNED_BYTE,

    wrap: gl.CLAMP,

    filter: [gl.LINEAR, gl.LINEAR]

  }

​

  comp_w = ceil(gr_w / gr_to_comp);

  comp_h = ceil(gr_h / gr_to_comp);

  tex.src = gl.newTexture(comp_w * 3, comp_h * 3, def_tex);

  tex.dst = gl.newTexture(comp_w * 3, comp_h * 3, def_tex);

​

  dye.src = gl.newTexture(gr_w, gr_h, def_gr);

  dye.dst = gl.newTexture(gr_w, gr_h, def_gr);

​

  barrier.src = gl.newTexture(gr_w, gr_h, def_inf_copy);

  barrier.dst = gl.newTexture(gr_w, gr_h, def_inf_copy);

​

  info.src = gl.newTexture(comp_w, comp_h, def_info);

  info.dst = gl.newTexture(comp_w, comp_h, def_info);

​

  inf_copy.src = gl.newTexture(comp_w, comp_h, def_inf_copy);

  inf_copy.dst = gl.newTexture(comp_w, comp_h, def_inf_copy);

​

  //video.src = gl.newTexture(video_w, video_h, def_video);

  //video.dst = gl.newTexture(video_w, video_h, def_video);

  // Shader source, depending on available webgl version

  var shaderlist = ['init', 'init_dye', 'init_barrier', 'stream', 'limiter', 'collide',

    'forcing', 'relax', 'display', 'info', 'inf_copy', 'advect_dye', 'video','barrier'

  ];

  shaderlist.forEach((fs_basename) => {

    console.log('shader: ' + fs_basename);

    let fs_shader = shader_common + shaderfiles["webgl" + VERSION + ".fs_" + fs_basename];

    shaderprog[fs_basename] = new Shader(gl, {

      fs: fs_shader

    });

  });

​

  // camera input

  cam = createCapture(VIDEO);

  cam.size(video_w, video_h);

  cam.hide();

  video.src = createVideoTexture();

​

​

  // place initial samples

  initRD();

  particle_setup();

  particle_init();

}

​

​

​

function windowResized() {

  if (!fbo) return;

  var w = windowWidth;

  var h = windowHeight;

  resizeCanvas(w, h);

​

  var tex_w = ceil(w * SCREEN_SCALE);

  var tex_h = ceil(h * SCREEN_SCALE);

​

  tex.src.resize(tex_w, tex_h);

  tex.dst.resize(tex_w, tex_h);

​

  initRD();

}

​

​

​

// shading colors

var pallette = [

  1.00, 1.00, 1.00,

  0.00, 0.40, 0.80,

  0.20, 0.00, 0.20,

  1.00, 0.80, 0.40,

  0.50, 0.25, 0.12,

  0.50, 0.50, 0.50,

  0.00, 0.00, 0.00

];

​

​

​

function randomizeColors() {

  var num = pallette.length / 3;

  for (var i = 1; i < num - 1; i++) {

    var id = i * 3;

    var r = random(1);

    var g = random(1);

    var b = random(1);

​

    pallette[id + 0] = r;

    pallette[id + 1] = g;

    pallette[id + 2] = b;

  }

}

​

​

function keyReleased() {

  if (key === 'C') {

    randomizeColors();

  }

}

​

​

function LBstep(textr, shader, xuniforms, xblend) {

  //console.log(arguments);

  var w, h;

  if (textr === 0) {

    // textr of zero means render to output device

    w = gr_w;

    h = gr_h;

    gl.viewport(0, 0, w, h);

  } else {

    // passing in an actual texture to render to.

    fbo.begin(textr.dst);

    w = textr.dst.w;