javascript - Three.js - apply shader to blur a geometry - Stack Overflow

Been learning ThreeJS over the past day or so however I'm struggling with Shaders.

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.

Now I have a mesh that i created with a LambertMaterial basically like so:

    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);

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?

Horizontal blur shader

Verticle blur shader

I tried using a ShaderMaterial like this:

    var material = new THREE.ShaderMaterial( {
        uniforms: THREE.UniformsUtils.clone( HorizontalBlurShader.uniforms ),
        vertexShader: HorizontalBlurShader.vertexShader,
        fragmentShader: HorizontalBlurShader.fragmentShader
    } );

and it works (now that I exported my model with the UVs) - however not as expected.

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?

Been learning ThreeJS over the past day or so however I'm struggling with Shaders.

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.

Now I have a mesh that i created with a LambertMaterial basically like so:

    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);

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?

Horizontal blur shader

Verticle blur shader

I tried using a ShaderMaterial like this:

    var material = new THREE.ShaderMaterial( {
        uniforms: THREE.UniformsUtils.clone( HorizontalBlurShader.uniforms ),
        vertexShader: HorizontalBlurShader.vertexShader,
        fragmentShader: HorizontalBlurShader.fragmentShader
    } );

and it works (now that I exported my model with the UVs) - however not as expected.

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?

• javascript
• three.js
• glsl
• webgl
• shader

Share Improve this question Follow edited Jul 27, 2015 at 8:56 Dustin Silk asked Jul 21, 2015 at 19:27 Dustin SilkDustin Silk 4,62077 gold badges3636 silver badges5050 bronze badges 6

• Use the corresponding three.js shaders as in the example threejs/examples/#webgl_postprocessing_advanced – gaitat Commented Jul 21, 2015 at 19:54
• Tried adding the shader but cant get it working. Check out my Fiddle - jsfiddle/VsWb9/3942 – Dustin Silk Commented Jul 22, 2015 at 9:28
• Your jsfiddle gets a 404 when requesting a js resource. (RequestAnimationFrame.js) – Corey Ogburn Commented Jul 22, 2015 at 17:10
• Yeah the Jsfiddle isnt the most up to date example so i removed it... I'll put up a git repo with exactly what i have for people to look at now. – Dustin Silk Commented Jul 22, 2015 at 17:12
• @CoreyOgburn See my edits - I've added a link to a live example and a repository - dustinjsilk. – Dustin Silk Commented Jul 22, 2015 at 17:54

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

There is no "easy" way to blur a single object in WebGL that I know of off the top of my head. The blur example and the depth of field example in three.js are post processing effects. That means they work after the image has been rendered. They are like loading the image into photoshop and then applying a filter to the entire image.

That doesn't mean blurring a single object is impossible. It's just not going to be easy.

For example, you could render whether or not to blur something into a separate channel, say the alpha channel, then you could change the blur shader so it only blurred pixels with the alpha channel set. That won't be perfect because where two objects overlap, blurring that would bleed past the overlapping where will be blocked out so when you finally get to the blur pass there won't be the info needed to blur correctly. Whether that's not acceptable is an aesthetic decision

Another way would be to render each object to it's own render target, blur that, the posite all the render targets. You might need each render target to also store depth values so you can posite them with depth.