WebGL: Šrouby a matice (#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 vec3 color;
varying vec3 varyingColor;

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

void main(void) {
	gl_Position = PMatrix * VMatrix * MMatrix * vec4(pos, 1.0);
	varyingColor = color;
}
</script>

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

void main(void) {
	gl_FragColor = vec4(varyingColor, 1.0);
}
</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 colorLoc = gl.getAttribLocation(program, "color");
gl.enableVertexAttribArray(colorLoc);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
var colors = [
	 1.0, 0.0, 0.0,
	 0.0, 1.0, 0.0,
	 0.0, 0.0, 1.0,
	 1.0, 1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
gl.vertexAttribPointer(colorLoc, 3, gl.FLOAT, false, 0, 0);

var posLoc = gl.getAttribLocation(program, "pos");
gl.enableVertexAttribArray(posLoc);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var vertices = [
	 0.0,  1.0,  0.0, // "nahore"
	 0.0,  0.0, -1.0, // "vzadu"
	 1.0, -1.0,  1.0, // "vpravo"
	-1.0, -1.0,  1.0  // "vlevo"
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
var indices = [0, 1, 2, 0, 1, 3, 1, 2, 3, 0, 2, 3];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

var mmatrix = mat4.create();
mat4.scale(mmatrix, mmatrix, vec3.fromValues(0.5, 0.8, 0.8));
var mmLoc = gl.getUniformLocation(program, "MMatrix");
gl.uniformMatrix4fv(mmLoc, false, mmatrix);

var vmLoc = gl.getUniformLocation(program, "VMatrix");
gl.uniformMatrix4fv(vmLoc, false, mat4.create());

var pmLoc = gl.getUniformLocation(program, "PMatrix");
gl.uniformMatrix4fv(pmLoc, false,...