Layers doesn't work on my scene


I’m trying to separate two layer on my scene, the main layer where is all of my objects, and another one which I use to display a “second screen” of an example.

The goal is that cam (which is displayed on quad), and this.listOfMouth[“original”] are on the same layer, which is not the main layer (layer 0).
For it I console.log it and the layer mask is different but I don’t know why, it doesn’t work :
The two directional lights are used in my scene.

Original Post on Discord

by user 224464722878005248

Here the code :

by user 224464722878005248

You need to set the culling mask of your camera accordingly to only render the layers you’re interested

cameraComponent.cullingMask = ...

Oh thanksd

by user 224464722878005248

That’s weird, it works “better” but if I try to use the layer of an object, it disappear from my camera
For example :

createRenderTexture(scene: THREE.Scene, camera, quadPosition = new THREE.Vector3(-4, -2, -15)) {
    const quad = ObjectUtils.createPrimitive(PrimitiveType.Quad);
    const cam = new THREE.PerspectiveCamera(25);
    // cam.lookAt(new THREE.Vector3(0, 0.5, 0)); = "SecondScreenCamera"
    const rt = new RenderTexture(512, 512, { format: THREE.RGBAFormat});

    if (quad.material instanceof THREE.MeshStandardMaterial) = rt.texture;
    const cameraComponent = new Camera()
    cameraComponent.targetTexture = rt;
    // cameraComponent.farClipPlane = 1000
    cameraComponent.clearFlags = ClearFlags.SolidColor;
    cameraComponent.backgroundColor = new RGBAColor(0, 0, 0, 0);
    cameraComponent.cullingMask = 2;
    if (quad.material instanceof THREE.MeshStandardMaterial){ 
      // quad.material.transparent = true;
      quad.material.depthTest = false;

    quad.renderOrder = 3 ="SecondScreen"


    // cameraComponent.backgroundColor = new RGBAColor(0,0,0,1).copy(new THREE.Color(0x141619))

    GameObject.addComponent(cam, cameraComponent);

    return [quad, cam]

After that I used an object like it :
const specialLayer = 1;

Layer 1 => Mask 2 so normally it works

But nothing is displayed if I do that
It’s displayed only if I use cameraComponent.cullingMask = 1;
Which is the default cullingMask :confused:

by user 224464722878005248

Updated the sample here: Needle Engine RenderTexture & CullingMask - StackBlitz

Sorry if I mislead you earlier - the culling mask is actually the mask value and not the layer you want it to render (it holds exactly this information but in a bit mask, basically what in threejs is stored in layers.mask)

Okay I don’t know why but it works with simple forms but not with complexe objects

by user 224464722878005248

Here :

by user 224464722878005248

const specialLayer = 5;
const sphere = this.addSphereToPosition(this.listOfMouth["original"].position, 0xff0000)
sphere.position.z += 30

*by user 224464722878005248*

I can see the red sphere
But I can’t see this.listOfMouth[“original”] which is a object3D which contains mesh etc

by user 224464722878005248

Ok find

by user 224464722878005248

I did that :

this.listOfMouth["original"].traverse(obj => {

by user 224464722878005248

yes - you need to set it on each object - it doesnt bubble through to the children

For illustration purposes: that’s what culling mask (and threejs layers) is: the combination of these settings in one value