p5js float VTF test 2x2 - OpenProcessing

mySketch
xxxxxxxxxx
 
// VTFできましたね
// なんだ～
​
// 2x2でやろう。いろいろ勉強になるはず。
// 点描画でfbo.colorを使うとuniformがsetされないエラーになるようです
​
let fbo;
let sh;
let mainSh;
let buf0, buf1;
​
const vert =
`#version 300 es
in float aIndex;
in vec4 aData;
out vec4 vData;
void main(){
  float x = mod(aIndex, 2.0);
  float y = floor(aIndex/2.0);
  vec2 uv = (vec2(x,y)+0.5)/2.0;
  uv = 2.0*uv - 1.0;
  vData = aData;
  gl_Position = vec4(uv, 0.0, 1.0);
  gl_PointSize = 1.0;
}
`;
​
const frag =
`#version 300 es
precision highp float;
in vec4 vData;
out vec4 color;
void main(){
  color = vData;
}
`;
​
function setup() {
  createCanvas(600, 600, WEBGL);
​
  const _gl = this._renderer;
  const gl = _gl.GL;
​
  buf0 = gl.createBuffer();
​
  gl.bindBuffer(gl.ARRAY_BUFFER, buf0);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0,1,2,3
  ]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
​
  buf1 = gl.createBuffer();
​
  gl.bindBuffer(gl.ARRAY_BUFFER, buf1);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1,1,2,-2, -2,2,3,-3, -3,3,4,-4, -4,4,5,-5
  ]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
​
  sh = createShader(vert, frag);
​
  fbo = createFramebuffer({
    width:2, height:2, format:FLOAT, textureFiltering:NEAREST
  });
​
  fbo.begin();
  shader(sh);
​
  _gl._setPointUniforms(sh);
​
  gl.bindBuffer(gl.ARRAY_BUFFER, buf0);
  sh.enableAttrib(sh.attributes.aIndex, 1);
  gl.bindBuffer(gl.ARRAY_BUFFER, buf1);
  sh.enableAttrib(sh.attributes.aData, 4);
​
  gl.drawArrays(gl.POINTS, 0, 4);
​
  sh.unbindShader();
  
  fbo.end();
​
  mainSh = baseMaterialShader().modify({
    'vertexDeclarations':`
      uniform sampler2D uData;
      uniform vec2 uUv;
    `,
    'vec3 getLocalPosition':`(vec3 p){
      vec4 v = texture(uData, uUv);
      p.x += v.x; // x座標を-1
      p.y += v.z; // y座標を+2
      return p;
    }
    `
  });
}
​
function draw() {
  background(255);
  orbitControl();
​
  const uvs = [0.25, 0.25, 0.75, 0.25, 0.25, 0.75, 0.75, 0.75];
​
  for(let k=0; k<4; k++){
    shader(mainSh);
    mainSh.setUniform("uData", fbo.color);
    mainSh.setUniform("uUv", uvs.slice(k*2, (k+1)*2));
    noStroke();
    lights();
    fill(k*32,k*64,255);
    box(30);
  }
}