<glowLayer ..> addIncludedOnlyChildren option

[saidmoya12]

Request
glowlayer affect only children if is presset

I need use two different glowLayers at time

so

<glowLayer name="glow0" intensity={.8} addIncludedOnlyChildren>
  <Model .../>
</glowLayer>
<glowLayer name="glow1" intensity={0.1} addIncludedOnlyChildren>
  <Model .../>
</glowLayer>

it's posible or what solution could I do?

Thanks!!

[brianzinn]

That would be possible - what is happening currently?

[saidmoya12]

Actually if I put two glowLayers the last glowLayer override all before

So in my example "glow1" override intensity of "glow0"

I can't use addIncludedOnly={} becouse children are loaded dynamically with react router but I accept suggestions!

Thanks!

[brianzinn]

I haven't experimented multiple glow layers before, but it looks like it could be done how shadows are done, but that would require knowing mesh names (not ideal for Model!). What you are proposing is possible as well, but it requires the meshes to be declared nested in the <glowLayer>...</glowLayer> - it would require all meshes once created to walk the hierarchy up looking for a GlowLayer and then to call glowLayer.addIncludedOnlyMesh(meshInstance). That can be done by adding a new LifecycleListener here: https://github.com/brianzinn/react-babylonjs/tree/master/src/customHosts for AbstractMesh. I think that would be a good addition and would allow perhaps an easier declarative approach also for shadow casting.

I'm pretty busy this week, but can try for next week. The change is a bit involved as it's going to likely involve changes to the generated code to pick up on the correct LifecycleListener. If you wanted to add that functionality yourself then I can walk through the changes.

[brianzinn]

@saidmoya12 I've started on it. I had to fix something first that has always bothered me, which was that all custom props are available on all host elements. I wasn't going to add any more custom props until that was fixed, but am ready for yours now. Will free up more time for that. Sorry for delay.

[saidmoya12]

Thanks!!

[brianzinn]

HI @saidmoya12 - Need to add support for Models still, since they work a bit differently. This will be a great feature also for ShadowCasting. Seems like adding the root model wasn't enough (you can see the boxes have different intensities).

<glowLayer ref={glow1Ref} name="glow" options={{ mainTextureSamples: 4 }} intensity={1} isEnabled={true} addIncludeOnlyChildren>
    {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => (
      <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,1, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
        <standardMaterial diffuseColor={Color3.Red()} emissiveColor={Color3.Red()} />
      </box>
    ))}
    <ScaledModelWithProgress rootUrl='https://www.babylonjs.com/Assets/NeonPipe/glTF/' sceneFilename='NeonPipe.gltf?v=1'
      progressBarColor={Color3.FromInts(255, 165, 0)}  center={new Vector3(5, 0, 5)}
    />
  </glowLayer>

  <glowLayer ref={glow2Ref} name="glow2" options={{ mainTextureSamples: 4 }} intensity={0.4} isEnabled={true} addIncludeOnlyChildren>
    {Array.from(new Array(NUMBER_OF_BOXES), (_, index) => index).map(x => (
      <box name={'glow-box-1-{number}'} position={new Vector3(Math.cos(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS,3, Math.sin(2*Math.PI/NUMBER_OF_BOXES*x)*RADIUS)}>
        <standardMaterial diffuseColor={Color3.Green()} emissiveColor={Color3.Green()} />
      </box>
    ))}
    <ScaledModelWithProgress rootUrl='https://www.babylonjs.com/Assets/NeonPipe/glTF/' sceneFilename='NeonPipe.gltf?v=2'
      progressBarColor={Color3.FromInts(255, 165, 0)} center={new Vector3(-5, 0, -5)}
    />
  </glowLayer>

[brianzinn]

@saidmoya12 it's working. i'll publish an NPM tomorrow. I'll be adding same concept for shadow generators - thanks for the great idea :)

[brianzinn]

Above example should work on 3.0.18 - declarative meshes and/or <Model ... />. Please re-open if you have any questions/issues.