WebGL1.0でterrainでnormalっぽいけどまだ頭が付いて行ってない48行。

normal.html

<style>canvas{background-color: khaki;}</style>
<canvas width="256" height="256"></canvas><hr>
<textarea id="LOG" cols="32" rows="12"></textarea>
<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);
let vsrc=`attribute vec4 p;uniform sampler2D tx;uniform mat4 m;varying vec3 vc;
mat4 n=mat4(1,0,0,0, 0,1,0,-1, 0,0,1,0, 0,0,1,2);void main(){
	gl_Position=vec4(p.x,texture2D(tx,p.xy).r,p.y,1)*m*n;gl_PointSize=3.;
	vc=(p.rgb+1.5)*.3;	vec2 n;
	n.x=(texture2D(tx,vec2(p.x-.03,p.y)).r-texture2D(tx,vec2(p.x+.03,p.y)).r);
	n.y=(texture2D(tx,vec2(p.x,p.y-.03)).r-texture2D(tx,vec2(p.x,p.y+.03)).r);
	vc+=dot(normalize(n),normalize(vec2(1,1)));
}`;
let fsrc=`precision highp float;varying vec3 vc;
void main(){gl_FragColor=vec4(vc,1);}`;
cx.shaderSource(vs,vsrc);cx.compileShader(vs);
cx.shaderSource(fs,fsrc);cx.compileShader(fs);cx.linkProgram(pg);
LOG.value+=`pg:${cx.getProgramInfoLog(pg)}\n`;	LOG.hidden=true;
LOG.value+=`vs:${cx.getShaderInfoLog(vs)}\nfs:${cx.getShaderInfoLog(fs)}\n`
let bf=cx.createBuffer();let AB=cx.ARRAY_BUFFER;
cx.bindBuffer(AB,bf);
cx.bufferData(AB,256*256*2,cx.STATIC_DRAW);
cx.enableVertexAttribArray(0);cx.vertexAttribPointer(0,2,cx.BYTE,true,0,0);
cx.bindBuffer(AB,null);
let tx=cx.createTexture();let T2=cx.TEXTURE_2D;
cx.bindTexture(T2,tx);
cx.texImage2D(T2,0,cx.LUMINANCE,16,16,0,cx.LUMINANCE,cx.UNSIGNED_BYTE,null);
let data=new Int8Array(256*256*2);
for(let j=0;j<256;j++)for(let i=0;i<256;i++){
	data[2*(j*256+i)+0]=i-128;	data[2*(j*256+i)+1]=j-128;}
cx.bindBuffer(AB,bf);cx.bufferSubData(AB,0,data);cx.bindBuffer(AB,null);
let t0=new Uint8Array(16*16*1);
for(let j=0;j<16;j++)for(let i=0;i<16;i++){t0[1*(j*16+i)+0]=Math.random()*64}
cx.texSubImage2D(T2,0,0,0,16,16,cx.LUMINANCE,cx.UNSIGNED_BYTE,t0);
cx.generateMipmap(T2);
let m=new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]);
let pgM=cx.getUniformLocation(pg,"m");
cx.useProgram(pg);cx.enable(cx.DEPTH_TEST);
function draw(now){
	let time=now/1000,c=Math.cos(time),s=Math.sin(time);
	m[0]=c;m[2]=s;	m[8]=-s;m[10]=c;	cx.uniformMatrix4fv(pgM,false,m);
	cx.clearColor(0,0,1,1);	cx.clear(0x4000);cx.drawArrays(0,0,256*256);
	requestAnimationFrame(draw);
};	requestAnimationFrame(draw);
</script>