How to Create Sides on a Ground Mesh?

[adam]

Does anyone know how to create vertical sides on a ground mesh?

Here is a PG to work with:

http://www.babylonjs-playground.com/#WJPB9#2

I'd like the mesh to extend downward on all 4 sides to fill the bottom of the box.

[Pryme8]

I can think of a few ways to do this, but I have a couple questions first.  Does it need to be a single mesh?  If so does the bottom need to stitch itself together as it goes to simplify the geometry?

or do you just need something to cap it.

[Wingnut]

Cooool playground!  Wow!

Ok, let me roll an idea past ya.  START with your ground mesh on the bottom of the box.  Now raise the Y-height of every point EXCEPT those around the outer edge of the mesh.  Now add about 13... to the height of every noise-affected point.  Your box is 40 high, the land surface sits about 1/3 up, so 40/3 = 13.xx. 

Ya know how displacementMaps tend to raise everything in the middle of a mesh, but leave the outer edges of the mesh... at their original height?  Same with your thing.  Keep your outer edges on the bottom of the box, and then raise all your not-along-edge noise-points normally, +13.  That might work.  You might even want to USE a displaceMap instead of a ground.

Also, if you get all your not-raised edge vertices to be directly under the noise-affected edge vertices... your side walls will be perfectly vertical.  If not, the sides of the mesh will have a steep taper.

Does this make any sense?  In other words, you will be adding one row of vertices on each side of the current ground, and placing each point of those... at the bottom of the box.  Also, if you want nice texture on those sides, good luck.  In my method, the texture will be smears and streaks, I believe.  UV adjusting should be able to fix that, somewhat, I guess.

I think that would work... but you know me, Adam.  More dreamer than coder.    If BJS had a ground.setVertexHeight( {row: x, column: y, amount: z}) helper-function, I might have tried to draw the sides myself. 

[adam]

Thanks Wingnut.  I got a good start on it:

http://www.babylonjs-playground.com/#WJPB9#3

http://www.babylonjs-playground.com/#WJPB9#4

http://www.babylonjs-playground.com/#WJPB9#5

[Wingnut]

Man, that's fast!  And NICE!!!  Cool.  Mind if I steal all your code and techniques from this playground?  Too late, saved all. 

[adam]

1 minute ago, Wingnut said:

Mind if I steal all your code and techniques from this playground?

No problem.  I took most of it from Jerome.

[Wingnut]

The look of the texture on the sides... that turned out pretty good, too, eh?  I thought it would be a lot trashier-looking than it is.

[adam]

40 minutes ago, Pryme8 said:

Does it need to be a single mesh? 

That's what I was hoping for.

[adam]

I created a createSidesOnGroundMesh function.

http://www.babylonjs-playground.com/#WJPB9#6

[gryff]

@adam : nothing like answering your own questions

And just to make sure the dark corners were not a problem with the code, I put in a Hemi light instead of the Directional light

With Hemi

And as they say, "No problem"

cheers, gryff

[jerome]

this code does exactly what you want : https://github.com/jbousquie/ArtilleryDuel/commit/19637fd99c7d7f55fcd83d4e0449449bd967c755

[adam]

Thanks Jerome.  

I used that code to create another function called createSidesForGroundMesh:

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

I'm not sure why the texture isn't appearing here:

http://www.babylonjs-playground.com/#WJPB9#9

 

[adam]

I modified Jerome's code to create sides that take a texture:

http://www.babylonjs-playground.com/#WJPB9#14

The way I was creating the sides toward the beginning of this thread messes up the getHeight function of the groundMesh.