// p5wgexで板ポリ芸。p5Noiseを移植できるかどうか調べるための前段階。 // ビット演算とか用いて書き直す。 // ノーミスでここまで書けるのすごくね...？？ // とりあえずランダムのテスト。 // blendingに問題があるようです...？？ // あーなるほど // bindFBOのあとでclear()しないといけないんだ // 了解です // clearしてからbindFBOしてしまうと多分なんか上書き...わからん。 // まあこのプログラムではclear()要らないか。 // さて、本題... // というわけで移植したんですが // どうなんだろ... // これでテラインに応用できると思う？？ // できたようです（2023-04-03） // 2023-04-25 // copyPainterさんの力をお借りして // レート付けてみました // ほんとは自前でやった方がいいんだけど // これをテンプレートにしたいと思います // ちょっと再帰分割に手を出してみたいだけ // あの // まあ、webgl1だとノイズが使えなくて不便なので // p5のノイズをそのまま落とせるの強いのでね // 2023-07-27 // 1.7.0 // うごいてますね // 2023-10-03 // pfcなどいくつか更新 // ----------------------------------------------------------------------------------------- // // global. const ex = p5wgex; let _node; const _timer = new ex.Timer(); let pfc; // ----------------------------------------------------------------------------------------- // // constants. const SIZE = 64; // ----------------------------------------------------------------------------------------- // // shaders. // 単純にuvを渡すだけ const planeVert = `#version 300 es in vec2 aPosition; out vec2 vUv; void main(){ vUv = aPosition * 0.5 + 0.5; gl_Position = vec4(aPosition, 0.0, 1.0); } `; const planeFrag = `#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uRandom; uniform float uTime; out vec4 fragColor; 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; } // 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); } vec3 overLay(vec3 src, vec3 dst){ vec3 result; if(dst.r < 0.5){ result.r = 2.0*src.r*dst.r; }else{ result.r = 2.0*(src.r+dst.r-src.r*dst.r)-1.0; } if(dst.g < 0.5){ result.g = 2.0*src.g*dst.g; }else{ result.g = 2.0*(src.g+dst.g-src.g*dst.g)-1.0; } if(dst.b < 0.5){ result.b = 2.0*src.b*dst.b; }else{ result.b = 2.0*(src.b+dst.b-src.b*dst.b)-1.0; } return result; } vec3 softLight(vec3 src, vec3 dst){ vec3 result; if(src.r < 0.5){ result.r = 2.0*src.r*dst.r + dst.r*dst.r*(1.0-2.0*src.r); } else{ result.r = 2.0*dst.r*(1.0-src.r) + sqrt(dst.r)*(2.0*src.r-1.0); } if(src.g < 0.5){ result.g = 2.0*src.g*dst.g + dst.g*dst.g*(1.0-2.0*src.g); } else{ result.g = 2.0*dst.g*(1.0-src.g) + sqrt(dst.g)*(2.0*src.g-1.0); } if(src.b < 0.5){ result.b = 2.0*src.b*dst.b + dst.b*dst.b*(1.0-2.0*src.b); } else{ result.b = 2.0*dst.b*(1.0-src.b) + sqrt(dst.b)*(2.0*src.b-1.0); } return result; } void main(){ float n = noise(0.5, uTime, uTime * 0.2 + vUv.x); vec3 col = vec3(0.0, 0.5, 1.0); if(vUv.y > n){ col = softLight(col, vec3(1.0-(vUv.y - n)/vUv.y)); }else{ col *= (n - vUv.y) / n; } fragColor = vec4(col, 1.0); } `; // データ入力はこのシェーダでuSize=512ってやれば簡単にできる。 const rdmVert = `#version 300 es in vec4 aData; in float aIndex; out vec4 vData; uniform float uSize; void main(){ vec2 p = vec2(mod(aIndex, uSize), floor(aIndex / 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(windowWidth, windowHeight, WEBGL); pixelDensity(1); const gl = this._renderer.GL; _node = new ex.RenderNode(gl); // timer. _timer.initialize("slot0"); // Painter. _node.registPainter("planeDraw", planeVert, planeFrag); // 反時計回りのTRIANGLE_STRIP // 正規化デバイス座標系を思い浮かべてください _node.registFigure("plane", [{name:"aPosition", size:2, data:[-1, -1, 1, -1, -1, 1, 1, 1]}]); // ランダムテーブルを用意する prepareRandomTable(_node); pfc = new ex.PerformanceChecker(this.canvas); } function draw(){ pfc.update(); _node.bindFBO(null); _node.use("planeDraw", "plane"); _node.drawArrays("triangle_strip",{uniforms:{ 'fbo/uRandom':"rdm", uTime:_timer.getElapsed("slot0") }}); _node.unbind(); _node.flush(); } // ----------------------------------------------------------------------------------------- // // randomTable for noise function. // nodeに対して64x64x4の乱数テーブルを用意させる感じ function prepareRandomTable(node){ // 512x512の乱数テーブル node.registFBO("rdm", {w:64, h:64, color:{info:{type:"float"}}}); // 乱数入力用vbo let rdms = new Array(64*64*4); let indices = new Array(64*64); for(let i=0, L=64*64*4; i

WAVE