JSFiddle - React, Tailwind, and code Playground

by headchem

HTML

<script id="2d-vertex-shader" type="x-shader/x-vertex">

			attribute vec3 aVertexPosition;
			attribute vec4 aVertexColor;

			varying lowp vec4 vColor;

			void main(void) {
				gl_Position = vec4(aVertexPosition, 1.0);
				
				vColor = aVertexColor;
			}
		</script>

		<script id="2d-fragment-shader" type="x-shader/x-fragment">
			
			varying lowp vec4 vColor;

			void main(void) {
				gl_FragColor = vColor;
			}
		</script>
		
		<canvas id="mycanvas" width="500" height="500"></canvas>

JavaScript

var canvas;
var gl;
var triangleProgram;

var convertedVerts = [];
var vertColors = [];

var vertexPositionAttribute;
var vertexColorAttribute;

var verticesBuffer;

window.onload = function() {
	
	canvas = document.getElementById('mycanvas');

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

	//gl.enable(gl.DEPTH_TEST); // to do proper z-index, set this

	// these are the settings for basic overlay transparency
	gl.disable(gl.DEPTH_TEST);
	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

	var vertexShaderHandle = gl.createShader(gl.VERTEX_SHADER);
	var fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);
	
	gl.shaderSource(vertexShaderHandle, document.getElementById('2d-vertex-shader').text);		
	gl.shaderSource(fragmentShaderHandle, document.getElementById('2d-fragment-shader').text);		
		
	gl.compileShader(vertexShaderHandle);
	gl.compileShader(fragmentShaderHandle);
	
	triangleProgram = gl.createProgram();
	gl.attachShader(triangleProgram, vertexShaderHandle);
	gl.attachShader(triangleProgram, fragmentShaderHandle);
	gl.linkProgram(triangleProgram);
	
	gl.useProgram(triangleProgram);
	
	verticesBuffer = gl.createBuffer();
	
	vertexPositionAttribute = gl.getAttribLocation(triangleProgram, "aVertexPosition");
	gl.enableVertexAttribArray(vertexPositionAttribute);
	
	vertexColorAttribute = gl.getAttribLocation(triangleProgram, "aVertexColor");
	gl.enableVertexAttribArray(vertexColorAttribute);
	
	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(0, 0.5, 0, 1);
	
	/*
	setInterval(function(){
		drawShapes();
		render();
	}, 1000/60);
	*/
	
	drawShapes();
	render();
	
};

function drawShapes() {
	convertedVerts = [];
	
	for(var i = 0; i < 1000; i++) {
		var offsetX = Math.random() * canvas.width;
		var offsetY = Math.random() * canvas.height;
		
		var randRed = parseInt(Math.random() * 255);
		var randGreen = parseInt(Math.random() * 255);
		var randBlue = parseInt(Math.random() *...