Hello,
My issue is I want to blur some part of my image. My solution is to create a sphere geometry with a background blur and an opacity to blur my image.
I to do like on figma, I have my image behind the rectangle, and the rectangle have a background blur and an opacity of 10%.
Maybe you could try with transmission and roughness properties of the material?
The roughness defines how blurred the background is.
THREE.MeshPhysicalMaterial( {
transmission: 1,
roughness: 0.4,
} )
Hi @PavelBoytchev,
I made this page, OK with blurred effect, but some white noises appeared when apply controls… 
the link:
https://jrlazz.eu5.org/anim/transmission2.html
Hope You can help me to clean them! 
Maybe it appears when the blur is too strong and the object is too flat?!? I don’t see such noise when I run your code, but it shows less blurring than your snapshot.
Here is the code of my snapshot: https://codepen.io/boytchev/full/JjxaaNZ
Maybe try meshtransmissionmaterial, the roughness implementation is a little different, it’s closer to frosted glass
ps that material exists for vanilla as well
pps just noticed it must be broken, it looked this this before https://twitter.com/0xca0a/status/1621547956661805059 don’t know what happened to it
thanks for you answer, I have try this on my sphereGemotry but I got a gray sphere without transmission:
my code :
<mesh>
<sphereGeometry args={[blur.raduis / 30, 32, 32]} />
<meshPhysicalMaterial
transmission={1}
roughness={0.4}
transparent={true}
/>
<mesh/>
I try with meshTransmittionmateriel but I just got an opacity on my spheregeometry not the blur effect like on the code sandbox and when two spheres are superimposed i have this issue:
<mesh>
<sphereGeometry args={[blur.raduis / 30, 32, 32]} />
<MeshTransmissionMaterial
roughness={0}
distortionScale={1}
temporalDistortion={1}
anisotropicBlur={1}
/>
<mesh/>
you need thickness for roughness to kick in, if it’s important i can make some time to fix whatever is holding the shader back at the moment.
Thanks for your answer, I have solved my problem with thickness and I add some properties to had an ideal blur to me. The result:
But the black still persists when two spheres are superimposed
my code
<mesh>
<sphereGeometry />
<MeshTransmissionMaterial
distortionScale={0}
temporalDistortion={0}
transmission={1}
roughness={0.5}
thickness={1.6}
ior={2}
/>
</mesh>
This code exemple help me a lot :
https://codesandbox.io/p/sandbox/meshtransmissionmaterial-hmgdjq?file=%2Fsrc%2FApp.js%3A59%2C27
you can most likely fix that by using the “transmissionSampler” prop on both objects. this is the internal threejs buffer that meshphysical uses, that’s why two meshphysical objects can’t “see” one another because they’re rendered into the same buffer.
the blacked out thing is new, it must have been some kind of regression. i never saw that before.
Since we’re talking blured background, how to make the transmission against the html page/content, the effect in it self is relatively easy, set a plane with a texture as a background, slap a mesh with a transmission material in front of it.
When it comes to blur the HTML page, the best thing I can think of is to draw the HTML page to a canvas HTMLToCanvas, and use it as a texture for the background plane. The problem with this approach, is the plane, it will take over the background and hide the HTML page! So the question is, how to keep the plane visible only to the transmission Mesh?
I didn’t try it yet, but as an alternative to the plane, I’m thinking of using a CubeTexture with a single face (pz, the rest just Alpha 0) as transmissionMap? I’ll also have to deal with the scrolling problem, and aligning the background in sync with the viewport.
Hi @PavelBoytchev ,
I tried with the notebook… it is OK! 
Probably the problem is with the video card of the tower computer.
Thanks for the codepen page!!!
I have try again your solution but my geometry still grey 
<mesh>
<sphereGeometry args={[blur.radius / 30]} />
<meshPhysicalMaterial
transmission={1}
roughness={0.4}
/>
</mesh>
Maybe something else in your code is interfering. If you share your code, someone who knows R3F might be able to help. My code (here) is vanilla JS and you can see there is nothing special in it. However, as long as this issue is solved, there is no need to explore other solutions.
This is my code. I have tried using MeshTransmissionMaterial, which is functional. However, when I have too many blur/sphere elements in my scene, I experience lag
<Canvas
fallback={<Loader />}
className={`scene1 absolute top-0 left-0`}
ref={canvasRef}
camera={{
fov: 60,
far: 1000,
near: 0.1,
}}
>
{listBlurs != null &&
listBlurs.map((blur, index) => {
return (
<mesh
key={index + "_blur"}
position={new Vector3(blur.x, blur.y, blur.z)}
>
<sphereGeometry args={[blur.radius / 30]} />
<meshPhysicalMaterial
transmission={1}
roughness={0.4}
/>
{/* <MeshTransmissionMaterial
distortionScale={0}
temporalDistortion={0}
transmission={1}
roughness={0.6}
thickness={1.6}
ior={1.5}
/> */}
</mesh>
);
})}
</>