# How to make a backgroudn blur on an geometry or another object of threejs

**URL:** <https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [November 28, 2023, 4:24pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655 "2023-11-28T16:24:20Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [November 28, 2023, 4:24pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/1 "2023-11-28T16:24:20Z")

</div>

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%.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/684628cf19762d8461500e8b9ebe1eaca4953ccd.png)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 29, 2023, 7:03pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/2 "2023-11-29T19:03:47Z")

</div>

Maybe you could try with `transmission` and `roughness` properties of the material?  
The roughness defines how blurred the background is.

```javascript
THREE.MeshPhysicalMaterial( {
    transmission: 1,
    roughness: 0.4,
} )

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/0/c06693d2366ecedf1512de5222438e0ef53f9192.jpeg)

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [November 29, 2023, 11:39pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/4 "2023-11-29T23:39:48Z")

</div>

Hi @PavelBoytchev,

I made this page, OK with blurred effect, but some white noises appeared when apply controls… 😒

the link:

> **[transmission2.html](https://jrlazz.github.io/anim/transmission2.html)**

Hope You can help me to clean them! 😉

 ![transmission](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7c71de11cc5f1528f06437639e41abb3f35caed8.jpeg)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 30, 2023, 6:30am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/5 "2023-11-30T06:30:15Z")

</div>

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](https://codepen.io/boytchev/full/JjxaaNZ)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 30, 2023, 7:17am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/6 "2023-11-30T07:17:20Z")

</div>

Maybe try meshtransmissionmaterial, the roughness implementation is a little different, it’s closer to frosted glass

> **[Frosted glass - CodeSandbox](https://codesandbox.io/s/imn42)**
>
> Shader mip-map blur to mimic 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](https://twitter.com/0xca0a/status/1621547956661805059) don’t know what happened to it

---

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [November 30, 2023, 8:23am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/7 "2023-11-30T08:23:17Z")

</div>

thanks for you answer, I have try this on my sphereGemotry but I got a gray sphere without transmission:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/f/8f13b72d9de0d24c011f16b434a5fd46829b68ea.png)  
my code :

```javascript
<mesh>
   <sphereGeometry args={[blur.raduis / 30, 32, 32]} />
                            <meshPhysicalMaterial
                                transmission={1}
                                roughness={0.4}
                                transparent={true}
                            />
<mesh/>

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 30, 2023, 8:28am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/8 "2023-11-30T08:28:16Z")

</div>

Spheres are no problem. Maybe something else in your code is making the problem?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/8/48a7ce4304e9b47d2ef0e8d0e947db30f921871c.jpeg)  
r

---

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [November 30, 2023, 8:28am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/9 "2023-11-30T08:28:32Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/76ea639432599ec20fa48d19399d6811b72e01ae.jpeg)  
my code : I use React with Three fiber

```javascript
<mesh>
<sphereGeometry args={[blur.raduis / 30, 32, 32]} />
                            <MeshTransmissionMaterial
                                roughness={0}
                                distortionScale={1}
                                temporalDistortion={1}
                                anisotropicBlur={1}
                            />
<mesh/>

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 30, 2023, 9:10am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/10 "2023-11-30T09:10:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [November 30, 2023, 9:40am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/11 "2023-11-30T09:40:35Z")

</div>

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:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bb210d0cf98d40b85f49c15bac90ba92dcfff315.png)  
But the black still persists when two spheres are superimposed  
my code

```javascript
     <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](https://codesandbox.io/p/sandbox/meshtransmissionmaterial-hmgdjq?file=%2Fsrc%2FApp.js%3A59%2C27)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 30, 2023, 10:52am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/12 "2023-11-30T10:52:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [November 30, 2023, 11:57am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/13 "2023-11-30T11:57:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [November 30, 2023, 3:34pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/14 "2023-11-30T15:34:30Z")

</div>

Hi @PavelBoytchev ,

I got the same noise running Your codepen code! 😟

![transm2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/b/1b2ac88f7149b8790fa78f69f3407a1b6fac4522.jpeg)

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [November 30, 2023, 5:24pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/15 "2023-11-30T17:24:07Z")

</div>

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!!!

---

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [December 4, 2023, 4:26pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/16 "2023-12-04T16:26:31Z")

</div>

I have try again your solution but my geometry still grey 🫠  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/8/88257eb6dc3e6f584f2c28700a038f3e99f58924.png)

```javascript
    <mesh>
                            <sphereGeometry args={[blur.radius / 30]} />
                            <meshPhysicalMaterial
                                transmission={1}
                                roughness={0.4}
                            />
                           
                        </mesh>

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [December 4, 2023, 5:41pm UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/17 "2023-12-04T17:41:46Z")

</div>

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](https://codepen.io/boytchev/full/JjxaaNZ)) 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.

---

<div class="post-metadata">

**Author:** ![jzazox](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jzazox/32/42423_2.png) [@jzazox](https://discourse.threejs.org/u/jzazox)\
**Post date:** [December 5, 2023, 8:49am UTC](https://discourse.threejs.org/t/how-to-make-a-backgroudn-blur-on-an-geometry-or-another-object-of-threejs/58655/18 "2023-12-05T08:49:56Z")

</div>

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

```javascript
   <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>
        );
    })}
</>

```