The Volumetric Lighting post process is just showing a blank square

Questions
1

Hi all, I’m new to Babylon JS and the forums so please let me know if I’m doing something wrong :slight_smile:

I’m attempting to use the BABYLON.VolumetricLightScatteringPostProcess to create some light shafts, as shown in this playground example: Babylon.js Playground

I have copied the code straight out of this example, apart from the variable names, and placed it into my scene. This is the result:

image
image682×707 64.6 KB

The white square nestled in the leaves of the tree is the default billboard of the VolumetricLightScatteringPostProcess. However, instead of having a glow like in the example above, it is just a blank square.

Here is the section of my code invoking this process for reference:

// Volumetric Lighting.
let volumetric_light = new BABYLON.VolumetricLightScatteringPostProcess('volumetric_light', 1.0, camera, undefined, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false, scene);
volumetric_light.mesh.position = new BABYLON.Vector3(7, 25, 20);
volumetric_light.mesh.scaling = new BABYLON.Vector3(10, 10, 10);

And here are the parameters I’m using to construct my engine, scene, and camera:

// Engine.
let engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });

// Scene.
let scene = new BABYLON.Scene(engine);

// Camera.
let camera = new BABYLON.ArcRotateCamera(
	"arc_cam", 							// Name.
	Math.PI / 2,						// Alpha.
	Math.PI / 2,						// Beta.
	6,									// Radius.
	new BABYLON.Vector3(-1.2, 12, 40),	// Target.
	scene								// Scene.
);
camera.lowerRadiusLimit = 6;
camera.upperRadiusLimit = 6;
camera.lowerAlphaLimit = Math.PI / 2.9;
camera.upperAlphaLimit = Math.PI / 1.55;
camera.lowerBetaLimit = Math.PI / 2.4;
camera.upperBetaLimit = Math.PI / 1.75;

After a couple hours of googling, I’ve turned up no useful answers to this problem.
Has anyone else encountered this same issue? Does anyone know how to fix this?

Please let me know if you need any more information.
Any advice would be greatly appreciated, thanks!

2

ping @Evgeni_Popov

3

We would need a repro in the playground to help on this one.

2 Likes
4

While it’s tough to be specific, two things that might be worth looking at are the engine settings to preserve drawing buffer and stencil, and in the sampling modes you’ve set.

The box that appears is similar to what you might see with a particle system rendering with the wrong alpha blend mode, so that’s why I would check those two items.

The VLSPP adds a render pass to the scene as you might expect, which is another reason to check the engine settings there, but also perhaps your render groupings

HTH

2 Likes
5

Thank you all for replying!

@jelster Thanks for the info. I tried playing around with combinations of those settings from your suggestions (preserve drawing buffer, stencil, render groupings) to no avail - the problem still persists.

@sebavan I’ve put all of the code from my project into this playground repro: https://playground.babylonjs.com/#LNRTK7#1
But as expected, it works perfectly in the playground… :sweat_smile:

I wasn’t able to copy all of the GLB models I am using into the playground as this is part of a client’s project, so I used the default sphere and ground plane in their place to demonstrate that other effects in the scene are working.

Could it be the case that one of my GLB models is breaking this effect? Is this possible?

Thanks again.

6

I guess so in regards of your issue, I wonder if you could also use your mesh in ?

7

Unfortunately, I cannot. But I have just tried removing all of the imported models/meshes from my local project and problem still persists.

8

Aha, I’ve solved it!

image
image687×770 73.5 KB

I’m using Vue 3 for the framework of my project, and I was storing the canvas, engine, and scene in the data() scope of a component:

export default defineComponent({
	name: "BabylonScene",
	data() {
		return {
			d_canvas: undefined,
			d_engine: undefined,
			d_scene: undefined
		}
	},
	methods: {
		async m_define_engine(): Promise<void> {
			this.d_canvas = this.$refs.canvas as HTMLCanvasElement;
			this.d_engine = new BABYLON.Engine(this.d_canvas, true, { preserveDrawingBuffer: false, stencil: true });
			this.d_scene = await this.m_define_scene(this.d_engine, this.d_canvas);
			this.d_scene.clearColor = new BABYLON.Color4(0.9, 0.9, 0.9, 1);
			this.m_run_render_loop(this.d_engine, this.d_scene);
		},
		etc...
	}
});

I was wondering if something about Vue was messing with Babylon, so I tried removing each of these objects (canvas, engine, scene) from the Vue data scope one by one. After removing scene, the Volumetric Lighting worked!

This is my resulting Vue component instance:

export default defineComponent({
	name: "BabylonScene",
	data() {
		return {
			d_canvas: undefined,
			d_engine: undefined
		}
	},
	methods: {
		async m_define_engine(): Promise<void> {
			this.d_canvas = this.$refs.canvas as HTMLCanvasElement;
			this.d_engine = new BABYLON.Engine(this.d_canvas, true, { preserveDrawingBuffer: false, stencil: true });
			let scene = await this.m_define_scene(this.d_engine, this.d_canvas);
			scene.clearColor = new BABYLON.Color4(0.9, 0.9, 0.9, 1);
			this.m_run_render_loop(this.d_engine, scene);
		},
		etc...
	}
});

So I guess that Babylon’s scene does not like to be stored in this way :smile:

Thanks again for the help.

1 Like