Using Json or GeoJson in babylon to create meshes?

Questions
1

I am trying to use Geojson to create meshes. I keep getting a “json is invalid or empty”. and I know there is data there. Is babylon able to consume json data or aGeoJson data? I know I have exportd json out of babylon, but I have never parsed it and used it to generate geometry.

This si the GeoJson data Iam trying to use:

 {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -83.294417,
              42.446736
            ],
            [
              -83.294603,
              42.446731
            ],
            [
              -83.294592,
              42.446533
            ],
            [
              -83.294816,
              42.446526
            ],
            [
              -83.294807,
              42.44638
            ],
            [
              -83.294536,
              42.446389
            ],
            [
              -83.294544,
              42.44653
            ],
            [
              -83.2944,
              42.446535
            ],
            [
              -83.294409,
              42.446692
            ],
            [
              -83.294118,
              42.446701
            ],
            [
              -83.294127,
              42.446849
            ],
            [
              -83.293869,
              42.446857
            ],
            [
              -83.293875,
              42.446959
            ],
            [
              -83.294181,
              42.44695
            ],
            [
              -83.294176,
              42.446858
            ],
            [
              -83.294424,
              42.44685
            ],
            [
              -83.294417,
              42.446736
            ]
          ]
        ]
      },
      "properties": {
        "id": 1260752083,
        "tags": {
          "building": "yes"
        }
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -83.296896,
              42.445188
            ],
            [
              -83.296918,
              42.44559
            ],
            [
              -83.297122,
              42.445584
            ],
            [
              -83.297099,
              42.445182
            ],
            [
              -83.296896,
              42.445188
            ]
          ]
        ]
      },
      "properties": {
        "id": 1260752088,
        "tags": {
          "building": "yes"
        }
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -83.296382,
              42.445153
            ],
            [
              -83.296387,
              42.445228
            ],
            [
              -83.296661,
              42.44522
            ],
            [
              -83.296653,
              42.445077
            ],
            [
              -83.296378,
              42.445085
            ],
            [
              -83.296373,
              42.444997
            ],
            [
              -83.29607,
              42.445006
            ],
            [
              -83.296079,
              42.445162
            ],
            [
              -83.296382,
              42.445153
            ]
          ]
        ]
      },
      "properties": {
        "id": 1260752089,
        "tags": {
          "building": "yes"
        }
      }
2

Here is an example of a geojson demo

Irregular Polygon Examples | Babylon.js Playground (babylonjs.com)

2 Likes
3

Ok, I just need to format my json to look like that.

What about roads and structures?

4

Can you check if chatGPT has right?

Me: I am trying to use Geojson to create meshes in babylon.js. how can i handle roads and structures?

ChatGPT

Creating meshes for roads and structures in Babylon.js using GeoJSON involves several steps:

  1. Parsing GeoJSON Data: First, you need to parse the GeoJSON data to extract the necessary information about roads and structures.
  2. Creating Meshes: Once you have the relevant data, you can create meshes for roads and structures. For roads, you might create thin rectangles or lines to represent them. For structures, you can create meshes based on the shapes and properties defined in the GeoJSON data.
  3. Positioning: Position the meshes in the scene according to their coordinates specified in the GeoJSON data.

Here’s a basic example of how you might approach this:

javascriptCopy code

// Assuming you have imported Babylon.js library

// Function to create meshes for roads
function createRoadMeshes(roadData) {
    roadData.features.forEach(feature => {
        // Extract coordinates for the road
        const coordinates = feature.geometry.coordinates;
        
        // Create a path for the road
        const path = [];
        coordinates.forEach(coord => {
            path.push(new BABYLON.Vector3(coord[0], 0, coord[1]));
        });

        // Create a mesh for the road
        const roadMesh = BABYLON.MeshBuilder.CreateLines("road", { points: path });
        roadMesh.color = new BABYLON.Color3(1, 0, 0); // Red color for roads
    });
}

// Function to create meshes for structures
function createStructureMeshes(structureData) {
    structureData.features.forEach(feature => {
        // Extract coordinates and properties for the structure
        const coordinates = feature.geometry.coordinates;
        const height = feature.properties.height || 10; // Default height if not specified
        
        // Create a mesh for the structure
        const structureMesh = BABYLON.MeshBuilder.CreateBox("structure", { height: height, width: 10, depth: 10 });
        structureMesh.position = new BABYLON.Vector3(coordinates[0], height / 2, coordinates[1]);
    });
}

