Jump to content

Grid material with dynamic cell colors


Gordon Hempton
 Share

Recommended Posts

I am looking to create a ground-type object where each cell contains a different color (driven by a large array of numbers).  Ideally the edges of the cells would also be visible. This grid could be upwards of 100x100 and I am trying to think through what would be the right implementation. Options I am thinking of:

1. Create a TiledGround object with 100x100 subdivisions. Each cell would then use a separate submesh/material. This seems excessive and am not sure this will scale well.

2. Store the color of each tile in a texture and use a fragment shader to determine the color based on the pixel location and this texture. This seems like it might be a little more complex.

Any have any ideas or can point me in the right direction?

 

Cheers,

Link to comment
Share on other sites

Yeah!  And, using vertex colors (colorKind data)... you could STILL "sample" an image/texture (using W3c context2d canvas)... and use that image information (pixel colors)... for the mesh vertex colors (at each vertex position, which would be on the corners of each "cell').

So, your mesh/grid vertex colors... can still be "queried" FROM an actual texture or image.
elR5x.png

I'm not sure WHY you would WANT-to query pixel colors at certain image points, and apply them to a tiledGround cell-corner colorKind data... but it sure could be done.  The tiledGround would not reproduce the picture whatsoever... as it is sampling/querying SO LITTLE of its pixel data.  Still... interesting thinking.  Probably better just to store (or generate) colorKind data... in simple JS arrays.

18 hours ago, Gordon Hempton said:

Ideally the edges of the cells would also be visible

Sometimes, that is best done by cloning the tiledGround, putting wireframe material on it, and overlay-it atop first tiledGround.  There are other ways, too.

Anyway, I was just adding-on some info... to Delta's good idea.  Let's look at a textured-by-color-grid heightMap ground... in wireframe mode... just to give us something to think about.

https://www.babylonjs-playground.com/#0Q7RBX#1

Pretty.  :)  It isn't a tiledGround, but... hmm.  Here's another... a tiledGround playground that I once played-with.  https://www.babylonjs-playground.com/#1VGWP9#4

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...