Shading on Tube Mesh

[adam]

The shading on this simple tube mesh does not look correct:

 

http://www.babylonjs-playground.com/#1A4DON

 

Can someone tell me what I am doing wrong?

 

Edit:  light is shining from above so I wouldn't expect there to be a gradient on one side and a hard edge on the other.

[adam]

I'm guessing the default texture has a simple linear gradient and to get rid of it, I just need to assign a texture that doesn't have a gradient.  Is that correct?

[iiceman]

I don't think it has something to do with a gradient. The  standard material should not do something like that as far as I know. I think it's more about how the light gets calculated... something about the normals? I don't know enough to tell you why Let's wait for Jerome or somebody else who can tell you more about it

 

But the effect is less visible the more tessellation you use: http://www.babylonjs-playground.com/#1A4DON#1

[jerome]

No, I know why this behaves that way.

Well, it's a hard choice : the tube is done with a tubular closed ribbon. So we have two choices to close the ribbon :

- either set the last vertices at the same positions than the first ones (this is this case), so if you apply a texture, it will be stretched along the full circle. But the normals will be different on first and last vertices, so you notice this artefact (unless maybe you increase the tessellation).

- either re-use the first vertices as last ones. In this case, the normals will be continuous along the circle and no artefact will appear... but as last and first vertices are the same, they will be assigned only one uv pair... so you won't be able to stretch a texture along the complete circle. In this case, a higher tessellation will hide the texture problem.

 

This kind of problem appears with all BJS continuous closed shape : cylinder, sphere. A choice had to be done : priority to normals or to textures.

As people usually give a texture to their meshes, the priority is given to textures.

 

 

So, what are the options :

- increase the tessellation so the artefact is acceptable (or lower it if you want sharp egdes and it will be acceptable also... maybe)

or

- use ExtrudeCustom() instead with a circular shape ... and set the ribbonClosePath parameter to true. Actually this will build a tube by re-using the first and last vertices

or

- let me know people if you prefer that I change the CreateTube() code to give priority to normals over textures.

[iiceman]

Maybe add a parameter in the createTube function to let the user decide if the first vertices should be re-use as last ones?

[adam]

That parameter in createTube would be a nice option.

 

For now, I got it working using ExtrudeCustom and a circular shape.

 

http://www.babylonjs-playground.com/#1A4DON#2

 

Thanks

[jerome]

one more parameter ? Wingy will have a heart attack ! 

 

why not (despite it would be many parameters) ? but this wouldn't solve the other continuous closed mesh problem (sphere, cylinder) ...

 

@adam : for your PG with ExtrudeCustom, you don't need so many points in your path. I guess two only (start and stop) would be enough

[jahow]

The trick is that relying on VertexData.ComputeNormals for a closed shape will inevitably produce this sort of artifact on seams (since polygons at the seams are not actually connected to each other, their normals orientations cannot be correctly interpolated).

 

BJS standard closed shapes (torus, sphere, cylinder...) have their normals set directly during mesh creation, and do not rely on ComputeNormals. As such, they avoid these artifacts.

 

Not saying there is actually a better way of doing things when it comes to ribbons... I just though it needed clarification.

[jerome]

The tube (or any ribbon) is constructed as other BJS standard meshes. You've got the same artifact on a cylinder for instance :

 

http://www.babylonjs-playground.com/#1A4DON#8

 

It just depends on the choice to re-use vertices or not in the indices array.

If you re-use vertices (so the first and the last are the same vertex), then the normals are continuous and you don't have any artifact. But in this case, as only one uvs pair can set associated to this very vertex, you can't easily stretch a texture along the closed part :

example : the first vertex has uvs = [0,0]... this vertex is re-used in indices as the last vertex => its uvs is still [0, 0] and not [1, 0]

 

A workaround could be to change the way the shape are closed when building them.

Example : for a sphere you can choose to iterate first on latitudes then on longitudes or the contrary. This means the seam will etiher on a pole either on a start/end longitude. It is easier to hide a seam, reduced to one point, at a pole

 

