411 lines
31 KiB
HTML
411 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>World Orogen — Import Heightmap or Painted Map</title>
|
|
<meta name="description" content="Import your own equirectangular heightmap, or a painted map whose colours are uplift rates that stream-power erosion turns into terrain with real rivers, onto a 3D globe with automatic climate simulation — wind, precipitation, temperature, and Köppen classification. Annotate it with an overlay of forests, settlements, roads and coastlines. Free, in your browser.">
|
|
<meta name="keywords" content="heightmap import, painted map, uplift, stream power erosion, equirectangular projection, climate simulation, world generator, terrain viewer, planet builder, map overlay, annotation layer, hillslope angle, Three.js, worldbuilding tool">
|
|
<meta name="author" content="World Orogen">
|
|
<meta name="theme-color" content="#0a0e17">
|
|
<link rel="canonical" href="https://orogen.studio/import">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://orogen.studio/import">
|
|
<meta property="og:title" content="World Orogen — Import Heightmap">
|
|
<meta property="og:description" content="Import your own equirectangular heightmap onto a 3D globe with automatic climate simulation. Free, in your browser.">
|
|
<meta property="og:image" content="https://orogen.studio/preview.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:site_name" content="World Orogen">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="World Orogen — Import Heightmap">
|
|
<meta name="twitter:description" content="Import your own equirectangular heightmap onto a 3D globe with automatic climate simulation. Free, in your browser.">
|
|
<meta name="twitter:image" content="https://orogen.studio/preview.png">
|
|
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
|
<link rel="manifest" href="site.webmanifest">
|
|
<link rel="author" href="humans.txt">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text x='50' y='50' dominant-baseline='central' text-anchor='middle' font-size='75'>🌍</text></svg>">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<nav id="topNav">
|
|
<a href="/" class="nav-tab">Generate</a>
|
|
<a href="/import" class="nav-tab active">Import</a>
|
|
</nav>
|
|
<div id="buildOverlay" class="build-overlay hidden">
|
|
<div class="build-overlay-inner">
|
|
<div class="build-overlay-spinner"></div>
|
|
<div class="build-overlay-title" id="buildOverlayTitle">Importing heightmap</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar-fill" id="buildBarFill"></div>
|
|
</div>
|
|
<div class="progress-label" id="buildBarLabel"></div>
|
|
</div>
|
|
</div>
|
|
<canvas id="canvas"></canvas>
|
|
<div id="ui">
|
|
<div id="sheetHandle" class="sheet-handle"><span></span></div>
|
|
<div id="sidebarHeader">
|
|
<div>
|
|
<h2>World Orogen</h2>
|
|
<div class="sub">Import a heightmap or a painted map</div>
|
|
</div>
|
|
<button id="sidebarToggle" title="Collapse panel">«</button>
|
|
</div>
|
|
<div id="sidebarContent">
|
|
<details class="section" open>
|
|
<summary>Import</summary>
|
|
<div class="section-body">
|
|
<div class="map-tabs source-tabs" id="sourceTabs">
|
|
<button class="map-tab active" data-source="heightmap">Heightmap</button>
|
|
<button class="map-tab" data-source="painted">Painted Map</button>
|
|
</div>
|
|
<div class="src-heightmap">
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="heightmapFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
Choose Image
|
|
</label>
|
|
<input type="file" id="heightmapFile" accept="image/png,image/jpeg,image/webp" style="display:none">
|
|
<div id="importFileName" class="import-file-name"></div>
|
|
</div>
|
|
<canvas id="importPreview" class="import-preview" style="display:none"></canvas>
|
|
<div id="importDims" class="import-dims" style="display:none"></div>
|
|
<div class="import-hint">Black (0) = ocean. Brighter = higher elevation. Use a 2:1 equirectangular image.</div>
|
|
<div id="importExpect" class="import-expect" style="display:none">Your heightmap will be projected onto a 3D sphere with full climate simulation — wind patterns, precipitation, temperature, and biome classification — computed automatically.</div>
|
|
</div>
|
|
<div class="src-painted">
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="paintFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
Choose Painting
|
|
</label>
|
|
<input type="file" id="paintFile" accept="image/png,image/jpeg,image/webp" style="display:none">
|
|
<div id="paintFileName" class="import-file-name"></div>
|
|
</div>
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="legendFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>
|
|
Choose Legend
|
|
</label>
|
|
<input type="file" id="legendFile" accept="application/json,.json" style="display:none">
|
|
<div id="legendFileName" class="import-file-name">Built-in legend</div>
|
|
</div>
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="planetFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
Choose Planet.json
|
|
</label>
|
|
<input type="file" id="planetFile" accept="application/json,.json" style="display:none">
|
|
<div id="planetFileName" class="import-file-name">Defaults</div>
|
|
</div>
|
|
<canvas id="paintPreview" class="import-preview" style="display:none"></canvas>
|
|
<div id="paintDims" class="import-dims" style="display:none"></div>
|
|
<div class="import-hint">Every colour is a <em>class</em> — a rate of rock uplift and an erodibility, never a height — and the legend JSON says what the colours mean. The land is then eroded with stream power until it is in balance with its uplift, so the rivers, divides and valleys are the physics' answer to your painting. 2:1 equirectangular. <a href="#" id="paintDemoLink">Load the demo painting</a>.</div>
|
|
<div id="paintReport" class="import-report" style="display:none"></div>
|
|
<div id="paintLegendWrap" style="display:none">
|
|
<table class="paint-legend" id="paintLegend">
|
|
<thead><tr><th></th><th>Class</th><th>Painted</th><th>Uplift <span class="unit">mm/yr</span> / depth <span class="unit">m</span></th><th>k</th><th>Slope <span class="tip" data-tip="The typical (median) hillslope this rate makes on the bake's geology grid, and what it reads as. Hover a value for the divide angle, the steepest ground the rate can make: almost none of a map is divide, so read this column, not that one">?</span></th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<div id="legendNote" class="import-hint legend-note"></div>
|
|
<button id="legendDownload" class="btn-ghost btn-small" title="Save the legend with your edits, in the format Tools/Terrain reads">Download legend JSON</button>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Peak Height <span class="tip" data-tip="How high the land stands: the 99.5th percentile of the solved terrain is put at this height. The shape — where the rivers run, how far a coast is from its divide — is the solve's; this is only the scale">?</span> <span class="v" id="vPk">4.5 km</span></label>
|
|
<input type="range" id="sPk" min="0.5" max="6" value="4.5" step="0.25">
|
|
<div class="slider-hint"><span>Hills</span><span>Alps</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Ocean Depth <span class="tip" data-tip="The depth of the deepest sea class; shallower classes (shelf, surf) scale with it, and every shore ramps down over a couple of cells">?</span> <span class="v" id="vOd">4.0 km</span></label>
|
|
<input type="range" id="sOd" min="0.25" max="5" value="4" step="0.25">
|
|
<div class="slider-hint"><span>Shallow</span><span>Abyssal</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Coast Detail <span class="tip" data-tip="A drawn shore is a smooth curve and a real one is fractal. Noise is added to the distance from the painted waterline before anything is solved, so bays and headlands appear where the brush was straight. Islets keep at least a third of their width">?</span> <span class="v" id="vCd">0.35</span></label>
|
|
<input type="range" id="sCd" min="0" max="1" value="0.35" step="0.05">
|
|
<div class="slider-hint"><span>As drawn</span><span>Ragged</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Uplift Variation <span class="tip" data-tip="A regional swell over the painted rate, so a lowland painted in one colour has basins and rises of its own rather than one flat rate across a continent">?</span> <span class="v" id="vUv">0.30</span></label>
|
|
<input type="range" id="sUv" min="0" max="0.6" value="0.3" step="0.05">
|
|
<div class="slider-hint"><span>Uniform</span><span>Rolling</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Solve Steps <span class="tip" data-tip="How long the stream-power solve runs. It converges within a few hundred steps at any detail; more steps cost time and change little">?</span> <span class="v" id="vSt">200</span></label>
|
|
<input type="range" id="sSt" min="50" max="600" value="200" step="10">
|
|
<div class="slider-hint"><span>Quick</span><span>Settled</span></div>
|
|
</div>
|
|
<details class="subsection">
|
|
<summary>Painted planet</summary>
|
|
<div class="subsection-body">
|
|
<div class="import-hint">The globe is Earth-sized. Distances in the legend — coastal plains, massif and rock sizes — are in the painted world's kilometres and are scaled up by the ratio of the two circumferences.</div>
|
|
<div class="num-row"><label for="nCirc">Painted world circumference, km</label><input type="number" id="nCirc" value="100" min="1" step="1"></div>
|
|
<div class="num-row"><label for="nMassif">Massif size, km <span class="tip" data-tip="The size of the blocks in the planet's upland fabric. A class with a massif block is a plain with hill masses standing out of it; this is how big they are">?</span></label><input type="number" id="nMassif" value="7" min="0" step="0.5"></div>
|
|
<div class="num-row"><label for="nLith">Rock province size, km <span class="tip" data-tip="The size of the provinces in the planet's rock field, which multiplies each class's erodibility so a range is made of several rocks rather than one">?</span></label><input type="number" id="nLith" value="8" min="0" step="0.5"></div>
|
|
<div class="num-row"><label for="nSeed">Seed <span class="tip" data-tip="A painting is a composition; the seed re-rolls what it does not fix — the massifs, the rock provinces, the swell and the coastline detail">?</span></label><input type="number" id="nSeed" value="7945" min="0" step="1"><button id="paintReroll" class="btn-ghost btn-small" title="New seed">Re-roll</button></div>
|
|
</div>
|
|
</details>
|
|
<details class="subsection" id="overlaySection">
|
|
<summary>Overlay</summary>
|
|
<div class="subsection-body">
|
|
<div class="import-hint">A second painting the same size as the template and registered to it, whose colours are <em>marks</em> rather than classes: forests, settlements, roads, and stretches of coast to leave alone. Blank is transparent. Nothing on it changes a height except <code>coast_jitter</code>, which pins (0) or roughens (above 1) the shore inside the mark.</div>
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="overlayFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 15l5-5 4 4 3-3 6 6"/><circle cx="16" cy="8" r="1.5"/></svg>
|
|
Choose Overlay
|
|
</label>
|
|
<input type="file" id="overlayFile" accept="image/png,image/webp" style="display:none">
|
|
<div id="overlayFileName" class="import-file-name"></div>
|
|
</div>
|
|
<div class="import-upload-area">
|
|
<label class="import-file-label" for="overlayLegendFile">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>
|
|
Choose Overlay Legend
|
|
</label>
|
|
<input type="file" id="overlayLegendFile" accept="application/json,.json" style="display:none">
|
|
<div id="overlayLegendFileName" class="import-file-name"></div>
|
|
</div>
|
|
<div id="overlayReport" class="import-report" style="display:none"></div>
|
|
</div>
|
|
</details>
|
|
<details class="subsection" id="studioSection">
|
|
<summary>From terrain studio</summary>
|
|
<div class="subsection-body">
|
|
<div class="import-hint">Load the painting, both legends and Planet.json straight from a running <code>terrain studio</code> (Tools/Terrain), exactly as its next plan would read them.</div>
|
|
<div class="num-row"><label for="studioUrl">Studio address</label><input type="text" id="studioUrl" value="http://127.0.0.1:8099" spellcheck="false"></div>
|
|
<button id="studioLoad" class="btn-ghost btn-small">Load from studio</button>
|
|
<div id="studioNote" class="import-report" style="display:none"></div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Detail <span class="tip" data-tip="Resolution of the sphere mesh — more detail means finer coastlines but takes longer to process">?</span> <span class="v" id="vN">204,000</span></label>
|
|
<input type="range" id="sN" min="0" max="1000" step="1" value="600">
|
|
<div class="slider-hint"><span>Coarse</span><span>Fine</span></div>
|
|
<div class="detail-warn" id="detailWarn"></div>
|
|
</div>
|
|
<button id="importBtn" class="import-btn" disabled>Import</button>
|
|
<div class="import-hint" style="margin-top:8px">Your image stays on your device — nothing is uploaded. Imported worlds can't be shared via planet codes.</div>
|
|
</div>
|
|
</details>
|
|
<details class="section">
|
|
<summary>Terrain Sculpting <span class="tip" data-tip="Post-processing passes to refine the imported terrain. All default to 0 (no effect). Adjust sliders and click Reapply.">?</span></summary>
|
|
<div class="section-body">
|
|
<div class="cg">
|
|
<label>Terrain Warp <span class="tip" data-tip="Deforms the elevation field using noise for more organic coastlines and mountain ridges">?</span> <span class="v" id="vTw">0.00</span></label>
|
|
<input type="range" id="sTw" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Heavy</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Smoothing <span class="tip" data-tip="Blends harsh terrain edges and pixelation from the source image">?</span> <span class="v" id="vS">0.00</span></label>
|
|
<input type="range" id="sS" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Heavy</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Glacial Erosion <span class="tip" data-tip="Ice-age sculpting — carves fjords, U-shaped valleys, and lake basins at high latitudes and altitudes">?</span> <span class="v" id="vGl">0.00</span></label>
|
|
<input type="range" id="sGl" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Ice Age</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Hydraulic Erosion <span class="tip" data-tip="Iterative stream-power erosion — carves river valleys and dendritic drainage networks">?</span> <span class="v" id="vHEr">0.00</span></label>
|
|
<input type="range" id="sHEr" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Deep</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Thermal Erosion <span class="tip" data-tip="Slope-driven material transport — softens ridges and creates natural talus slopes">?</span> <span class="v" id="vTEr">0.00</span></label>
|
|
<input type="range" id="sTEr" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Heavy</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Ridge Sharpening <span class="tip" data-tip="Accentuates mountain ridgelines — pushes peaks further above their surroundings">?</span> <span class="v" id="vRs">0.00</span></label>
|
|
<input type="range" id="sRs" min="0" max="1" value="0" step="0.05">
|
|
<div class="slider-hint"><span>None</span><span>Jagged</span></div>
|
|
</div>
|
|
<button id="reapplyBtn" title="Reapply terrain sculpting" disabled><span class="reapply-icon">↻</span> Reapply</button>
|
|
</div>
|
|
</details>
|
|
<details class="section">
|
|
<summary>Climate <span class="tip" data-tip="Global temperature and precipitation offsets — changes apply on slider release, recomputing only precipitation, temperature, and climate zones">?</span></summary>
|
|
<div class="section-body">
|
|
<div class="climate-hint">Changes apply on release — only climate zones are recomputed.</div>
|
|
<div class="cg">
|
|
<label>Temperature <span class="tip" data-tip="Shift global temperature — positive makes the planet warmer, negative makes it colder. Climate zones shift accordingly.">?</span> <span class="v" id="vTmp">±0°C</span></label>
|
|
<input type="range" id="sTmp" min="-15" max="15" value="0" step="1">
|
|
<div class="slider-hint"><span>Colder</span><span>Warmer</span></div>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Precipitation <span class="tip" data-tip="Scale global precipitation — positive makes the planet wetter, negative drier. Affects desert and rainforest distribution.">?</span> <span class="v" id="vPrc">±0%</span></label>
|
|
<input type="range" id="sPrc" min="-1" max="1" value="0" step="0.1">
|
|
<div class="slider-hint"><span>Drier</span><span>Wetter</span></div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<details class="section" open>
|
|
<summary>Visual Options</summary>
|
|
<div class="section-body">
|
|
<div class="cg">
|
|
<label>View</label>
|
|
<select id="viewMode">
|
|
<option value="globe">Globe</option>
|
|
<option value="map">Map</option>
|
|
</select>
|
|
</div>
|
|
<div class="cg" id="mapCenterLonGroup" style="display:none">
|
|
<label>Center Longitude <span class="v" id="vMapCenterLon">0°</span></label>
|
|
<input type="range" id="sMapCenterLon" min="-180" max="180" value="0" step="5">
|
|
</div>
|
|
<div class="map-tabs" id="mapTabs">
|
|
<button class="map-tab active" data-layer="">Terrain</button>
|
|
<button class="map-tab" data-layer="biome">Satellite</button>
|
|
<button class="map-tab" data-layer="koppen">Climate</button>
|
|
<button class="map-tab" data-layer="landheightmap">Heightmap</button>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Inspect</label>
|
|
<select id="debugLayer">
|
|
<option value="">Terrain</option>
|
|
<option value="biome">Satellite</option>
|
|
<option value="koppen">Köppen Climate</option>
|
|
<option value="landheightmap">Land Heightmap</option>
|
|
<optgroup label="Atmosphere">
|
|
<option value="pressureSummer">Pressure (Summer)</option>
|
|
<option value="pressureWinter">Pressure (Winter)</option>
|
|
<option value="windSpeedSummer">Wind Speed (Summer)</option>
|
|
<option value="windSpeedWinter">Wind Speed (Winter)</option>
|
|
</optgroup>
|
|
<optgroup label="Ocean">
|
|
<option value="oceanCurrentSummer">Currents (Summer)</option>
|
|
<option value="oceanCurrentWinter">Currents (Winter)</option>
|
|
</optgroup>
|
|
<optgroup label="Climate">
|
|
<option value="precipSummer">Precipitation (Summer)</option>
|
|
<option value="precipWinter">Precipitation (Winter)</option>
|
|
<option value="rainShadowSummer">Rain Shadow (Summer)</option>
|
|
<option value="rainShadowWinter">Rain Shadow (Winter)</option>
|
|
<option value="tempSummer">Temperature (Summer)</option>
|
|
<option value="tempWinter">Temperature (Winter)</option>
|
|
<option value="continentality">Continentality</option>
|
|
</optgroup>
|
|
<optgroup label="Elevation">
|
|
<option value="heightmap">Full Heightmap</option>
|
|
<option value="erosionDelta">Erosion Delta</option>
|
|
</optgroup>
|
|
<optgroup label="Painted Map" id="paintedInspectGroup">
|
|
<option value="paintClass" disabled>Class Map</option>
|
|
<option value="paintUplift" disabled>Uplift Rate</option>
|
|
<option value="paintK" disabled>Erodibility</option>
|
|
<option value="flow" disabled>Drainage (Rivers)</option>
|
|
<option value="slope" disabled>Slope</option>
|
|
<option value="basins" disabled>Drainage Basins</option>
|
|
<option value="paintOverlay" disabled>Overlay</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div id="vizLegend" class="viz-legend"></div>
|
|
<div class="tg">
|
|
<label class="toggle-label"><input type="checkbox" id="chkWire"><span class="toggle-track"><span class="toggle-thumb"></span></span>Wireframe</label>
|
|
<label class="toggle-label"><input type="checkbox" id="chkRotate"><span class="toggle-track"><span class="toggle-thumb"></span></span>Auto-Rotate</label>
|
|
<label class="toggle-label"><input type="checkbox" id="chkGrid" checked><span class="toggle-track"><span class="toggle-thumb"></span></span>Grid Lines</label>
|
|
<label class="toggle-label src-painted" title="Drape the overlay sheet over whatever layer is shown"><input type="checkbox" id="chkOverlay" disabled><span class="toggle-track"><span class="toggle-thumb"></span></span>Overlay Sheet</label>
|
|
</div>
|
|
<div class="cg" id="gridSpacingGroup">
|
|
<label>Grid Spacing</label>
|
|
<select id="gridSpacing">
|
|
<option value="30">30°</option>
|
|
<option value="15" selected>15°</option>
|
|
<option value="10">10°</option>
|
|
<option value="5">5°</option>
|
|
<option value="2.5">2.5°</option>
|
|
</select>
|
|
</div>
|
|
<details id="statsDetails" class="stats-toggle">
|
|
<summary>Stats</summary>
|
|
<div id="stats"></div>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
<button id="exportBtn" class="export-btn">Export Map</button>
|
|
<a id="repoLink" href="https://github.com/raguilar011095/planet_heightmap_generation" target="_blank" rel="noopener">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.64 7.64 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<select id="mobileViewSwitch" class="mobile-view-switch">
|
|
<option value="">Terrain</option>
|
|
<option value="biome">Satellite</option>
|
|
<option value="koppen">Climate</option>
|
|
<option value="landheightmap">Heightmap</option>
|
|
</select>
|
|
|
|
<div id="exportOverlay" class="hidden">
|
|
<div id="exportCard">
|
|
<button id="exportClose">×</button>
|
|
<h3>Export Map</h3>
|
|
<div class="cg">
|
|
<label>Type</label>
|
|
<select id="exportType">
|
|
<option value="color">Color Map</option>
|
|
<option value="biome">Satellite</option>
|
|
<option value="koppen">Climate (Köppen)</option>
|
|
<option value="heightmap">Heightmap (B&W)</option>
|
|
<option value="landheightmap">Land Heightmap (B&W)</option>
|
|
<option value="landmask">Land Mask (B&W)</option>
|
|
<optgroup label="Painted Map" id="paintedExportGroup">
|
|
<option value="paintclass" disabled>Class Map</option>
|
|
<option value="uplift" disabled>Uplift Rate</option>
|
|
<option value="erodibility" disabled>Erodibility</option>
|
|
<option value="flow" disabled>Drainage (Rivers)</option>
|
|
<option value="slope" disabled>Slope</option>
|
|
<option value="basins" disabled>Drainage Basins</option>
|
|
<option value="overlay" disabled>Overlay</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="cg">
|
|
<label>Width <span class="v" id="exportDims">4096 × 2048</span></label>
|
|
<select id="exportWidth">
|
|
<option value="1024">1024</option>
|
|
<option value="2048">2048</option>
|
|
<option value="4096" selected>4096</option>
|
|
<option value="8192">8192</option>
|
|
<option value="16384">16384</option>
|
|
<option value="32768">32768</option>
|
|
<option value="65536">65536</option>
|
|
</select>
|
|
</div>
|
|
<div class="export-actions">
|
|
<button id="exportCancel" class="btn-ghost">Cancel</button>
|
|
<button id="exportGo" class="btn-primary">Export</button>
|
|
<button id="exportAllGo" class="btn-primary">Export All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden elements for generate.js compatibility (reads these by ID) -->
|
|
<input type="checkbox" id="chkPlates" style="display:none">
|
|
<input type="hidden" id="sLc" value="0.3">
|
|
<div id="topInfo">Import an equirectangular heightmap to visualize it on a globe</div>
|
|
<div id="hoverInfo"></div>
|
|
<div id="info">Import an equirectangular B&W heightmap to get started</div>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/",
|
|
"delaunator": "https://cdn.jsdelivr.net/npm/delaunator@5.0.1/+esm"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="module" src="js/import-main.js"></script>
|
|
</body>
|
|
</html>
|