// 2023-03-17 // とりあえずポイントスプライトのサンプル持ってきました～ // webgl2記法で差し替えました（すみませんね） // gl_VertexID不要だからなくそうかな...attributeが重複しちゃうの地味にめんどくさい // 一旦弾幕の形で書き直します // p5のノイズを移植しないと厳しいわね // そうはいっても // もう既にやってるけど... // IDを持たせないと位置が計算できない // とはいえ // vを使う場合もあるか // 2023-03-18 // 移植しました // uniformのエラー懐かしいですね // シェーダ内でダミーでもいいから一度は登場させておかないと // ロケーションがわからずエラーになるんですよ // 注意してください // テストに // ノイズで色変えてみる // とりあえずこれで // ひとまずアルファブレンドを用意しました // 次にテクスチャを用意します // uTimeを使ってみる... // 出力時にalphaのところを0に近づけることでアルファブレンドから加算合成への // グラデーションを作ることができるんですよね // それをやりたいな～と思ったりして // frameRate出してください // スマホだと30くらいでした // 時間ベースなのでカクツキは気にならないわね // 作りたいのはバブルなので別に作りますが... // どうするかな // 枝を伸ばす？これ改造してもいいけれど。 // とりあえず今のままだとvが仕事雑なのでそこをいじらないと駄目なのと // サイズからシリアル出すのとか雑なので改良が必要ですね // pixelDensity(2)しました // 2でもスマホで充分速いですね // うれしいねぇ // vをシリアル用に使うと表現の自由度が減るのでノイズを使いましょう // 負荷にならないこともわかったのでね // 軌跡はあれ、あの、boidsのときやったのを応用するだけでいいと思う。追従処理。だから // それできればマルチプルブラーは要らないし、そうなると個別に色を変えられて自由度が増す。ですね。 // うん // p5のnoiseじゃないですね。明らかにね。ね。これ自作のSimplexだわ。 // 固定ランダムならこれでいいんだけどね。 // p5Noise成功したので書き換えますか？ // どうしますか...？同じノイズの方がいいと思いますけど。 // p5Noiseは周期があるんですよね（サンプルが有限なので当然）。ただあんま問題では無いので... // p5Noiseは第一引数にアドバンテージがある分、若干癖があるので、 // あくまでもp5.jsのnoise()と同じ挙動をする関数、という位置づけで運用した方がよいです。 // たとえば第1引数で回す代わりに第3引数で回したりするとおかしな挙動になります。 // 第一引数で(x,0,0)運用の場合、周期は4096です。4096で元に戻ります。 // コピペしたけどまあ同じ感じにはなったわね。負荷は知らないけど。こっちの方が重いのかとか。未検証。 // ばらつきは角度の方倍率上げたら安定した // まあ、わからんね。工夫すれば等方的になるのだろうか...？ // ----------------------------------------------------------------------------------------- // // global. const ex = p5wgex; let _node; const _timer = new ex.Timer(); // ----------------------------------------------------------------------------------------- // // constants. const SIZE = 32; // ----------------------------------------------------------------------------------------- // // shaders. // データステージ。ここでは32x32個のvec4を用意された32x32のフレームバッファに放り込みます。 const dataVert = `#version 300 es in vec4 aData; out vec4 vData; uniform float uSize; void main(){ float index = float(gl_VertexID); // 使えるようです。やったね。 vec2 p = vec2(mod(index, uSize), floor(index / uSize)) + 0.5; p /= uSize; p = (p - 0.5) * 2.0; p.y = -p.y; gl_Position = vec4(p, 0.0, 1.0); vData = aData; gl_PointSize = 1.0; // おかしいな。またこいつか。何で？？ } `; const dataFrag = `#version 300 es precision highp float; in vec4 vData; out vec4 pv; // position/velocityなのでpvで。 void main(){ pv = vData; } `; // updateステージ。 // 板ポリ芸です。ですが、pixelDensityの問題があるので、こっちであれを渡す...ことはして、いませんね。 // 直しました。というわけでいつもの板ポリ芸です。pavelさん万歳。 const updateVert = `#version 300 es in vec2 aPosition; out vec2 vUv; void main(){ vUv = aPosition * 0.5 + 0.5; vUv.y = 1.0 - vUv.y; gl_Position = vec4(aPosition, 0.0, 1.0); } `; // 弾幕で書いてみます（できるの？） // IDはvUvから無理やり作ることは可能だと思う（サイズ変数が要るけど） // もしくはvUvを直接使ってしまうのもあり // いずれにせよp5ノイズを使わないとどうしようもないわね const updateFrag = `#version 300 es precision highp float; in vec2 vUv; // フェッチ用 uniform sampler2D uTex; // readのデータ uniform sampler2D uRandom; // 乱数テーブル？ uniform float uTime; // 経過秒数 out vec4 pv; // 結果 float getPerlin(int n){ n = n & 4095; float i = float(n); float x = mod(i, 64.0) + 0.5; float y = floor(i / 64.0) + 0.5; return texture(uRandom, vec2(x, y) / 64.0).r; } float scaled_cosine(float x){ return 0.5 * (1.0 - cos(x * 3.14159)); } float noise(float x, float y, float z){ x = abs(x); y = abs(y); z = abs(z); int xi = int(floor(x)); int yi = int(floor(y)); int zi = int(floor(z)); float xf = x - floor(x); float yf = y - floor(y); float zf = z - floor(z); float rxf; float ryf; float r = 0.0; float ampl = 0.5; float n1 = 0.0; float n2 = 0.0; float n3 = 0.0; for(int octave = 0; octave < 4; octave++){ int of = xi + (yi << 4) + (zi << 8); rxf = scaled_cosine(xf); ryf = scaled_cosine(yf); n1 = getPerlin(of); n1 += rxf * (getPerlin(of + 1) - n1); n2 = getPerlin(of + 16); n2 += rxf * (getPerlin(of + 16 + 1) - n2); n1 += ryf * (n2 - n1); of += 256; n2 = getPerlin(of); n2 += rxf * (getPerlin(of + 1) - n2); n3 = getPerlin(of + 16); n3 += rxf * (getPerlin(of + 16 + 1) - n3); n2 += ryf * (n3 - n2); n1 += scaled_cosine(zf) * (n2 - n1); r += n1 * ampl; ampl *= 0.5; xi <<= 1; xf *= 2.0; yi <<= 1; yf *= 2.0; zi <<= 1; zf *= 2.0; if (xf >= 1.0) { xi++; xf--; } if (yf >= 1.0) { yi++; yf--; } if (zf >= 1.0) { zi++; zf--; } } return r; } void main(){ vec4 data = texture(uTex, vUv); vec2 p = data.xy; // 位置 vec2 v = data.zw; // 速度 vec2 id = vUv * 32.0; // idはサイズを掛ける...サイズでなくてもいいんだろうけどね。 // シリアルはこれを使ってノイズで出した方が、速度でいろいろやりたい場合には便利だと思う（ひゅんひゅんとか） float r = fract(uTime*0.2 + noise(id.x, id.y, 0.0)*4.0)*1.5; // 1.5はルート2よりちょっと大きいという意味合い float t = noise(id.x, id.y, 1.0)* 8.0 * 6.28318; vec2 q = vec2(r*cos(t), r*sin(t)); pv = vec4(q, v); } `; // 今回はgl_VertexIDは無しで。他にもattribute使う場合は有用だけど今回は要らないかな。 // data.zwに速度が入ってるからそれ使って傾いた長方形作るとか // テクスチャで作った長方形を回転させれば弾幕になるわね // もしくは円で... const colorVert = `#version 300 es in float aIndex; // aIndexでいいや uniform float uSize; uniform float uPointSize; uniform sampler2D uTex; out float vIndex; void main(){ vIndex = aIndex; vec2 p = vec2(mod(aIndex, uSize), floor(aIndex / uSize)) + 0.5; p /= uSize; vec4 data = texture(uTex, p); gl_Position = vec4(data.xy, 0.0, 1.0); gl_PointSize = uPointSize; } `; // こんなもんでいいか。 const colorFrag = `#version 300 es precision highp float; in float vIndex; out vec4 fragColor; // hsb2rgb. vec3 hsb2rgb(float h, float s, float b){ vec3 c = vec3(h, s, b); vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); rgb = rgb * rgb * (3.0 - 2.0 * rgb); return c.z * mix(vec3(1.0), rgb, c.y); } void main(){ vec2 p = (gl_PointCoord.xy - 0.5) * 2.0; vec3 col = hsb2rgb(0.07, 1.0, 1.0); float alpha = pow(max(0.0, 1.0-length(p)), 2.0); //col *= pow(1.0-length(p), 2.0); fragColor = vec4(col*alpha, alpha*0.25); } ` // データ入力はこのシェーダでuSize=512ってやれば簡単にできるよ。gl_VertexID使えば必要なのはデータだけでOK. const rdmVert = `#version 300 es in vec4 aData; out vec4 vData; uniform float uSize; void main(){ float index = float(gl_VertexID); // 使えるようです。やったね。 vec2 p = vec2(mod(index, uSize), floor(index / uSize)) + 0.5; p /= uSize; p = (p - 0.5) * 2.0; p.y = -p.y; gl_Position = vec4(p, 0.0, 1.0); vData = aData; gl_PointSize = 1.0; // おかしいな。またこいつか。何で？？ } `; const rdmFrag = `#version 300 es precision highp float; in vec4 vData; out vec4 random4; // 乱数の4つ組 void main(){ random4 = vData; } `; // ----------------------------------------------------------------------------------------- // // main code. function setup(){ createCanvas(640, 640, WEBGL); pixelDensity(2); const gl = this._renderer.GL; _node = new ex.RenderNode(gl); // timer. _timer.initialize("slot0"); // Painter. _node.registPainter("data", dataVert, dataFrag); _node.registPainter("update", updateVert, updateFrag); _node.registPainter("color", colorVert, colorFrag); // Figure. let indexArray = []; let dataArray = []; for(let i = 0; i < SIZE*SIZE; i++){ const x = (Math.random()<0.5 ? 1 : -1) * 0.999 * Math.random(); const y = (Math.random()<0.5 ? 1 : -1) * 0.999 * Math.random(); const _speed = 0.002 + 0.01 * Math.random(); const _direction = Math.PI * 2.0 * Math.random(); dataArray.push(x, y, _speed * Math.cos(_direction), _speed * Math.sin(_direction)); indexArray.push(i); } _node.registFigure("data", [{name:"aData", size:4, data:dataArray}]); _node.registFigure("board", [{name:"aPosition", size:2, data:[-1, -1, 1, -1, -1, 1, 1, 1]}]); _node.registFigure("indices", [{name:"aIndex", size:1, data: indexArray}]); // aIndexでいいです //_node.registDoubleFBO("sprites", {w:SIZE, h:SIZE, textureType:"float"}); _node.registDoubleFBO("sprites", {w:SIZE, h:SIZE, color:{info:{type:"float"}}}); _node.clearColor(0, 0, 0, 1); // データ入力 _node.bindFBO("sprites"); _node.use("data", "data"); _node.setUniform("uSize", SIZE); _node.drawArrays("points"); _node.swapFBO("sprites"); _node.unbind(); // p5Noise用のランダムテーブルを用意する prepareRandomTable(_node); // info. フレームレート表示用 _node.registTexture("info", {src:(function(){ const gr = createGraphics(width, height); gr.fill(255); gr.textSize(16); gr.textAlign(LEFT, TOP); return gr; })()}); } // 同じものをコピーしたいわけじゃないんです。#version 300 esを試したいだけなんです。だからコピペして終わりじゃないんです。 // たとえて言うなら模写をコンビニのコピーで済ますようなもので、無意味です。 function draw(){ // 更新処理 _node.bindFBO("sprites"); _node.use("update", "board"); _node.setFBOtexture2D("uTex", "sprites"); _node.setFBOtexture2D("uRandom", "rdm"); _node.setUniform("uTime", _timer.getDelta("slot0")); _node.drawArrays("triangle_strip"); _node.swapFBO("sprites"); _node.unbind(); // ここでフレームレート用意 updateInfo(); showInfo(); // ブレンド処理はrgbにシェーダ内でalphaを掛けるやつで _node.enable("blend"); _node.blendFunc("one", "one_minus_src_alpha"); // 描画処理 _node.bindFBO(null); _node.use("color", "indices"); _node.setFBOtexture2D("uTex", "sprites"); _node.setUniform("uSize", SIZE); _node.setUniform("uPointSize", 32.0 * pixelDensity()); _node.drawArrays("points"); _node.unbind(); _node.flush(); _node.disable("blend"); } // ----------------------------------------------------------------------------------------- // // randomTable for noise function. // nodeに対して512x512x4の乱数テーブルを用意させる感じ function prepareRandomTable(node){ // 512x512の乱数テーブル node.registFBO("rdm", {w:64, h:64, color:{info:{type:"float"}}}); // 乱数入力用vbo let rdms = new Array(64*64*4); for(let i=0, L=64*64*4; i

particle blending test