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

optimizations to rendering
All checks were successful
Deploy to GitHub Pages / deploy (push) Has been skipped
Details

Browse Source
This commit is contained in:
Evan Scamehorn
2025-12-16 18:59:09 -06:00
parent bbb0919b42
commit c83d7e9ad8
1 changed files with 205 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
src/main.js
View File

@@ -30,12 +30,22 @@ const SETTINGS = {
files: { files: {
visual: './city_data.json', visual: './city_data.json',
routing: './routing_graph.json' routing: './routing_graph.json'
},
graphics: {
shadows: true,
antialias: true,
maxPixelRatio: 1.0, // lower == more blurry, 2 or 3 for high res
materialType: 'standard', // or 'standard'
farClip: 9000, // view distance limit
} }
}; };
let scene, camera, renderer, controls; let scene, camera, renderer, controls;
let inputManager, routeManager, uiManager, gameManager, vehicleSystem; let inputManager, routeManager, uiManager, gameManager, vehicleSystem;
let cityMesh; // The single mesh containing all buildings
let buildingRegistry = []; // Stores { data, nearestNodeId, startIndex, count } for each building
const clock = new THREE.Clock(); const clock = new THREE.Clock();
let currentViewMode = 'none'; // 'none', 'zoning', 'approval' let currentViewMode = 'none'; // 'none', 'zoning', 'approval'
@@ -101,67 +111,74 @@ function init() {
} }
function updateBuildingColors() { function updateBuildingColors() {
scene.traverse((obj) => { if (!cityMesh || !buildingRegistry.length) return;
if (obj.name === 'BUILDING_MESH') {
const data = obj.userData.cityData;
if (!data) return;
// 1. STANDARD VIEW const colorAttribute = cityMesh.geometry.attributes.color;
if (currentViewMode === 'none') { const colorArray = colorAttribute.array;
obj.material.color.copy(SETTINGS.colors.building);
}
// 2. ZONING VIEW // Temp variables to avoid creating objects in loop
else if (currentViewMode === 'zoning') { const _color = new THREE.Color();
if (data.type === 'residential') {
const color = SETTINGS.colors.building.clone();
color.lerp(SETTINGS.colors.zoningRes, data.density || 0.5);
obj.material.color.copy(color);
} else if (data.type === 'commercial') {
const color = SETTINGS.colors.building.clone();
color.lerp(SETTINGS.colors.zoningCom, data.density || 0.5);
obj.material.color.copy(color);
} else {
obj.material.color.copy(SETTINGS.colors.building);
}
}
// 3. APPROVAL / COVERAGE VIEW (GRADIENT) // Iterate through every building in our registry
else if (currentViewMode === 'approval') { for (let i = 0; i < buildingRegistry.length; i++) {
// Get graph node position const entry = buildingRegistry[i];
const nearestId = obj.userData.nearestNodeId; const data = entry.data;
// RouteManager has logic for this
const node = routeManager.graphData.nodes[nearestId];
if (node) { // --- 1. Determine Target Color based on Mode ---
// Calculate distance to nearest transit
// node.y is Z in world space
const dist = routeManager.getDistanceToNearestTransit(node.x, node.y);
// Color Logic: // STANDARD VIEW
// < 100m = Green (Great) if (currentViewMode === 'none') {
// < 300m = Yellow (Okay) _color.copy(SETTINGS.colors.building);
// > 600m = Red (Bad) }
if (dist === Infinity) { // ZONING VIEW
obj.material.color.copy(SETTINGS.colors.coverageBad); // Deep Red else if (currentViewMode === 'zoning') {
} else { if (data.type === 'residential') {
const MAX_DIST = 600; _color.copy(SETTINGS.colors.building).lerp(SETTINGS.colors.zoningRes, data.density || 0.5);
const factor = Math.min(1.0, dist / MAX_DIST); // 0.0 (Close) to 1.0 (Far) } else if (data.type === 'commercial') {
_color.copy(SETTINGS.colors.building).lerp(SETTINGS.colors.zoningCom, data.density || 0.5);
// Lerp from Green to Red } else {
// (Green at 0, Red at 1) _color.copy(SETTINGS.colors.building);
const color = SETTINGS.colors.coverageGood.clone();
// We can lerp to Red.
// Or use a Yellow midpoint?
// Simple lerp: Green -> Red
color.lerp(SETTINGS.colors.coverageBad, factor);
obj.material.color.copy(color);
}
}
} }
} }
});
// APPROVAL VIEW
else if (currentViewMode === 'approval') {
// Use the pre-calculated nearest ID from registry
const node = routeManager.graphData.nodes[entry.nearestNodeId];
if (node) {
const dist = routeManager.getDistanceToNearestTransit(node.x, node.y);
if (dist === Infinity) {
_color.copy(SETTINGS.colors.coverageBad);
} else {
const MAX_DIST = 600;
const factor = Math.min(1.0, dist / MAX_DIST);
// Lerp Good -> Bad
_color.copy(SETTINGS.colors.coverageGood).lerp(SETTINGS.colors.coverageBad, factor);
}
} else {
// Fallback if node not found
_color.copy(SETTINGS.colors.coverageBad);
}
}
// --- 2. Apply Color to Vertices ---
// We update the specific range of vertices belonging to this building
const start = entry.startIndex;
const end = start + entry.count;
for (let v = start; v < end; v++) {
const idx = v * 3;
colorArray[idx] = _color.r;
colorArray[idx + 1] = _color.g;
colorArray[idx + 2] = _color.b;
}
}
// Flag that the geometry colors have changed so GPU updates
colorAttribute.needsUpdate = true;
} }
@@ -173,12 +190,21 @@ function setupScene() {
scene.background = new THREE.Color(SETTINGS.colors.background); scene.background = new THREE.Color(SETTINGS.colors.background);
scene.fog = new THREE.FogExp2(SETTINGS.colors.background, 0.0002); scene.fog = new THREE.FogExp2(SETTINGS.colors.background, 0.0002);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, SETTINGS.graphics.farClip);
camera.position.set(0, 800, 800); camera.position.set(0, 800, 800);
renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true }); renderer = new THREE.WebGLRenderer({ antialias: SETTINGS.graphics.antialias, logarithmicDepthBuffer: true });
renderer.setSize(window.innerWidth, window.innerHeight); renderer.domElement.style.width = '100%';
renderer.shadowMap.enabled = true; renderer.domElement.style.height = '100%';
renderer.domElement.style.display = 'block';
document.documentElement.style.margin = '0';
document.documentElement.style.height = '100%';
document.body.style.margin = '0';
document.body.style.height = '100%';
document.body.style.overflow = 'hidden'; // Prevents scrollbars
renderer.shadowMap.enabled = SETTINGS.graphics.shadows;
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
const ambient = new THREE.HemisphereLight(0xffffff, 0x555555, 0.7); const ambient = new THREE.HemisphereLight(0xffffff, 0x555555, 0.7);
@@ -186,15 +212,17 @@ function setupScene() {
const dirLight = new THREE.DirectionalLight(0xffffff, 1.5); const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
dirLight.position.set(500, 1000, 500); dirLight.position.set(500, 1000, 500);
dirLight.castShadow = true; dirLight.castShadow = SETTINGS.graphics.shadows;
dirLight.shadow.mapSize.set(2048, 2048); if (SETTINGS.graphics.shadows) {
dirLight.shadow.camera.left = -1500; dirLight.shadow.mapSize.set(2048, 2048);
dirLight.shadow.camera.right = 1500; dirLight.shadow.camera.left = -1500;
dirLight.shadow.camera.top = 1500; dirLight.shadow.camera.right = 1500;
dirLight.shadow.camera.bottom = -1500; dirLight.shadow.camera.top = 1500;
dirLight.shadow.camera.near = 0.5; dirLight.shadow.camera.bottom = -1500;
dirLight.shadow.camera.far = 3000; // Must be > 1225 to reach the ground dirLight.shadow.camera.near = 0.5;
dirLight.shadow.bias = -0.01; // Clean up shadow artifacts dirLight.shadow.camera.far = 3000; // Must be > 1225 to reach the ground
dirLight.shadow.bias = -0.0001; // Clean up shadow artifacts
}
scene.add(dirLight); scene.add(dirLight);
@@ -205,26 +233,45 @@ function setupScene() {
plane.rotation.x = -Math.PI / 2; plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.5; plane.position.y = -0.5;
plane.name = "GROUND"; plane.name = "GROUND";
plane.receiveShadow = true; plane.receiveShadow = SETTINGS.graphics.shadows;
scene.add(plane); scene.add(plane);
controls = new MapControls(camera, renderer.domElement); controls = new MapControls(camera, renderer.domElement);
controls.dampingFactor = 0.05; controls.dampingFactor = 0.07;
controls.enableDamping = true; controls.enableDamping = true;
controls.maxPolarAngle = Math.PI / 2 - 0.1; controls.maxPolarAngle = Math.PI / 2 - 0.1;
window.addEventListener('resize', () => { }
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); function resizeRendererToDisplaySize() {
renderer.setSize(window.innerWidth, window.innerHeight); const canvas = renderer.domElement;
}); const rect = canvas.getBoundingClientRect();
const pixelRatio = Math.min(window.devicePixelRatio, SETTINGS.graphics.maxPixelRatio);
// Calculate the required resolution
const width = Math.round(rect.width * pixelRatio);
const height = Math.round(rect.height * pixelRatio);
// Check if the canvas is already the right size
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
// Resize the render buffer, but do NOT change CSS style (false)
renderer.setSize(width, height, false);
}
return needResize;
} }
// ========================================== // ==========================================
// 3. Visual Rendering // 3. Visual Rendering
// ========================================== // ==========================================
function renderCity(data) { function renderCity(data) {
const createLayer = (items, color, height, lift, isExtruded) => { // Helper for non-interactive layers (Water, Parks, Roads) - Optimizing these too is good practice
// We will merge these per type as well to keep draw calls low
const createMergedLayer = (items, color, height, lift, isExtruded) => {
if (!items || !items.length) return; if (!items || !items.length) return;
const geometries = []; const geometries = [];
@@ -246,39 +293,40 @@ function renderCity(data) {
}); });
} }
let geom;
if (isExtruded) { if (isExtruded) {
const geom = new THREE.ExtrudeGeometry(shape, { depth: item.height || height, bevelEnabled: false }); geom = new THREE.ExtrudeGeometry(shape, { depth: item.height || height, bevelEnabled: false });
geom.rotateX(-Math.PI / 2);
geometries.push(geom);
} else { } else {
const geom = new THREE.ShapeGeometry(shape); geom = new THREE.ShapeGeometry(shape);
geom.rotateX(-Math.PI / 2);
geom.translate(0, lift, 0);
geometries.push(geom);
} }
geom.rotateX(-Math.PI / 2);
if (!isExtruded) geom.translate(0, lift, 0);
geometries.push(geom);
}); });
if (!geometries.length) return; if (geometries.length === 0) return;
const merged = BufferGeometryUtils.mergeGeometries(geometries);
const mat = new THREE.MeshStandardMaterial({ color: color, roughness: 0.8, side: THREE.DoubleSide }); const mergedGeom = BufferGeometryUtils.mergeGeometries(geometries);
const mesh = new THREE.Mesh(merged, mat); const mat = new THREE.MeshLambertMaterial({ color: color }); // Simple color for static layers
mesh.receiveShadow = true; const mesh = new THREE.Mesh(mergedGeom, mat);
if (isExtruded) mesh.castShadow = true; mesh.receiveShadow = SETTINGS.graphics.shadows;
if (isExtruded) mesh.castShadow = SETTINGS.graphics.shadows;
scene.add(mesh); scene.add(mesh);
}; };
// Dedicated Building Creator to cache Nearest Node ID // --- OPTIMIZED BUILDING GENERATION ---
const createBuildingLayer = (buildings) => { const createBuildingLayer = (buildings) => {
if (!buildings || !buildings.length) return; if (!buildings || !buildings.length) return;
const mat = new THREE.MeshStandardMaterial({ const geometries = [];
color: SETTINGS.colors.building, buildingRegistry = []; // Reset registry
roughness: 0.6,
side: THREE.DoubleSide, let currentVertexOffset = 0;
shadowSide: THREE.DoubleSide
});
buildings.forEach(b => { buildings.forEach(b => {
// 1. Create Shape
const shape = new THREE.Shape(); const shape = new THREE.Shape();
if (b.shape.outer.length < 3) return; if (b.shape.outer.length < 3) return;
shape.moveTo(b.shape.outer[0][0], b.shape.outer[0][1]); shape.moveTo(b.shape.outer[0][0], b.shape.outer[0][1]);
@@ -293,36 +341,85 @@ function renderCity(data) {
}); });
} }
// 2. Create Geometry
const geom = new THREE.ExtrudeGeometry(shape, { depth: b.height, bevelEnabled: false }); const geom = new THREE.ExtrudeGeometry(shape, { depth: b.height, bevelEnabled: false });
geom.rotateX(-Math.PI / 2); geom.rotateX(-Math.PI / 2);
const mesh = new THREE.Mesh(geom, mat.clone()); // 3. Pre-calculate Logic Data (Nearest Node)
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.name = 'BUILDING_MESH';
mesh.userData.cityData = b.data;
// CALCULATE NEAREST NODE FOR APPROVAL MECHANIC
// We use the first point of the outer ring as a proxy for position
const bx = b.shape.outer[0][0]; const bx = b.shape.outer[0][0];
const by = b.shape.outer[0][1]; const by = b.shape.outer[0][1];
const nearestId = routeManager.findNearestNode(bx, -by); const nearestId = routeManager.findNearestNode(bx, -by);
mesh.userData.nearestNodeId = nearestId;
scene.add(mesh); // 4. Register Metadata
// We need to know how many vertices this building has to color it later
const vertexCount = geom.attributes.position.count;
buildingRegistry.push({
data: b.data, // Zoning/Density data
nearestNodeId: nearestId, // For approval view
startIndex: currentVertexOffset,
count: vertexCount
});
currentVertexOffset += vertexCount;
geometries.push(geom);
}); });
if (geometries.length === 0) return;
// 5. Merge
const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries);
// 6. Initialize Vertex Colors Attribute
// Create a color buffer filled with white (1,1,1) by default
const count = mergedGeometry.attributes.position.count;
const colors = new Float32Array(count * 3);
for (let i = 0; i < count * 3; i++) {
colors[i] = 1;
}
mergedGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// 7. Material Setup
let mat;
if (SETTINGS.graphics.materialType === 'standard') {
mat = new THREE.MeshStandardMaterial({
vertexColors: true, // IMPORTANT: valid for merged mesh
roughness: 0.6,
side: THREE.DoubleSide,
shadowSide: THREE.BackSide
});
} else {
mat = new THREE.MeshLambertMaterial({
vertexColors: true, // IMPORTANT
roughness: 0.6,
shadowSide: THREE.BackSide
});
}
// 8. Create and Add Single Mesh
cityMesh = new THREE.Mesh(mergedGeometry, mat);
cityMesh.castShadow = SETTINGS.graphics.shadows;
cityMesh.receiveShadow = SETTINGS.graphics.shadows;
cityMesh.name = 'CITY_MESH';
scene.add(cityMesh);
}; };
createBuildingLayer(data.buildings); createBuildingLayer(data.buildings);
createLayer(data.water, SETTINGS.colors.water, 0, 0.1, false); createMergedLayer(data.water, SETTINGS.colors.water, 0, 0.1, false);
createLayer(data.parks, SETTINGS.colors.park, 0, 0.2, false); createMergedLayer(data.parks, SETTINGS.colors.park, 0, 0.2, false);
createLayer(data.roads, SETTINGS.colors.road, 0, 0.3, false); createMergedLayer(data.roads, SETTINGS.colors.road, 0, 0.3, false);
} }
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
if (resizeRendererToDisplaySize()) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
const delta = clock.getDelta(); // Get time since last frame const delta = clock.getDelta(); // Get time since last frame
controls.update(); controls.update();