// Example GeoJSON data
const geoJsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-74.001422, 40.759011],
                    [-73.986084, 40.748817]
                ]
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-73.995865, 40.748137]
            },
            "properties": {
                "height": 20 // Example height for a structure
            }
        }
    ]
};

// Create road and structure meshes
createRoadMeshes(geoJsonData);
createStructureMeshes(geoJsonData);

This is a basic example and may need modification based on your specific GeoJSON data format and requirements. You might need to handle different types of geometries (e.g., LineString, Polygon, Point) differently and adjust mesh creation accordingly. Additionally, you may want to apply textures, materials, or more complex geometries based on the properties defined in your GeoJSON data.

1 Like
5

I Have been using ChatGPT to figure this out, as of right now, I am requesting the data from the Overpass API getting all the data then parsing it, but babylon is rejecting it, and your data in the example is different than mine.

I have similar code that you got from chatGPT.

6

ok, back to the good old google search method! :slight_smile:

How to Render Geojson on Babylon JS / Jay Kim | Observable (observablehq.com)

Creating polygons with Geo JSON - Questions - Babylon.js (babylonjs.com)

7

I saw those, I think it is the way I am getting the data and it is formatted, before even going to babylon.

My GeoJson looks nothing like yours in that file. If babylon is creating meshes from that then that’s the format I need mine to be.

1 Like
8

I’ve been working on a toolkit that has a method to help with just this :slight_smile:

It currently only reads polygon and multi-polygon features from GeoJSON, so if you want to create shapes with other GeoJSON features like points or lines, you’ll still have to do that manually. But I could try to make an example for that if you have a sample file.

9

Yeah, I’ve been prompt arguing for a week it seems, I believe I have good formatted GeoJson, but I cannot find any good confirmations on what exactly Babylon will accept as far as Json or GeoJson.

What do you have here? will this accept a data set in memory or does it need to be a file?

I tried refactoring the playground above, but it was a NO GO…

10

Geojson in memory is fine as long as it’s valid. This example is loading it from file to memory.

Also you might need to wrap your features inside a feature collection for it to be valid geojson. I would look at some examples files to make sure it looks right.

https://raw.githubusercontent.com/jpmorganchase/anu/main/docs/anu-examples/data/gz_2010_us_040_00_5m.json

It’s late and I haven’t read this whole thread carefully yet but I think generally the piece you are missing is the projection part. You need a method to take lat lon coordinates and scale them to a coordinate system that makes sense for Babylon. The meshmap prefab does this part for you so once you have the polygon geometry created you can get the d3 projection method back from the meshmap class and use it to create the path for your lines or other meshes to make roads and structures.

11

I have it all set up, just having issues with babylon accepting the GeoJson, it looks just like the examples you provided…not sure what’s going on now…

12

I just passed it through a GeoJson validator and it checked out with valid structure and geometries…so I am at a lose.

13

Not really sure what you mean by Babylon accepting geojson, there aren’t any methods I’m aware of in Babylon that expects geojson. In this case it would just be a data structure you need to parse through yourself to make a the paths for the polygon builder or lines or whatever from the lat lon coordinates of each feature.
But if you try to do this with raw lat lon coordinates it’s not going to come out right.

Do you have a playground or repo we could take a look at?

14

I do not have a playground. , I can get one going though. I think it may be the way I am trying to use the data in babylon rather than the format being an issue.

15

I got the meshes in babylon now, but they will not show up, debugging their position.

16

If you are using anu (my toolkit) your coordinates might not be in the projection you are using. the default is geoAlbers which is USA centric. you can try d3.geoMercator() instead which will have lat lon 0,0 in the center instead of the US.

if you are not using my toolkit or your own projection, using raw lat lon coordinates to create a mesh are not going to give you a result you want because its a spherical coordinate system (they are actually describing the angle from the center of a sphere the point is) so they are warped around a sphere not Cartesian xyz dimensions. This can also be why they meshes are not showing up.

But thats as much as I can glean without the code you are using.

1 Like
17

I am not using your library (yet), What I am using has worked for MapBox data but this could be the issue. The debuglayer not showing up for me is not helping me…

18

@dsaffo

What I am doing is bringing the data in, generating the meshes. After the meshes are created, I want to parent them to a empty object as a parent that I create at the location point I enter in, then move the entire mesh group back to 0,0,0. Going to see if your library can do this.