Frosted Glass Effect with Blur Post-Process: RenderTarget and Blur Pipeline Issues

[Zhey-on]

Frosted Glass Effect with Blur Post-Process: RenderTarget and Blur Pipeline Issues

Hi BabylonJS Community ,

I’m working on a frosted glass effect where I need to blur specific objects behind a transparent material. The implementation involves using a RenderTargetTexture and applying two BlurPostProcess instances (horizontal and vertical) to create the blurred texture. However, the pipeline is not producing the expected results, and both the horizontalBlur.outputTexture and verticalBlur.outputTexture remain undefined.

Steps Taken:

1. Created a RenderTargetTexture:

• Added specific meshes to the renderList.
• Configured refreshRate to BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONEVERYFRAME.

const renderTarget = new BABYLON.RenderTargetTexture("renderTarget", { width: 512, height: 512 }, scene);
renderTarget.clearColor = new BABYLON.Color4(0, 0, 0, 0); 
renderTarget.refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONEVERYFRAME; renderTarget.renderList.push( scene.getMeshByName("quadro"), scene.getMeshByName("scenario"), scene.getMeshByName("logo-gambero"), scene.getMeshByName("logo-scritta") );

2. Created Horizontal and Vertical Blur Post-Processes:

• Set inputTexture for the horizontal blur to the RenderTargetTexture.
• Set inputTexture for the vertical blur to the horizontalBlur.outputTexture.

const horizontalBlur = new BABYLON.BlurPostProcess( "horizontalBlur", new BABYLON.Vector2(1.0, 0.0), 40.0, 1.0, null, BABYLON.Constants.TEXTURE_BILINEAR_SAMPLINGMODE, engine ); 
horizontalBlur.width = 512; 
horizontalBlur.height = 512;

const verticalBlur = new BABYLON.BlurPostProcess( "verticalBlur", new BABYLON.Vector2(0.0, 1.0), 40.0, 1.0, null, BABYLON.Constants.TEXTURE_BILINEAR_SAMPLINGMODE, engine ); verticalBlur.width = 512; 
verticalBlur.height = 512; 

horizontalBlur.inputTexture = renderTarget; 
verticalBlur.inputTexture = horizontalBlur.outputTexture;

3. Attached Blur Processes to a Temporary Camera:

• Created a FreeCamera and attached the blur processes to ensure they render.

const tempCamera = new BABYLON.FreeCamera("tempCamera", new BABYLON.Vector3(0, 0, 0), scene); 
tempCamera.attachPostProcess(horizontalBlur); 
tempCamera.attachPostProcess(verticalBlur);

4. Used Debug Logs to Verify Pipeline:

• Checked the RenderTargetTexture, renderList, and the blur pipeline output.

Debug Logs:

RenderTarget Initialization: Render target initialized: Object { _wrapU: 1, _wrapV: 1, wrapR: 1, ... }

Render List: Render target render list: Array(4) [ {…}, {…}, {…}, {…} ] Mesh "quadro": Found Mesh "scenario": Found Mesh "logo-gambero": Found Mesh "logo-scritta": Found

Blur Post-Process Outputs: Horizontal blur output texture: undefined Vertical blur output texture: undefined

What I’ve Tried:

1. Ensured all meshes in the renderList are valid, visible, and not culled: renderTarget.renderList.forEach((mesh) => { mesh.isVisible = true; mesh.alwaysSelectAsActiveMesh = true; });
2. Debugged RenderTargetTexture updates: renderTarget.onAfterRenderObservable.add(() => { console.log("RenderTarget updated successfully"); });
3. Visualized the renderTarget on a debug plane: const debugPlane = BABYLON.MeshBuilder.CreatePlane("debugPlane", { size: 5 }, scene); const debugMaterial = new BABYLON.StandardMaterial("debugMaterial", scene); debugMaterial.diffuseTexture = renderTarget; // Use render target texture debugPlane.material = debugMaterial; debugPlane.position = new BABYLON.Vector3(0, 5, 0);

Problem:
Despite these steps, the blur pipeline is not working as expected, and the textures remain undefined. What could be causing the horizontalBlur.outputTexture and verticalBlur.outputTexture to fail?

Any help would be greatly appreciated!

Summary

This text will be hidden

[Deltakosh]

can that be a good candidate for NRGE @Evgeni_Popov ?

[Deltakosh]

we cannot help with a playground repro I’m sure we will find a way then

[Heaust-ops]

If all you want is blurred out glass and you’re not particularly attached to the RTT method / are okay using a material plugin.

Checkout this thread:

Blurry refraction quality

Here’s a material plugin that uses bicubic sampling to improve refraction: Bilinear Bicubic [image] [image]

[roland]

A different frosty approach:

Holey Glass Sphere with inside cracks + Water ball

Hey! I was helping a dude here: and I’ve created two quite cool examples (beginners like me are gonna like’em ) so I thought it might be worth to present the results and share what I’ve learned in the last one day. You might be interested in the first one, where I used alpha textures on planes (cylinders with minimum height) to achieve the cracks inside the spheres, so there is no extra geometry at all. The second example is quite easy to achieve using a bump texture. This is not a c…

[Evgeni_Popov]

@Deltakosh

can that be a good candidate for NRGE

Yes, it can be done pretty easily with a frame graph:

Babylon.js Playground

Frame graph: https://nrge.babylonjs.com/#P1CTNO#17

Note that the final Output block is disabled, to avoid the copy of the texture to the canvas, which is not necessary, as the texture will be used for the emissive texture of the ground material.

[Evgeni_Popov]

We had to make a breaking change today, so here are the new links:

PG: https://playground.babylonjs.com/#BTYUTF#7
Frame graph: https://nrge.babylonjs.com/#P1CTNO#17