cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <video autoplay="true" id="videoElement" width="512" height="512" crossorigin="anonymous"></video>

<div class="wrapper">
  <div class="controls">
    <button class="button js-button-image" id="image">Image</button>
    <button class="button js-button-video" id="video">Video</button>
    <button class="button js-button-webcam" id="webcam">Webcam</button>
  </div>
</div>

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

<!-- Blur and scale fragment shader -->
<script id="frag-shader" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D tDiffuse;
  uniform vec2 uResolution;
  uniform float uBackgroundRatio;
	
  // Matt DesLauriers' gaussian blur function
  // https://github.com/Jam3/glsl-fast-gaussian-blur
  vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
    vec4 color = vec4(0.0);
    vec2 off1 = vec2(1.411764705882353) * direction;
    vec2 off2 = vec2(3.2941176470588234) * direction;
    vec2 off3 = vec2(5.176470588235294) * direction;
    color += texture2D(image, uv) * 0.1964825501511404;
    color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;
    color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;
    color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;
    color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;
    color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;
    color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;
    return color;
  }

  vec2 texCoord() {
    return vec2(gl_FragCoord.x, gl_FragCoord.y) / uResolution;
  }

  vec2 pixel() {
    return vec2(1.0,1.0) / uResolution;
  }

  // scales the bg up and proportionally to fill the container
  vec2 scaledTexCoord() {
    float ratio = uResolution.x / uResolution.y;

    vec2 scale = vec2(1.0, 1.0);
    vec2 offset = vec2(0.0, 0.0);

    float ratioDelta = ratio - uBackgroundRatio;

    if (ratioDelta >= 0.0){
      scale.y = (1.0 + ratioDelta);
      offset.y = ratioDelta / 2.0;
    } else {
      scale.x = (1.0 - ratioDelta);
      offset.x =- ratioDelta / 2.0;
    }
    return (texCoord() + offset) / scale;
  }

  void main() {
    vec2 uv = scaledTexCoord();

    gl_FragColor = blur13(tDiffuse, uv, vec2(512, 512), vec2(1, 0));;
  }
</script>


<!-- Ice effect fragment shader -->
<script type="x-shader/x-fragment" id="ice-effect">
  precision mediump float;

  uniform sampler2D uBump;
  uniform sampler2D tDiffuse;
  uniform vec2 uResolution;

  varying vec2 vUv;

  void main() {
    vec2 uv = vUv;

    vec3 bump = texture2D(uBump, uv).rgb;
    float displace = dot(bump, vec3(0.3, 0.6, 0.1));
    displace = (displace - 0.5) * 0.1;

    gl_FragColor = texture2D(tDiffuse, uv + vec2(displace));
  }

</script>


<!-- X Distortion shader -->
<script id="x-distortion" type="x-shader/x-fragment">
  precision mediump float;

  uniform sampler2D uDistortionMap;
  uniform sampler2D tDiffuse;

  uniform vec2 uResolution;

  uniform float uMinRefraction;
  uniform float uMaxRefraction;
  uniform float uRefractionDelta;

  varying vec2 vUv;

  vec2 pixel() {
    return vec2(1.0, 1.0) / uResolution;
  }

  vec4 fgColor(float x, float y) {
    return texture2D(uDistortionMap,
      vUv + (pixel() * vec2(x, y))
    );
  }

  void main() {
    vec2 uv = vUv;

    vec4 cur = fgColor(0.0, 0.0);
    float d = cur.b;
    float x = cur.g;
    float y = cur.r;

    vec2 refraction = (vec2(x, y) - 0.0) * 2.0;
    vec2 refractionPos = uv
        + (pixel() * refraction * (uMinRefraction + (d * uRefractionDelta)));

    vec4 tex = texture2D(tDiffuse, refractionPos);

    vec4 fg = vec4(tex.rgb, 1.0);

    gl_FragColor = fg;
  }
</script>
            
          
!
            
              html, body {
  margin: 0;
}

#videoElement {
  position: absolute;
  top: 0;
  right: 0;

  z-index: 0;
  
  opacity: 0;

  pointer-events: none;
}

.wrapper {
  position: relative;

  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100vw;
  height: 100vh;
}

canvas {
  max-width: calc(100vw - 100px);
  max-height: calc(100vh - 100px);
}

.controls {
  margin-bottom: 25px;
}

.button {
  display: inline-block;
  padding: 11px 24px;
  margin: 0 10px;

  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;

  text-transform: uppercase;

  color: #5b5a5a;
  background: #f4f4f4;

  border: 0;
  border-radius: 5px;

  cursor: pointer;
}

