-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
26 lines (26 loc) · 1.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>textarea{background-color: bisque;}</style>
<canvas width="256" height="256"></canvas><hr/>
<textarea id="VS" cols="40" rows="15" spellcheck="false" oninput="redraw()"></textarea>
<textarea id="FS" cols="40" rows="15" spellcheck="false" oninput="redraw()"></textarea>
<textarea id="LOG" cols="40" rows="15" spellcheck="false"></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);
VS.value=`attribute vec4 p;\nvoid main(){\n\tgl_PointSize=200.;\n\tgl_Position=p;\n}`;
FS.value=`void main(){\n\tgl_FragColor=sin(gl_FragCoord);\n}`;
function setProgram(vsrc, fsrc){
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.LINK_STATUS))return pg;
let log=`fs:${cx.getShaderInfoLog(fs)}\npg:${cx.getProgramInfoLog(pg)}\n`;
log+=`vs:${cx.getShaderInfoLog(vs)}\n`; throw log;
}
function redraw(){
cx.clearColor(0,0,0, 1); LOG.value="";
try{setProgram(VS.value, FS.value)}catch(e){LOG.value=e;throw e}
cx.useProgram(pg); cx.clear(0x4000); cx.drawArrays(0, 0,1);
}; redraw();
</script>