Jump to content

Better Outline for Mesh


Recommended Posts

Hey folks,

 

I was playing around with a custom version of a mesh outline that (so I hoped) would work a bit better as the normal mesh.renderOutline. It all looked pretty good until I tried it with a cylinder:

 

http://www.babylonjs-playground.com/#E51MJ#8

 

It seems that the sideOrientation is not applied correctly for the cylinder. Or am I doing something wrong here?

 

 

Bonus question: could I somehow just clone the original mesh and set the sideOrientation for the cloned version or is it only possible to set that in the constructor? It didn't seem to work when I tired setting it after the mesh is created.

Link to post
Share on other sites

Yeah, it probably won't if we can't set the side oriantation for a loaded mesh. But if we could do that, I don't see why it wouldn't work for loaded meshes as well.

 

Is it technically possible to change the side orientation of a mesh afterwards and just not available yet? Or is there a problem doing it on the fly and that's why it's not possible at all?

Link to post
Share on other sites

for cylinder backside orientation :

 

As the cylinder implementation was changed just some days ago (ribbon based now) in order to fix the "seam" normal issue (light artifact), maybe something has been forgotten in the code or maybe the underlying ribbon is simply wrapped the opposite way on the cylinder shape.

 

We need to check this.

Link to post
Share on other sites

Hey iiceman,

 

There's a method for flipping faces now:

mesh.flipFaces(flipNormals? : boolean)

If that can make your life easier :)

 

As for the cylinder implementation, if I'm not wrong the new one still haven't been implemented in the playground. Take a look at this: http://www.babylonjs-playground.com/#1S6POH#5

Still the good ol' seam, right?

 

And that is consistent with your observations, since the old implementation didn't handle side orientation.

Link to post
Share on other sites

@jahow: sweet, works like a charm: http://www.babylonjs-playground.com/#E51MJ#10 but it's not really the perfect result for the outline... too bad, guess it's just not possible for complex imported meshes.

 

About the cylinder: I'll check again somewhen. I'll let you know here if it finally works with the new cylinder version. :D

Link to post
Share on other sites

Oh god, I forgot about those... I swear, I'll never mess with the meshes again  :o

 

Will fix ASAP

 

EDIT: also, since we're talking about cylinders, it's not visible in your PG but the normals on the side of the cylinders are tilted. Jerome, if you're around.... help!! :D

Link to post
Share on other sites
  • 3 months later...

Did anything about the flipFaces function change? I am playing around with it again to create an outline. I clone a mesh and then flipFaces on the cloned mesh. But somehow it flips the faces of the original mesh, too. Is that intended behavior? I don't remember that it was like this before. You can see it here: http://www.babylonjs-playground.com/#E51MJ#16

 

Edit: or maybe it's not the flipFaces but the clone function that changed? I found this playground where I try to flip the faces manually on a cloned mesh and it seems to have the same result: http://www.babylonjs-playground.com/#E51MJ#9

 

Edit2: It seems that the geometry is shared between the original mesh and the cloned one... I think that is the whole sense of cloning. So I deduce that's how it's meant to be. But somehow I remember I made it work here: http://p215008.mittwaldserver.info/space/ - if you hover over an asteroid it gets the outline like that:

asteroid.customOutline = asteroid.clone('customAsteroidOutline');asteroid.customOutline.isVisible = false;asteroid.customOutline.isOutline = true;asteroid.customOutline.scaling = new BABYLON.Vector3(1.1, 1.1, 1.1);asteroid.customOutline.material = new BABYLON.StandardMaterial('outlineMaterial', scene);asteroid.customOutline.material.diffuseColor = new BABYLON.Color3(1, 0, 0);asteroid.customOutline.material.emissiveColor = new BABYLON.Color3(1, 0, 0);asteroid.customOutline.material.specularColor = new BABYLON.Color3(0,0,0);asteroid.customOutline.material.alpha = 0.7;

Any idea why that doesn't seem to work anymore? I jsut tried with the old version that I used back then, but somehow I still can't get it to work in my new project. Not sure what I am doing wrong. I am so confused  :unsure:

Link to post
Share on other sites

I tried that and it almost worked but something didn't seem right.

this.highlightedMesh =  new BABYLON.Mesh('outline', scene);var vertexData = new BABYLON.VertexData();vertexData.positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);vertexData.indices  = mesh.getIndices();vertexData.normals  = mesh.getVerticesData(BABYLON.VertexBuffer._NormalKind);var clonesGeometry = new BABYLON.Geometry(mesh._geometry.id + '_clone', this.scene, vertexData, false, this.highlightedMesh);vertexData.applyToMesh(this.highlightedMesh, false);

I'll try that copy, that sounds promising, thanks. I'll try that tomorrow and let you know how it went :D

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...