JSFiddle - React, Tailwind, and code Playground

by Horsetopus

HTML

<script type="x-shader/x-vertex" id="vertexShaderZoom">
    varying vec2 vUv;
        void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script type="x-shader/x-fragment" id="fragmentShaderZoom">
uniform sampler2D tDiffuse;
uniform vec2 center;
uniform float strength;
uniform vec2 resolution;
varying vec2 vUv;
float random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}
void main(){
	vec4 color=vec4(0.0);
	float total=0.0;
	vec2 toCenter=center-vUv*resolution;
	float offset=random(vec3(12.9898,78.233,151.7182),0.0);
	for(float t=0.0;t<=40.0;t++){
		float percent=(t+offset)/40.0;
		float weight=4.0*(percent-percent*percent);
		vec4 sample=texture2D(tDiffuse,vUv+toCenter*percent*strength/resolution);
		sample.rgb*=sample.a;
		color+=sample*weight;
		total+=weight;
	}
	gl_FragColor=color/total;
	gl_FragColor.rgb/=gl_FragColor.a+0.00001;
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/TexturePass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ClearPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var renderer, composer;

var perspectiveScene, perspectiveCamera;
var cubeTexture, cubeMaterial, cubeGeometry, cube;

var orthogonalScene, orthogonalCamera;
var frameMaterial, frameGeometry, frame;

//var perspectiveRenderPass;
//var orthogonalRenderPass;
//var shaderPass;


class FrameGeometry extends THREE.ShapeGeometry {

	constructor( w, h, r ) {
  
  		var shape = new THREE.Shape();
      shape.moveTo( r, 0 );
      shape.lineTo( w - r, 0 );
      shape.bezierCurveTo( w - r, 0, w, 0, w, r );
      shape.lineTo( w, h - r );
      shape.bezierCurveTo( w, h - r, w, h, w - r, h );
      shape.lineTo( r, h );
      shape.bezierCurveTo( r, h, 0, h, 0, h - r );
      shape.lineTo( 0, r );
      shape.bezierCurveTo( 0, r, 0, 0, r, 0 );
      super( shape );
  }
}

function onResize( e ) {
	
	renderer.setSize( window.innerWidth, window.innerHeight );
  
  perspectiveCamera.aspect = window.innerWidth / window.innerHeight;
  perspectiveCamera.updateProjectionMatrix();
  
  orthogonalCamera.right = window.innerWidth;
  orthogonalCamera.bottom = -window.innerHeight;
  orthogonalCamera.updateProjectionMatrix();
  
  frame.position.set( ( window.innerWidth / 2 ) - 150, -( window.innerHeight / 2 ) - 150, 0 );
}

function render() {
	
	cube.rotation.x += 0.01;
  cube.rotation.z += 0.02;
	
  renderer.clear();
	composer.render();
  
  //renderer.render( perspectiveScene, perspectiveCamera );
  
  requestAnimationFrame( render );
}

( function() {
	
	'use strict';
	
  
  
  perspectiveCamera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	
  perspectiveScene = new THREE.Scene();
  perspectiveScene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	
  THREE.ImageUtils.crossOrigin = '';
  cubeTexture = THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/crate.gif" );
  cubeMaterial = new THREE.MeshBasicMaterial( { map:cubeTexture } );
  cubeGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
  cube = new THREE.Mesh(...