「vertexたくさん描くと重い」というテストコード。

short04.4.html

<h1>vertices</h1>
<input id="SLID" type="range" min="1" max="25" value="10"><input id="TEXT">
<canvas id="CNVS" width="1024" height="1024"></canvas><hr/>
<script>
const vs=`attribute vec4 a;uniform float vt;
void main(){
	gl_PointSize=1.0;
	float th=vt*a.z/2.0;
	gl_Position=a;
	gl_Position.xy*=mat2(cos(th),-sin(th),sin(th),cos(th));
//	gl_Position.xy*=sin(vt/5.)+1.;
}`;
const fs=`precision highp float;uniform float ft;
void main(){
	gl_FragColor.rgb=vec3(.3,.6,.4);gl_FragColor.a=1.0;
}`;
const getp=function(g, vsrc,fsrc){
	var vs=g.createShader(g.VERTEX_SHADER);g.shaderSource(vs,vsrc);
	var fs=g.createShader(g.FRAGMENT_SHADER);g.shaderSource(fs,fsrc);
	g.compileShader(vs);console.log(`vs:${g.getShaderInfoLog(vs)}`);
	g.compileShader(fs);console.log(`fs:${g.getShaderInfoLog(fs)}`);
	var p=g.createProgram();g.attachShader(p, vs);g.attachShader(p, fs);
	g.linkProgram(p);console.log(`link:${g.getProgramInfoLog(p)}`);
	return p;
}
const g=CNVS.getContext("webgl"), p=getp(g, vs,fs); g.useProgram(p);
g.enableVertexAttribArray(0);
const num=Math.pow(2,25);console.log(num);
var data=new Float32Array(num*3);for(var i=0;i<num*3;i++)data[i]=Math.random()*2-1;
var bf0=g.createBuffer(); g.bindBuffer(g.ARRAY_BUFFER, bf0);
g.bufferData(g.ARRAY_BUFFER, data, g.STATIC_DRAW);
g.vertexAttribPointer(0,3,g.FLOAT,false,0,0);
g.bindBuffer(g.ARRAY_BUFFER, null);
var uvt=g.getUniformLocation(p,"vt");
var uft=g.getUniformLocation(p,"ft");
var time;
const draw=function(now){
	time=now/1000;	TEXT.value=Math.pow(2,parseInt(SLID.value));
	g.uniform1f(uvt, time);	g.uniform1f(uft, time);
	g.clearColor(0.2,0.2,0.3,1);	g.clear(0x4000);
	g.drawArrays(0, 0,Math.pow(2,parseInt(SLID.value)));
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
</script>