Postproduction Bug: Grid with Black Square

[JulianGroba]

Describe the bug 📝

Create a world from a function located in another file to allow the generation of more than one world in order to have a double viewer (model comparison).

A black square is generated at the point 0,0,0, it is created with the grid but I am using the postproduction.

Reproduction ▶️

No response

Steps to reproduce 🔢

import * as OBF from "@thatopen/components-front";
import * as OBC from "@thatopen/components";
import * as BUI from "@thatopen/ui";
import * as THREE from "three";

export const createWorld = (
components: OBC.Components,
config: { name: string },
) => {
const worlds = components.get(OBC.Worlds);

const world = worlds.create<
OBC.SimpleScene,
OBC.OrthoPerspectiveCamera,
OBF.PostproductionRenderer

();
world.name = config.name;

world.scene = new OBC.SimpleScene(components);
world.scene.setup();
world.scene.three.background = null

const viewport = BUI.Component.create<BUI.Viewport>(() => {
return BUI.html<bim-viewport id="${config.name}" style="position: absolute; width: 100%; height: 100vh;" className="dashboard-card" > <bim-grid floating></bim-grid> </bim-viewport>;
});

world.renderer = new OBF.PostproductionRenderer(components, viewport);
const { postproduction } = world.renderer;

const cullers = components.get(OBC.Cullers)
const culler = cullers.create(world);
culler.config.threshold = 5

world.camera = new OBC.OrthoPerspectiveCamera(components);
world.camera.controls.restThreshold = 0.25;

world.renderer.postproduction.enabled = true
world.camera.controls.setLookAt(5,5,5,0,0,0)
world.camera.updateAspect()

const worldGrid = components.get(OBC.Grids).create(world);
worldGrid.material.uniforms.uColor.value = new THREE.Color(0xffffff) //new THREE.Color(0x424242);
worldGrid.material.uniforms.uSize1.value = 1//2;
worldGrid.material.uniforms.uSize2.value = 4//8;

const resizeWorld = () => {
world.renderer?.resize();
world.camera.updateAspect();
};

viewport.addEventListener("resize", resizeWorld);

components.onInit.add(() => {
postproduction.enabled = true;
postproduction.customEffects.excludedMeshes.push(worldGrid.three);
postproduction.setPasses({ custom: true, ao: true, gamma: true });
postproduction.customEffects.lineColor = 0x17191c;

world.camera.controls.addEventListener("rest", ()=>{
  culler.needsUpdate = true
  console.log(culler)
})

});
console.log(world.scene.three.children)

world.scene.three.children.forEach((child) => {
if (child.type ==="Mesh"){
//world.scene.three.remove(child);

}

});

console.log(world.scene.three.children)
return { world, viewport };
};

System Info 💻

import * as OBF from "@thatopen/components-front";
import * as OBC from "@thatopen/components";
import * as BUI from "@thatopen/ui";
import * as THREE from "three";

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

[JulianGroba]

I fixed it by adding at the end: components.init(), even if it was already called in the main script where the worlds are created.