.button.disabled {
  opacity: 0.3;
}

.button.active {
  background: #c7c7c7;
}
            
          
!
            
              var XX = function() {
  this.renderer_ = null;
  
  this.camera_ = null;
  
  this.scene_ = null;

  this.video_ = null;

  this.bgTexture_ = null;

  this.iceBumpMap_ = null;

  this.xDistortionTexture_ = null;

  this.mesh_ = null;

  this.composer_ = null;

  this.xDistorionShader_ = null;

  this.iceShader_ = null;

  this.currentlyVideoTexture_ = false;

  this.activeMedia_ = null;
};

XX.prototype.init = function () {
  this.scene_ = new THREE.Scene();

  if (window.innerWidth > window.innerHeight) {
    this.width_ = window.innerHeight;
    this.height_ = window.innerHeight;
  } else {
    this.width_ = window.innerWidth;
    this.height_ = window.innerWidth;
  }
  
  this.camera_ = new THREE.PerspectiveCamera(75, this.width_ / this.height_, 0.1, 100000);
  this.camera_.position.z = -0.1;
  this.camera_.lookAt(new THREE.Vector3(0, 0, 0));
  this.scene_.add(this.camera_);
  
  this.renderer_ = new THREE.WebGLRenderer({
    antialias: true
  });
  
  this.renderer_.setSize(this.width_, this.height_, false);
  //this.renderer_.setPixelRatio(window.devicePixelRatio);

  this.video_ = document.querySelector("#videoElement");
  var wrapper = document.querySelector('.wrapper');
  
  wrapper.appendChild(this.renderer_.domElement);

  var loader2 = new THREE.TextureLoader();
  loader2.crossOrigin = 'anonymous';
  loader2.load('https://res.cloudinary.com/dwhmxnhi9/image/upload/v1489310991/bump_dnbd3r.jpg', this.iceBumpMapLoaded_.bind(this));

  var loader3 = new THREE.TextureLoader();
  loader3.crossOrigin = 'anonymous';
  loader3.load('https://res.cloudinary.com/dwhmxnhi9/image/upload/v1489312258/x3_dpj4qo.jpg', this.xLoaded_.bind(this));
  console.log(document.URL.indexOf('fullcpgrid') === -1);
  if (this.canPlayVideo_()  && document.URL.indexOf('fullcpgrid') === -1) {
    this.initiateVideoMode_();
  } else {
    this.initiateImageMode_();
  }
  
  this.initControls_();

  window.addEventListener('resize', this.onResize_.bind(this), false);

  this.render_();
};


XX.prototype.initControls_ = function() {
  var imageButton = document.querySelector('.js-button-image');
  var videoButton = document.querySelector('.js-button-video');
  var webcamButton = document.querySelector('.js-button-webcam');

  if (!this.webcamSupported_()) {
    webcamButton.classList.add('disabled');
  }

  if (!this.canPlayVideo_()) {
    videoButton.classList.add('disabled');
  }

  imageButton.addEventListener('click', this.initiateImageMode_.bind(this), false);
  videoButton.addEventListener('click', this.initiateVideoMode_.bind(this), false);
  webcamButton.addEventListener('click', this.initiateWebcamMode_.bind(this), false);
};


XX.prototype.updateOptions_ = function(media) {
  if (this.activeMedia_) {
    document.getElementById(this.activeMedia_).classList.remove('active');
  }

  document.getElementById(media).classList.add('active');
  this.activeMedia_ = media;
};


XX.prototype.initiateImageMode_ = function(e) {
  this.updateOptions_('image');
  this.stopVideo_();
  var loader = new THREE.TextureLoader();
  loader.crossOrigin = 'anonymous';
  loader.load('https://res.cloudinary.com/dwhmxnhi9/image/upload/v1489693417/diffuse8_jtyseg.jpg', function(tex) {
    this.bgTexture_ = tex;
    this.bgTexture_.needsUpdate = true;
    this.currentlyVideoTexture_ = false;
    this.updateDiffuse_(this.bgTexture_);
  }.bind(this));
};


