WebGL: RGB trojúhelník

by Ondřej Žára

HTML

<canvas></canvas>

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

void main(void) {
	gl_Position = vec4(pos, 0.0, 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
];
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.5,  0.5,
	-0.5,  0.5,
	 0.0, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);

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

gl.lineWidth(3);
gl.drawElements(gl.LINES, 6, gl.UNSIGNED_BYTE, 0);