WebGL: Texturovat, nemíchat (#2)
HTML
<script src="http://glmatrix.net/dist/gl-matrix-min.js"></script>
<canvas></canvas>
<script id="vs" type="x-shader/x-vertex">
attribute vec2 pos;
// attribute vec2 tex_pos;
varying vec2 tex_coord;
void main(void) {
vec2 interpolation = pos;
gl_Position = vec4(pos, 0.0, 1.0);
tex_coord = interpolation;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D sampler;
varying vec2 tex_coord;
void main(void) {
gl_FragColor = texture2D(sampler, tex_coord);
}
</script>
JavaScript
// ***** CREATE PROGRAM AND SHADERS
var gl = document.querySelector("canvas").getContext("experimental-webgl");
var str = document.querySelector("#vs").textContent;
// vertex shader
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, str);
gl.compileShader(vs);
// fragment shader
var str = document.querySelector("#fs").textContent;
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, str);
gl.compileShader(fs);
// create program from shaders
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
// clear with white
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.clearColor(1.0, 1.0, 1.0, 0);
// ***** ----------------------------------------
// ***** UPLOAD IMAGE
var texture = gl.createTexture();
var image = document.createElement("img");
image.src =...