let _pool; let gr; // 弾幕用 let vis; // オブジェクトプール用 let gl0, _gl0, gl1, _gl1; let vBuf0,cBuf0, vBuf1, cBuf1; let bulletShader, poolShader; let bulletImg; let poolableImg; const NUM = 640; let vBulletData = new Float32Array(NUM*4); let cBulletData = new Float32Array(NUM*3); let vPoolData = new Float32Array(NUM*4); let cPoolData = new Float32Array(NUM*3); // まずはこっちで描画をWEBGLで書いてみようか // とりあえずforkしようかな // 512個使う // 256個が弾幕用で256個がオブジェクトプールのフラグ用 // -1なら描画しないのでそこら辺の情報を加味するのがポイント // 点の位置はそのままで色もそのまま使う let vsPoint = "precision mediump float;" + "attribute vec4 aPosition;" + "attribute vec3 aColor;" + "uniform float uPointSize;" + "const float TAU = 6.28318;" + "const float PI = 3.14159;"+ "varying vec4 vPosition;" + "varying vec3 vColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "void main() {" + " vec3 p = aPosition.xyz;" + " vPosition = aPosition;" + " vColor = aColor;" + // 点の位置をいじるパート " vec4 positionVec4 = vec4(p, 1.0);" + " gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;" + " gl_PointSize = uPointSize;" + // サイズ "}"; // 色もそのまま let fsPoint = "precision mediump float;" + "const float TAU = 6.28318;" + "const float PI = 3.14159;"+ "varying vec4 vPosition;" + "varying vec3 vColor;" + "uniform sampler2D uSpriteImg;" + // getRGB(HSBtoRGB) "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);" + "}" + // mask関連の余計な処理をカット。いいのか悪いのかは知らない... "void main(){" + " if(vPosition.w < 0.0){ discard; }" + // フラグ " vec2 p = gl_PointCoord.xy;" + " p -= 0.5;" + " float t = vPosition.z;" + // これが方向だとして... " p *= mat2(cos(t), sin(t), -sin(t), cos(t));" + // こうする。少ない数で、やろう。 " p += 0.5;" + " vec4 tex = texture2D(uSpriteImg, p);" + " if(tex.a < 0.01){ discard; }" + " gl_FragColor = vec4(tex.rgb * getRGB(vColor.r, vColor.g, vColor.b), tex.a);" + "}"; let ocean; let technical; function preload(){ ocean = loadImage("https://inaridarkfox4231.github.io/assets/backgrounds/ocean1.JPG"); } function setup() { createCanvas(800, 640); gr=createGraphics(640, 640, WEBGL); gr.setAttributes("alpha",true); _gl0 = gr._renderer; gl0 = _gl0.GL gr.pixelDensity(1); bulletShader = gr.createShader(vsPoint, fsPoint); vis=createGraphics(10*16,10*40,WEBGL); vis.setAttributes("alpha",true); _gl1 = vis._renderer; gl1 = _gl1.GL vis.pixelDensity(1); poolShader = vis.createShader(vsPoint, fsPoint); _gl0.pointSize = 16; _gl1.pointSize = 8; bulletImg = createGraphics(16,16); bulletImg.fill(255); bulletImg.rectMode(CENTER); bulletImg.stroke(255); //bulletImg.background(255); bulletImg.rect(8,8,12*cos(PI/6),12*sin(PI/6)); poolImg = createGraphics(8,8); poolImg.background(255); _pool = new ObjectPool(() => new MyUnit()); _pool.initialize(NUM); // bullet側 vBuf0 = gl0.createBuffer(); // これがvboになる for(let i = 0; i < NUM*4; i++){ vBulletData[i] = 0; if(i%4==3){vBulletData[i]=-1} // デフォは-1 } cBuf0 = gl0.createBuffer(); // これがvboになる for(let i = 0; i < NUM*3; i++){ cBulletData[i] = 1; } // pool側 vBuf1 = gl1.createBuffer(); // これがvboになる for(let i = 0; i < NUM*4; i++){ vPoolData[i] = 0; if(i%4==3){vPoolData[i]=-1} // デフォは-1 } cBuf1 = gl1.createBuffer(); // これがvboになる for(let i = 0; i < NUM*3; i++){ cPoolData[i] = 1; } // bufferDataは1回でいい。ここで設定してしまう。 gl0.bindBuffer(gl0.ARRAY_BUFFER, vBuf0); gl0.bufferData(gl0.ARRAY_BUFFER, vBulletData, gl0.DYNAMIC_DRAW); gl0.bindBuffer(gl0.ARRAY_BUFFER, null); gl0.bindBuffer(gl0.ARRAY_BUFFER, cBuf0); gl0.bufferData(gl0.ARRAY_BUFFER, cBulletData, gl0.DYNAMIC_DRAW); gl0.bindBuffer(gl0.ARRAY_BUFFER, null); gl1.bindBuffer(gl0.ARRAY_BUFFER, vBuf1); gl1.bufferData(gl0.ARRAY_BUFFER, vPoolData, gl1.DYNAMIC_DRAW); gl1.bindBuffer(gl0.ARRAY_BUFFER, null); gl1.bindBuffer(gl0.ARRAY_BUFFER, cBuf1); gl1.bufferData(gl0.ARRAY_BUFFER, cPoolData, gl1.DYNAMIC_DRAW); gl1.bindBuffer(gl0.ARRAY_BUFFER, null); fill(0); textSize(16); textAlign(LEFT,TOP); technical = createGraphics(160,320); technical.noStroke(); technical.colorMode(HSB,100); for(i=0;i<320;i++){ technical.fill(5,i*100/320,100); technical.rect(0,i,160,1); } } function draw() { const _start = millis(); blendMode(BLEND); //background("navy"); image(technical,gr.width,vis.height); image(ocean,0,0,gr.width,gr.height,0,0,ocean.width,ocean.height); _pool.loop("update"); _pool.loop("display"); // 位置情報と色情報を格納 // bullet描画 gr.clear(); gr.shader(bulletShader); // blendの有効化 gl0.enable(gl0.BLEND); //gl0.blendFunc(gl0.ONE, gl0.ONE); // bulletShader.setUniform("uSpriteImg",bulletImg); drawBullets(); blendMode(ADD); image(gr,0,0); _pool.loop("check", [gr]); _pool.loop("recycle"); if(_pool.getUseIndex()>0){usePoolableObject()} // pool描画 registPoolData(); vis.background(0); vis.shader(poolShader); // blendの有効化 gl1.enable(gl1.BLEND); //gl1.blendFunc(gl1.ONE, gl1.ONE); // poolShader.setUniform("uSpriteImg",poolImg); drawVis(); blendMode(BLEND); image(vis, 640, 0); const _end = millis(); text("performance:", 640, 320+95); text(((_end-_start)*60/1000).toFixed(3),640,320+120); } function usePoolableObject(){ const _poolable = _pool.use(); const _s = 0.5 + 0.5 * Math.random(); const _d = Math.PI*2*Math.random(); _poolable.initialize({x:0,y:0,vx:_s*Math.cos(_d),vy:_s*Math.sin(_d)}); } function drawBullets(){ _gl0._setPointUniforms(bulletShader); // 頂点座標の動的更新 gl0.bindBuffer(gl0.ARRAY_BUFFER, vBuf0); bulletShader.enableAttrib(bulletShader.attributes.aPosition, 4); gl0.bufferSubData(gl0.ARRAY_BUFFER, 0, vBulletData); // 色の動的更新 gl0.bindBuffer(gl0.ARRAY_BUFFER, cBuf0); bulletShader.enableAttrib(bulletShader.attributes.aColor, 3); gl0.bufferSubData(gl0.ARRAY_BUFFER, 0, cBulletData); gl0.drawArrays(gl0.POINTS, 0, NUM); bulletShader.unbindShader(); } function registPoolData(){ const offsetX = vis.width/2; const offsetY = vis.height/2; for(let i=0;i graphic.width/2+16 || Math.abs(this.y) > graphic.height/2+16){ this.kill(); } } activate(){ this.active = true; this.alive = true; const i = this.poolIndex; vBulletData[i*4+3] = 1; // activateのときに1にする } inActivate(){ this.active = false; const i = this.poolIndex; vBulletData[i*4+3] = -1; // inActivateのときに-1にする } display(){ // 大丈夫...？？ const i = this.poolIndex; vBulletData[i*4] = this.x; vBulletData[i*4+1] = this.y; vBulletData[i*4+2] = Math.atan2(this.vy, this.vx); cBulletData[i*3] = 0.6+0.2*fract(noise(0,i)*8); cBulletData[i*3+1] = fract(noise(i,0)*8)*0.5+0.5; cBulletData[i*3+2] = 1; } } class ObjectPool{ constructor(factory){ this.pool = []; this.indices = []; this.factory = factory; this.useIndex = 0; this.capacity = 0; } initialize(n){ for(let i=0; i=0;i--){ const _poolable = this.pool[i]; if(!_poolable.isActive()){ continue; } this.pool[i][methodName](...arg); } } clear(){ // 全部戻す const L = this.capacity; this.useIndex = L; for(let i = 0; i < L; i++){ this.indices[i] = i; } for(let i = 0; i < L; i++){ this.pool[i].inActivate(); } } }

#ObjectPool