シェーダの外で遠近法計算できた感じに見えるWebGLコード。n[14]の影響がまだ謎。

persbymat4.html

<canvas width="256" height="256"></canvas>
<script>"use strict";
const vsrc=`attribute vec4 p;uniform mat4 m,n;
void main(){gl_Position=p*m*n;gl_PointSize=8.*gl_Position.w;;}`;
const fsrc=`void main(){gl_FragColor=vec4(vec3(1.-gl_FragCoord.z),1);}`;
const data=[];	for(let i=0;i<9999;i++){data[i]=100*(Math.random()-.5);}
let pg, cx=document.querySelector("canvas").getContext("webgl");
cx.enable(cx.DEPTH_TEST);
try{pg=getPg(vsrc,fsrc);cx.useProgram(pg)}catch(e){document.write(e);throw e};
let cxm=cx.getUniformLocation(pg,"m"),cxn=cx.getUniformLocation(pg,"n");
let bf=cx.createBuffer();cx.bindBuffer(cx.ARRAY_BUFFER,bf);{
	cx.enableVertexAttribArray(0);cx.vertexAttribPointer(0,3,cx.BYTE,true,0,0);
	cx.bufferData(cx.ARRAY_BUFFER,new Int8Array(data),cx.STATIC_DRAW);
};cx.bindBuffer(cx.ARRAY_BUFFER,null);
let m=[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];cx.uniformMatrix4fv(cxm,false,m);
let n=[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,.8,1];cx.uniformMatrix4fv(cxn,false,n);
const deg90=Math.PI/2;
function draw(now){
	let th0=now/1000,th1=th0-deg90;
	m[0]=Math.cos(th0);	m[ 2]=Math.cos(th0+deg90);
	m[8]=Math.cos(th1);	m[10]=Math.cos(th1+deg90);
	cx.uniformMatrix4fv(cxm,false,m);
	cx.clearColor(0,0,1,1);cx.clear(0x4000);cx.drawArrays(0,0,data.length/3);
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
function getPg(vsrc,fsrc){
	let pg=cx.createProgram();
	let vs=cx.createShader(cx.VERTEX_SHADER);	cx.attachShader(pg,vs);
	let fs=cx.createShader(cx.FRAGMENT_SHADER);	cx.attachShader(pg,fs);
	cx.shaderSource(vs,vsrc);	cx.compileShader(vs);
	cx.shaderSource(fs,fsrc);	cx.compileShader(fs);	cx.linkProgram(pg);
	if(cx.getProgramParameter(pg,cx.LINK_STATUS))return pg;
	let log=`${cx.getShaderInfoLog(vs)}\n${cx.getShaderInfoLog(fs)}\n`;
	log+=`${cx.getProgramInfoLog(pg)}\n`;	throw log;
}
</script>

めも：
全体をリライトした。座標系をイメージしやすい感じの表現に。ログでpgを見てなかったバグ修正。textareaを排除してログをdocument.writeに変更。「VS Code+HTML previewで編集する際にコード補完できる」という想定。