JSFiddle - React, Tailwind, and code Playground

by lb18

HTML

<!DOCTYPE html>
<!-- Fuente: https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_024 -->
<html>
	<head>
		<style>
			html,body{margin:0px; padding:0px; width:100%; height:100%;}
			body{background-color:#404040;}
			canvas{border:0px solid black;}
			div{display:flex; width:100%; height:100%; align-items:center; justify-content:center;}
			#lblFPS{position:absolute; top:0px; left:0px; background:gray; color:white; font-weight:bold; padding:5px 5px; width:40px; text-align:center; font-family:arial; font-size:13px;}
		</style>

		<!--script src="fungi.core.js"></script>
		<script src="fungi.primatives.js"></script>
		<script src="fungi.CameraMouseCtrl.js"></script>
		<script src="fungi.Debug.js"></script-->

		<script>
			var gCamera,gCameraCtrl,gRenderList,gRLoop,gDebugLine,gGridFloor,gShader,gModel;
			var gLblFPS;

			var fbo, cID = 100, colorID, blankID;

			window.addEventListener("load",function(){
				//.......................................................
				//Setup and Preperations
				colorID = idToColor(cID);
				blankID = idToColor(0);

				Fungi.Init("FungiCanvas").fClearColor("FFFFFF").fFitScreen(1,1).fClear();

				Fungi.Render.onItemRendered = function(itm){
					if(itm === gGridFloor) return;
					//Optimize by only rendering to FBO when mouse is is down.
					gShader.setUniforms("uColorID",colorID);
						Fungi.Shaders.FBO.activate(fbo);
							itm.draw();
						Fungi.Shaders.FBO.deactivate();
					gShader.setUniforms("uColorID",blankID);
				}

				fbo = Fungi.Shaders.FBO.colorDepthFBO("picking");

				//.......................................................
				//Setup Camera
				var uboTransform = Fungi.Shaders.UBO.createTransformUBO();
				gCamera = new Fungi.CameraOrbit().setPosition(0,0.5,5).setEulerDegrees(-15,45,0);
				
				gCameraCtrl = new Fungi.KBMCtrl()
					.addHandler("camera",new Fungi.KBMCtrl_Viewport(gCamera),true)
					.addHandler("pick",new KBMCtrl_Picking())

					.setDownOverride(function(e,ctrl,x,y){
						var...

JavaScript

//Fuente: https://github.com/sketchpunk/FunWithWebGL2/tree/master/lesson_024
var Fungi = (function(){
	/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
	Private Scope Variables and Constants
	<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
	const DEG2RAD = Math.PI/180;		//Cache result, one less operation to do for each update.

	var	gl = null,
		CULLING_STATE = true,			//Global state if the feature is enabled
		BLENDING_STATE = false;			//Same---

	/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
	<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
	function Init(canvasID){
		if(Fungi.gl != null) return Fungi.gl;

		var canvas = document.getElementById(canvasID);
		gl = canvas.getContext("webgl2");
		if(!gl){ console.error("WebGL context is not available."); return null; }

		//...................................................
		//Setup GL, Set all the default configurations we need.
		gl.cullFace(gl.BACK);								//Back is also default
		gl.frontFace(gl.CCW);								//Dont really need to set it, its ccw by default.
		gl.enable(gl.DEPTH_TEST);							//Shouldn't use this, use something else to add depth detection
		gl.enable(gl.CULL_FACE);							//Cull back face, so only show triangles that are created clockwise
		gl.depthFunc(gl.LEQUAL);							//Near things obscure far things
		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);	//Setup default alpha blending
		//gl.clearColor(1.0,1.0,1.0,1.0);	//Set clear color

		//...................................................
		//Methods
		//Reset the canvas with our set background color.	
		gl.fClear = function(){ this.clear(this.COLOR_BUFFER_BIT | this.DEPTH_BUFFER_BIT); return this; };
		gl.fClearColor = function(hex){
			var a = Util.rgbArray(hex);
			gl.clearColor(a[0],a[1],a[2],1.0);
			return this;
		}

		//Create and fill our Array buffer.
		gl.fCreateArrayBuffer = function(floatAry,isStatic,isUnbind){
			if(isStatic...