WebGLと深度処理の復習。参考： https://scratch.mit.edu/projects/407749635/

neko.html

<style>canvas{background-color: black;}</style>
<canvas width="512" height="512"></canvas>
<script>"use strict";
const vsrc=`attribute vec4 p;
uniform mat4 umat;	uniform sampler2D tex0;
varying vec4 vp;
void main(){
	gl_PointSize=3.;
	vp=p, vp.z=texture2D(tex0,p.xy*0.5+0.5).z;
	gl_Position=umat*vp*0.7;gl_Position.w=1.;
	vp=gl_Position;vp.z+=.1;
}`;
const fsrc=`precision highp float;
varying vec4 vp;
void main(){
	gl_FragColor=vec4(1);
	gl_FragColor.rgb*=vp.bbb*1.2;
}`;
let img=document.createElement("img");
let buf=new Float32Array(2*0xffff);
let m4=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
let cx=document.querySelector("canvas").getContext("webgl");
let pg=cx.createProgram();
let tx0=cx.createTexture();	cx.activeTexture(cx.TEXTURE0);
let bf=cx.createBuffer();
let status={pgReady:false,txReady:false,bfReady:false};
loadBuffer();	loadProgram();
let umat=cx.getUniformLocation(pg,"umat");
img.addEventListener("load",loadTexture);	img.src="白黒ネコ.png";
function loadProgram(){
	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);
	console.log(`pg:${cx.getProgramInfoLog(pg)}`);
	console.log(`vs:${cx.getShaderInfoLog(vs)}`);
	console.log(`fs:${cx.getShaderInfoLog(fs)}`);
	cx.linkProgram(pg);	cx.useProgram(pg);
	cx.pixelStorei(cx.UNPACK_FLIP_Y_WEBGL,true);
	status.pgReady=true;
}
function loadTexture(){
	cx.bindTexture(cx.TEXTURE_2D,tx0);
	cx.texParameteri(cx.TEXTURE_2D,cx.TEXTURE_WRAP_S,cx.CLAMP_TO_EDGE);
	cx.texParameteri(cx.TEXTURE_2D,cx.TEXTURE_WRAP_T,cx.CLAMP_TO_EDGE);
	cx.texParameteri(cx.TEXTURE_2D,cx.TEXTURE_MIN_FILTER,cx.NEAREST);
	cx.texParameteri(cx.TEXTURE_2D,cx.TEXTURE_MAG_FILTER,cx.NEAREST);
	cx.texImage2D(cx.TEXTURE_2D,0,cx.RGBA,cx.RGBA,cx.UNSIGNED_BYTE,img);
	status.txReady=true;
}
function loadBuffer(){
	cx.enableVertexAttribArray(0);
	for(let i=0;i<0x1ffff;i++) buf[i]=Math.random()*2-1;
	cx.bindBuffer(cx.ARRAY_BUFFER,bf);
	cx.bufferData(cx.ARRAY_BUFFER,buf,cx.STATIC_DRAW);
	cx.vertexAttribPointer(0,4,cx.FLOAT,false,0,0);
	cx.bindBuffer(cx.ARRAY_BUFFER,null);
	status.bfReady=true;
}
function draw(now){
	m4=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
	const rotY=getSC(now/1000);
	m4[0]=Math.cos(rotY[0]);m4[2]=Math.cos(rotY[1]);
	m4[8]=Math.cos(rotY[3]);m4[10]=Math.cos(rotY[0]);
	cx.uniformMatrix4fv(umat,false, m4)
//	loadBuffer();
	if(status.bfReady&&status.txReady&&status.pgReady)	cx.drawArrays(0,0,0xffff);
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
function getSC(th){
	return [th+0*Math.PI/2,th+1*Math.PI/2,th+2*Math.PI/2,th+3*Math.PI/2];
}
</script>