WebGL: Texturovat, nemíchat (#2)

by Ondřej Žára

HTML

<script src="http://glmatrix.net/dist/gl-matrix-min.js"></script>
<canvas></canvas>

<script id="vs" type="x-shader/x-vertex">
attribute vec3 pos;
attribute vec2 texture;

uniform mat4 MMatrix;
uniform mat4 VMatrix;
uniform mat4 PMatrix;

varying vec2 varyingTexture;
    
void main(void) {
	gl_Position = PMatrix * VMatrix * MMatrix * vec4(pos, 1.0);
    varyingTexture = texture;
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 varyingTexture;
uniform sampler2D sampler;	
    
void main(void) {
	gl_FragColor = texture2D(sampler, varyingTexture);
}
</script>

JavaScript

var gl = document.querySelector("canvas").getContext("experimental-webgl");

var str = document.querySelector("#vs").textContent;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, str);
gl.compileShader(vs);
	
var str = document.querySelector("#fs").textContent;
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, str);
gl.compileShader(fs);

var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

var mmatrix = mat4.create();
mat4.scale(mmatrix, mmatrix, vec3.fromValues(0.3, 0.3, 0.3));
var mmLoc = gl.getUniformLocation(program, "MMatrix");

var vmatrix = mat4.create();
mat4.translate(vmatrix, vmatrix, vec3.fromValues(0, 0, -10));
var vmLoc = gl.getUniformLocation(program, "VMatrix");
gl.uniformMatrix4fv(vmLoc, false, vmatrix);

var pmatrix = mat4.create();
mat4.perspective(pmatrix, Math.PI/3, 2, 0.1, 100);
var pmLoc = gl.getUniformLocation(program, "PMatrix");
gl.uniformMatrix4fv(pmLoc, false, pmatrix);

var samplerLoc = gl.getUniformLocation(program, "sampler");
gl.uniform1i(samplerLoc, 0);

gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.8, 0.6, 0.2, 1);

var texture = null;
var image = document.createElement("img");
image.crossOrigin = "anonymous";
image.src = "http://bespin.cz/~ondras/webgl/metal.jpg";
image.onload = function() {
    texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    gl.generateMipmap(gl.TEXTURE_2D);
}


var render = function() {
	gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);

    mat4.rotateY(mmatrix, mmatrix, 0.03);
    gl.uniformMatrix4fv(mmLoc, false, mmatrix);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   ...