p5 GPU particle

// VTFできましたね

​

// bindTextures()ですね

// baseMaterialShader()の方はこれをやってるんですよね

// 必須ですね

// https://wgld.org/d/webgl/w083.html

​

// infoでグラフィック落とすのだめですね

// パフォーマンスが知りたいので自作ライブラリに頼ることにします

// というか要は別キャンバスに書いて上から重ねればいい

​

// なんてね

// renderTexture使っちゃえ！

// 手段は選ばん！

​

// 2025-01-20

// textureの理解が進んでから出直します

// 邪道は駄目でしょう。。。

​

// というわけで汚染の回避に成功しました。

// 2番スロットにグラフィックをぶち込んで、それを使う仕組みにする離れ業です。

// いぇーい

​

// 2025-01-28

// 1.11.3ですって。奥さん。ひぇ～

​

let pfc;

​

let fbo0, fbo1;

let dataBuf, indexBuf;

let updateShader;

let displayShader;

const TEX_SIZE = 512; // 262144個

​

let velocity = 0.0; // マウスが押されてるとき1.0で、離すと減衰する

​

const inputVS =

`#version 300 es

in float aIndex;

in vec4 aData;

out vec4 vData;

uniform vec2 uSize;

void main(){

  float x = mod(aIndex, uSize.x);

  float y = floor(aIndex/uSize.y);

  vec2 uv = (vec2(x,y)+0.5)/uSize;

  uv = 2.0*uv - 1.0;

  vData = aData;

  gl_Position = vec4(uv, 0.0, 1.0);

  gl_PointSize = 1.0;

}

`;

​

const inputFS =

`#version 300 es

precision highp float;

in vec4 vData;

out vec4 color;

void main(){

  color = vData;

}

`;

​

const updateVS =

`#version 300 es

in float aIndex;

out vec2 vUv;

uniform vec2 uSize;

void main(){

  // 位置を取得して送るだけ

  float x = mod(aIndex, uSize.x);

  float y = floor(aIndex/uSize.y);

  vec2 uv = (vec2(x,y)+0.5)/uSize;

  vUv = uv;

  // y座標は逆にする。お約束。

  gl_Position = vec4(uv.x*2.0-1.0, 1.0-uv.y*2.0, 0.0, 1.0);

  gl_PointSize = 1.0;

}

`;

​

const updateFS =

`#version 300 es

precision highp float;

in vec2 vUv;

out vec4 finalData;

uniform sampler2D uData;

uniform vec2 uMouse;

uniform bool uMouseIsPressed;

uniform float uVelocity;

const float SPEED = 0.05;

void main(){

  vec4 tex = texture(uData, vUv);

  vec2 pos = tex.xy;

  vec2 vel = tex.zw;

  // 詳しくはwgld参照。これすごいですよね。

  // ざっくりいうとマウス位置に向かって緩やかに進行する感じ

  // uVelocityはマウスが離れてる場合減衰する。その場合velは一定。

  vec2 v = normalize(uMouse - pos)*0.2;

  vec2 w = normalize(v + vel);

  vec4 data = vec4(pos + w * SPEED * uVelocity, w);

​

  if(!uMouseIsPressed) data.zw = vel;

  finalData = data;

}

`;

​

const displayVS =

`#version 300 es

in float aIndex;

uniform sampler2D uTex;

uniform vec2 uSize;

uniform float uPointScale;

uniform vec2 uAdjust;

void main(){

  float x = mod(aIndex, uSize.x);

  float y = floor(aIndex/uSize.y);

  vec2 uv = (vec2(x,y)+0.5)/uSize;

  vec2 p = texture(uTex, uv).xy * uAdjust;

  gl_Position = vec4(p, 0.0, 1.0);

  gl_PointSize = 0.1 + uPointScale;

}

`;

​

const displayFS =

`#version 300 es

precision highp float;

out vec4 color;

uniform vec3 uBaseColor;

void main(){

  // 透明度を下げてるのは気分です（雑）

  color = vec4(uBaseColor, 0.5);

}

`;

​

let gr;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  pixelDensity(1);

​

  const _gl = this._renderer;

  const gl = _gl.GL;

​

  const iArray = [];

  const fArray = [];

  for(let k=0; k<TEX_SIZE*TEX_SIZE; k++){

    iArray.push(k);

    const x = -1+2*(k%TEX_SIZE)/TEX_SIZE;

    const y = -1+2*floor(k/TEX_SIZE)/TEX_SIZE;

    fArray.push(x, y, 0, 0);

  }

​

  indexBuf = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, indexBuf);

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iArray), gl.STATIC_DRAW);

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

​

  dataBuf = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, dataBuf);

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(fArray), gl.STATIC_DRAW);

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

​

  const inputShader = createShader(inputVS, inputFS);

​

  fbo0 = createFramebuffer({

    width:TEX_SIZE, height:TEX_SIZE, format:FLOAT, textureFiltering:NEAREST

  });

  fbo1 = createFramebuffer({

    width:TEX_SIZE, height:TEX_SIZE, format:FLOAT, textureFiltering:NEAREST

  });

  // これでflip-flopできるはずです。

​

  // input.

  fbo0.begin();

  shader(inputShader);

​

  gl.bindBuffer(gl.ARRAY_BUFFER, indexBuf);

  inputShader.enableAttrib(inputShader.attributes.aIndex, 1);

  gl.bindBuffer(gl.ARRAY_BUFFER, dataBuf);

  inputShader.enableAttrib(inputShader.attributes.aData, 4);

​

  inputShader.setUniform("uSize",[TEX_SIZE, TEX_SIZE]);

  _gl._setPointUniforms(inputShader);

​

  gl.drawArrays(gl.POINTS, 0, TEX_SIZE*TEX_SIZE);

