Gordon Hempton Posted January 25, 2018 Share Posted January 25, 2018 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, Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 25, 2018 Share Posted January 25, 2018 Welcome! I would keep using the TIledGround but using vertex color so no need for multiple materials Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 26, 2018 Share Posted January 26, 2018 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. 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 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted January 26, 2018 Share Posted January 26, 2018 sounds like a job for a custom shader. Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted January 27, 2018 Share Posted January 27, 2018 hi i don't understand the correct problem but maybe that close the result https://www.babylonjs-playground.com/#T34ZWR#1 100×100 highlight 50,50 https://www.babylonjs-playground.com/#T34ZWR#2 10×10 highlight 5,5 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted January 27, 2018 Share Posted January 27, 2018 and sum fun https://www.babylonjs-playground.com/#T34ZWR#7 Wingnut, GameMonetize and MarianG 3 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.