I suggested to DK an improvement (he agreed to) to computeNormals() where we could pass it an optional extra-parameter (an array) to explicitly define what vertices should be considered as other ones in the computation. So in this case, no need for vertex re-use : the normals would be computed as if they were reused for these declared vertices only. This means they could then have their own uvs each (right texture stretching) but normals computed as if they would belong to the next face.

Not sure I'm very clear.

 

But I had no time so far to code this, because it needs a deep thinking and amount of concentration

[jahow]

The tube (or any ribbon) is constructed as other BJS standard meshes. You've got the same artifact on a cylinder for instance :

 

http://www.babylonjs-playground.com/#1A4DON#8

 

 

Ha, true, I thought cylinders were built like spheres and torus. You can see the use of ComputeNormals here: https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.vertexData.ts#L791

 

Spheres are fine on the other hand, see: http://www.babylonjs-playground.com/#1A4DON#9

But as soon as you use the dreaded ComputeNormals... http://www.babylonjs-playground.com/#1A4DON#10

 

I don't know, this is all pretty complicated. There must have been standard solutions found for this over the years, so some research would certainly be a good start.

[jerome]

Actually the BJS sphere is particuliar case because it doesn't use the computeNormals() method.

Indeed, as we know each vertex is at radius distance from the sphere center, the normals are just set from the vertex positions themselves : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.vertexData.ts#L647

 

So no "seam" problem here

[jerome]

After a deeper look with Jahow's eye, it seems that ThreeJS has exactly the same behavior about continuous closed shapes.

[jerome]

We've got a lead to fix this actually.

[jerome]

I'm working on it currently (ribbon case, what is the basis for all parametric shapes).

Tougher than I expected so far with all these f%$*&!#g  crossed indices ...

[jerome]

PR for ribbons ... for now

 

The closePath parameter don't make a light artifact any longer. And there is no more priority to textures over normals : both work together now (and better than 3js )

 

I need to report the fix for tubes, lathes, extruded shapes... this should be quite simple (I hope)

And to report it to the mesh update method for morphing (more difficult)

[jerome]

Ok : done and PR for tubes

 

There was nothing more to add for lathe and extrusion

 

Need to investigate the update function now

 

[EDIT] : will do this tomorrow, enough for today

[jahow]

Go jerome go!!

[jerome]

PRed.

 

Works fine locally here with dynamically morphed ribbons or tubes : no more light artifact and full texture around the closed shape

http://jerome.bousquie.fr/BJS/test/ribbonfix.html

 

Thank you Jahow for the discussion and the given ideas

[jerome]

Btw, if someone would like to fix the cylinder mesh normals, it would be great

 

I could do it, but I'm on holiday tomorrow and will have a break from BJS for some time

[jahow]

So... wiggly...

 

I'll fix the cylinder, don't worry enjoy your time off.

 

PS: the PG in the first post now looks perfect! magic!!

[jerome]

did they already pushed the new built engine into the PG ?

so fast ...

[jerome]

for the cylinder I took a look at the algo

 

Imho, there are two ways to do it easily :

 

- without computeNormals() , you compute the normals on each vertex when computing the positions as they do in threejs (or like for the BJS sphere): just beware of an eventual angle because top and bottom diameters could be different

- keep the algo as it is, just store  in a temporary array what vertices are the seam during the positions computation, then compute normals with computeNormals() (unchanged) and finally just change the seam vertex normal values to the average of seam start and end normal values.

[jahow]

PR done: https://github.com/BabylonJS/Babylon.js/pull/623

 

I ended up reusing CreateTube with simplified parameters to create cylinders. After all, a cylinder is a subset of a tube which is a subset of a ribbon (ie parametric surface)...

http://www.babylonjs-playground.com/#1S6POH#2

 

As such, VertexData.CreateCylinder is no longer used!

 

By the way, I couldn't just ask for CreateTube to add caps to both sides, since the way it does caps is not really statisfying for a cylinder (no hard edge). IMHO, CreateTube could be enhanced by supporting hard edge at caps.

[jerome]

You are right : the tube caps were added quickly (and dirty) to solve someone's problem.

[jerome]

Considering the ribbon, I suppose I will have to change the closeArray parameter behavior also although it is rarely used.

I'll do this, of course, ... later