Layers doesn't work on my scene

🌵 Needle Engine
1

Hello,

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

2

Here the code :
message.txt

by user 224464722878005248

3

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

cameraComponent.cullingMask = ...

4

Oh thanksd

by user 224464722878005248

5

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);
    quad.position.copy(quadPosition)
  
    const cam = new THREE.PerspectiveCamera(25);
    cam.position.set(1000,1000,1000);
    // cam.lookAt(new THREE.Vector3(0, 0.5, 0));
    cam.name = "SecondScreenCamera"
    scene.add(cam);
  
    const rt = new RenderTexture(512, 512, { format: THREE.RGBAFormat});

    if (quad.material instanceof THREE.MeshStandardMaterial)
      quad.material.map = 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
    quad.name ="SecondScreen"

    quad.scale.multiplyScalar(4);
    camera.add(quad);

    // 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;
this.listOfMouth[“original”].layers.disableAll();
this.listOfMouth[“original”].layers.set(specialLayer)

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

6

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

7

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)

8

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

by user 224464722878005248

9

Here :

by user 224464722878005248

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

*by user 224464722878005248*
11

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

12

Ok find

by user 224464722878005248

13

I did that :

this.listOfMouth["original"].traverse(obj => {
                    obj.layers.set(specialLayer);
                  })

by user 224464722878005248

14

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

15

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