标签云

微信群

扫码加入我们

WeChat QR Code

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 shaderVerticle blur shaderI 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?


Use the corresponding three.js shaders as in the example threejs.org/examples/#webgl_postprocessing_advanced

2019年04月22日55分38秒

Tried adding the shader but cant get it working. Check out my Fiddle - jsfiddle.net/VsWb9/3942

2019年04月22日55分38秒

Your jsfiddle gets a 404 when requesting a js resource. (RequestAnimationFrame.js)

2019年04月22日55分38秒

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.

2019年04月22日55分38秒

CoreyOgburn See my edits - I've added a link to a live example and a repository - dustinjsilk.com

2019年04月22日55分38秒

here's one person's unity based solution. You can see they rendered the blurred object to a separate render target. kylehalladay.com/all/graphics/2013/07/02/Selective-Blur.html

2019年04月22日55分38秒

Yeah from all my research it seems just about impossible. (Or just not easy to do and get good results). Maybe one day I can solve this problem once and for all, but until then I've come up with a pretty basic solution that can work for the design. I'll overlay each object in a seperate rendered view each with a transparent clear and manage the blur and z-index with CSS to the canvas element.

2019年04月22日55分38秒