WebGLProgramなしでWebGLProgramを体感する例。

withoutWebGLProgram.html

<style>*{background-color:#999;}</style>
<style>canvas{background-color:#333;}</style><hr/>
<canvas id="CNVS" width="256" height="256"></canvas><hr/>
<h3>WebGL入門 00 WebGLRenderingContext</h3>
<script>
var cx=CNVS.getContext("webgl");
cx.enable(cx.SCISSOR_TEST);
var dim=256, iter=dim*dim, ps=1;
function getPos(s){
	var ax=(s%dim)/dim;
	var ay=(s/dim)/dim;
//	var az=0, aw=1;
	return[ax,ay];
}
function setColor(x,y){
	var r=x;
	var g=y;
	var b=Math.random();
	var a=(x*x+y*y<1)?1:0;
	if(a==0){r=0,g=0,b=0,a=0};
	return [r,g,b,a];
}
function draw(){
	for(i=0;i<iter;i++){
		var pos=getPos(i);
		cx.scissor(pos[0]*dim,pos[1]*dim, ps,ps);
		var col=setColor(pos[0],pos[1]);
		cx.clearColor(col[0], col[1], col[2], col[3]);
		cx.clear(0x4000);
	}
//	window.requestAnimationFrame(draw);
};	window.requestAnimationFrame(draw);
</script>