​

  inputShader.unbindShader();

​

  fbo0.end();

​

  updateShader = createShader(updateVS, updateFS);

  displayShader = createShader(displayVS, displayFS);

​

  // もうめんどうなのでp5wgexのPerformanceChecker使いましょう

  // いいよこれで

  pfc = new p5wgex.PerformanceChecker(this.canvas);

​

  // information用のグラフィックを生成する

  gr = createGraphics(width, height);

  gr.textAlign(CENTER, CENTER);

  gr.textStyle(ITALIC);

  gr.textSize(19);

  gr.noStroke();

  gr.fill(255);

  gr.text("GPGPU particle test", width/2, height/2);

​

  // grからテクスチャを作る

  // その際、2番スロットにテクスチャをぶち込んでおく。

  // p5.Textureで作ってglTexパクってサヨナラすればOK.あとは要らん。

  const tx = (new p5.Texture(this._renderer, gr)).glTex;

  gl.activeTexture(gl.TEXTURE0 + 2); // 2番スロットに切り替える

  gl.bindTexture(gl.TEXTURE_2D, tx); // セットする

  gl.activeTexture(gl.TEXTURE0); // 戻しておく

​

  // テクスチャを用いたダミー描画を最低1回、実行しておく

  noStroke();

  texture(gr);

  sphere(1);

  clear();

  // 実は1回でもテクスチャを使ったfill描画（ただしnoStroke）をしておくとそれ以降のfill描画はすべて

  // texture前提になる、そういうシェーダーが使われるようになるという裏ルールが存在する。それを利用して

  // ターゲットのシェーダをおびき寄せればいい。

​

  // この状態でのshaderがロゴの表示に使われるので、

  // この状態でのプログラムを取得し、スロット番号2を代入しておく。

  // 2にはあらかじめgrのテクスチャがぶち込んであるので、それがそのまま使われる。

  const pg = gl.getParameter(gl.CURRENT_PROGRAM);

  const loc = gl.getUniformLocation(pg, "uSampler");

  gl.uniform1i(loc, 2);

}

​

function draw() {

  const _gl = this._renderer;

  const gl = _gl.GL;

​

  // マウスを離すと減衰する

  if(mouseIsPressed){

    velocity = 1.0;

  }else{

    velocity *= 0.95;

  }

​

  // update.

  fbo1.begin();

  shader(updateShader);

​

  gl.bindBuffer(gl.ARRAY_BUFFER, indexBuf);

  updateShader.enableAttrib(updateShader.attributes.aIndex, 1);

  updateShader.setUniform("uData", fbo0.color);

  updateShader.setUniform("uSize",[TEX_SIZE, TEX_SIZE]);

​

  // マウスが押されてるかどうかのフラグ。タッチでも機能する。

  updateShader.setUniform("uMouseIsPressed", mouseIsPressed);

  // マウス位置を実際の位置に合うように調整する

  const mouseVector = [2*mouseX/width-1, 1-2*mouseY/height];

  const mouseCoeff = (width > height ? [width/height,1] : [1,height/width]);

  updateShader.setUniform("uMouse", [mouseVector[0]*mouseCoeff[0], mouseVector[1]*mouseCoeff[1]]);

  updateShader.setUniform("uVelocity", velocity);

​

  updateShader.bindTextures();

  gl.drawArrays(gl.POINTS, 0, TEX_SIZE*TEX_SIZE);

  updateShader.unbindShader();

​

  fbo1.end();

​

  // flip-flop.

  const tmp = fbo1;

  fbo1 = fbo0;

  fbo0 = tmp;

​

  // display.

  shader(displayShader);

​

  gl.bindBuffer(gl.ARRAY_BUFFER, indexBuf);

  displayShader.enableAttrib(displayShader.attributes.aIndex, 1);

​

  displayShader.setUniform("uTex", fbo0.color);

  displayShader.setUniform("uSize",[TEX_SIZE, TEX_SIZE]);

  // 時間経過で色を変化させる

  const hueValue = floor((frameCount%1800)/5);

  const col = color(`hsb(${hueValue}, 70%, 80%)`);

  displayShader.setUniform("uBaseColor", [

    red(col)/255, green(col)/255, blue(col)/255

  ]);

  // 位置を調整して正方形が画面に収まるようにする

  const adjustment = (width > height ? [height/width,1] : [1,width/height]);

  displayShader.setUniform("uAdjust", adjustment);

  // 点のサイズはvelocityを使ってますね。

  displayShader.setUniform("uPointScale", velocity);

​

  // これに相当する処理でfillとstrokeはやってるんですよね。bindTextures()を。

  _gl._setPointUniforms(displayShader);

  // でもpointはやってないんですよね。それで失敗するわけですね。

​

  // blend処理はupdateにも影響するので、描画時のみ有効化し使ったらオフにする

  gl.enable(gl.BLEND);

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

  background(0);

  displayShader.bindTextures();

  gl.drawArrays(gl.POINTS, 0, TEX_SIZE*TEX_SIZE);

  displayShader.unbindShader();

  gl.disable(gl.BLEND);

​

  pfc.update();

​

  resetShader();

​

  // もうすでにuSamplerには2がセットしてあるので、わざわざ設定せずともよい。

  // 3や4に別のテクスチャをぶち込んでとっかえひっかえしてもいいし、

  // 2番は完全に自由なので、2番でとっかえひっかえしまくっても何やってもいい。自由。自由。自由だ―ーーーー！！！！！

  push();

  camera(0,0,1,0,0,0,0,1,0);

  ortho(-1,1,-1,1,0,1);

  translate(0,0,1);

  //texture(gr);

  // ブレンド忘れてました。てへ！

  gl.enable(gl.BLEND);

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

  plane(2);

  gl.disable(gl.BLEND);

  pop();

}