solved Terrain from ribbons

[Zuzuk]

Hi

I start to make generated terrain from ribbons. There are issues with shading  between ribbons like this:

How can I make it looks like one big ribbon?

[Wingnut]

Hi Zuzuk.... welcome to the forum!

I have something you could try.

var meshpile = [];
meshpile.push(ribbon1);
meshpile.push(ribbon2);
meshpile.push(ribbon3);

var ground = BABYLON.Mesh.MergeMeshes(meshpile);

But... I have this feeling... that tonight's gonna be a good night... err... that you don't want to merge the ribbons, because you will be adding and removing ribbons, periodically.

I'm no expert, sorry.  I THINK that seam is happening... because of the lighting normals along those two edges.  We encountered a similar problem when trying to make "tiled heightMaps" (we tried dividing a heightMap image into 16 parts, then made 16 heightMaps, one for each section, and then tried to place them next to each other).  Seams, seams, seams.  Here's a tileGap = 0 version.  Cross-border normals not averaged = lighting-based visual seams.  (Use mousewheel and control-drag for precision examinations, in the above links.)

We have this nice utility func called showNormals().  You can see/steal it from the above playgrounds.  I bet... if you turned-on showNormals() for your ribbons, you would see that the normals along the right edge of ribbon #1... don't match the normals on the left edge of ribbon #2 (just like the 16-tile demos above).

The normals along all seams... need to be "averaged"-together with their cross-border "partner vert".   I'm not a couple's counselor or foreign policy advisor, but averaging between partners sounds like a good idea.  heh.  (collectivist comedy attempt)

