WebGLのgl_Position.wって何者？というのを体験するだけのためのプログラム。暫定。

w.html

<style>canvas,textarea{background-color:bisque}</style>
<canvas width="256" height="256"></canvas><br/>
w:<input id="W" type="range" value="100"><hr/>
<textarea id="LOG" cols="30" rows="10" value=""></textarea>
<script>"use strict";
const vsrc=`attribute vec4 p;uniform float w;
void main(){gl_Position=vec4(p.xyz,w);gl_PointSize=8./w;}`;
const fsrc=`void main(){gl_FragColor=vec4(1);}`;
const data=[];for(let i=0;i<100*3;i++){data[i]=Math.random()*2-1;}
let cx=document.querySelector("canvas").getContext("webgl");
let pg;	try{pg=getPg();}catch(e){LOG.value+=e;throw e;}
let p=cx.getAttribLocation(pg, "p");
let w=cx.getUniformLocation(pg, "w");
let bf=cx.createBuffer();	cx.bindBuffer(cx.ARRAY_BUFFER,bf);{
	cx.bufferData(cx.ARRAY_BUFFER,new Float32Array(data),cx.STATIC_DRAW);
	cx.enableVertexAttribArray(p);
	cx.vertexAttribPointer(p,3,cx.FLOAT,false,0,0);
};	cx.bindBuffer(cx.ARRAY_BUFFER,null);
//
cx.useProgram(pg);
function draw(){
	cx.clearColor(0,0,1,1);cx.clear(0x4000);
	LOG.value=`w:${W.value/10}\n`;	cx.uniform1f(w,W.value/10);
	cx.drawArrays(0, 0,100);
}
cx.uniform1f(w,W.value/10);	requestAnimationFrame(draw);
W.addEventListener("input",draw);
function getPg(){
	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);
	cx.shaderSource(vs,vsrc);cx.compileShader(vs);
	cx.shaderSource(fs,fsrc);cx.compileShader(fs);
	cx.linkProgram(pg);	cx.validateProgram(pg);
	if(cx.getProgramParameter(pg,cx.VALIDATE_STATUS))return pg;
	let log=`pg:${cx.getProgramInfoLog(pg)}\n`;
	log+=`vs:${cx.getShaderInfoLog(vs)}\nfs:${cx.getShaderInfoLog(fs)}`;
	throw log;
}
</script>