// p5wgexで板ポリ芸。p5Noiseを移植できるかどうか調べるための前段階。 // ビット演算とか用いて書き直す。 // ノーミスでここまで書けるのすごくね...？？ // とりあえずランダムのテスト。 // blendingに問題があるようです...？？ // あーなるほど // bindFBOのあとでclear()しないといけないんだ // 了解です // clearしてからbindFBOしてしまうと多分なんか上書き...わからん。 // まあこのプログラムではclear()要らないか。 // さて、本題... // というわけで移植したんですが // どうなんだろ... // これでテラインに応用できると思う？？ // できたようです（2023-04-03） // ----------------------------------------------------------------------------------------- // // global. const ex = p5wgex; let _node; const _timer = new ex.Timer(); // ----------------------------------------------------------------------------------------- // // 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; } 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 = vec3(1.0-(vUv.y - n)/vUv.y); }else{ col *= (n - vUv.y) / n; } fragColor = vec4(col, 1.0); } `; // データ入力はこのシェーダでuSize=512ってやれば簡単にできるよ。gl_VertexID使えば必要なのはデータだけでOK. 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(640, 640, WEBGL); pixelDensity(1); const gl = this._renderer.GL; _node = new ex.RenderNode(gl); // timer. _timer.initialize("slot0"); // Painter. _node.registPainter("planeDraw", planeVert, planeFrag); _node.registFigure("plane", [{name:"aPosition", size:2, data:[-1, -1, 1, -1, -1, 1, 1, 1]}]); _node.clearColor(0, 0, 0, 1); // ランダムテーブルを用意する prepareRandomTable(_node); } function draw(){ _node.bindFBO(null); _node.use("planeDraw", "plane"); _node.setFBOtexture2D("uRandom", "rdm"); _node.setUniform("uTime", millis()/1000); _node.drawArrays("triangle_strip"); _node.unbind(); _node.flush(); } // ----------------------------------------------------------------------------------------- // // 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); let indices = new Array(64*64); for(let i=0, L=64*64*4; i

p5NoiseWaveTest