Mozaicpass

Mozaic Pass and Shader for Three.js.

Simple Fragment Shader and Effect Composer Pass for THREE.js to pixelate the screen.

How to ?

Download the js files, or use bower

bower install MozaicPass
      

Include the Shader and the Pass

<script type="text/javascript" src="lib/MozaicShader.js"></script>
<script type="text/javascript" src="lib/MozaicPass.js"></script>
      

Add Mozaic Pass to your effect composer stack

var composer = new THREE.EffectComposer( renderer );

var mozaic = new THREE.MozaicPass();
mozaic.cellsize = 20;
mozaic.renderToScreen = true;

composer.addPass( mozaic );
      

Demo

(function(){
      var el = document.getElementById('demo');

      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, el.offsetWidth/el.offsetHeight, 0.1, 1000 );

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( el.offsetWidth, el.offsetHeight );
      el.appendChild( renderer.domElement );

      var geometry = new THREE.BoxGeometry( 2, 2, 2 );
      var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      var cube = new THREE.Mesh( geometry, material );
      scene.add( cube );

      camera.position.z = 5;

      var composer = new THREE.EffectComposer( renderer );
      composer.addPass( new THREE.RenderPass( scene, camera ) );

      var mozaic = new THREE.MozaicPass();
      mozaic.cellsize = 10;
      mozaic.renderToScreen = true;

      composer.addPass( mozaic );

      var gui = new dat.GUI({
          height : 2 * 32 - 1,
          autoplace: false
      });
      var f1 = gui.addFolder('Mozaic effect');
      f1.add(mozaic, 'cellsize').min(1).max(50).step(1).listen();
      f1.open();

      el.appendChild(gui.domElement);

      var render = function (time) {
        requestAnimationFrame( render );

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
        composer.render(time);
      };

      render();
})()