Spaces:

mswhite
/

Project_GRANITE

Sleeping

File size: 6,572 Bytes

19e1977

<!DOCTYPE html> <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>