XX.prototype.initiateVideoMode_ = function(e) {

  if (!this.canPlayVideo_()) {
    alert('Your browser does not support inline video or cannot write to a texture with a video from a different domain.');
    return;
  }

  this.updateOptions_('video');

  this.video_.src = 'https://res.cloudinary.com/dwhmxnhi9/video/upload/v1489310638/montage_p9pwnb.mp4';
  this.video_.muted = true;
  this.video_.loop = true;
  this.video_.load();
  this.video_.play();

  this.bgTexture_ = new THREE.Texture(this.video_);
  this.bgTexture_.minFilter = THREE.LinearFilter;
	this.bgTexture_.magFilter = THREE.LinearFilter;
  this.currentlyVideoTexture_ = true;
  this.updateDiffuse_(this.bgTexture_);
};


XX.prototype.initiateWebcamMode_ = function(e) {
  if (!this.webcamSupported_()) {
    alert('Webcam is not supported on your device unfortunately.');
    return;
  }

  if (location.protocol != 'https:') {
    if (window.confirm('Webcam is not supported over http, click OK to be directed to https')) { 
      var url = (window.location != window.parent.location)
            ? document.referrer
            : document.location.href;
      
      var secureUrl = 'https:' + url.substring(5);
      window.open(secureUrl);
    } else {
      return;
    }
  }
  this.updateOptions_('webcam');
  console.log('initiating webcam mode');
  this.setupCamera_();
};


XX.prototype.setupCamera_ = function() {
  if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, this.handleVideo_.bind(this), this.videoError_.bind(this));
  }
};

XX.prototype.handleVideo_ = function(stream) {
  this.video_.src = window.URL.createObjectURL(stream);

  this.bgTexture_ = new THREE.Texture(this.video_);
  this.bgTexture_.minFilter = THREE.LinearFilter;
	this.bgTexture_.magFilter = THREE.LinearFilter;
  this.currentlyVideoTexture_ = true;
  this.updateDiffuse_(this.bgTexture_);
};


XX.prototype.videoError_ = function(e) {
  console.log('video error', e);
};


XX.prototype.stopVideo_ = function() {
  if (this.video_.playing) {
    this.video_.stop();
  }
};


XX.prototype.bgLoaded_ = function(tex) {
  this.bgTexture_ = tex;
  if (this.iceBumpMap_ && this.xDistortionTexture_) {
    this.createPlane_();
    this.setupPostProcessing_();
  }
};


XX.prototype.iceBumpMapLoaded_ = function(tex) {
  this.iceBumpMap_ = tex;
  if (this.xDistortionTexture_) {
    this.setupPostProcessing_();
  }
};


XX.prototype.xLoaded_ = function(tex) {
  this.xDistortionTexture_ = tex;

  if (this.iceBumpMap_) {
    this.setupPostProcessing_();
  }
};


XX.prototype.updateDiffuse_ = function(tex) {
  if (!this.mesh_) {
    this.createPlane_();
  } else {
    this.mesh_.material.uniforms.tDiffuse.value = tex;
  }
};



XX.prototype.setupPostProcessing_ = function() {
  this.composer_ = new THREE.EffectComposer(this.renderer_);
  var renderPass = new THREE.RenderPass(this.scene_, this.camera_);
  this.composer_.addPass(renderPass);

  this.iceShader_ = {
    vertexShader: document.getElementById('vert-shader').innerText,
    fragmentShader: document.getElementById('ice-effect').innerText,
    uniforms: {
      uBump: {
        type: 't',
        value: this.iceBumpMap_
      },
      uResolution: {
        type: 'v2',
        value: new THREE.Vector2(this.width_, this.height_)
      },
      tDiffuse: {
        type: 't',
        value: null
      },
    }
  };

  var ice = new THREE.ShaderMaterial(this.iceShader_);
  var iceEffect = new THREE.ShaderPass(ice);
  this.composer_.addPass(iceEffect);

  var maxRefraction = 32;
  var minRefraction = 16;
  this.xDistorionShader_ = {
    vertexShader: document.getElementById('vert-shader').innerText,
    fragmentShader: document.getElementById('x-distortion').innerText,
    uniforms: {
      uDistortionMap: {
        type: 't',
        value: this.xDistortionTexture_
      }, 
      uResolution: {
        type: 'v2',
        value: new THREE.Vector2(this.width_, this.height_)
      }, 
      uMinRefraction: {
        type: 'f',
        value: minRefraction
      },
      uMaxRefraction: {
        type: 'f',
        value: maxRefraction
      },
      uRefractionDelta: {
        type: 'f',
        value: maxRefraction - minRefraction
      },
      tDiffuse: {
        type: 't',
        value: null
      }
    }
  };

  var xDistortionMaterial = new THREE.ShaderMaterial(this.xDistorionShader_);

  var xDistorion = new THREE.ShaderPass(xDistortionMaterial);
  xDistorion.renderToScreen = true;

  this.composer_.addPass(xDistorion);
};


