Spaces:
Sleeping
Sleeping
| <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Texas Data Centers Map – Babylon.js</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; touch-action: none; display: block; } </style> <script src="https://cdn.babylonjs.com/babylon.js"></script> <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> | |
| <script> | |
| // Get the canvas and engine | |
| var canvas = document.getElementById("renderCanvas"); | |
| var engine = new BABYLON.Engine(canvas, true); | |
| // Create the scene | |
| var scene = new BABYLON.Scene(engine); | |
| // Camera | |
| var camera = new BABYLON.ArcRotateCamera("camera", | |
| -Math.PI/2, Math.PI/3, 20, | |
| new BABYLON.Vector3(0, 0, 0), | |
| scene | |
| ); | |
| camera.attachControl(canvas, true); | |
| // Light | |
| var light = new BABYLON.HemisphericLight("light", | |
| new BABYLON.Vector3(0, 1, 0), | |
| scene | |
| ); | |
| // Geographic bounds of Texas | |
| var lonMin = -106.65, lonMax = -93.51; | |
| var latMin = 25.84, latMax = 36.50; | |
| var dLon = lonMax - lonMin; | |
| var dLat = latMax - latMin; | |
| // Create a flat plane and apply a Texas map texture | |
| var mapWidth = dLon; | |
| var mapHeight = dLat; | |
| var mapPlane = BABYLON.MeshBuilder.CreatePlane("mapPlane", { | |
| width: mapWidth, | |
| height: mapHeight | |
| }, scene); | |
| mapPlane.rotation.x = Math.PI / 2; | |
| var mapMat = new BABYLON.StandardMaterial("mapMat", scene); | |
| mapMat.diffuseTexture = new BABYLON.Texture( | |
| "https://upload.wikimedia.org/wikipedia/commons/f/f5/USA_Texas_location_map.svg", | |
| scene | |
| ); | |
| mapMat.specularColor.set(0, 0, 0); | |
| mapPlane.material = mapMat; | |
| // Data centers with coordinates and details | |
| var centers = [ | |
| { | |
| name: "Vantage – Omicron Drive, San Antonio", | |
| lat: 29.6537, lon: -98.7187, | |
| area: "9.94 acres", | |
| cost: "$276.9 million", | |
| power: "96 MW", | |
| sponsors: "Vantage Data Centers", | |
| start: "October 2025", | |
| status: "Site prep & permitting complete; on time & on budget", | |
| completion: "August 2027" | |
| }, | |
| { | |
| name: "Vantage – Frontier AI Megacampus, Shackelford Co.", | |
| lat: 32.7271, lon: -99.2962, | |
| area: "1,200 acres", | |
| cost: "$25 billion", | |
| power: "1.4 GW", | |
| sponsors: "Vantage; equity raise co-led by Silver Lake & DigitalBridge", | |
| start: "Early site development, Aug 2025", | |
| status: "Early site dev; no cost escalations or delays", | |
| completion: "First building H2 2026; full build-out TBD" | |
| }, | |
| { | |
| name: "Blueprint – Taylor Campus", | |
| lat: 30.5713, lon: -97.4055, | |
| area: "3.10 acres", | |
| cost: "$1 billion (10 yrs)", | |
| power: "60 MW (30 MW initial)", | |
| sponsors: "Blueprint Data Centers", | |
| start: "Construction resumed Oct 15 2025", | |
| status: "On budget; legal & utility issues resolved", | |
| completion: "Energization by 2026" | |
| }, | |
| { | |
| name: "Blueprint – Georgetown Facility", | |
| lat: 30.6505, lon: -97.7420, | |
| area: "1.03 acres", | |
| cost: "$160 million", | |
| power: "25 MW (12.5 MW by Q4 2026, rest early 2027)", | |
| sponsors: "Blueprint Data Centers", | |
| start: "Construction starts imminently (2025)", | |
| status: "On track; no reported setbacks", | |
| completion: "Phase 1 by Q4 2026; full commissioning early 2027" | |
| }, | |
| { | |
| name: "Skybox – PowerCampus Austin (Hutto)", | |
| lat: 30.5421, lon: -97.6370, | |
| area: "160 acres", | |
| cost: "Bldg 1: $163 M; Bldg 2: $125 M", | |
| power: "600 MW total", | |
| sponsors: "Skybox Datacenters LLC", | |
| start: "Bldg 1 broke ground 2024; Bldg 2 Oct 1 2025", | |
| status: "Both on schedule & budget", | |
| completion: "Bldg 1 by Jun 2025; Bldg 2 by Jun 2026" | |
| }, | |
| { | |
| name: "EdgeConneX – Cedar Creek Campus, Bastrop Co.", | |
| lat: 30.2250, lon: -97.5380, | |
| area: "13.27 acres (1st bldg)", | |
| cost: "Campus $1.44 B; 1st bldg $440 M", | |
| power: "96 MW (1st bldg)", | |
| sponsors: "EdgeConneX", | |
| start: "1st bldg starts Aug 2025", | |
| status: "On time & within budget", | |
| completion: "1st bldg by Jun 2026; full campus TBD" | |
| } | |
| ]; | |
| // Create a Babylon GUI for popups | |
| // var gui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); | |
| // Helper to convert lon/lat to plane X/Z | |
| function project(lon, lat) { | |
| var xNorm = (lon - lonMin) / dLon; | |
| var zNorm = (lat - latMin) / dLat; | |
| var x = xNorm * mapWidth - mapWidth/2; | |
| var z = zNorm * mapHeight - mapHeight/2; | |
| return { x: x, z: z }; | |
| } | |
| // Create markers | |
| centers.forEach(function(c) { | |
| var pos = project(c.lon, c.lat); | |
| var marker = BABYLON.MeshBuilder.CreateSphere("m", { diameter: 0.2 }, scene); | |
| marker.position = new BABYLON.Vector3(pos.x, 0.1, pos.z); | |
| var mat = new BABYLON.StandardMaterial("mMat", scene); | |
| mat.emissiveColor = new BABYLON.Color3(1, 0, 0); | |
| marker.material = mat; | |
| // Enable picking | |
| marker.actionManager = new BABYLON.ActionManager(scene); | |
| marker.actionManager.registerAction( | |
| new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function() { | |
| const labels = [c.name, | |
| "Area: " + c.area, | |
| "Est Cost: " + c.cost, | |
| "Power Usage: " + c.power, | |
| "Sponsors: " + c.sponsors, | |
| "Start Date: " + c.start, | |
| "Status: " + c.status, | |
| "Finish: " + c.completion] | |
| const font_size = 32; | |
| const font = "bold " + font_size + "px Arial"; | |
| let text = ""; | |
| const dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:1024, height: 1024}, scene, true); // 1024 | |
| const labelHeight = 1.5 * font_size ; | |
| let labely = labelHeight; | |
| dynamicTexture.drawText("", 0, 0, font, "black", "white", true, true); | |
| for(let i = 0; i<labels.length; i++) { | |
| text = labels[i]; | |
| dynamicTexture.drawText(text, 2, labely + 2, font, "black" , null, true, true); | |
| labely += labelHeight; | |
| } | |
| const mat = new BABYLON.StandardMaterial("mat", scene); | |
| mat.diffuseTexture = dynamicTexture; | |
| const plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 8, height: 8}) // 10 | |
| // plane.translate(BABYLON.Axis.X, -3, BABYLON.Space.LOCAL); | |
| plane.translate(BABYLON.Axis.Z, 3, BABYLON.Space.LOCAL); | |
| plane.material = mat; | |
| }) | |
| ); | |
| }); | |
| // Render loop | |
| engine.runRenderLoop(function() { | |
| scene.render(); | |
| }); | |
| // Resize | |
| window.addEventListener("resize", function() { | |
| engine.resize(); | |
| }); | |
| </script> </body> </html> |