[SOLVED] Layer.id versus plain resetting of the glb-layer at node-level

Within this small Refraction-template project; https://playcanvas.com/editor/scene/1318129

… namely by its handling of Layer.id and/or other methods that I know of.

I have for instance done this:

utils.loadGlbContainerFromUrl (this.glbAssetUrl, null, this.glbAssetUrl.name, function (err, asset) {

    /** @type {pc.Entity} */

    var renderRootEntity = asset.resource.instantiateRenderEntity();

   // self.entity.addChild(renderRootEntity);

    // Get all the render components that have been created in the hierarchy

    /** @type {pc.RenderComponent[]} */

 /*   var renders = renderRootEntity.findComponents('render');

    var layerIds = [];

    var i;

    // Get the list of layer ids

    for (i = 0; i < self.layerNames.length; ++i) {

        var layer = self.app.scene.layers.getLayerByName(self.layerNames[i]);

        if (layer !== null) {

            layerIds.push(layer.id);

        }

    }

*/

    self.entity.addComponent('model', {

        asset: asset.resource.model

    });

At the Refraction.js I am trying to access the glb-models layer at node-level amongst other things.
But no matter what; it seems like the “Sphere”-material restrains from reacting.

Hi @Thomas_Due_Nielsen,

What are you trying to do? Mesh instances don’t have a layer property, nor materials have.

Model and render components can have one or more layers assigned to them. As a result they will automatically insert their referenced mesh instances to that layer.

For example you can add one or more layers when creating this model component like this:

    const layerId = self.app.scene.layers.getLayerByName('My Layer');
    self.entity.addComponent('model', {

        asset: asset.resource.model
        layers: [layerId] // here you can reference layers by their id
    });
1 Like

ok will look into it (if you are very curious on the whole story / context … cf my prior exchange with yaustar here Transparency alpha render issues - #44 by Thomas_Due_Nielsen)

So with the premise of this working for the loaded glb-sphere:

            var modelLayers = model.layers.slice(0);
                console.log('Refraction: entityWLID "'+ modelLayers.indexOf(this.layerWorld.id));
            if (modelLayers.indexOf(this.layerWorld.id) === -1) {
                console.log('Refraction: entity "' + entities[i].name + '" is not on "World" layer.');
                continue;
            }

Within my debugging; the ‘material’ has now changed from an all default material, to have a gray semiskybox-like bluish surface.

I move on to updating the material (here in three steps to show the challenge):

Step 1):

   // update materials
            var meshes = model.meshInstances; 
            for(var m = 0; m < meshes.length; m++) { 
               if(entities[i].name ==="Model"){      
//meshes[m].material.cull = pc.CULLFACE_BACK;
                   // meshes[m].material.depthWrite=false;
               }
                 
               meshes[m].material.chunks.refractionPS = this.chunkRefractFS.resource;
                meshes[m].material.update();
                }

Step 2) - I try to outcomment the lines with depthwrite and cull:

   // update materials
            var meshes = model.meshInstances; 
            for(var m = 0; m < meshes.length; m++) { 
               if(entities[i].name ==="Model"){      
meshes[m].material.cull = pc.CULLFACE_BACK;
                  meshes[m].material.depthWrite=false;
               }
                 
               meshes[m].material.chunks.refractionPS = this.chunkRefractFS.resource;
                meshes[m].material.update();
                }

  • and as one can see no change.

Step 3) - I try to change / set the material in order to mimic the start material of the other / internal cubes and spheres:


            // update materials
            var meshes = model.meshInstances; 
            for(var m = 0; m < meshes.length; m++) { 
               if(entities[i].name ==="Model"){      
                   
                   meshes[m].material = self.app.assets.get(66136474).resource;
                    meshes[m].material.cull = pc.CULLFACE_BACK;
                    meshes[m].material.depthWrite=false;
               }
                 
               meshes[m].material.chunks.refractionPS = this.chunkRefractFS.resource;
                meshes[m].material.update();
                }

PS in regards to the “Trying to bind …” err msg: Have tried to attach the material different places already.

The project is still open for scrutiny: https://playcanvas.com/editor/scene/1318129

What change were you expecting at this point?

Taken from the previous topic https://forum.playcanvas.com/t/transparency-alpha-render-issues/23779/44:

Turning off depth write doesn’t mean the scene will look different. In their case, it was to avoid the issue where multiple transparent meshes were rendering in an undesired order.

In your case, you don’t really have that problem so it’s going to look the same

1 Like

I’ve forked the project and removed a bunch of code that didn’t do anything to try to make some sense of this.

The error you get here about binding the color buffer is because you are trying to render target buffer in the same layer that it’s being rendered (ie an infinite loop). I’m not sure what you are aiming for here but the render target cannot be used on the same layers that’s being rendered to it.

2 Likes

Oh, I see what has happened.

You had the model component of the GLB you are loading in be on ALL the layers including the refraction layer so it was trying to render itself

Changing it to this (with some code cleanup) fixes the issue

Full fork: https://playcanvas.com/editor/scene/1319642

3 Likes

Pure WebGL-Awesomeness!
Thx - it really helps my project going on forward.