JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shader-fs" style="display: none;">
    precision mediump float;

	uniform sampler2D uTransparencySampler;
	
	varying vec2 vTextureCoord;
	
	
    void main(void) {
		float transparency = texture2D(uTransparencySampler, vTextureCoord).w;
//		gl_FragColor = vec4(vTextureCoord, 1, texture2D(uTransparencySampler, vTextureCoord).w);
		gl_FragColor = vec4(transparency, transparency, transparency, 1);
    }
</div>

<div id="shader-vs" style="display: none;">
	attribute vec3 aVertexPosition;
	attribute vec2 aTextureCoord;

	varying vec2 vTextureCoord;

    void main(void) {
        gl_Position = vec4(aVertexPosition, 1.0);
		
		vTextureCoord = aTextureCoord;
    }
</div>

    <canvas id="portail-canvas" style="border: none; cursor: none;" width="200" height="200"></canvas>
	
	<br>
	
    <select id="sWidth">
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="4">4</option>
    	<option value="8" selected>8</option>        
    	<option value="16">16</option>        
    	<option value="32">32</option>        
    	<option value="64">64</option>        
    </select>
    x
    <select id="sHeight">
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="4">4</option>
    	<option value="8" selected>8</option>        
    	<option value="16">16</option>        
    	<option value="32">32</option>        
    	<option value="64">64</option>        
    </select>

JavaScript

window["gl"] = null;
window["shaderProgram"] = null;
window["buffer"] = null;

function GetShader(id, type) {
	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;
	shader = gl.createShader(type);


	gl.shaderSource(shader, str);
	gl.compileShader(shader);

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

	return shader;
}

function RequestAnimFrame(callback, element) {
	(
		window.requestAnimationFrame
		|| window.webkitRequestAnimationFrame
		|| window.mozRequestAnimationFrame
		|| window.oRequestAnimationFrame
		|| window.msRequestAnimationFrame
		|| function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
			window.setTimeout(callback, 1000/60);
		}
	)(callback, element);
};

function Tick() {
	RequestAnimFrame(Tick);

	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	
	var sWidth = document.getElementById("sWidth");
	var sHeight = document.getElementById("sHeight");
	
	
	var width = sWidth.options[sWidth.selectedIndex].value;
	var height = sHeight.options[sHeight.selectedIndex].value;
	
	var array = Array(width);
	
	for (var x = 0; x < width; x++) {
		var subArray = Array(height);
		for (var y = 0; y < height; y++) {
			subArray[y] = Math.random() < 0.5;
			// (((x / width) + (y / height)) <= 1.0) ? 255 : 0;
		}
		array[x] = 	subArray;
	}
	
	var ar = Array();
	
	for(var y = 0; y < array[0].length; y++) {
		for(var x = 0; x < array.length; x++) {
			ar.push(array[x][(array[0].length - 1) - y] ?  255 : 0);
		}
	}
	
	console.log(array.length + "/" + array[0].length + " => " + ar.length);
	
	var texture = new Uint8Array(ar);
	gl.bindTexture(gl.TEXTURE_2D, buffer.transparencyTexture);
	gl.texImage2D(gl.TEXTURE_2D, 0,...