let fbData;

​

function setup() {

  createCanvas(512, 512, WEBGL);

  writeShdr = createShader( vsFullScreen, fsWrite );

  drawShdr = createShader( vsDraw, fsDraw );

  let fbOptions = { format: UNSIGNED_BYTE,

                    depth: false, antialias: false, density: 1,

                    width: 256, height: 1 };

  fbData = createFramebuffer( fbOptions );

  fbData.begin();

  let gl = fbData.gl;

  writeShdr.bindShader();

  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);

  gl.drawArrays( gl.TRIANGLES, 0, 3 );

  writeShdr.unbindShader();

  fbData.end();

  noLoop();

}

​

function draw() {

  background(0);

  translate( -width/2, -height/2 );

  gl = this._renderer.GL;

  drawShdr.bindShader();

  drawShdr.setUniform( 'data', fbData );

  drawShdr.bindTextures();

  gl.drawArraysInstanced( gl.TRIANGLE_STRIP, 0, 4, 256 );

  drawShdr.unbindTextures();

  drawShdr.unbindShader();

}

​

let vsFullScreen = `#version 300 es

precision highp float;

precision highp int;

void main() {

  gl_Position = vec4( 4*ivec2(gl_VertexID&1, gl_VertexID&2)-1, 0., 1. );

}

`;

​

let fsWrite = `#version 300 es

precision highp float;

precision highp int;

out vec4 fragColor;

​

void main() {

  int i = int(gl_FragCoord.x);

  fragColor = vec4( float(i)/255., 0., 0., 1. );

}

`;

​

​

let vsDraw = `#version 300 es

precision highp float;

precision highp int;

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

uniform sampler2D data;

​

void main() {

  vec4 vd = texelFetch( data, ivec2( gl_InstanceID, 0 ), 0 );

  int iy = int(vd.r * 255.0 + 0.5);

  vec2 p = vec2( gl_VertexID&1, (gl_VertexID&2)>>1 );

  p += vec2( gl_InstanceID, iy );

  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4( p*2.0, 0., 1. );

}

`;

​

let fsDraw = `#version 300 es

precision highp float;

out vec4 fragColor;

​

void main() {

  fragColor = vec4( 1. );

}

`;

​