JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

		<script id="fragment_shader_screen" type="x-shader/x-fragment">

			varying vec2 vUv;
			uniform sampler2D tDiffuse;

			void main() {

				gl_FragColor = texture2D( tDiffuse, vUv );

			}

		</script>

		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">

			varying vec2 vUv;
			uniform float time;

			void main() {

				float r = vUv.x;
				if( vUv.y < 0.5 ) r = 0.0;
				float g = vUv.y;
				if( vUv.x < 0.5 ) g = 0.0;

				gl_FragColor = vec4( r, g, time, 1.0 );

			}

		</script>

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

			varying vec2 vUv;

			void main() {

				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

CSS

body {
	  margin: 0;
}

JavaScript

var container, stats;

var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var rtTexture, material, quad;

var delta = 0.01;

//n3d:
var noDepthMaterial = null
var noDepthGeometry = null
var noDepthMesh = null

init();
animate();

function init() {

	container = document.getElementById( 'container' );

	camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 100;

	cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
	cameraRTT.position.z = 100;

	//

	scene = new THREE.Scene();
	sceneRTT = new THREE.Scene();
	sceneScreen = new THREE.Scene();

	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 0, 1 ).normalize();
	sceneRTT.add( light );

	light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
	light.position.set( 0, 0, -1 ).normalize();
	sceneRTT.add( light );

	rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );

	material = new THREE.ShaderMaterial( {

		uniforms: { time: { value: 0.0 } },
		vertexShader: document.getElementById( 'vertexShader' ).textContent,
		fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent

	} );

	var materialScreen = new THREE.ShaderMaterial( {

		uniforms: { tDiffuse: { value: rtTexture.texture } },
		vertexShader: document.getElementById( 'vertexShader' ).textContent,
		fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,

		depthWrite: false

	} );

	var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );

	quad = new THREE.Mesh( plane, material );
	quad.position.z = -100;
	sceneRTT.add( quad );

	var geometry...