claus/gist:1396250

## gistfile1.txt
<!doctype html>
<html>
	<head>
		<title>Resolution independent rendering of Bezier curves in WebGL</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="glMatrix-0.9.6.min.js"></script>

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

			uniform mat4 uMVMatrix;
			uniform mat4 uPMatrix;

			varying vec2 vBezierCoord;

			void main(void) {
				gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
				vBezierCoord = aBezierCoord;
			}
		</script>

		<script id="shader-fs-aa" type="x-shader/x-fragment">
			#extension GL_OES_standard_derivatives : enable

			#ifdef GL_ES
			precision highp float;
			#endif

			varying vec2 vBezierCoord;

			void main(void) {
				vec2 px = dFdx(vBezierCoord);
				vec2 py = dFdy(vBezierCoord);
				float fx = 2.0 * vBezierCoord.x * px.x - px.y;
				float fy = 2.0 * vBezierCoord.y * py.x - py.y;
				float sd = (vBezierCoord.x * vBezierCoord.x - vBezierCoord.y) / sqrt(fx * fx + fy * fy);
				gl_FragColor = vec4(0.0, 0.0, 1.0, clamp(0.5 - sd, 0.0, 1.0));
			}
		</script>

		<script id="shader-fs" type="x-shader/x-fragment">
			#ifdef GL_ES
			precision highp float;
			#endif

			varying vec2 vBezierCoord;

			void main(void) {
				float d = (vBezierCoord.s * vBezierCoord.s) - vBezierCoord.t;
				if(d < 0.0) {
					gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
				} else {
					discard;
				}
			}
		</script>

		<script>

			var gl;

			function initGL(canvas) {
				try {
					gl = canvas.getContext("experimental-webgl");
					gl.viewportWidth = canvas.width;
					gl.viewportHeight = canvas.height;
				} catch (e) {
				}
				if (!gl) {
					alert("Could not initialise WebGL, sorry :-(");
				}
			}

			function getShader(gl, id) {
				var shaderScript = document.getElementById(id);
				if (!shaderScript) {
					return null;
				}

				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);

				if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
					alert(gl.getShaderInfoLog(shader));
					return null;
				}

				return shader;
			}

			var shaderProgram;

			function initShaders() {
				var derivatesExt = "OES_standard_derivatives";
				var derivatesSupported = (gl.getSupportedExtensions().indexOf(derivatesExt) >= 0);
				if(derivatesSupported) {
						gl.getExtension(derivatesExt);
				}

				var fragmentShader = getShader(gl, derivatesSupported ? "shader-fs-aa" : "shader-fs");
				var vertexShader = getShader(gl, "shader-vs");

				shaderProgram = gl.createProgram();
				gl.attachShader(shaderProgram, vertexShader);
				gl.attachShader(shaderProgram, fragmentShader);
				gl.linkProgram(shaderProgram);

				if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
					alert("Could not initialise shaders");
				}

				gl.useProgram(shaderProgram);

				shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
				gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

				shaderProgram.bezierCoordAttribute = gl.getAttribLocation(shaderProgram, "aBezierCoord");
				gl.enableVertexAttribArray(shaderProgram.bezierCoordAttribute);

				shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
				shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
			}

			var mvMatrix = mat4.create();
			var pMatrix = mat4.create();

			function setMatrixUniforms() {
				gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
				gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
			}

			var triangleVertexPositionBuffer;
			var bezierCoordBuffer;

			function initBuffers() {
				squareVertexPositionBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
				vertices = [
					-1.0, -1.0,  0.0,
					 0.0,  1.0,  0.0,
					 1.0, -1.0,  0.0
				];
				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
				squareVertexPositionBuffer.itemSize = 3;
				squareVertexPositionBuffer.numItems = 3;

				bezierCoordBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, bezierCoordBuffer);
				var bezierCoords = [
					1.0,  1.0,
					0.5,  0.0,
					0.0,  0.0
				];
				gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(bezierCoords), gl.STATIC_DRAW);
				bezierCoordBuffer.itemSize = 2;
				bezierCoordBuffer.numItems = 3;
			}

			function drawScene() {
				gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
				gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

				mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
				mat4.identity(mvMatrix);
				mat4.translate(mvMatrix, [0.0, 0.0, -4.0]);

				gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
				gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

				gl.bindBuffer(gl.ARRAY_BUFFER, bezierCoordBuffer);
				gl.vertexAttribPointer(shaderProgram.bezierCoordAttribute, bezierCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

				setMatrixUniforms();
				gl.drawArrays(gl.TRIANGLES, 0, squareVertexPositionBuffer.numItems);
			}

			function webGLStart() {
				var canvas = document.getElementById("canvas");
				initGL(canvas);
				initShaders();
				initBuffers();
				gl.clearColor(0.0, 0.0, 0.0, 0.05);
				gl.enable(gl.DEPTH_TEST);
				gl.enable(gl.BLEND);
				gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
				drawScene();
			}

		</script>
	</head>

	<body onload="webGLStart();">
		<canvas id="canvas" style="border:none;" width="500" height="500"></canvas>
	</body>

</html>
	<!doctype html>
	<html>
	<head>
	<title>Resolution independent rendering of Bezier curves in WebGL</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script src="glMatrix-0.9.6.min.js"></script>

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

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	varying vec2 vBezierCoord;

	void main(void) {
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	vBezierCoord = aBezierCoord;
	}
	</script>

	<script id="shader-fs-aa" type="x-shader/x-fragment">
	#extension GL_OES_standard_derivatives : enable

	#ifdef GL_ES
	precision highp float;
	#endif

	varying vec2 vBezierCoord;

	void main(void) {
	vec2 px = dFdx(vBezierCoord);
	vec2 py = dFdy(vBezierCoord);
	float fx = 2.0 * vBezierCoord.x * px.x - px.y;
	float fy = 2.0 * vBezierCoord.y * py.x - py.y;
	float sd = (vBezierCoord.x * vBezierCoord.x - vBezierCoord.y) / sqrt(fx * fx + fy * fy);
	gl_FragColor = vec4(0.0, 0.0, 1.0, clamp(0.5 - sd, 0.0, 1.0));
	}
	</script>

	<script id="shader-fs" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision highp float;
	#endif

	varying vec2 vBezierCoord;

	void main(void) {
	float d = (vBezierCoord.s * vBezierCoord.s) - vBezierCoord.t;
	if(d < 0.0) {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	} else {
	discard;
	}
	}
	</script>

	<script>

	var gl;

	function initGL(canvas) {
	try {
	gl = canvas.getContext("experimental-webgl");
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
	} catch (e) {
	}
	if (!gl) {
	alert("Could not initialise WebGL, sorry :-(");
	}
	}

	function getShader(gl, id) {
	var shaderScript = document.getElementById(id);
	if (!shaderScript) {
	return null;
	}

	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);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert(gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}

	var shaderProgram;

	function initShaders() {
	var derivatesExt = "OES_standard_derivatives";
	var derivatesSupported = (gl.getSupportedExtensions().indexOf(derivatesExt) >= 0);
	if(derivatesSupported) {
	gl.getExtension(derivatesExt);
	}

	var fragmentShader = getShader(gl, derivatesSupported ? "shader-fs-aa" : "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	alert("Could not initialise shaders");
	}

	gl.useProgram(shaderProgram);

	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

	shaderProgram.bezierCoordAttribute = gl.getAttribLocation(shaderProgram, "aBezierCoord");
	gl.enableVertexAttribArray(shaderProgram.bezierCoordAttribute);

	shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
	shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
	}

	var mvMatrix = mat4.create();
	var pMatrix = mat4.create();

	function setMatrixUniforms() {
	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
	}

	var triangleVertexPositionBuffer;
	var bezierCoordBuffer;

	function initBuffers() {
	squareVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
	vertices = [
	-1.0, -1.0, 0.0,
	0.0, 1.0, 0.0,
	1.0, -1.0, 0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	squareVertexPositionBuffer.itemSize = 3;
	squareVertexPositionBuffer.numItems = 3;

	bezierCoordBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, bezierCoordBuffer);
	var bezierCoords = [
	1.0, 1.0,
	0.5, 0.0,
	0.0, 0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(bezierCoords), gl.STATIC_DRAW);
	bezierCoordBuffer.itemSize = 2;
	bezierCoordBuffer.numItems = 3;
	}

	function drawScene() {
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
	mat4.identity(mvMatrix);
	mat4.translate(mvMatrix, [0.0, 0.0, -4.0]);

	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, bezierCoordBuffer);
	gl.vertexAttribPointer(shaderProgram.bezierCoordAttribute, bezierCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();
	gl.drawArrays(gl.TRIANGLES, 0, squareVertexPositionBuffer.numItems);
	}

	function webGLStart() {
	var canvas = document.getElementById("canvas");
	initGL(canvas);
	initShaders();
	initBuffers();
	gl.clearColor(0.0, 0.0, 0.0, 0.05);
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
	drawScene();
	}

	</script>
	</head>

	<body onload="webGLStart();">
	<canvas id="canvas" style="border:none;" width="500" height="500"></canvas>
	</body>

	</html>