Setting vertex colors on ground mesh

Questions
1

Babylon.js Playground (see the setVertexColors() method)

I have a ground mesh with a texture, and I am wanting to set the individual vertex colors on the mesh in order to draw a “path” with clean edges (so I want to be able to “fill in” certain facets (triangles) as opposed to sides (squares)).

I’ve run into two main problems, that being

  1. How to properly set the vertex colors? In the playground, there are 3 images each 64x64 pixels. One is for the heightmap, one is for the texture, and one is for the “path”. I’m getting the pixel data from the “path” image from an offscreen canvas, but I’m not sure how to apply this to the vertex data of the mesh.
    And also, in order to “map” the pixels to each vertex instead of each side (which is essentially mapping 1 pixel in the path image to 1 square on the ground mesh), I’m guessing it’d be necessary to double the size of the image, that way 1 pixel in the path image can map to 1 vertex on the ground mesh, thus being able to “fill in” triangles instead of squares.

  2. When setting the vertices data on the ground mesh, how can I do this without affecting the texture? Again, I need the path to be “over” the texture, like so (texture is in wireframe mode to make it more clear):

pathexample
pathexample958×879 220 KB

Thanks

2

Hi SME, good to see you again.

This is tough. I sent you PM about various methods to place path-textures atop ground textures… without modifying ground colorKind vertex data. Just some playgrounds about folks doing things with decals, GUI2d, shaderBulder/NME, context2d texture painting, etc.

If I may re-word things a bit… you want to be able to determine WHEN a player is ON/OFF the overlayed-texture-based path. Unfortunately, when standard player is walking-around, we can ONLY watch player.position (upon ground mesh) (not goal).

Unfortunately, textures stretch, especially across bumpy heightMaps. 1-to-1 mesh position-to-texture-pixel-location… phew.

Let’s pretend a scene. HeightMap ground… random bumps… textured with assorted grass and dirt. Now place ANOTHER texture atop that… with a “path” on it (like your picture). Now try to force player to stay on-path and not let them leave it… even if path texture gets scaled/stretched/compressed.

In short, topmost-overlayed “path texture” is the BOSS of the player… NOT the ground at all. Perhaps player can ONLY walk… on path. Sound correct?

Weird but cool. I have no ideas… but I sure talk a lot. :slight_smile: You would be constantly checking texture-under-player… or even MORE precise… color-under-player (to ensure they are still on-path or not.)

BJS pros… have we/anyone ever done this? Not testing the ground texture color under player… but instead… the overlaid-atop PATH-texture color-under-player? Phew.

Let’s see if the NME boys can pull off THIS one. @Dad72 might have done some work on this, too. He made a cool editor with paint-on-terrain… and might have studied this.

I will delete this rambling when smarter people have ideas. I just wanted to try to clarify. I think it is a COOOOOL idea… but have never heard of anyone being successful or polling “color-of-texture-under-player”. (are they on-path? - A path based on overlaid texture.)

Sorry for rambling. Stay tuned for wiser and briefer responses. :slight_smile:

3

Hi,
Sorry, what I did to paint is on a dynamic texture. I don’t believe this is what Sme is looking to do.

But if it could be useful to you, this is how I paint on ground
https://www.babylonjs-playground.com/#9MPPSY#5

1 Like
4

Alright, thx D.

I’ve been thinking more, SME. (oh no!) :slight_smile:

Pretend you constantly-shoot a “picking ray” from the bottom of your player/vehicle/etc… AT the ground.

PickingRay’s return PickingInfo objects. Let’s look at it’s properties.

There’s some tools there… pickedPoint property and getTextureCoordinates methods. Not sure if useful. Smarter folks will comment soon… stay tuned.

5

Hey Wingnut, sorry, I should have been more clear in my first post

I don’t need the player to only be able to walk on the path, I just showed the example in wireframe mode to make it more clear how I wanted to paint the vertices. Everything else outside of the “gray path” will be grass that the player can also walk on.

Actually, I am wanting a similar effect to how the paths look in the game Runescape Classic, you can see an example of what I mean here: https://i.redd.it/enq0gk31qah01.jpg

I’m not exactly sure what technique was used in that game, for example, maybe they just extruded a submesh from the ground mesh and used that as a “path mesh”, and simply colored that mesh gray.

Unfortunately, this is not my area of expertise… so if the initial way I am trying to do it sounds stupid, thats why haha.

And I am actually OK with the “path” being straight lines or 45 degree angles, I don’t need to have any “curves” per say. Which is why I initially thought just being able to manipulate the vertex colors would be an OK way to go.

I am using decals right now, but they still don’t provide the clean, straight lines when they are at a diagonal angle, particularly when the path is going “up a hill”

1 Like
6

Hmm… that’s not near as complicated… where’s the fun in that? haha. (sorry)

Maybe TWO identical heightMaps… #1 with normal texture, #2 with path texture (transparent background/alpha). Then overlay them, with #2 heightMap slightly higher on y-axis (to avoid tearing).

Two grounds at the same time… could be performance heavy, but maybe not. :slight_smile: A normal heightmap and a path heightmap. Just an idea.

VertexData colorKind modification… based-upon an inbound path texture… pretty tough to do, I think. hmm.

7

Thats a good suggestion, I just tried it, but it still has the problem with the diagonal lines being “jagged” (the path mesh is using NEAREST_SAMPLINGMODE):

https://playground.babylonjs.com/#UYM88A#1

Or is there an easier way to do it that Im missing? (I should mention that this would be a perfect solution if it simply allowed for 45 degree angles)

8

After fiddling around with the Decals a bit more, I think I have found a “good enough” method. The “trick” is to have the path texture be entirely white, which will prevent the decal mesh from having some strange squiggly shadow effects when drawn at a diagonal angle. And then the second “trick” is to have a white pixel with an alpha value of 128 to border along the diagonal line, which allows for a smooth diagonal appearance. Unfortunately it still doesn’t necessarily map to the ground mesh’s vertices 1 to 1, but close enough for now

https://playground.babylonjs.com/#UYM88A#4

9

You can also define your path as a polygon and use a “point in polygon” algorithm in the fragment shader to draw the path:

https://playground.babylonjs.com/#UYM88A#7

I have used the algorithm described in this page (end of the page): Determining Whether A Point Is Inside A Complex Polygon