admGitAICDSandClaude Opus 5
62f4d72355
Deploy App / deploy (push) Successful in 29s
Oben in der Mitte schaltet ein Knopf zwischen Stilisiert und Fotorealistisch. Beide Varianten entstehen aus derselben Geometrie; die zweite wird beim ersten Umschalten aufgebaut und bleibt danach bestehen. Fotorealistisch: - Texturen doppelt so fein, mit Rauheits- und Verdeckungskarten aus dem Hoehenbild. Das Motiv wird skaliert auf die groessere Leinwand gezeichnet, damit Scheite, Kiesel und Poren gleich gross bleiben. - Laub aus Blattkarten (Baumlaub, Eibennadeln, Liguster, Straeucher, Kraeuter) mit Volumen-Normalen und Alpha-Test-Schatten. - Baeume rekursiv gewachsen, mit gekruemmten Aesten und Blattwolken. - Rasen und Schotterwiese aus Grasbueschelen, die im Wind wiegen. - Physikalischer Himmel mit Umgebungslicht, Sonne zu Himmel etwa 5:1, Verlaufshimmel in der Daemmerung, 4096er Schatten. - GTAO, leichtes Bloom, MSAA. - Wiese ohne sichtbares Kachelmuster. Nebenbei behoben: - Normalmaps hatten die y-Steigung verkehrt: Poren und Fugen standen als Buckel hervor. Betrifft auch die stilisierte Ansicht. - Umlandkranz schliesst jetzt luecklos an das Raster an; vorher sah man von oben als helle Linie den Himmel durch den Spalt. - Glas im Fotomodus fast spiegelnd, Holzfassade mit Relief. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
70 lines
3.1 KiB
HTML
70 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="de-CH">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
|
|
<meta name="theme-color" content="#2c3a2a" />
|
|
<meta name="description" content="Begehbare 3D-Visualisierung des geplanten Gartens an der Egglihaldenstrasse 9a in Abtwil, massstäblich aus dem Gartenplan der Garten Design AG." />
|
|
<title>Garten Egglihaldenstrasse 9a · 3D-Visualisierung</title>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%F0%9F%8C%B3%3C/text%3E%3C/svg%3E" />
|
|
</head>
|
|
<body>
|
|
<canvas id="view"></canvas>
|
|
|
|
<div id="loader">
|
|
<div class="loader-inner">
|
|
<div class="loader-title">Garten Egglihaldenstrasse 9a</div>
|
|
<div class="loader-bar"><span id="loader-fill"></span></div>
|
|
<div class="loader-note" id="loader-note">Gartenplan wird aufgebaut …</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hud" hidden>
|
|
<header id="topbar">
|
|
<div class="brand">
|
|
<strong>Garten Egglihaldenstrasse 9a</strong>
|
|
<span>Abtwil SG · Gartenplan 1, Garten Design AG</span>
|
|
</div>
|
|
<div id="ansicht" role="radiogroup" aria-label="Darstellung">
|
|
<button type="button" role="radio" data-ansicht="stil" title="Leichte, stilisierte Darstellung">Stilisiert</button>
|
|
<button type="button" role="radio" data-ansicht="foto" title="Hoch aufgelöste Materialien, echtes Laub und Gras, Himmelslicht">Fotorealistisch</button>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button id="btn-mode" type="button" title="Zwischen Rundgang und Übersicht wechseln">Übersicht</button>
|
|
<button id="btn-info" type="button" title="Informationen zum Plan">Info</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav id="views" aria-label="Standorte"></nav>
|
|
|
|
<div id="timebar">
|
|
<label for="time">Tageszeit <output id="time-out">14:00</output></label>
|
|
<input id="time" type="range" min="4" max="23" step="0.25" value="14" />
|
|
<label for="season">Datum <output id="season-out">21. Juni</output></label>
|
|
<input id="season" type="range" min="1" max="365" step="1" value="172" />
|
|
</div>
|
|
|
|
<div id="crosshair"></div>
|
|
|
|
<div id="hint">
|
|
<span class="desktop">Auf den Boden klicken: dorthin gehen · Ziehen: umsehen · <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> gehen · <kbd>Leertaste</kbd> springen</span>
|
|
<span class="touch">Auf den Boden tippen: dorthin gehen · rechts wischen: umsehen</span>
|
|
</div>
|
|
|
|
<div id="joystick" hidden><div id="joystick-knob"></div></div>
|
|
|
|
<aside id="info" hidden>
|
|
<button id="info-close" type="button" aria-label="Schliessen">×</button>
|
|
<h2>Über diese Visualisierung</h2>
|
|
<div id="info-body"></div>
|
|
</aside>
|
|
</div>
|
|
|
|
<noscript>
|
|
<p style="padding:2rem;font:16px system-ui">Für die 3D-Visualisierung wird JavaScript benötigt.</p>
|
|
</noscript>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|