// index attributeのみを使って点描画するテスト let gl; let _gl; let pointBuf1; let count = 0; let myShader; let vs = "precision mediump float;" + "attribute float aIndex;" + // unique attribute. "uniform float uPointSize;" + "uniform float uScale;" + "uniform float uCount;" + "const float TAU = 6.28318;" + "varying vec2 vIndex;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + // 入力は0～1でindexを網羅するように設定 // 0～120のとき0で600～720のとき1ですね // 120～600のときはdelayの値がy*360でつまりy*360+120 true; _gl.userPointShader = myShader; pointBuf1 = gl.createBuffer(); // これがvboになる for(let i = 0; i < NUM; i++){ indices.push(i); } // 背景設定 gl.enable(gl.DEPTH_TEST); gr = createGraphics(width, height); gr.fill(255); gr.textSize(min(width, height) * 0.025); gr.textAlign(LEFT, TOP); // bufferDataは1回でいい。ここで設定してしまう。 gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf1); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); } function draw(){ let start = millis(); // 背景関連 resetShader(); gl.disable(gl.DEPTH_TEST); texture(gr); plane(width, height); gl.enable(gl.DEPTH_TEST); // 点描画 resetShader(); shader(myShader); rotateX(TAU * count / 241); rotateY(TAU * count / 353); myShader.setUniform("uScale", min(width, height) * 0.5); myShader.setUniform("uCount", count % 1200); myDrawPoints(); count++; // 描画速度をテキストで表示（次のフレームで速度レートが表示される） let end = millis(); // 1/60秒を1としたときの描画所要時間 const performanceRatio = (end-start)*60/1000; gr.background(0); const offset = min(width, height)*0.025; gr.text(performanceRatio.toFixed(3), offset, offset); } function myDrawPoints(){ _gl._setPointUniforms(myShader); gl.bindBuffer(gl.ARRAY_BUFFER, pointBuf1); myShader.enableAttrib(myShader.attributes.aIndex, 1); gl.drawArrays(gl.POINTS, 0, NUM); myShader.unbindShader(); }

Plane and Torus