mini glslEditor+objLoader

glslVarrayEditor.html

<style>body{background-color: #cf9};</style>
<style>canvas{background-color: #999};</style>
<style>textarea{background-color: #ffc};</style>
<canvas id="CNVS" width="256" height="256"></canvas>
<textarea id="LOG" cols="40" rows="20" value=""></textarea><hr/>
<textarea id="VSRC" cols="40" rows="20" value=""></textarea>
<textarea id="FSRC" cols="40" rows="20" value=""></textarea>
<textarea id="ARRY" cols="40" rows="20" value=""></textarea><hr/>
<script>"use strict"
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);
VSRC.value=`attribute vec4 p;\nvoid main(){\n  gl_PointSize=64.;\n  gl_Position=p;\n}`;
FSRC.value=`void main(){\n  gl_FragColor=vec4(1);\n}`;
ARRY.value=`0 0 0\n1 0 0\n0 1 0\n-1 0 0\n`;
function prepareProgram(){
	cx.shaderSource(vs, VSRC.value);	cx.compileShader(vs);
	cx.shaderSource(fs, FSRC.value);	cx.compileShader(fs);
	cx.linkProgram(pg);
	LOG.value =`Compile log for vs:${cx.getShaderInfoLog(vs)}\n`;
	LOG.value+=`Compile log for fs:${cx.getShaderInfoLog(fs)}\n`;
	LOG.value+=`Link log for pg:${cx.getProgramInfoLog(pg)}\n`;
	requestAnimationFrame(draw);
};
VSRC.addEventListener("input", prepareProgram);
FSRC.addEventListener("input", prepareProgram);
ARRY.addEventListener("input", prepareArray);
let num=0;
function prepareArray(){
	let data=setBuf();
	let buf=new Float32Array(data);
	cx.bindBuffer(cx.ARRAY_BUFFER, cx.createBuffer());{
		cx.bufferData(cx.ARRAY_BUFFER, buf,cx.STATIC_DRAW);
		cx.vertexAttribPointer(0,3,cx.FLOAT,false,0,0);
		cx.enableVertexAttribArray(0);
	};cx.bindBuffer(cx.ARRAY_BUFFER, null);
	requestAnimationFrame(draw);
	function setBuf(){
		let data=[];
		let s1=ARRY.value.match(new RegExp(/[0-9.\-]+ [0-9.\-]+ [0-9.\-]+/g));
		num=s1.length;
		for(let i=0; i<s1.length; i++){
			let s2=s1[i].split(" ");
			data[i*3+0]=s2[0];	data[i*3+1]=s2[1];	data[i*3+2]=s2[2];
		}
		return data;
	}
}
function draw(){
	cx.clear(0x4000);
	cx.useProgram(pg);	cx.drawArrays(0,0,num);
};
prepareProgram();	prepareArray();
</script>