JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://windkiller.g6.cz/webgl-libs/MV.js"></script>
<script src="http://windkiller.g6.cz/webgl-libs/webgl-utils.js"></script>
<script src="http://windkiller.g6.cz/webgl-libs/initShaders.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
varying vec2 vUV;
attribute vec4 vPosition;
void main() {
vUV = vec2(0.0, 1.0);
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vUV;
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
</script>
<canvas id="gl-canvas" width="512" height="512">Oops ... your browser doesn't support the HTML5 canvas element</canvas>
JavaScript
var gl;
var vertexPositions;
var pi = 3.14159;
var x = 2*pi/100;
var y = 2*pi/100;
var r = 0.05;
points = [ vec2(0.4, 0.8) ];
window.onload = function init() {
var canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("WebGL isn't available");
}
// The Vertices
var DEG_TO_RAD = 0.0174532925;
var r = 0.5;
var middle = vec2(0.0, 0.0);
// build simple circle
function buildCircle(center, r) {
var points = [];
points.push(middle);
for (i = 0; i <= 200; i++){
points.push(middle + vec2(
r*Math.cos(i*2*Math.PI/200),
r*Math.sin(i*2*Math.PI/200)
));
}
vertexPositions = points;
}
buildCircle(middle, r);
//
// Configure WebGL
//
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.3, 0.3, 0.3, 1.0);
// Load shaders and initialize attribute buffers
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexPositions), gl.STATIC_DRAW);
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
render();
};
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexPositions.length);
}