XX.prototype.createPlane_ = function() {

  var aspectRatio = this.renderer_.domElement.height / this.renderer_.domElement.width;

  var geom = new THREE.PlaneGeometry(1, 1 * aspectRatio, 1, 1);
  var material = new THREE.ShaderMaterial({
    vertexShader: document.getElementById('vert-shader').innerText,
    fragmentShader: document.getElementById('frag-shader').innerText,
    uniforms: {
      tDiffuse: {
        type: 't',
        value: this.bgTexture_
      },
      uBackgroundRatio: {
        type: 'f',
        value: this.bgTexture_.image.width / this.bgTexture_.image.height
      },
      uResolution: {
        type: 'v2',
        value: new THREE.Vector2(this.renderer_.domElement.width, this.renderer_.domElement.height)
      }
    }
  });

  this.mesh_ = new THREE.Mesh(geom, material);
  this.mesh_.rotation.y = 180 * Math.PI / 180;
  this.scene_.add(this.mesh_);
};


XX.prototype.render_ = function() {
  // this.stats_.begin();

  //this.renderer_.render(this.scene_, this.camera_);

  if (this.composer_) {
    this.composer_.render();
  }

  
  if (this.currentlyVideoTexture_) {
    this.bgTexture_.needsUpdate = true;  
  }
  
  
  // this.stats_.end();
  
  requestAnimationFrame(this.render_.bind(this));
};

XX.prototype.onResize_ = function() {
  if (window.innerWidth > window.innerHeight) {
    this.width_ = window.innerHeight;
    this.height_ = window.innerHeight;
  } else {
    this.width_ = window.innerWidth;
    this.height_ = window.innerWidth;
  }

  var size = new THREE.Vector2(this.width_, this.height_);

  this.renderer_.setSize(this.width_, this.height_, false);
  if (this.composer_) this.composer_.setSize(this.width_, this.height_);
  if (this.mesh_) this.mesh_.material.uniforms.uResolution.value = size;
  if (this.xDistorionShader_) this.xDistorionShader_.uniforms.uResolution.value = size;
  if (this.iceShader_) this.iceShader_.uniforms.uResolution.value = size;
};


XX.prototype.webcamSupported_ = function() {
  return navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
};


XX.prototype.canPlayVideo_ = function() {
  // Detect iOS version, if not iOS, return false.
  // https://gist.github.com/Craga89/2829457
  var iOS = parseFloat(
      ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
      .replace('undefined', '3_2').replace('_', '.').replace('_', '')
    ) || false;

  if (iOS) {
    return false;
  }

  return true;
};



// THREE Deps

/**
 * @author alteredq / http://alteredqualia.com/
 *
 * Full-screen textured quad shader
 */

THREE.CopyShader = {

	uniforms: {

		"tDiffuse": { value: null },
		"opacity":  { value: 1.0 }

	},

	vertexShader: [

		"varying vec2 vUv;",

		"void main() {",

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

		"}"

	].join( "\n" ),

	fragmentShader: [

		"uniform float opacity;",

		"uniform sampler2D tDiffuse;",

		"varying vec2 vUv;",

		"void main() {",

			"vec4 texel = texture2D( tDiffuse, vUv );",
			"gl_FragColor = opacity * texel;",

		"}"

	].join( "\n" )

};



/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.EffectComposer = function ( renderer, renderTarget ) {

	this.renderer = renderer;

	if ( renderTarget === undefined ) {

		var parameters = {
			minFilter: THREE.LinearFilter,
			magFilter: THREE.LinearFilter,
			format: THREE.RGBAFormat,
			stencilBuffer: false
		};
		var size = renderer.getSize();
		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );

	}

	this.renderTarget1 = renderTarget;
	this.renderTarget2 = renderTarget.clone();

	this.writeBuffer = this.renderTarget1;
	this.readBuffer = this.renderTarget2;

	this.passes = [];

	if ( THREE.CopyShader === undefined )
		console.error( "THREE.EffectComposer relies on THREE.CopyShader" );

	this.copyPass = new THREE.ShaderPass( THREE.CopyShader );

};

