「WebGLの三角のサンプル」の亜種。

06vertexArray.html

<style>canvas{background-color:darkcyan;}</style>
<style>textarea{background-color:bisque;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea rows="12" cols="40" value=""></textarea>
<script>
let cx=document.querySelector("canvas").getContext("webgl");
let LOG=document.querySelector("textarea");
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);
const vsrc=`attribute vec4 p;void main(){gl_Position=p;gl_PointSize=16.;}`;
const fsrc=`void main(){gl_FragColor=vec4(gl_FragCoord.xy/256.,1,1);}`;
cx.shaderSource(vs, vsrc);	cx.compileShader(vs);
cx.shaderSource(fs, fsrc);	cx.compileShader(fs);	cx.linkProgram(pg);
LOG.value+=`pg log:	${cx.getProgramInfoLog(pg)}\n`;
LOG.value+=`vs log:	${cx.getShaderInfoLog(vs)}\n`;
LOG.value+=`fs log:	${cx.getShaderInfoLog(fs)}\n`;
cx.useProgram(pg);
//
let vbuf=cx.createBuffer();
cx.bindBuffer(cx.ARRAY_BUFFER, vbuf);{
	const data=new Int8Array([0,0, -100,-100, 100,-100]);
	cx.bufferData(cx.ARRAY_BUFFER, data, cx.STATIC_DRAW);
	cx.enableVertexAttribArray(0);
	cx.vertexAttribPointer(0,2,cx.BYTE,true,0,0);
};cx.bindBuffer(cx.ARRAY_BUFFER, null);
//
let mode=0;
const modeName={0:"POINTS",	1:"LINE_STRIP",2:"LINE_LOOP",3:"LINES",
	4:"TRIANGLE_STRIP",5:"TRIANGLE_FAN",6:"TRIANGLES",}
function update(){
	cx.clearColor(0,0,0,1);	cx.clear(0x4000);	cx.drawArrays(mode,0,3);
	LOG.value+=`draw mode: ${modeName[mode]}\n`;
};	update();
cx.canvas.addEventListener("click",()=>{mode=(mode+1)%7;update()})
</script>