title: Three.js - apply shader to blur a geometry
body: <p>Been learning ThreeJS over the past day or so however I'm struggling with Shaders.</p>
  
  <p>I'm trying to blur a geometry i have. I tried using Depth Of Field with the examples found on the Three.js site but it made my foreground objects slightly blurry too. So I'm hoping to single out one object and just blur that.</p>
  
  <p>Now I have a mesh that i created with a LambertMaterial basically like so:</p>
  
  <pre><code>    var material = new THREE.MeshLambertMaterial({
          color: 0x5c5c5c,
          emissive: 0x000000,
          shading: THREE.FlatShading,
          transparent: true,
          opacity: 1
      });
      var mesh = new THREE.Mesh(geometryJson, material);
  
      scene.add(mesh);
  </code></pre>
  
  <p>And then I found 2 shaders online (one for verticle blur and one for horizontal blur). But how do I apply them while keeping the above settings for color ect?</p>
  
  <p><a href="http://www.airtightinteractive.com/demos/js/shaders/js/shaders/HorizontalBlurShader.js" rel="nofollow">Horizontal blur shader</a></p>
  
  <p><a href="http://www.airtightinteractive.com/demos/js/shaders/js/shaders/VerticalBlurShader.js" rel="nofollow">Verticle blur shader</a></p>
  
  <p>I tried using a ShaderMaterial like this:</p>
  
  <pre><code>    var material = new THREE.ShaderMaterial( {
          uniforms: THREE.UniformsUtils.clone( HorizontalBlurShader.uniforms ),
          vertexShader: HorizontalBlurShader.vertexShader,
          fragmentShader: HorizontalBlurShader.fragmentShader
      } );
  </code></pre>
  
  <p>and it works (now that I exported my model with the UVs) - however not as expected. </p>
  
  <p>My model now renders semi-transparent depending on the angle of the face rather than bluring it. How can I make the shader blur the object, with the correct color as the original material and also use the verticle shader same time?</p>