evan/transit-sim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved osm renderning: full building outlines, roads, greenspace, water

Browse Source
This commit is contained in:
Evan Scamehorn
2025-11-26 16:09:03 -06:00
parent c4b29f5a20
commit 059a58fbf7
3 changed files with 288 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
data-pipeline/generate_city.py
View File

@@ -2,89 +2,146 @@ import osmnx as ox
import json
import os
# ==========================================
# 1. Configuration
# ==========================================
PLACE_NAME = "Wisconsin State Capitol, Madison, USA"
DIST = 2400 # Meters radius around center
DIST = 3000
# 2. Download Data
# ==========================================
# 2. Data Fetching
# ==========================================
print(f"Downloading data for {PLACE_NAME}...")
tags = {"building": True}
# UPDATED FOR V2.0: Access features module explicitly
# Define tags for different layers
tags = {
"building": True,
"natural": ["water", "bay", "coastline"],
"landuse": ["grass", "forest", "park", "recreation_ground"],
"leisure": ["park", "garden"],
"highway": True,
}
try:
# Try new v2.0 syntax
# OSMNX v2.0+
gdf = ox.features.features_from_address(PLACE_NAME, tags=tags, dist=DIST)
except AttributeError:
# Fallback for older versions
# OSMNX < v2.0
gdf = ox.features_from_address(PLACE_NAME, tags=tags, dist=DIST)
# 3. Project to meters (Local Grid)
# UPDATED FOR V2.0: Use GeoPandas native estimation
# ==========================================
# 3. Projection & Normalization
# ==========================================
print("Projecting to local grid...")
gdf_proj = gdf.to_crs(gdf.estimate_utm_crs())
# 4. Prepare Data for THREE.js
buildings = []
# Calculate center to normalize coordinates to (0,0)
# Calculate center for (0,0,0) normalization
center_x = gdf_proj.geometry.centroid.x.mean()
center_y = gdf_proj.geometry.centroid.y.mean()
print("Processing geometry...")
for _, row in gdf_proj.iterrows():
if row.geometry.geom_type == "Polygon":
# Get dimensions
minx, miny, maxx, maxy = row.geometry.bounds
width = maxx - minx
depth = maxy - miny
# ==========================================
# 4. Processing Functions
# ==========================================
# Get Height (Clean dirty data)
height = 10 # Default fallback
# Check for 'height' tag
if "height" in row and str(row["height"]) != "nan":
try:
# Clean strings like "10 m" or "approx 10"
clean_h = "".join(
filter(lambda x: x.isdigit() or x == ".", str(row["height"]))
def get_height(row):
"""Estimates building height from tags."""
h = 10.0 # Default
if "height" in row and str(row["height"]).lower() != "nan":
try:
# Extract numeric part
clean = "".join(
filter(lambda x: x.isdigit() or x == ".", str(row["height"]))
)
h = float(clean)
except:
pass
elif "building:levels" in row and str(row["building:levels"]).lower() != "nan":
try:
clean = "".join(
filter(lambda x: x.isdigit() or x == ".", str(row["building:levels"]))
)
h = float(clean) * 3.5
except:
pass
return round(h, 1)
def parse_polygon(geom):
"""Extracts exterior coordinates from a Polygon."""
if geom.is_empty:
return []
coords = list(geom.exterior.coords)
# Simplify slightly to reduce vertex count if needed, or keep raw
return [[round(x - center_x, 1), round(y - center_y, 1)] for x, y in coords]
def parse_linestring(geom):
"""Extracts coordinates from a LineString."""
if geom.is_empty:
return []
coords = list(geom.coords)
return [[round(x - center_x, 1), round(y - center_y, 1)] for x, y in coords]
# ==========================================
# 5. Categorization Loop
# ==========================================
output_data = {"buildings": [], "water": [], "parks": [], "roads": []}
print("Processing geometries...")
for idx, row in gdf_proj.iterrows():
geom = row.geometry
# Handle MultiPolygons by iterating over them
geoms = [geom] if geom.geom_type in ["Polygon", "LineString"] else []
if geom.geom_type == "MultiPolygon":
geoms = list(geom.geoms)
elif geom.geom_type == "MultiLineString":
geoms = list(geom.geoms)
for sub_geom in geoms:
# 1. BUILDINGS
if "building" in row and str(row["building"]) != "nan":
if sub_geom.geom_type == "Polygon":
output_data["buildings"].append(
{"shape": parse_polygon(sub_geom), "height": get_height(row)}
)
height = float(clean_h)
except:
pass
# Check for 'building:levels' tag
elif "building:levels" in row and str(row["building:levels"]) != "nan":
try:
clean_l = "".join(
filter(
lambda x: x.isdigit() or x == ".", str(row["building:levels"])
)
)
height = float(clean_l) * 3.5 # Approx 3.5m per floor
except:
pass
# Normalize position relative to center
x = (minx + maxx) / 2 - center_x
z = center_y - (miny + maxy) / 2 # Invert Y for 3D Z-axis
# 2. WATER
elif ("natural" in row and row["natural"] in tags["natural"]) or (
"water" in row and str(row["water"]) != "nan"
):
if sub_geom.geom_type == "Polygon":
output_data["water"].append({"shape": parse_polygon(sub_geom)})
# Add to array: [x, z, width, depth, height]
buildings.append(
[
round(x, 1),
round(z, 1),
round(width, 1),
round(depth, 1),
round(height, 1),
]
)
# 3. PARKS / GREENSPACE
elif ("leisure" in row and row["leisure"] in tags["leisure"]) or (
"landuse" in row and row["landuse"] in tags["landuse"]
):
if sub_geom.geom_type == "Polygon":
output_data["parks"].append({"shape": parse_polygon(sub_geom)})
# 5. Save to Public folder
# 4. ROADS
elif "highway" in row and str(row["highway"]) != "nan":
if sub_geom.geom_type == "LineString":
output_data["roads"].append({"path": parse_linestring(sub_geom)})
# ==========================================
# 6. Save File
# ==========================================
output_path = os.path.join(os.path.dirname(__file__), "../public/city_data.json")
# Ensure directory exists just in case
os.makedirs(os.path.dirname(output_path), exist_ok=True)
with open(output_path, "w") as f:
json.dump(buildings, f)
json.dump(output_data, f)
print(f"Done! Saved {len(buildings)} buildings to {output_path}")
print(
f"Exported:"
f"\n Buildings: {len(output_data['buildings'])}"
f"\n Roads: {len(output_data['roads'])}"
f"\n Water: {len(output_data['water'])}"
f"\n Parks: {len(output_data['parks'])}"
)
print(f"Saved to {output_path}")

2
public/city_data.json
View File

File diff suppressed because one or more lines are too long

273
src/main.js
View File

@@ -1,64 +1,56 @@
import * as THREE from 'three';
import { MapControls } from 'three/addons/controls/MapControls.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
// ==========================================
// 1. Configuration & Constants
// ==========================================
const SETTINGS = {
colors: {
background: 0xcccccc,
ground: 0x999999,
building: 0xccffff,
background: 0xe0e0e0, // Lighter fog
ground: 0xdddddd,
building: 0xffffff,
water: 0x4fa4e4,
park: 0x98d98e,
road: 0x999999,
sun: 0xffffff,
ambient: 0x444444,
ambient: 0x777777,
},
camera: {
fov: 60,
near: 0.1,
fov: 45, // Narrower FOV for better city look
near: 1,
far: 20000,
initialPos: { x: 500, y: 400, z: 400 }
initialPos: { x: 0, y: 600, z: 800 }
},
shadows: {
enabled: true,
mapSize: 4096,
areaSize: 2000, // Size of the shadow camera view
bias: -0.0005
areaSize: 1500,
bias: -0.0001
},
dataUrl: './city_data.json'
};
// Global variables for core components
let scene, camera, renderer, controls;
let sunLight; // Needs to be global to update position in render loop
let scene, camera, renderer, controls, sunLight;
// ==========================================
// 2. Initialization Logic
// 2. Initialization
// ==========================================
function init() {
// Setup core Three.js components
setupScene();
setupLighting();
createGround();
// Initialize controls
setupControls();
// Load external data
loadCityData();
// Start event listeners and loop
window.addEventListener('resize', onWindowResize);
animate();
}
/**
* Sets up the Scene, Camera, and Renderer.
*/
function setupScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(SETTINGS.colors.background);
// Fog blends the floor into the background at distance for depth perception
scene.fog = new THREE.FogExp2(SETTINGS.colors.background, 0.0001);
camera = new THREE.PerspectiveCamera(
@@ -75,7 +67,7 @@ function setupScene() {
renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true // Prevents z-fighting on large scale scenes
logarithmicDepthBuffer: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = SETTINGS.shadows.enabled;
@@ -89,24 +81,14 @@ function setupScene() {
* Configures shadow properties for the directional light.
*/
function setupLighting() {
// Ambient light for general illumination (so shadows aren't pitch black)
const hemiLight = new THREE.HemisphereLight(
SETTINGS.colors.sun,
SETTINGS.colors.ambient,
0.6
);
scene.add(hemiLight);
const ambient = new THREE.HemisphereLight(SETTINGS.colors.sun, SETTINGS.colors.ground, 0.6);
scene.add(ambient);
// Directional light acting as the Sun
sunLight = new THREE.DirectionalLight(SETTINGS.colors.sun, 1.5);
sunLight.position.set(200, 400, 100);
sunLight = new THREE.DirectionalLight(SETTINGS.colors.sun, 2.0);
sunLight.position.set(100, 500, 200);
sunLight.castShadow = true;
// Optimize shadow quality
sunLight.shadow.mapSize.width = SETTINGS.shadows.mapSize;
sunLight.shadow.mapSize.height = SETTINGS.shadows.mapSize;
// Define the box in which shadows are calculated
sunLight.shadow.mapSize.set(SETTINGS.shadows.mapSize, SETTINGS.shadows.mapSize);
const d = SETTINGS.shadows.areaSize;
sunLight.shadow.camera.left = -d;
sunLight.shadow.camera.right = d;
@@ -114,93 +96,185 @@ function setupLighting() {
sunLight.shadow.camera.bottom = -d;
sunLight.shadow.camera.near = 0.5;
sunLight.shadow.camera.far = 4000;
sunLight.shadow.bias = SETTINGS.shadows.bias; // Reduces shadow artifacts (striping)
sunLight.shadow.camera.far = 4500;
sunLight.shadow.bias = SETTINGS.shadows.bias;
scene.add(sunLight);
}
function setupControls() {
controls = new MapControls(camera, renderer.domElement);
controls.enableDamping = true; // Adds weight to movement for smoother feel
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.target.set(-100, 0, 200);
controls.minDistance = 50;
controls.maxDistance = 3000;
controls.maxPolarAngle = Math.PI / 2 - 0.1; // Don't go below ground
}
// ==========================================
// 3. Scene Content Generation
// ==========================================
function createGround() {
const geometry = new THREE.PlaneGeometry(5000, 5000);
const material = new THREE.MeshStandardMaterial({
color: SETTINGS.colors.ground
});
const ground = new THREE.Mesh(geometry, material);
ground.rotation.x = -Math.PI / 2; // Rotate to lie flat
ground.receiveShadow = true;
scene.add(ground);
const geom = new THREE.PlaneGeometry(10000, 10000);
const mat = new THREE.MeshLambertMaterial({ color: SETTINGS.colors.ground });
const mesh = new THREE.Mesh(geom, mat);
mesh.rotation.x = -Math.PI / 2;
mesh.position.y = -0.5; // Slightly below features
mesh.receiveShadow = true;
scene.add(mesh);
}
// ==========================================
// 3. Data Processing & Mesh Generation
// ==========================================
function loadCityData() {
fetch(SETTINGS.dataUrl)
.then(res => {
if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
return res.json();
.then(res => res.json())
.then(data => {
console.log("City data loaded. Generating geometry...");
generateCity(data);
})
.then(buildingData => {
generateCityMesh(buildingData);
})
.catch(error => {
console.error("Failed to load city data:", error);
// Optional: Add UI feedback here
});
.catch(err => console.error("Error loading city data:", err));
}
function generateCity(data) {
// 1. Water (Flat Polygons)
if (data.water && data.water.length) {
createPolygonLayer(data.water, SETTINGS.colors.water, 0, 0.1);
}
// 2. Parks (Flat Polygons)
if (data.parks && data.parks.length) {
createPolygonLayer(data.parks, SETTINGS.colors.park, 0, 0.2);
}
// 3. Roads (Lines)
if (data.roads && data.roads.length) {
createRoadLayer(data.roads, SETTINGS.colors.road, 0.3);
}
// 4. Buildings (Extruded Polygons)
if (data.buildings && data.buildings.length) {
createBuildingLayer(data.buildings, SETTINGS.colors.building);
}
}
/**
* efficiently renders thousands of buildings using InstancedMesh.
* @param {Array} data - Array of arrays [x, z, width, depth, height]
* Creates flat meshes for things like water or parks.
* Uses BufferGeometryUtils to merge them into one draw call.
*/
function generateCityMesh(data) {
if (!data || data.length === 0) return;
function createPolygonLayer(items, color, height, yOffset) {
const geometries = [];
// Create a single geometry template
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Shift pivot point to bottom of box so scaling grows upwards
geometry.translate(0, 0.5, 0);
items.forEach(item => {
const shape = createShapeFromPoints(item.shape);
const geometry = new THREE.ShapeGeometry(shape);
// Rotate to lie flat on XZ plane
geometry.rotateX(-Math.PI / 2);
geometry.translate(0, yOffset, 0); // Lift slightly to avoid z-fighting
geometries.push(geometry);
});
if (geometries.length === 0) return;
const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries);
const material = new THREE.MeshLambertMaterial({ color: color, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(mergedGeometry, material);
mesh.receiveShadow = true;
scene.add(mesh);
}
/**
* Creates extruded meshes for buildings.
*/
function createBuildingLayer(buildings, color) {
const geometries = [];
buildings.forEach(b => {
const shape = createShapeFromPoints(b.shape);
// Extrude Settings
const extrudeSettings = {
depth: b.height,
bevelEnabled: false,
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
geometry.rotateX(-Math.PI / 2);
geometries.push(geometry);
});
if (geometries.length === 0) return;
const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries);
// Center the geometry to optimize bounding sphere calculations
mergedGeometry.computeBoundingSphere();
const material = new THREE.MeshStandardMaterial({
color: SETTINGS.colors.building,
roughness: 0.5,
color: color,
roughness: 0.6,
metalness: 0.1
});
const instancedMesh = new THREE.InstancedMesh(geometry, material, data.length);
instancedMesh.castShadow = true;
instancedMesh.receiveShadow = true;
const mesh = new THREE.Mesh(mergedGeometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
}
// Disable frustum culling to prevent flickering if the bounding sphere
// calculation is off for the entire group. Re-enable if performance is an issue.
instancedMesh.frustumCulled = false;
/**
* Creates simple lines for roads.
* Note: THREE.Line doesn't cast shadows easily, but it's performant.
*/
function createRoadLayer(roads, color, yOffset) {
const positions = [];
const transformHelper = new THREE.Object3D();
data.forEach((building, index) => {
const [posX, posZ, width, depth, height] = building;
transformHelper.position.set(posX, 0, posZ);
transformHelper.scale.set(width, height, depth);
transformHelper.updateMatrix();
instancedMesh.setMatrixAt(index, transformHelper.matrix);
roads.forEach(road => {
const path = road.path;
for (let i = 0; i < path.length - 1; i++) {
positions.push(path[i][0], path[i][1], 0);
positions.push(path[i + 1][0], path[i + 1][1], 0);
}
});
scene.add(instancedMesh);
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.rotateX(-Math.PI / 2);
geometry.translate(0, yOffset, 0);
const material = new THREE.LineBasicMaterial({
color: color,
opacity: 0.8,
transparent: true
});
const lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);
}
/**
* Helper to convert array of [x,z] points into a THREE.Shape
*/
function createShapeFromPoints(points) {
const shape = new THREE.Shape();
if (!points || points.length === 0) return shape;
// First point
shape.moveTo(points[0][0], points[0][1]);
// Subsequent points
for (let i = 1; i < points.length; i++) {
shape.lineTo(points[i][0], points[i][1]);
}
return shape;
}
// ==========================================
// 4. Animation & Event Loop
// 4. Animation Loop
// ==========================================
function onWindowResize() {
@@ -210,13 +284,10 @@ function onWindowResize() {
}
function updateSunPosition() {
// Move the light with the camera to simulate a "sun" that always
// casts high-res shadows near the player (Pseudo-Cascaded Shadow Map)
if (sunLight && camera) {
// Keep shadow map centered around camera
sunLight.position.x = camera.position.x + 100;
sunLight.position.z = camera.position.z + 100;
// Ensure the light points at the camera's ground position
sunLight.position.z = camera.position.z + 200;
sunLight.target.position.set(camera.position.x, 0, camera.position.z);
sunLight.target.updateMatrixWorld();
}
@@ -224,12 +295,10 @@ function updateSunPosition() {
function animate() {
requestAnimationFrame(animate);
controls.update();
updateSunPosition();
renderer.render(scene, camera);
}
// Start the application
// Start
init();