短くて整理されて濃いけど詰め込み過ぎてよくわからないWebGL入門コード。

webglshortsample.html

<style>canvas,textarea{background-color: bisque;}</style>
<canvas width="128" height="128"></canvas><hr/>
<textarea id="LOG" cols="48" rows="16" hidden></textarea>
<script>"use strict";
let vsrc=`attribute vec4 p;void main(){gl_PointSize=64.;gl_Position=p;}`;
let fsrc=`void main(){
	if(length(gl_PointCoord.xy-vec2(.5))>.5)discard;
	gl_FragColor=vec4(gl_PointCoord.xy,0,1);}`;
let cx=document.querySelector("canvas").getContext("webgl");
try{		cx.useProgram(getPg(vsrc,fsrc));requestAnimationFrame(draw);
}catch(e){	LOG.hidden=false;LOG.value+=e.message;throw e;
}
function draw(){cx.clearColor(0,0,1,1);cx.clear(0x4000);cx.drawArrays(0,0,1);}
function getPg(vsrc,fsrc){
	let msg="";
	let vs=cx.createShader(cx.VERTEX_SHADER);	cx.shaderSource(vs,vsrc);
	let fs=cx.createShader(cx.FRAGMENT_SHADER);	cx.shaderSource(fs,fsrc);
	let pg=cx.createProgram();cx.attachShader(pg,vs);cx.attachShader(pg,fs);
	cx.compileShader(vs);	msg+=`vs:${cx.getShaderInfoLog(vs)}\n`;
	cx.compileShader(fs);	msg+=`fs:${cx.getShaderInfoLog(fs)}\n`;
	cx.linkProgram(pg);		msg+=`pg:${cx.getProgramInfoLog(pg)}\n`;
	if(!cx.getProgramParameter(pg,cx.LINK_STATUS))throw new Error(msg);
	return pg;
}
</script>