let blurVShader;

let bloomShader;

​

let img;

​

let blurPassH;

let blurPassV;

let bloomPass;

​

function preload() {

  // Load the shader

  blurHShader = loadShader('basic.vert', 'basic.frag');

  blurVShader = loadShader('basic.vert', 'basic.frag');

  bloomShader = loadShader('basic.vert', 'bloom.frag');

​

  // Load the image

  img = loadImage("mountain.jpg");

​

}

​

function setup() {

  createCanvas(500, 500);

​

  blurPassH = createGraphics(width, height, WEBGL);

  blurPassV = createGraphics(width, height, WEBGL);

  bloomPass = createGraphics(width, height, WEBGL);

  noStroke();

  blurPassH.noStroke();

  blurPassV.noStroke();

  bloomPass.noStroke();

}

​

function draw() {

  //HORIZONTAL

  blurPassH.shader(blurHShader);

  blurHShader.setUniform("tex", img);

  blurHShader.setUniform("resolution", [width, height]);

  blurHShader.setUniform("direction", [1,0]);

  blurPassH.rect(0, 0, width, height);

  //VERTICAL

   blurPassV.shader(blurVShader);

  blurVShader.setUniform("tex", blurPassH);  //input is previous H pass

  blurVShader.setUniform("resolution", [width, height]);

  blurVShader.setUniform("direction", [0,1]);

  //Bloom stuff

  blurPassV.rect(0, 0, width, height); 

  bloomPass.shader(bloomShader);

  bloomShader.setUniform("tex", img);

  bloomShader.setUniform("blurTex", blurPassV);

  bloomPass.rect(0, 0, width, height);

  image(bloomPass, 0, 0);

​

}

​

//splitting our passes into multiple shaders, and rendering to multiple buffers.