How to draw Cubic Bezier in WebGL
<p>I'm trying to make SVG (and other 2D vector graphics) renderer in WebGL.<br>
So far, I've figured out how to draw Quadratic Bezier with a triangle.</p>

<p>Here is the code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var createProgram = function ( vsSource, fsSource ) {

  var vs = gl.createShader( gl.VERTEX_SHADER );
  gl.shaderSource( vs, vsSource );
  gl.compileShader( vs );

  var fs = gl.createShader( gl.FRAGMENT_SHADER );
  gl.shaderSource( fs, fsSource );
  gl.compileShader( fs );

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

  return program;

}

var vsSource = `
precision mediump float;
attribute vec2 vertex;
attribute vec2 attrib;
varying vec2 p;
void main(void) {
  gl_Position = vec4(vertex, 0.0, 1.0);
  p = attrib;
}
`;

var fsSource = `
precision mediump float;
varying vec2 p;
void main(void) {
  if (p.x*p.x - p.y &gt; 0.0) {
    // discard;
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
}
`;


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

gl.clearColor( 0.5, 0.5, 0.5, 1.0 );

var shapeData = [
  -0.5, 0,
   0.5, 0,
   0,   1
];

var curveAttr = [
  0,   0,
  1,   1,
  0.5, 0
];



var program = createProgram( vsSource, fsSource );
gl.useProgram( program );
var vertexLoc1 = gl.getAttribLocation( program, 'vertex' );
var attribLoc1 = gl.getAttribLocation( program, 'attrib' );

gl.clear( gl.COLOR_BUFFER_BIT );



gl.useProgram( program );
gl.enableVertexAttribArray(vertexLoc1);
gl.enableVertexAttribArray(attribLoc1);

var vertexBuffer1 = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer1 );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( shapeData ), gl.STATIC_DRAW );
gl.vertexAttribPointer(vertexLoc1, 2, gl.FLOAT, false, 0, 0);

var vertexBuffer2 = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer2 );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( curveAttr ), gl.STATIC_DRAW );
gl.vertexAttribPointer(attribLoc1, 2, gl.FLOAT, false, 0,0);

gl.drawArrays( gl.TRIANGLES, 0, shapeData.length / 2 );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>My question is how to draw Cubic Bezier, like above.</p>

<p>I guess it should be done with 2 or a few triangles.
And also, I understand there is noway to convert Cubic Bezier to Quadratic.</p>