.obj形式テキストデータのお絵かきツール化。

projector.1.html

<hr/><canvas id="CNVS" width="1000px", height="1000px"></canvas>
<textarea id="AREA" rows="16" cols="50" style="background-color:bisque;">v 0 1 0
v 1 0 0
v -1 0 0
</textarea><hr/>
scale<input id="SLID" type="range"><br/>
mode<input id="MODE" value="2" max="6" type="range">
<script>
const vs0src=`attribute vec4 p;uniform float f;
void main(){gl_PointSize=2.;gl_Position=p;gl_Position.xyz*=f/100.;}`;
const fs0src=`void main(){gl_FragColor=vec4(1);gl_FragColor.rb*=0.5;}`;
var cx0=CNVS.getContext("webgl");
var vs0=cx0.createShader(cx0.VERTEX_SHADER);	setSh(cx0, vs0, vs0src);
var fs0=cx0.createShader(cx0.FRAGMENT_SHADER);	setSh(cx0, fs0, fs0src);
var pg0=cx0.createProgram();	setPg(cx0, pg0, vs0, fs0);
getInfo(cx0, vs0,fs0,pg0);
//
function click(e){
	var clientRect=CNVS.getBoundingClientRect();
	var x=(e.clientX-clientRect.left)/cx0.drawingBufferWidth;
	var y=(e.clientY-clientRect.top)/cx0.drawingBufferHeight;
	AREA.value+=`v ${x*2-1} ${1-y*2} 0\n`;
	setBuf();
};	CNVS.addEventListener("click", click);
//
var data=[];
function setBuf(){
	data=[];
	var s1=AREA.value.match(new RegExp(/v .* .* .*/g));
	for(i=0; i<s1.length; i++){
		var s2=s1[i].split(" ");
		data.push(s2[1],s2[2],s2[3]);
	}
	var buf=cx0.createBuffer();
	cx0.bindBuffer(cx0.ARRAY_BUFFER, buf);
	cx0.enableVertexAttribArray(0);
	cx0.vertexAttribPointer(0, 3, cx0.FLOAT, false, 0,0);
	cx0.bufferData(cx0.ARRAY_BUFFER, new Float32Array(data), cx0.STATIC_DRAW);
	cx0.bindBuffer(cx0.ARRAY_BUFFER, null);
};	setBuf();	AREA.addEventListener("click", setBuf);
//
cx0.useProgram(pg0);
function loop(now){
	cx0.clearColor(0,0,0,1);	cx0.clear(cx0.COLOR_BUFFER_BIT);
	cx0.uniform1f(cx0.getUniformLocation(pg0, "f"), SLID.value);
	cx0.drawArrays(MODE.value, 0, data.length/3);
	requestAnimationFrame(loop);
}	requestAnimationFrame(loop);
//
function getInfo(cx, vs,fs,prg){
	console.log("VERTEX_SHADER:"+cx.getShaderInfoLog(vs));
	console.log("FRAGMENT_SHADER:"+cx.getShaderInfoLog(fs));
	console.log("LINK:"+cx.getProgramInfoLog(prg));
}
function setSh(cx, shd, src){cx.shaderSource(shd,src);cx.compileShader(shd);}
function setPg(cx, prg,vs,fs){
	cx.attachShader(prg, vs);cx.attachShader(prg, fs);cx.linkProgram(prg);
}
</script>