// 距離関数にしよう。 // bg画像捨てる。GLSLで図形も両方描く。 // なのでfigure関連を使い回す。 // 距離関数にしてもスマホで動かない。もういいや。 // --------------------------------------------------------------- // // color constants. const _ColorConstants = // 色 "const vec3 black = vec3(0.2);" + "const vec3 red = vec3(0.95, 0.3, 0.35);" + "const vec3 orange = vec3(0.98, 0.49, 0.13);" + "const vec3 yellow = vec3(0.95, 0.98, 0.2);" + "const vec3 green = vec3(0.3, 0.9, 0.4);" + "const vec3 lightgreen = vec3(0.7, 0.9, 0.1);" + "const vec3 purple = vec3(0.6, 0.3, 0.98);" + "const vec3 blue = vec3(0.2, 0.25, 0.98);" + "const vec3 skyblue = vec3(0.1, 0.65, 0.9);" + "const vec3 white = vec3(1.0);" + "const vec3 aquamarine = vec3(0.47, 0.98, 0.78);" + "const vec3 turquoise = vec3(0.25, 0.88, 0.81);" + "const vec3 coral = vec3(1.0, 0.5, 0.31);" + "const vec3 limegreen = vec3(0.19, 0.87, 0.19);" + "const vec3 khaki = vec3(0.94, 0.90, 0.55);" + "const vec3 navy = vec3(0.0, 0.0, 0.5);" + "const vec3 silver = vec3(0.5);" + "const vec3 gold = vec3(0.85, 0.67, 0.14);" + "const vec3 bronze = vec3(0.8, 0.4, 0.3);"; // --------------------------------------------------------------- // // simplex noise. const _SimplexNoise = // 各種定数 "const vec2 r_vec_20 = vec2(127.1, 311.7);" + "const vec2 r_vec_21 = vec2(269.5, 183.3);" + "const vec2 u_10 = vec2(1.0, 0.0);" + "const vec2 u_01 = vec2(0.0, 1.0);" + "const vec2 u_11 = vec2(1.0, 1.0);" + "const vec3 r_vec_30 = vec3(127.1, 311.7, 251.9);" + "const vec3 r_vec_31 = vec3(269.5, 183.3, 314.3);" + "const vec3 r_vec_32 = vec3(419.2, 371.9, 218.4);" + "const vec3 u_100 = vec3(1.0, 0.0, 0.0);" + "const vec3 u_010 = vec3(0.0, 1.0, 0.0);" + "const vec3 u_001 = vec3(0.0, 0.0, 1.0);" + "const vec3 u_110 = vec3(1.0, 1.0, 0.0);" + "const vec3 u_101 = vec3(1.0, 0.0, 1.0);" + "const vec3 u_011 = vec3(0.0, 1.0, 1.0);" + "const vec3 u_111 = vec3(1.0, 1.0, 1.0);" + "const float r_coeff = 43758.5453123;" + // 2Dランダムベクトル(-1.0～1.0) "vec2 random2(vec2 st){" + " vec2 v;" + " v.x = sin(dot(st, r_vec_20)) * r_coeff;" + " v.y = sin(dot(st, r_vec_21)) * r_coeff;" + " return -1.0 + 2.0 * fract(v);" + "}" + // 3Dランダムベクトル(-1.0～1.0) "vec3 random3(vec3 st){" + " vec3 v;" + " v.x = sin(dot(st, r_vec_30)) * r_coeff;" + " v.y = sin(dot(st, r_vec_31)) * r_coeff;" + " v.z = sin(dot(st, r_vec_32)) * r_coeff;" + " return -1.0 + 2.0 * fract(v);" + // -1.0～1.0に正規化 "}" + // シンプレックスノイズ(-1.0～1.0) "float snoise3(vec3 st){" + " vec3 p = st + (st.x + st.y + st.z) / 3.0;" + " vec3 f = fract(p);" + " vec3 i = floor(p);" + " vec3 g0, g1, g2, g3;" + " vec4 wt;" + " g0 = i;" + " g3 = i + u_111;" + " if(f.x >= f.y && f.x >= f.z){" + " g1 = i + u_100;" + " g2 = i + (f.y >= f.z ? u_110 : u_101);" + " wt = (f.y >= f.z ? vec4(1.0 - f.x, f.x - f.y, f.y - f.z, f.z) : vec4(1.0 - f.x, f.x - f.z, f.z - f.y, f.y));" + " }else if(f.y >= f.x && f.y >= f.z){" + " g1 = i + u_010;" + " g2 = i + (f.x >= f.z ? u_110 : u_011);" + " wt = (f.x >= f.z ? vec4(1.0 - f.y, f.y - f.x, f.x - f.z, f.z) : vec4(1.0 - f.y, f.y - f.z, f.z - f.x, f.x));" + " }else{" + " g1 = i + u_001;" + " g2 = i + (f.x >= f.y ? u_101 : u_011);" + " wt = (f.x >= f.y ? vec4(1.0 - f.z, f.z - f.x, f.x - f.y, f.y) : vec4(1.0 - f.z, f.z - f.y, f.y - f.x, f.x));" + " }" + " float value = 0.0;" + " wt = wt * wt * wt * (wt * (wt * 6.0 - 15.0) + 10.0);" + " value += wt.x * dot(p - g0, random3(g0));" + " value += wt.y * dot(p - g1, random3(g1));" + " value += wt.z * dot(p - g2, random3(g2));" + " value += wt.w * dot(p - g3, random3(g3));" + " return value;" + "}"; // --------------------------------------------------------------- // // distFunction2D. // caution:PI,TAUを使うので用意しておいてください。 const distFunction2D = // ベクトル取得関数 "vec2 fromAngle(float t){ return vec2(cos(t), sin(t)); }" + // 正二面体群 // 基本領域の中心が0にくるように調整してある "vec2 dihedral_center(vec2 p, float n){" + " float k = PI * 0.5 / n;" + " vec2 e1 = vec2(sin(k), cos(k));" + " vec2 e2 = vec2(sin(k), -cos(k));" + " for(float i = 0.0; i < 99.0; i += 1.0){" + " if(i == n){ break; }" + " p -= 2.0 * min(dot(p, e1), 0.0) * e1;" + " p -= 2.0 * min(dot(p, e2), 0.0) * e2;" + " }" + " return p;" + "}" + // 基本領域のはじっこに0がくるやつ（0～pi/n） "vec2 dihedral_bound(vec2 p, float n){" + " float k = PI / n;" + " vec2 e1 = vec2(0.0, 1.0);" + " vec2 e2 = vec2(sin(k), -cos(k));" + " for(float i = 0.0; i < 99.0; i += 1.0){" + " if(i == n){ break; }" + " p -= 2.0 * min(dot(p, e1), 0.0) * e1;" + " p -= 2.0 * min(dot(p, e2), 0.0) * e2;" + " }" + " return p;" + "}" + // roundRect. // 基本はc中心qが横幅縦幅でrだけ膨らませる感じ // できました！むずいねぇ・・いわゆるあれ、roundRectですね。 "float roundRect(vec2 p, vec2 c, vec2 q, float r, float t){" + " p = (p - c) * mat2(cos(t), -sin(t), sin(t), cos(t));" + " p = abs(p);" + " float d = max(p.x - q.x * 0.5, p.y - q.y * 0.5) - r;" + " float check = min(p.x - q.x * 0.5, p.y - q.y * 0.5);" + " if(check < 0.0){ return d; }" + " return length(p - q * 0.5) - r;" + "}" + // 月型 "float moon(vec2 p, vec2 c, float r, float t){" + " p = (p - c) * mat2(cos(t), -sin(t), sin(t), cos(t));" + " return max(length(p) - r, r * 0.7 - length(p - vec2(r * 0.55, 0.0)));" + "}" + // 星型 "float star(vec2 p, vec2 c, float r, float t){" + " p -= c;" + " p *= mat2(cos(t), -sin(t), sin(t), cos(t));" + " p = dihedral_bound(p, 5.0);" + " vec2 e = fromAngle(0.4 * PI);" + " return dot(p - vec2(r, 0.0), e);" + "}" + // arc. // 中心cでnは半円弧の半分にしたやつの先っちょの単位ベクトル // raが大きい半径でrbがふくらまし。 // 形としてはx軸正方向から二つの方向に回っていく感じね // nは中心から先っちょへの単位ベクトルね。 "float arc(vec2 p, vec2 c, vec2 n, float ra, float rb, float t){" + " p -= c;" + " p *= mat2(cos(t), -sin(t), sin(t), cos(t));" + " p.y = abs(p.y);" + " if(p.x * n.y - p.y * n.x > 0.0){ return abs(length(p) - ra) - rb; }" + " return length(p - n * ra) - rb;" + "}"; // caution:uTime(経過秒数)を使うので準備しておいてください。 const commonDistFunction2D = // 距離関数 "float dist(vec2 p){" + " float d = 99999.0;" + " d = min(d, roundRect(p, vec2(-0.6, 0.0), vec2(0.3, 0.3), 0.0, PI * 0.25));" + " d = min(d, roundRect(p, vec2(0.6, 0.0), vec2(0.3, 0.3), 0.0, PI * 0.25));" + " d = min(d, roundRect(p, vec2(0.0, 0.6), vec2(0.3, 0.3), 0.0, PI * 0.25));" + " d = min(d, roundRect(p, vec2(0.4, -0.6), vec2(0.3, 0.3), 0.0, uTime * 0.3 + PI * 0.25));" + " d = min(d, roundRect(p, vec2(-0.4, -0.6), vec2(0.3, 0.3), 0.0, -uTime * 0.3 + PI * 0.25));" + " d = min(d, moon(p, vec2(-0.7, 0.5), 0.25, PI * 0.5 + uTime * TAU / 6.0));" + " d = min(d, moon(p, vec2(0.7, 0.5), 0.25, PI * 0.5 - uTime * TAU / 6.0));" + " d = min(d, arc(p, vec2(0.0, 0.0), normalize(vec2(-0.4, 0.5)), 0.2, 0.02, uTime * TAU / 8.0));" + " return d;" + "}"; // --------------------------------------------------------------- // // global. let _gl, gl; let _node; // RenderSystemSetにアクセスするためのglobal. let accell = 0; // 加速度 let properFrameCount = 0; // 色を変えるためのカウント変数 let bg, bgTex, base; // 背景用（使うにはテクスチャオブジェクトが必要） const TEX_SIZE = 512; // 512x512個のパーティクルを用いる let fb, fb2, flip; // ダブルバッファリング // --------------------------------------------------------------- // // shader. // dataShader. 最初の位置と速度を設定するところ。 const dataVert= "precision mediump float;" + "attribute vec3 aPosition;" + // unique attribute. "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; const dataFrag= "precision mediump float;" + "uniform float uTexSize;" + "uniform vec3 uSeeds;" + _SimplexNoise + "void main(){" + " vec2 p = gl_FragCoord.xy / uTexSize;" + // 0.0～1.0に正規化 // 初期位置と初期速度を設定 " vec2 pos = (p - 0.5) * 2.0;" + // 位置は-1～1,-1～1で。 " float nx = snoise3(vec3(uSeeds.x, p.x, p.y));" + " float ny = snoise3(vec3(uSeeds.y, p.x, p.y));" + " nx = fract((nx + 1.0) * 8.0) * 2.0 - 1.0;" + " ny = fract((ny + 1.0) * 8.0) * 2.0 - 1.0;" + " gl_FragColor = vec4(nx, ny + 2.0, 0.01 * snoise3(vec3(p.x, p.y, uSeeds.z)), 0.0);" + // 初期速度は0で。 "}"; // bgShader. 背景を描画する。 const bgVert= "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; const bgFrag= "precision mediump float;" + "uniform vec2 uResolution;" + "uniform float uTime;" + // 定数 "const float TAU = 6.28318;" + "const float PI = 3.14159;" + _ColorConstants + distFunction2D + commonDistFunction2D + "void main(){" + " vec2 p = gl_FragCoord.xy / uResolution.xy;" + " p = p * 2.0 - 1.0;" + " vec3 col = vec3(0.0);" + //" if(dist(p) < 0.0){ col = vec3(1.0); }" + " float d = dist(p);" + // 負の方で値を抑えたいけどどうしようね " if(d < 0.0){ d *= 0.1; }" + " col = vec3(exp(-d*32.0)) * turquoise;" + " gl_FragColor = vec4(col, 1.0);" + "}"; // moveShader. 位置と速度の更新をオフスクリーンレンダリングで更新する。 const moveVert = "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; const moveFrag = "precision highp float;" + "uniform sampler2D uTex;" + "uniform float uTexSize;" + "uniform float uTime;" + "uniform float uSeed;" + "const vec2 deltaX = vec2(0.000001, 0.0);" + "const vec2 deltaY = vec2(0.0, 0.000001);" + _SimplexNoise + // 定数 "const float TAU = 6.28318;" + "const float PI = 3.14159;" + distFunction2D + commonDistFunction2D + // 反射処理 "bool applyReflect(in vec2 p, inout vec2 v){" + " if(dist(p + v) < 0.0){" + " vec2 n = normalize(vec2(dist(p + deltaX) - dist(p), dist(p + deltaY) - dist(p)));" + " v = reflect(v, n) * 0.9;" + " return true;" + " }" + " return false;" + "}" + // メインコード "void main(){" + " vec2 p = gl_FragCoord.xy / uTexSize;" + // ピクセル位置そのまま " float delay = 1.0 - p.y;" + // 0.0～2.0のどれか // 上の方ほど早く落ち始める感じで " vec4 t = texture2D(uTex, p);" + " vec2 pos = t.xy;" + " vec2 velocity = t.zw;" + // 更新処理 " velocity.y -= 0.002;" + " if(length(velocity) > 0.03){ velocity = normalize(velocity) * 0.03; }" + // 反射 " applyReflect(pos, velocity);" + // 位置更新 " pos += velocity;" + " if(pos.x < -1.0){ pos.x += 2.0; }" + " if(pos.x > 1.0){ pos.x -= 2.0; }" + " if(pos.y < -1.0){" + " pos.x = fract(2.0 + 2.0 * snoise3(vec3(p.x, p.y, uTime + uSeed))) * 2.0 - 1.0;" + " pos.y += 2.0;" + " velocity.x = 0.01 * snoise3(vec3(uTime - uSeed, p.x, p.y));" + " velocity.y = 0.0; " + " }" + // ディレイで上の方から落ちるように修正 " if(delay > uTime * 0.5){ gl_FragColor = t; }" + " else{gl_FragColor = vec4(pos, velocity); }" + "}"; // pointShader. 位置情報に基づいて点の描画を行う。 const pointVert = "precision mediump float;" + "attribute float aIndex;" + "uniform sampler2D uTex;" + "uniform vec2 uResolution;" + // 解像度 "uniform float uTexSize;" + // テクスチャフェッチ用 "uniform float uPointScale;" + "varying vec2 vIndex;" + "void main() {" + // uTexSize * uTexSize個の点を配置 // 0.5を足しているのはきちんとマス目にアクセスするためです " float x = (mod(aIndex, uTexSize) + 0.5) / uTexSize;" + " float y = (floor(aIndex / uTexSize) + 0.5) / uTexSize;" + " vec4 t = texture2D(uTex, vec2(x, y));" + " vec2 p = t.xy;" + " vIndex = vec2(x, y);" + " p *= vec2(min(uResolution.x, uResolution.y)) / uResolution;" + " gl_Position = vec4(p, 0.0, 1.0);" + " gl_PointSize = 0.1;" + // 動いてるときだけ大きく "}"; const pointFrag = "precision mediump float;" + "varying vec2 vIndex;" + "uniform float uTime;" + "vec3 getRGB(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(){" + " gl_FragColor = vec4(getRGB(0.5+0.1*vIndex.x * vIndex.y, (vIndex.x + vIndex.y) * 0.5, 1.0), 1.0);" + "}"; // --------------------------------------------------------------- // // setup. function setup(){ // _glはp5のwebgl, glはwebglのレンダリングコンテキスト。 _gl = createCanvas(640, 640, WEBGL); pixelDensity(1); gl = _gl.GL; // 浮動小数点数テクスチャが利用可能かどうかチェック（基本的に可能） textureFloatCheck(); // 点描画用のインデックスを格納する配列 let indices = []; // 0～TEX_SIZE*TEX_SIZE-1のindexを放り込む for(let i = 0; i < TEX_SIZE * TEX_SIZE; i++){ indices.push(i); } // 板ポリの頂点用。これは位置設定、背景、位置更新のすべてで使う const positions = [ -1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0 ]; // nodeを用意 _node = new RenderNode(); // dataShader:点の位置と速度の初期設定用 const dataShader = createShader(dataVert, dataFrag); _node.registRenderSystem('data', dataShader); _node.use('data', 'plane'); _node.registAttribute('aPosition', positions, 3); // bgShader:背景用 const bgShader = createShader(bgVert, bgFrag); _node.registRenderSystem('bg', bgShader); _node.use('bg', 'plane'); _node.registAttribute('aPosition', positions, 3); // moveShader:点の位置と速度の更新用 const moveShader = createShader(moveVert, moveFrag); _node.registRenderSystem('move', moveShader); _node.use('move', 'plane'); _node.registAttribute('aPosition', positions, 3); _node.registUniformLocation('uTex'); // pointShader:点描画用 const pointShader = createShader(pointVert, pointFrag); _node.registRenderSystem('point', pointShader); _node.use('point', 'points'); _node.registAttribute('aIndex', indices, 1); _node.registUniformLocation('uTex'); // フレームバッファを用意 fb = create_framebuffer(TEX_SIZE, TEX_SIZE, gl.FLOAT); fb2 = create_framebuffer(TEX_SIZE, TEX_SIZE, gl.FLOAT); flip = fb; // 位置と速度の初期設定 defaultRendering(); noStroke(); } // --------------------------------------------------------------- // // main loop. function draw(){ // ここで位置と速度を更新 moveRendering(); // 背景を描画 _node.use('bg', 'plane'); _node.setAttribute(); _node.setUniform("uResolution", [width, height]) .setUniform("uTime", properFrameCount / 60); // ドローコール gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); _node.clear(); // おわったらclear // 点描画 _node.use('point', 'points'); _node.setAttribute(); _node.setTexture('uTex', fb2.t, 0); _node.setUniform("uTexSize", TEX_SIZE) .setUniform("uPointScale", accell) .setUniform("uResolution", [width, height]); // ドローコール gl.drawArrays(gl.POINTS, 0, TEX_SIZE * TEX_SIZE); gl.flush(); // すべての描画が終わったら実行 _node.clear(); // clearも忘れずに // swap. flip = fb; fb = fb2; fb2 = flip; // step. properFrameCount++; } // --------------------------------------------------------------- // // texture float usability check. // texture floatが使えるかどうかチェック function textureFloatCheck(){ const ext = gl.getExtension('OES_texture_float') || gl.getExtension('OES_texture_half_float'); if(ext == null){ alert('float texture not supported'); return; } } // --------------------------------------------------------------- // // offscreen rendering. // オフスクリーンレンダリングで初期の位置と速度を設定 function defaultRendering(){ // フレームバッファをbind gl.bindFramebuffer(gl.FRAMEBUFFER, fb.f); // ビューポートをサイズに合わせて設定 gl.viewport(0, 0, TEX_SIZE, TEX_SIZE); clear(); // このclearはオフスクリーンに対して適用される _node.use('data', 'plane'); _node.setAttribute(); _node.setUniform('uTexSize', TEX_SIZE) .setUniform('uSeeds', [Math.random(), Math.random(), Math.random()]); // ドローコール gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); _node.clear(); // 終わったらclear gl.viewport(0, 0, width, height); // viewportを戻す gl.bindFramebuffer(gl.FRAMEBUFFER, null); // bindしたものは常に解除 } // オフスクリーンレンダリングで位置と速度を更新 function moveRendering(){ // fbの内容をfb2が受け取って更新した結果を焼き付ける // draw内で最後にfbとfb2をswapさせることで逐次更新を実現する gl.bindFramebuffer(gl.FRAMEBUFFER, fb2.f); gl.viewport(0, 0, TEX_SIZE, TEX_SIZE); clear(); _node.use('move', 'plane'); _node.setAttribute(); _node.setTexture('uTex', fb.t, 0); _node.setUniform("uTexSize", TEX_SIZE) .setUniform("uTime", properFrameCount / 60) .setUniform("uSeed", Math.random()); // ドローコール gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); _node.clear(); // 終わったらclear. gl.viewport(0, 0, width, height); // viewportを戻す gl.bindFramebuffer(gl.FRAMEBUFFER, null); // bindしたものは常に解除 } // --------------------------------------------------------------- // // framebuffer. // framebufferを生成するための関数 // フレームバッファをオブジェクトとして生成する関数 function create_framebuffer(w, h, format){ // フォーマットチェック let textureFormat = null; if(!format){ textureFormat = gl.UNSIGNED_BYTE; }else{ textureFormat = format; } // フレームバッファの生成 let frameBuffer = gl.createFramebuffer(); // フレームバッファをWebGLにバインド gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer); // 深度バッファ用レンダーバッファの生成とバインド let depthRenderBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderBuffer); // レンダーバッファを深度バッファとして設定 gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h); // フレームバッファにレンダーバッファを関連付ける gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRenderBuffer); // フレームバッファ用テクスチャの生成 let fTexture = gl.createTexture(); // フレームバッファ用のテクスチャをバインド gl.bindTexture(gl.TEXTURE_2D, fTexture); // フレームバッファ用のテクスチャにカラー用のメモリ領域を確保 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, textureFormat, null); // テクスチャパラメータ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // フレームバッファにテクスチャを関連付ける gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fTexture, 0); // 各種オブジェクトのバインドを解除 gl.bindTexture(gl.TEXTURE_2D, null); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // オブジェクトを返して終了 return {f : frameBuffer, d : depthRenderBuffer, t : fTexture}; } // --------------------------------------------------------------- // // for attributes. // attributeの登録とvboの取得、及び描画時のbindを行う関数。 function create_vbo(data){ // バッファオブジェクトの生成 let vbo = gl.createBuffer(); // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, vbo); // バッファにデータをセット gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); // バッファのバインドを無効化 gl.bindBuffer(gl.ARRAY_BUFFER, null); // 生成したVBOを返して終了 return vbo; } function set_attribute(attributes){ // 引数として受け取った配列を処理する for(let name of Object.keys(attributes)){ const attr = attributes[name]; // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, attr.vbo); // attributeLocationを有効にする gl.enableVertexAttribArray(attr.location); // attributeLocationを通知し登録する gl.vertexAttribPointer(attr.location, attr.stride, gl.FLOAT, false, 0, 0); } } // --------------------------------------------------------------- // // utility. function intersect(x1, y1, x2, y2, x3, y3, x4, y4){ // 線分{x1,y1}---{x2,y2}と{x3,y3}---{x4,y4}が交わるとき // 交点x,yとフラグz:1を返す // 交わらないときはx:0,y:0,z:-1を返す let u1 = x2 - x1; let v1 = y2 - y1; let u2 = x4 - x3; let v2 = y4 - y3; let crit0 = u1 * (y3 - y1) - v1 * (x3 - x1); let crit1 = u1 * (y4 - y1) - v1 * (x4 - x1); let crit2 = u2 * (y1 - y3) - v2 * (x1 - x3); let crit3 = u2 * (y2 - y3) - v2 * (x2 - x3); if(crit0 * crit1 < 0 && crit2 * crit3 < 0){ const t = ((x3-x1)*v2-(y3-y1)*u2) / (u1*v2-u2*v1); return {x:x1+t*u1, y:y1+t*v1, z:1}; } return {x:0, y:0, z:-1}; } // HSBデータを受け取ってRGBAを取得する関数 // デフォではHSBを0～100で指定すると長さ4の配列でRGBが0～1でAが1の // ものを返す仕様となっている function HSBA_to_RGBA(h,s,b,a = 1, max_h = 100, max_s = 100, max_b = 100){ let hue = h * 6 / max_h; // We will split hue into 6 sectors. let sat = s / max_s; let val = b / max_b; let RGB = []; if(sat === 0) { RGB = [val, val, val]; // Return early if grayscale. }else{ let sector = Math.floor(hue); let tint1 = val * (1 - sat); let tint2 = val * (1 - sat * (hue - sector)); let tint3 = val * (1 - sat * (1 + sector - hue)); switch(sector){ case 1: RGB = [tint2, val, tint1]; break; case 2: RGB = [tint1, val, tint3]; break; case 3: RGB = [tint1, tint2, val]; break; case 4: RGB = [tint3, tint1, val]; break; case 5: RGB = [val, tint1, tint2]; break; default: RGB = [val, tint3, tint1]; break; } } return [...RGB, a]; } function getLineData(l){ let uL = []; uL.push(...l); for(let i = 0; i < 4; i++){ uL[i] -= 320; uL[i] /= 320; } uL[1] = -uL[1]; uL[3] = -uL[3]; return uL; } // --------------------------------------------------------------- // // RenderSystem class. // shaderとprogramとtopologyのsetとあとテクスチャのロケーションのset // 描画機構 class RenderSystem{ constructor(name, _shader){ this.name = name; this.shader = _shader; shader(_shader); this.program = _shader._glProgram; this.topologies = {}; this.uniformLocations = {}; } getName(){ return this.name; } registTopology(topologyName){ if(this.topologies[topologyName] !== undefined){ return; } this.topologies[topologyName] = new Topology(topologyName); } getProgram(){ return this.program; } getShader(){ return this.shader; } getTopology(topologyName){ return this.topologies[topologyName]; } registUniformLocation(uniformName){ if(this.uniformLocations[uniformName] !== undefined){ return; } this.uniformLocations[uniformName] = gl.getUniformLocation(this.program, uniformName); } setTexture(uniformName, _texture, locationID){ gl.activeTexture(gl.TEXTURE0 + locationID); gl.bindTexture(gl.TEXTURE_2D, _texture); gl.uniform1i(this.uniformLocations[uniformName], locationID); } } // --------------------------------------------------------------- // // RenderNode class. // RenderSystemを登録して名前で切り替えられるようになっている // さらにRenderSystemごとにTopology（geometryに相当する）を複数登録して // それも切り替えできるようにする // このコードでは1つずつしか使わないのでその切り替えはしないけど class RenderNode{ constructor(){ this.renderSystems = {}; this.currentRenderSystem = undefined; this.currentShader = undefined; this.currentTopology = undefined; this.useTextureFlag = false; } registRenderSystem(renderSystemName, _shader){ if(this.renderSystems[renderSystemName] !== undefined){ return; } this.renderSystems[renderSystemName] = new RenderSystem(renderSystemName, _shader); } use(renderSystemName, topologyName){ // まとめてやれた方がいい場合もあるので if(this.renderSystems[renderSystemName] == undefined){ return; } this.useRenderSystem(renderSystemName); this.registTopology(topologyName); // 登録済みなら何もしない this.useTopology(topologyName); } useRenderSystem(renderSystemName){ // 使うプログラムを決める this.currentRenderSystem = this.renderSystems[renderSystemName]; this.currentShader = this.currentRenderSystem.getShader(); this.currentShader.useProgram(); } registTopology(topologyName){ // currentProgramに登録するので事前にuseが必要ですね this.currentRenderSystem.registTopology(topologyName); } useTopology(topologyName){ // たとえば複数のトポロジーを使い回す場合ここだけ切り替える感じ this.currentTopology = this.currentRenderSystem.getTopology(topologyName); } registAttribute(attributeName, data, stride){ this.currentTopology.registAttribute(this.currentRenderSystem.getProgram(), attributeName, data, stride); } setAttribute(){ // その時のtopologyについて準備する感じ this.currentTopology.setAttribute(); } registUniformLocation(uniformName){ this.currentRenderSystem.registUniformLocation(uniformName); } setTexture(uniformName, _texture, locationID){ this.currentRenderSystem.setTexture(uniformName, _texture, locationID); this.useTextureFlag = true; // 1回でも使った場合にtrue } setUniform(uniformName, data){ this.currentShader.setUniform(uniformName, data); return this; } clear(){ // 描画の後処理 // topologyを切り替える場合にも描画後にこれを行なったりする感じ // 同じプログラム、トポロジーで点描画や線描画を行う場合などは // その限りではない（レアケースだけどね） this.currentTopology.clear(); // textureを使っている場合はbindを解除する if(this.useTextureFlag){ gl.bindTexture(gl.TEXTURE_2D, null); this.useTextureFlag = false; } } } // --------------------------------------------------------------- // // Topology class. // シェーダーごとに設定 // Geometryだと名前がかぶるのでTopologyにした（一応） // 描画に必要な情報の一揃え。 class Topology{ constructor(name){ this.name = name; this.attributes = {}; // Object.keysでフェッチ。delete a[name]で削除。 } getName(){ return this.name; } registAttribute(program, attributeName, data, stride){ let attr = {}; attr.vbo = create_vbo(data); attr.location = gl.getAttribLocation(program, attributeName); attr.stride = stride; this.attributes[attributeName] = attr; } setAttribute(){ set_attribute(this.attributes); } clear(){ // 描画が終わったらbindを解除する gl.bindBuffer(gl.ARRAY_BUFFER, null); } }