WebGL2で「シェーダで何か描く」短いコード例。

hellowebgl2.html

<canvas width="256" height="256"></canvas><hr/>
<script>"use strict";
const vsrc=`#version 300 es
in vec4 p;	void main(){gl_Position=p;gl_PointSize=32.;}`;
const fsrc=`#version 300 es
precision mediump float;
out vec4 fragColor;	void main(){fragColor=vec4(1);}`;
let cx=document.querySelector("canvas").getContext("webgl2",{});
let pg=cx.createProgram();
try{
	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))throw pg;
}catch(e){
	let [vs,fs]=cx.getAttachedShaders(e);
	let log=`pg:${cx.getProgramInfoLog(e)}<hr>`;
	log+=`vs:${cx.getShaderInfoLog(vs)}<hr>fs:${cx.getShaderInfoLog(fs)}`;
	document.write(log);throw e;
}
cx.useProgram(pg);cx.clearColor(0,0,1,1);
function draw(now){
	cx.vertexAttrib2f(0,Math.cos(now/1000),Math.sin(now/1000));
	cx.clear(0x4000);	cx.drawArrays(0,0,1);
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
</script>