Object.assign( THREE.EffectComposer.prototype, {

	swapBuffers: function() {

		var tmp = this.readBuffer;
		this.readBuffer = this.writeBuffer;
		this.writeBuffer = tmp;

	},

	addPass: function ( pass ) {

		this.passes.push( pass );

		var size = this.renderer.getSize();
		pass.setSize( size.width, size.height );

	},

	insertPass: function ( pass, index ) {

		this.passes.splice( index, 0, pass );

	},

	render: function ( delta ) {

		var maskActive = false;

		var pass, i, il = this.passes.length;

		for ( i = 0; i < il; i ++ ) {

			pass = this.passes[ i ];

			if ( pass.enabled === false ) continue;

			pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );

			if ( pass.needsSwap ) {

				if ( maskActive ) {

					var context = this.renderer.context;

					context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );

					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );

					context.stencilFunc( context.EQUAL, 1, 0xffffffff );

				}

				this.swapBuffers();

			}

			if ( THREE.MaskPass !== undefined ) {

				if ( pass instanceof THREE.MaskPass ) {

					maskActive = true;

				} else if ( pass instanceof THREE.ClearMaskPass ) {

					maskActive = false;

				}

			}

		}

	},

	reset: function ( renderTarget ) {

		if ( renderTarget === undefined ) {

			var size = this.renderer.getSize();

			renderTarget = this.renderTarget1.clone();
			renderTarget.setSize( size.width, size.height );

		}

		this.renderTarget1.dispose();
		this.renderTarget2.dispose();
		this.renderTarget1 = renderTarget;
		this.renderTarget2 = renderTarget.clone();

		this.writeBuffer = this.renderTarget1;
		this.readBuffer = this.renderTarget2;

	},

	setSize: function ( width, height ) {

		this.renderTarget1.setSize( width, height );
		this.renderTarget2.setSize( width, height );

		for ( var i = 0; i < this.passes.length; i ++ ) {

			this.passes[i].setSize( width, height );

		}

	}

} );


THREE.Pass = function () {

	// if set to true, the pass is processed by the composer
	this.enabled = true;

	// if set to true, the pass indicates to swap read and write buffer after rendering
	this.needsSwap = true;

	// if set to true, the pass clears its buffer before rendering
	this.clear = false;

	// if set to true, the result of the pass is rendered to screen
	this.renderToScreen = false;

};

Object.assign( THREE.Pass.prototype, {

	setSize: function( width, height ) {},

	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

		console.error( "THREE.Pass: .render() must be implemented in derived pass." );

	}

} );



/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {

	THREE.Pass.call( this );

	this.scene = scene;
	this.camera = camera;

	this.overrideMaterial = overrideMaterial;

	this.clearColor = clearColor;
	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;

	this.clear = true;
	this.clearDepth = false;
	this.needsSwap = false;

};

THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

	constructor: THREE.RenderPass,

	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

		var oldAutoClear = renderer.autoClear;
		renderer.autoClear = false;

		this.scene.overrideMaterial = this.overrideMaterial;

		var oldClearColor, oldClearAlpha;

		if ( this.clearColor ) {

			oldClearColor = renderer.getClearColor().getHex();
			oldClearAlpha = renderer.getClearAlpha();

			renderer.setClearColor( this.clearColor, this.clearAlpha );

		}

		if ( this.clearDepth ) {

			renderer.clearDepth();

		}

		renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );

		if ( this.clearColor ) {

			renderer.setClearColor( oldClearColor, oldClearAlpha );

		}

		this.scene.overrideMaterial = null;
		renderer.autoClear = oldAutoClear;
	}

} );



/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.ShaderPass = function ( shader, textureID ) {

	THREE.Pass.call( this );

	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";

	if ( shader instanceof THREE.ShaderMaterial ) {

		this.uniforms = shader.uniforms;

		this.material = shader;

	} else if ( shader ) {

		this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );

		this.material = new THREE.ShaderMaterial( {

			defines: shader.defines || {},
			uniforms: this.uniforms,
			vertexShader: shader.vertexShader,
			fragmentShader: shader.fragmentShader

		} );

	}

	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
	this.scene = new THREE.Scene();

	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
	this.quad.frustumCulled = false; // Avoid getting clipped
	this.scene.add( this.quad );

};

THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

	constructor: THREE.ShaderPass,

	render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {

		if ( this.uniforms[ this.textureID ] ) {

			this.uniforms[ this.textureID ].value = readBuffer.texture;

		}

		this.quad.material = this.material;

		if ( this.renderToScreen ) {

			renderer.render( this.scene, this.camera );

		} else {

			renderer.render( this.scene, this.camera, writeBuffer, this.clear );

		}

	}

} );




// INIT
(function() {
  var xx = new XX();
  xx.init();
})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console