renderOutline Question

[djeustice]

Hello.  I have a kayak model in my scene and I would like the renderOutline to show around the model like in the playground examples below:

http://www.babylonjs-playground.com/#18ZFZ9

http://www.babylonjs-playground.com/#18ZFZ9#2

Here is code importing the kayak:

    BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
    });

-----------------------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------

I first tested out this code below.  I checked index numbers 0-12 and newMeshes[6] is the only one that shows the outline around the model.  Another problem is this changes my kayak hull texture as well:

    BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
        newMeshes[6].renderOutline = true;
        newMeshes[6].outlineWidth = 0.01;
        newMeshes[6].outlineColor = new BABYLON.Color4( 255, 200, 0, 1);
    }); 

-----------------------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Next, I tried the loop like in this playground: http://www.babylonjs-playground.com/#18ZFZ9#2 .  The outline shows around the model but is outlining the other meshes on the model as well.

    BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
        for (var i = 0, max = newMeshes.length; i < max; i += 1){
            newMeshes.renderOutline = true;
            newMeshes.outlineWidth = 0.01;
            newMeshes.outlineColor = new BABYLON.Color4( 255, 200, 0, 1);
        }
    });   

-----------------------------------------------------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------

This image below is exactly what I'm looking for.  What would be the best way to achieve this?  Thank you.

[GameMonetize]

I guess the best option would be to decouple the hull from the kayak body so you can turn outline rendering only on the body

[Wingnut]

I wonder what a...

var test = BABYLON.Mesh.MergeMeshes(newMeshes);
test.renderOutline = true;
etc... etc...

...would do.  hmm.   

But yeah, ONE of the meshes in newMeshes array... is the kayak body/hull.  You can try ONLY setting outlineRender on THAT, as DK says.  Perhaps its in newMeshes[0]... or newMeshes[1]... or [2]?  console.log(newMeshes[2].name)  ? 

[djeustice]

Awesome! I tried the MergeMeshes code above and this has the perfect effect I am looking for.  Only problem is it looks like the normals on the kayak flipped.  I thought setting test.backFaceCulling = false; would fix it but no luck.

    BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
      
        var test = BABYLON.Mesh.MergeMeshes(newMeshes);
            test.backFaceCulling = false;
            test.renderOutline = true;
            test.outlineWidth = 0.01;
            test.outlineColor = new BABYLON.Color4( 255, 200, 0, 1);
        
        console.log(test.name); 
    }); 

[Wingnut]

Crap.  Yeah, I forgot about the textures.  MergeMeshes is not going to work... without a whole bunch of texture work (to make many textures into single texture).

Darn.  It was a bad idea from Wingnut.   

DJ, is this outlineRender thing... used to indicate that the kayak has been selected?  For example, is it used to indicate that a user has clicked-on the kayak? 

Or is there more/other purposes than that?  (thx)  I wonder if the BJS HighlightLayer on the hull... could work.  Perhaps we could massively-increase all material.emissiveColors.... when kayak is selected, and then return them to previous values, when de-selected.  hmm.

[brianzinn]

with HighlightLayer:
http://www.babylonjs-playground.com/#18ZFZ9#3

[djeustice]

First off, thank you all for the replies!  Yes Wingnut, it is for clicking and selecting the kayak.  I was hoping to use the yellow renderOutline because we use yellow outline for selection in our standalone Unity3d app.  But right now I will be happy to get any type of selection working.  I will check out the HighlightLayer and emissiveColors and let you know my results.  Thanks again!