Hi i’m creating a world space UiI in unity and i wanted to add a background blur effect like needle default buttons that show on the bottom of the Sample Projects.
To create a background blur effect for a world space UI in Unity, similar to the Needle’s default buttons, you can utilize the background-blurriness
attribute in your UI component configuration.
Here’s a step-by-step pseudocode plan and the corresponding code:
- Setup the UI Canvas: Ensure the canvas is set to World Space.
- Create a UI Image Component: Add an Image component as your background.
- Add a Blur Effect: Utilize the
background-blurriness
attribute for your UI to create the desired blur.
Code Example
using UnityEngine;
using UnityEngine.UI;
public class WorldSpaceUIBlur : MonoBehaviour
{
private Canvas canvas;
private Image backgroundImage;
void Start()
{
// Create a canvas for the world space UI
canvas = gameObject.AddComponent<Canvas>();
canvas.renderMode = RenderMode.WorldSpace;
// Set the canvas size and position
RectTransform rt = canvas.GetComponent<RectTransform>();
rt.sizeDelta = new Vector2(800, 600);
rt.position = new Vector3(0, 0, 0);
// Create an Image component for the background
GameObject backgroundGO = new GameObject("Background");
backgroundGO.transform.parent = canvas.transform;
backgroundImage = backgroundGO.AddComponent<Image>();
// Apply a transparent or semi-transparent color for the blur effect
backgroundImage.color = new Color(1, 1, 1, 0.5f);
// Add blur effect logic (you may need a custom shader or material for real-time blurring)
SetBlurAmount(0.5f); // This value can range from 0 (no blur) to 1 (maximum blur)
}
private void SetBlurAmount(float blurAmount)
{
// Assuming you have a shader or effect script to handle the blurriness
// This could vary based on your specific implementation.
// You might need to set parameters on the shader material accordingly.
// Example: backgroundImage.material.SetFloat("_BlurAmount", blurAmount);
}
}
Notes:
- You may need to implement or find a suitable blur shader that you can apply to
backgroundImage
to achieve the effect. - You can check the attributes like
background-blurriness
directly in the component settings to fine-tune your effect. - Remember to install and properly configure any required scripts or shaders if you’re extending beyond the default Unity capabilities.
For more details on manipulating UI elements in Unity or specific components, you can check the Needle Engine documentation or refer to specific shader implementations for blurs. If you have any particular requirements or further questions, feel free to ask!
1 replies left - Get a PRO license for more AI replies.
thread_tns8YsJ2Eg5duL9tcjjmybCg
Reply to this message to continue the conversation
@marcel could you please help us here.
Hi, here’s an example of how you could get a blurry image background. Note that it’s not recommended to do and the Needle Menu is not a spatial element that you refer to (we rely on the browser’s blur filter there).
For performance reasons I would most likely not recommend this effect for your project (especially if many UI components make use of it) since it will cause an additional render pass (but it depends on the target device and scene complexity)
import { Behaviour, Image, serializable } from "@needle-tools/engine";
import { Mesh, MeshPhysicalMaterial } from "three";
export class BlurImageBackground extends Behaviour {
@serializable()
ior: number = 1.5;
@serializable()
thickness: number = 0.02;
private _material?: MeshPhysicalMaterial;
start() {
const image = this.gameObject.getComponent(Image);
if (!image) {
console.error("Missing Image component");
return;
}
const object = image?.shadowComponent;
if (object && "_backgroundMesh" in object && object._backgroundMesh instanceof Mesh) {
// Create the material if it doesn't exist
this._material ??= new MeshPhysicalMaterial({
roughness: 0.5,
transmission: 1,
opacity: 1,
ior: this.ior,
thickness: this.thickness,
});
// Apply the material
object._backgroundMesh.material = this._material;
}
}
}
Add it next to the image component.
Note that this will only work for worldspace UI (not screenspace)
Unity (you can adjust the image material to be transparent or invisible, it will be replaced in the browser by the blur material to archieve the desired effect)
Browser:
Furthermore note that it will block transparent elements behind (the red square on the right) - again this might or might not be a problem in your project. Transparent objects in front will however work fine.
Unity
Browser
thanks alot for your help i’ll try it right away.
@marcel can we use a sprite in the when using script on the image?
You need to put the sprite on a separate layer (as a child). It can not be on the same object
@marcel actually i need in specific oval shape so i can show my text on top of that. But if i add that image in the child it do not have the blur property
Could you show what shape you mean and how your components in Unity look like for the image+custom script now?
I’ll send it right away
@marcel this shape that on which i want the blur effect.
And this the result of adding the image in its child as you see its have blur on the edges as well
I think this is related to Showing png icon is pixelated in worldspace UI - #15 by marcel - the original UI shader is rounding the corners and when replacing the material this effect is gone.
Can you try assigning an image with the round corners?
I’ll still look into it if there’s anything else going on but the above is what I think is happening
I’ll also try assigning a image with rounded edges but it also has no effect
The script above needs to be updated to assign the texture to the new material.
this._material ??= new MeshPhysicalMaterial({
roughness: 0.5,
transmission: 1,
opacity: 1,
ior: this.ior,
thickness: this.thickness,
map: object._backgroundMesh.material.map
});
But I’m not sure if it’ll work since the UI shader’s and meshes dont really support this at the moment
ok i’ll try it right away
Did you get it to work?
@hybridherbst Sorry for late Replay but it is not working if we add the material map line it just give the image that given it before without blur effect.