<canvas id="c"></canvas>
|
|
<script id="shader-vs" type="x-shader/x-vertex">
|
attribute vec2 aPos;
|
attribute vec2 aTexCoord;
|
varying vec2 vTexCoord;
|
void main(void) {
|
gl_Position = vec4(aPos, 1., 1.);
|
vTexCoord = aTexCoord;
|
}
|
</script>
|
|
<script id="shader-fs" type="x-shader/x-fragment">
|
precision highp float;
|
uniform sampler2D samp1;
|
varying vec2 vTexCoord;
|
void main(void) {
|
float u = texture2D(samp1, vTexCoord).x;
|
gl_FragColor = vec4(u, 1., 1., 1. );
|
}
|
</script>
|
|
<script>
|
function getShader ( gl, id ){
|
var shaderScript = document.getElementById ( id );
|
var str = "";
|
var k = shaderScript.firstChild;
|
while ( k ){
|
if ( k.nodeType == 3 ) str += k.textContent;
|
k = k.nextSibling;
|
}
|
var shader;
|
if ( shaderScript.type == "x-shader/x-fragment" )
|
shader = gl.createShader ( gl.FRAGMENT_SHADER );
|
else if ( shaderScript.type == "x-shader/x-vertex" )
|
shader = gl.createShader(gl.VERTEX_SHADER);
|
else return null;
|
gl.shaderSource(shader, str);
|
gl.compileShader(shader);
|
return shader;
|
}
|
|
canvas = document.getElementById("c");
|
gl = canvas.getContext("experimental-webgl");
|
|
prog = gl.createProgram();
|
gl.attachShader(prog, getShader( gl, "shader-vs" ));
|
gl.attachShader(prog, getShader( gl, "shader-fs" ));
|
gl.linkProgram(prog);
|
|
var aPosLoc = gl.getAttribLocation(prog, "aPos");
|
var aTexLoc = gl.getAttribLocation(prog, "aTexCoord");
|
gl.enableVertexAttribArray( aTexLoc );
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
gl.vertexAttribPointer(aPosLoc, 1, gl.FLOAT, gl.FALSE, 1, 0);
|
gl.vertexAttribPointer(aTexLoc, 1, gl.FLOAT, gl.FALSE, 16, 4);
|
|
prog_show = gl.createProgram();
|
gl.attachShader(prog_show, getShader( gl, "shader-vs" ));
|
gl.attachShader(prog_show, getShader( gl, "shader-fs" ));
|
var posLocation = 2;
|
gl.bindAttribLocation(prog_show, posLocation, "aPos");
|
gl.linkProgram(prog_show);
|
|
gl.useProgram(prog_show);
|
gl.drawArrays(gl.TRIANGLES, 0, 6*510*510);
|
</script>
|