Last active
January 22, 2021 09:40
-
-
Save diska/44a733edfd634b02a9d4716a2790f097 to your computer and use it in GitHub Desktop.
textureと遠近法の関係が理解できないので「絶対コレジャナイ」と思いつつ今できる実装をしてみたWebGLコード。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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