Skip to content

Instantly share code, notes, and snippets.

@diska
Last active January 22, 2021 09:40
Show Gist options
  • Select an option

  • Save diska/44a733edfd634b02a9d4716a2790f097 to your computer and use it in GitHub Desktop.

Select an option

Save diska/44a733edfd634b02a9d4716a2790f097 to your computer and use it in GitHub Desktop.
textureと遠近法の関係が理解できないので「絶対コレジャナイ」と思いつつ今できる実装をしてみたWebGLコード。
<canvas width="512" height="512"></canvas><script>"use strict";
const vsrc=`attribute vec4 p;uniform mat4 m;varying vec4 vp;
void main(){
gl_Position=p*m; gl_Position.w=6./(3.-gl_Position.z);
gl_PointSize=30./gl_Position.w; vp=p;}`;
const fsrc=`precision mediump float;uniform sampler2D tx;varying vec4 vp;
void main(){
vec4 ct=texture2D(tx,vec2(vp.rg));
gl_FragColor=(length(vp)<1.5)?vec4(1,1,0,1):vec4(ct.rgb,1);}`;
const m=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];
const data=new Int8Array(9999);
for(let i=0; i<data.length; i++)data[i]=256*Math.random()-128;
let cx=document.querySelector("canvas").getContext("webgl");
let bf=cx.createBuffer();
cx.bindBuffer(cx.ARRAY_BUFFER,bf);{
cx.enableVertexAttribArray(0);
cx.vertexAttribPointer(0,3,cx.BYTE,true,0,0);
cx.bufferData(cx.ARRAY_BUFFER,data,cx.STATIC_DRAW);
};cx.bindBuffer(cx.ARRAY_BUFFER,null);
let tx=cx.createTexture();
cx.bindTexture(cx.TEXTURE_2D,tx);{
let td=new Uint8Array(256);for(let i=0;i<256;i++)td[i]=Math.random()*0xff;
cx.texImage2D(cx.TEXTURE_2D,0,cx.RGBA,8,8,0,cx.RGBA,cx.UNSIGNED_BYTE,td);
cx.generateMipmap(cx.TEXTURE_2D);
}
let pg=cx.createProgram();
try{pg=getPg(pg,vsrc,fsrc)}catch(e){document.write(e);throw e};
let pgM=cx.getUniformLocation(pg,"m");
cx.useProgram(pg); cx.clearColor(.3,.3,.3,1); cx.enable(cx.DEPTH_TEST);
function draw(now){
let time=now/1000;
m[0]=Math.cos(time+0); m[2]=Math.cos(time-Math.PI/2);
m[8]=Math.cos(time+Math.PI/2); m[10]=Math.cos(time+0);
cx.uniformMatrix4fv(pgM,false,m);
cx.clear(0x4500); cx.drawArrays(0,0,data.length/3);
requestAnimationFrame(draw);
}; requestAnimationFrame(draw);
function getPg(pg,vsrc,fsrc){
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);
if(cx.getProgramParameter(pg,cx.LINK_STATUS))return pg;
let log=`pg:${cx.getProgramInfoLog(pg)}<hr>`;
log+=`vs:${cx.getShaderInfoLog(vs)}<hr>`
log+=`fs:${cx.getShaderInfoLog(fs)}<hr>`; throw log;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment