[SOLVED] Need help with alpha channels

Help & Support
,
1

Hey guys, so i’m running an engine only project and i’m probably missing something regarding alphas

STACK:
a css3 renderer
and theres two walls
normal one
and one with alpha
inside the alpha, there’s text inside that is invisible also

diffuse = new pc.Color().fromString('#755a5a');
blendType = pc.BLEND_NORMAL;
opacity = 0.5;

what am i missing?

…

alpha one makes css3 rendered to be visible, also makes text to be invisible

2

Hi @Newbie_Coder,

To better understand the issue, if you disable the CSS3D string does your alpha blended material render?

CSS3D isn’t really officially supported in PlayCanvas.

3

Yes, it does render.
I’m experimenting with different blend types and seems like “Premultiplied Alpha” solves the issue for 3D renderer, but not the text

4

Got the text showing up also, under alphas, any ideas how to set this sequence in engine-only?
Capture

5

For that you need to work with the main layer composition under the scene object:

this.app.scene.layers;

The relevant methods to remove and insert a layer at a specified index are here: LayerComposition | PlayCanvas API Reference

1 Like
6 
      // get the world layer index
        const SkyboxLayer = pc.app.scene.layers.getLayerByName("Skybox");
        const UiLayer = pc.app.scene.layers.getLayerByName("UI");
        const idx = pc.app.scene.layers.getOpaqueIndex(SkyboxLayer);

        pc.app.scene.layers.insert(UiLayer, idx + 1);

Based on public engine examples, nothing happens :thinking: no errors
Capture
the IDs getting messed up

7

@mvaligursky when working with engine examples, what’s the proposed way of setting the scene layers render order?

8

Multiple examples do this, I think that’s the currently best way:

const excludedLayer = new pc.Layer({ name: "Excluded" });
app.scene.layers.insert(excludedLayer, app.scene.layers.getTransparentIndex(worldLayer) + 1);

There are few different functions to add a layer:

1 Like
9

Each layer has a unique ID, and each layer can be added in the list twice, one time to render opaque objects, one time to render transparent objects.

Have a look at subLayerList array on the same objects as layerList, True means transparent objects are rendered, and false means opaque.

I agree this is not ideal set up to understand, and there is also another array with enabled flags called subLayerEnabled. I was looking at replacing this by a single array of objects, but did get to that yet.

10

If you run this somewhere at startup:

pc.Tracing.set(pc.TRACEID_RENDER_ACTION, true);

it will log a list of layers that get rendered for each camera … along with transparent / opaque flag, that should be easier to read.

11

But how do I actually change the existing (default) order? I’m not trying to add new layer, just want to change the order
This is default:
Capture
And I need UI to come right after Skybox

12

remove a layer, and then add it back to a different place using the API that is linked above.

1 Like
13

Apparently this case won’t work:


const uilayer = pc.app.scene.layers.getLayerByName("UI");
const cloned = Object.assign({}, uilayer);

pc.app.scene.layers.remove(uilayer);

const SkyboxLayer = pc.app.scene.layers.getLayerByName("Skybox");
const idx = pc.app.scene.layers.getOpaqueIndex(SkyboxLayer);

pc.app.scene.layers.insert(cloned, idx + 1);

Uncaught TypeError: e.addMeshInstances is not a function

Even if I managed to clone or recreate original “UI” I’d still need to re-add layers for each entity that was using “UI” or it would automatically re-apply?

14

Okay so this is final:

const uilayer = pc.app.scene.layers.getLayerByName("UI");
pc.app.scene.layers.remove(uilayer);

const layer = new pc.Layer({
	name: "UI",
});


const SkyboxLayer = pc.app.scene.layers.getLayerByName("Skybox");
const idx = pc.app.scene.layers.getOpaqueIndex(SkyboxLayer);

pc.app.scene.layers.insertTransparent(layer, idx + 1);

Capture
This is also correct

But the text does not appear, probably the new “UI” is not the same as old original “UI” in terms of entities.

15

Don’t clone a layer. Remove the layer, and add the same layer to a new spot, not the one you “clone”.

16

Did that already, even if its identical to how its set in editor, text doesnt re-appear after running that piece of code

17

Yep, as I thought, the new “UI” layer is not the same as original “UI” layer in the “eyes” of entity.
Once layer is removed and added to other index

pc.app.root.findByName(“Text”).element.layers still outputs the original array of index ID

18

Okay…

had to look at source code to make it work, thanks guys.

const layer = new pc.Layer({
	name: "UI",
    id: pc.LAYERID_UI,
	transparentSortMode: pc.SORTMODE_MANUAL,
	passThrough: false
});