Jump to content

Recommended Posts

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)  {
    });

Kayak.jpg.1c30132430960efdd66f8ba4ffe0da8e.jpg

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

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

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);
    }); 

newMeshes6.jpg.728ddc54917ef4222b31a839a71bf9b6.jpg

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

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

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);
        }
    });   

loop.jpg.a9440a06b711fc7e1c85d970fafa64a6.jpg

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

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

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

perfect.jpg.33887be24ddaae84fd899affb401bdad.jpg

Link to post
Share on other sites

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)  ? 

Link to post
Share on other sites

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); 
    }); 

test.jpg.5900166b0e2f08be4bdfbe820aa57df6.jpg

Link to post
Share on other sites

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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...