WebGLで四角いのが何となく回るだけ。

cube.html

<style>canvas,textarea{background-color: bisque;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea name="" id="LOG" cols="40" rows="12"></textarea>
<script>"use strict";
let vsrc=`attribute vec4 p;
uniform mat3 m3;
varying vec3 vPos,vDep;
void main(){
	vPos=p.xyz;
	vec4 p2=vec4(p.xyz*m3,1);
	float n=4./(4.+p2.z);
	gl_Position=vec4(p2.xyz*n,2);
	gl_PointSize=1.5*n;
	vDep=gl_Position.xyz;
}`;
let fsrc=`precision highp float;
varying vec3 vPos,vDep;
void main(){
	if(length(vPos)<1.1)discard;
	gl_FragColor=vec4(vec3(-vDep.z*.7),1);
}`;
let cx=document.querySelector("canvas").getContext("webgl");
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);	cx.useProgram(pg);
LOG.value =`vs:${cx.getShaderInfoLog(vs)}\n`;
LOG.value+=`fs:${cx.getShaderInfoLog(fs)}\n`;
LOG.value+=`pg:${cx.getProgramInfoLog(pg)}\n`;
let bf=cx.createBuffer();
cx.bindBuffer(cx.ARRAY_BUFFER, bf);{
	let data=new Float32Array(300000);
	for(let i=0;i<data.length; i++)data[i]=Math.random()*2-1;
	cx.bufferData(cx.ARRAY_BUFFER, data, cx.STATIC_DRAW);
	cx.vertexAttribPointer(0, 3,cx.FLOAT, false,0,0);
	cx.enableVertexAttribArray(0);
}cx.bindBuffer(cx.ARRAY_BUFFER, null);
cx.enable(cx.DEPTH_TEST);
function draw(t){
	t/=1000;
	let m3=[1,0,0, 0,1,0, 0,0,1];
	m3[0]=Math.cos(t+0.00), m3[2]=Math.cos(t+1.54), m3[6]=-m3[2], m3[8]=m3[0];
	cx.uniformMatrix3fv(cx.getUniformLocation(pg,"m3"),false, m3);
	cx.clearColor(0,0,1,1);	cx.clear(0x4000);
	cx.drawArrays(0, 0,30000);
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
</script>