After spending the past day diving into ThreeJS, I've hit a roadblock with Shaders.
My goal is to blur a specific geometry, but my attempts at using Depth Of Field resulted in unintended blurriness of foreground objects. I want to isolate one object and blur only that.
Currently, I have a mesh created with LambertMaterial as shown below:
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);
I came across two shaders online for horizontal and vertical blur effects. But how can I apply them while maintaining the existing color settings?
Horizontal blur shader
Vertical blur shader
I attempted to use a ShaderMaterial like this:
var material = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.clone( HorizontalBlurShader.uniforms ),
vertexShader: HorizontalBlurShader.vertexShader,
fragmentShader: HorizontalBlurShader.fragmentShader
} );
It seems to be working now (especially after exporting my model with UVs), but not quite as expected.
Instead of blurring the object, it renders semi-transparent based on the face angle. How can I achieve the desired effect of blurring the object with the correct color from the original material and also incorporate the vertical shader?