Example:  Somewhere along a the seam... there might be a vertex whose normal is tilted 30 degrees to the left.  Across the seam at its "connection point" vertex (its partner vert that will share it's position)... its normal is tilted 40 degrees to the right.  After averaging the two tilts, BOTH will be tilted 10 degrees to the right.  Then both of these new normals... need to be "inserted" back-into the vertexData normals array for both ribbons.  (ribbons should be set updatable = true, also)

In a way, you need to build a ribbons "sewing machine" that travels the edges/seams and does this "normals averaging".  AND, there's even more trouble.  If you have a vert-position (a location) where FOUR ribbons intersect, all four of the verts that share that position... will need to have their normals averaged and written back to the vertexData objects for all 4 ribbons.  GRUESOME challenge, eh?

[Wingnut hands Zuzuk a cool, refreshing wash-cloth, some aspirin, and an ice cold beer.]  

Do you know about Jerome's, and NasimiAsl's, and Pryme8's continuous terrain generators?  Could THEY be of any use to you?

Will you be querying a database to get "the next needed ribbon"... dependent-upon where the user is traveling-to?  If so, take those aspirin right now, okay? 

Hopefully, smarter people than I... will reply soon.  Stay tuned.

[Pryme8]

https://github.com/Pryme8/TERIABLE

http://pryme8.github.io/TERIABLE/
http://pryme8.github.io/TERIABLE/infinity
 

Here is my old method ^^, Infinity has a player controller as well... but no noise applied to the terrain.
Im working on CDLOD Terrain as an extension with spherical projection.  Stay tuned Ill post a demo eventually, but until then TERIABLE should serve as a good script example of how to handle terrain chunking with no LOD.

[Zuzuk]

On 13.07.2017 at 2:08 AM, Wingnut said:

Hi Zuzuk.... welcome to the forum!

I have something you could try.

var meshpile = [];
meshpile.push(ribbon1);
meshpile.push(ribbon2);
meshpile.push(ribbon3);

var ground = BABYLON.Mesh.MergeMeshes(meshpile);

But... I have this feeling... that tonight's gonna be a good night... err... that you don't want to merge the ribbons, because you will be adding and removing ribbons, periodically.

I'm no expert, sorry.  I THINK that seam is happening... because of the lighting normals along those two edges.  We encountered a similar problem when trying to make "tiled heightMaps" (we tried dividing a heightMap image into 16 parts, then made 16 heightMaps, one for each section, and then tried to place them next to each other).  Seams, seams, seams.  Here's a tileGap = 0 version.  Cross-border normals not averaged = lighting-based visual seams.  (Use mousewheel and control-drag for precision examinations, in the above links.)

We have this nice utility func called showNormals().  You can see/steal it from the above playgrounds.  I bet... if you turned-on showNormals() for your ribbons, you would see that the normals along the right edge of ribbon #1... don't match the normals on the left edge of ribbon #2 (just like the 16-tile demos above).

The normals along all seams... need to be "averaged"-together with their cross-border "partner vert".   I'm not a couple's counselor or foreign policy advisor, but averaging between partners sounds like a good idea.  heh.  (collectivist comedy attempt)

Example:  Somewhere along a the seam... there might be a vertex whose normal is tilted 30 degrees to the left.  Across the seam at its "connection point" vertex (its partner vert that will share it's position)... its normal is tilted 40 degrees to the right.  After averaging the two tilts, BOTH will be tilted 10 degrees to the right.  Then both of these new normals... need to be "inserted" back-into the vertexData normals array for both ribbons.  (ribbons should be set updatable = true, also)

In a way, you need to build a ribbons "sewing machine" that travels the edges/seams and does this "normals averaging".  AND, there's even more trouble.  If you have a vert-position (a location) where FOUR ribbons intersect, all four of the verts that share that position... will need to have their normals averaged and written back to the vertexData objects for all 4 ribbons.  GRUESOME challenge, eh?

[Wingnut hands Zuzuk a cool, refreshing wash-cloth, some aspirin, and an ice cold beer.]  

Do you know about Jerome's, and NasimiAsl's, and Pryme8's continuous terrain generators?  Could THEY be of any use to you?

Will you be querying a database to get "the next needed ribbon"... dependent-upon where the user is traveling-to?  If so, take those aspirin right now, okay? 

Hopefully, smarter people than I... will reply soon.  Stay tuned.

 

On 13.07.2017 at 2:40 AM, Pryme8 said:

https://github.com/Pryme8/TERIABLE

http://pryme8.github.io/TERIABLE/
http://pryme8.github.io/TERIABLE/infinity
 

Here is my old method ^^, Infinity has a player controller as well... but no noise applied to the terrain.
Im working on CDLOD Terrain as an extension with spherical projection.  Stay tuned Ill post a demo eventually, but until then TERIABLE should serve as a good script example of how to handle terrain chunking with no LOD.

maybe it'll be more easy to just make all normals on edges to vector3(0,1,0)?

[jerome]

I suppose you can see this seam only on when two ribbons are stuck together.

Check this by displaying your ribbon in wireframe mode.

In this case, you have to compute by your own some smooth seam process : get the first ribbon normals on the seam edge, get the second ribbon normals on the other edge, then, for instance, compute the average of both (first and second ribbon normals on the intersection point) and assign it to both ribbon normal on this point.

Here's an example of such a process (don't care about the use of getHeightFromMap(), this is the same pricinple) : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/src/babylon.dynamicTerrain.ts#L590

[Wingnut]

There's some kind of "echo" on this thread.  heh.

Yep... at-seam normals-averaging.  And at places where 4 ribbons connect, 4-way averaging.

Setting each "edge" normal to 0, 1, 0... will still produce a noticeable "seen" seam.  This is can be EASILY-seen when part of a mountain SLOPE is on ONE ribbon, and another part is on an ADJACENT ribbon.  The angle of the normals along the steep slope... must stay consistently angled, or else the mountain slope shading will go wonky and look strange.  A (0, 1, 0) normal along that slope... would screw up the shading/lighting.

The needed "edge normals-averaging sewing machine" is not easy-coding, either.  @adam once said he might try it... for my 16-tile heightMap mess... but he wussed-out in the end. hehe.  (I'm just funnin'-with Adam.)  I was totally honored that he even THOUGHT ABOUT trying it.  Pretty nice of him... and I wouldn't wish that task on ANYONE.  It would be very hard work... I think.

@Zuzuk, do you want to "feed" new ribbon data... to the scene... from a server?  As user walks around, scene makes queries to server for new ribbon-making data?

OR... do you simply-want any "endless" (dynamic-generated) terrain? (easier)

I think NasimiAsl's dynamic terrain thing CAN query a server for fresh data.  Unfortunately, its playground version is broken due to mimetype problems.

Jerome's dyna-terrain isn't really designed to query servers for fresh data, but perhaps COULD.  I'll let him show us his fave playgrounds.

Pryme8... I don't think I have a playground of his dyna-terrain, yet, and I'm not sure how ready it is for server-fed terrain data.

And don't forget LOD.  WebGL can handle a fairly-large STATIC (made-once) heightMap with good resolution, and still maintain performance via "level of detail" checking.  *shrug*  Anyway, just Wingnut rattling-on, as usual.

[Zuzuk]

On 17.07.2017 at 10:58 AM, jerome said:

I suppose you can see this seam only on when two ribbons are stuck together.

Check this by displaying your ribbon in wireframe mode.

In this case, you have to compute by your own some smooth seam process : get the first ribbon normals on the seam edge, get the second ribbon normals on the other edge, then, for instance, compute the average of both (first and second ribbon normals on the intersection point) and assign it to both ribbon normal on this point.

Here's an example of such a process (don't care about the use of getHeightFromMap(), this is the same pricinple) : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/src/babylon.dynamicTerrain.ts#L590

16 hours ago, Wingnut said:

There's some kind of "echo" on this thread.  heh.

Yep... at-seam normals-averaging.  And at places where 4 ribbons connect, 4-way averaging.

