JSFiddle - React, Tailwind, and code Playground

by SergeJcqmn

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://serge.snakeman.be/Demo/Events.js"></script>
<script src="serge.snakeman.be/Demo/Loader.js"></script>
<script src="http://serge.snakeman.be/Demo/General.js"></script>
<body onload="loaded()" style="background-color: #988;">
    
<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;

	uniform sampler2D uSampler;
	uniform sampler2D uTransparencySampler;
	uniform vec2 uPMousePos;
	uniform float uPIdentifier;
	uniform bool uPBlink;
	
	varying vec2 vTextureCoord;
	
	
    void main(void) {
		if ((gl_FragCoord.x == uPMousePos.x) && (gl_FragCoord.y == uPMousePos.y)) {
			gl_FragColor = vec4(vTextureCoord, uPIdentifier, 1.0);
		}
		else if (abs(gl_FragCoord.x - uPMousePos.x) <= 1.0 && abs(gl_FragCoord.y -uPMousePos.y) <= 1.0) {
			gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
		}
		else if (uPBlink) {
			gl_FragColor = vec4(1.0, 1.0, 1.0, texture2D(uSampler, vTextureCoord).w * texture2D(uTransparencySampler, vTextureCoord).w);
		}
		else 
		{
			gl_FragColor = texture2D(uSampler, vTextureCoord) * vec4(1, 1, 1, texture2D(uTransparencySampler, vTextureCoord).w);
		}
		
		//gl_FragColor = vec4(texture2D(uTransparencySampler, vTextureCoord).w, 1, 1, 1.0);
		
		
		
		
		// if (mod(ceil(gl_FragCoord.y / 4.0), 2.0) == 1.0) {
		// 	gl_FragColor = vec4(fract(gl_FragCoord.y), 0.0, 0.0, 1.0);
		// } else {
		// 	gl_FragColor = vec4(0.5, 0.0, 0.0, 1.0);
		// }
		
		// gl_FragColor = texture2D(uTransparencySampler, vTextureCoord);
		// gl_FragColor = texture2D(uTransparencySampler, vTextureCoord);
		// gl_FragColor = vec4(vTextureCoord, 1.0, 1.0);
		// gl_FragColor = vec4(1.0, 1.0, 0.0, 0.5);
    }
</script>

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

    uniform mat4 uPMatrix;
	
	varying vec2 vTextureCoord;

    void main(void) {
		vec3 vPos =...

JavaScript

WebGL = new EventHandler();

WebGL.gl = null;
WebGL.shaderProgram = null;
WebGL.vSync = true;
WebGL.time = 0;
WebGL.frame = 0;

WebGL.Events = {
	"PrepareSceen" : "PrepareSceen"
};

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

WebGL.GetShader = function(id) {
	var gl = WebGL.gl;

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

WebGL.InitShaders = function() {
	var gl = WebGL.gl;
	var shaderProgram = WebGL.shaderProgram = gl.createProgram();
	
	var fragmentShader = WebGL.GetShader("shader-fs");
	var vertexShader = WebGL.GetShader("shader-vs");
	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.vertexTranslationAttribute = gl.getAttribLocation(shaderProgram,...