Setting each "edge" normal to 0, 1, 0... will still produce a noticeable "seen" seam.  This is can be EASILY-seen when part of a mountain SLOPE is on ONE ribbon, and another part is on an ADJACENT ribbon.  The angle of the normals along the steep slope... must stay consistently angled, or else the mountain slope shading will go wonky and look strange.  A (0, 1, 0) normal along that slope... would screw up the shading/lighting.

The needed "edge normals-averaging sewing machine" is not easy-coding, either.  @adam once said he might try it... for my 16-tile heightMap mess... but he wussed-out in the end. hehe.  (I'm just funnin'-with Adam.)  I was totally honored that he even THOUGHT ABOUT trying it.  Pretty nice of him... and I wouldn't wish that task on ANYONE.  It would be very hard work... I think.

@Zuzuk, do you want to "feed" new ribbon data... to the scene... from a server?  As user walks around, scene makes queries to server for new ribbon-making data?

OR... do you simply-want any "endless" (dynamic-generated) terrain? (easier)

I think NasimiAsl's dynamic terrain thing CAN query a server for fresh data.  Unfortunately, its playground version is broken due to mimetype problems.

Jerome's dyna-terrain isn't really designed to query servers for fresh data, but perhaps COULD.  I'll let him show us his fave playgrounds.

Pryme8... I don't think I have a playground of his dyna-terrain, yet, and I'm not sure how ready it is for server-fed terrain data.

And don't forget LOD.  WebGL can handle a fairly-large STATIC (made-once) heightMap with good resolution, and still maintain performance via "level of detail" checking.  *shrug*  Anyway, just Wingnut rattling-on, as usual.

Dynamic terrain is awesome!

But noise which I'm using isn't tileable and fog doesn't work with terrain

Now I need to make tileable noise or edit dynamic terrain to grab values right from noise function to generate infity noise

Wingnut, I need any "endless" (dynamic-generated) terrain

[Pryme8]

https://pryme8.github.io/Das_Noise/

tile-able noise ^_^, if you need help with it let me know.
Its not an active project for me anymore, but I use it all the time for other projects so if there are any errors or requests let me know.

[Zuzuk]

12 hours ago, Pryme8 said:

https://pryme8.github.io/Das_Noise/

tile-able noise ^_^, if you need help with it let me know.
Its not an active project for me anymore, but I use it all the time for other projects so if there are any errors or requests let me know.

Thanks a lot!

I don't know noises good so which one is tileable?

[Zuzuk]

3d noise is tileable and I need to make a torus to take values

I made a cylinder and don't know how to make a torus

my attempts to make torus made noise tileable, but it's strange noise(it's 2x2)

[Zuzuk]

I copied formula of torus from wikipedia, but it looks like torus isn't what I need

[Pryme8]

what are you trying to do exactly?

[Zuzuk]

14 hours ago, Pryme8 said:

what are you trying to do exactly?

I'm trying to make tileable noise, but I don't know how to do it right

[Pryme8]

What do you mean by tile-able noise?  Do you want the noise to repeat?


var x = (x/unitSize) - Math.Floor(x/unitSize);
var z = (z/unitSize) - Math.Floor(z/unitSize);

I just woke up so that math might be wrong but off the top of my head that sounds right to make it repeat.
https://pryme8.github.io/Das_Noise/Tutorial_1/  <- might have some info for you.

If you just want infinite noise then you need to not use a texture map... just use my Das_Noise Lib and keep feeding it what ever coords you want it will go on for ever.

 

 var noise = new dN('Simple2' , 'testSeed',
    {
    frequency:1,
    amplitude:1,
    octave:1,
    persistence:1,
    scale:100,    
    });

 var vertexData = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    for (var i = 0; i < vertexData.length; i += 3) {
			var x = vertexData[i]+mesh.position.x, y = vertexData[i+1] ,z = vertexData[i+2]+mesh.position.z;
            var h= noise.getValue({x:x,y:z});
				vertexData[i+1] = h*height;
			}

mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, vertexData, 0, 0);

 

[JohnK]

I think Zuzuk wants an image that when top edge meets bottom edge no seam is made and also when left edge meets right edge no seam is made.

[Pryme8]

https://www.codeproject.com/articles/838511/procedural-seamless-noise-texture-generator

[Zuzuk]

On 21.07.2017 at 4:03 AM, Pryme8 said:

https://www.codeproject.com/articles/838511/procedural-seamless-noise-texture-generator

this noise looks strange

Well, I took the idea of dynamic terrain and now my terrain is one big ribbon.

Ribbon is moving with player and recalculating positions like in this playground: https://www.babylonjs-playground.com/#1MSEBT#3

Thanks for everyone!

[JackFalcon]

I think it is beautiful... but hey: turn "updatable" to false, in the parameters of your ground?