1<!DOCTYPE html> 2<!-- GENERATED â do not edit. Edit index.html + partials/, then npm run build. --> 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta 7 name="viewport" 8 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, interactive-widget=resizes-visual" 9 /> 10 <!-- /mobile landing: base + mobile-landing class before any relative asset links --> 11
11<script> 12 (function () { 13 try { 14 var pathname = location.pathname || '/'; 15 var path = pathname.replace(/\/$/, '') || '/'; 16 if (pathname === '/mobile') { 17 location.replace('/mobile/' + location.search + location.hash); 18 return; 19 } 20 if (pathname === '/mobile/app') { 21 location.replace('/mobile/app/' + location.search + location.hash); 22 return; 23 } 24 if (pathname === '/mobile/learn') { 25 location.replace('/mobile/learn/' + location.search + location.hash); 26 return; 27 } 28 // Mobile home â minimal gate at /mobile/ (keep in sync with orbyMobileLandingBoot.js) 29 if (path === '/' || path === '/index.html') { 30 if (typeof window !== 'undefined' && window.__ORBY_DEBUG_MOBILE_LANDING__ === true) { 31 return; 32 } 33 try { 34 if (sessionStorage.getItem('orby_mobile_landing') === '1') return; 35 } catch (e) {} 36 try { 37 var q = new URLSearchParams(location.search); 38 if (q.get('orbyMobile') === '1' || q.has('mobileLanding')) return; 39 } catch (e) {} 40 var isPhone = /iPhone|iPod|Windows Phone/i.test(navigator.userAgent || ''); 41 if (!isPhone) { 42 isPhone = 43 /Android/i.test(navigator.userAgent || '') && 44 /Mobile/i.test(navigator.userAgent || ''); 45 } 46 if (!isPhone) { 47 try { 48 isPhone = 49 window.matchMedia && 50 window.matchMedia('(max-width: 768px)').matches; 51 } catch (e) {} 52 } 53 if (isPhone) { 54 location.replace('/mobile/' + location.search + location.hash); 55 } 56 } 57 } catch (e) {} 58 })(); 59 </script>
59 60
60<script> 61 (function () { 62 try { 63 var path = (location.pathname || '/').replace(/\/$/, '') || '/'; 64 if (path !== '/mobile/learn') return; 65 var base = document.createElement('base'); 66 base.href = '/'; 67 document.head.appendChild(base); 68 document.documentElement.classList.add('mobile-landing', 'orby-home-scroll'); 69 } catch (e) {} 70 })(); 71 </script>
71 72 <meta name="theme-color" content="#080808" /> 73 <style> 74 /* First-paint boot â external styles.css may load a frame later */ 75 html, 76 body { 77 background: #080808; 78 } 79 /* Homepage scroll shell â match UI --orby-app-bg until modules run */ 80 html.orby-home-scroll, 81 html.orby-home-scroll body, 82 html.orby-home-scroll #app, 83 html.orby-home-scroll.orby-dropzone-shell-pending .workspace, 84 html.orby-home-scroll.orby-dropzone-shell-pending body.dropzone-visible .workspace, 85 html.orby-home-scroll body.dropzone-visible .dropzone { 86 background-color: #080808 !important; 87 background: #080808 !important; 88 } 89 .orby-sr { 90 background: #080808; 91 } 92 .dropzone { 93 opacity: 0; 94 } 95 .dropzone-hero-deco__img { 96 visibility: hidden; 97 opacity: 0; 98 } 99 .look-filter-tile__thumb:not([src]) { 100 visibility: hidden; 101 } 102 .shelf.is-shelf-hidden { 103 visibility: hidden; 104 opacity: 0; 105 pointer-events: none; 106 } 107 .viewport-load-spinner { 108 visibility: hidden; 109 opacity: 0; 110 } 111 /* Scroll nav â desktop hides until scroll-up reveal; mobile always on (see shell CSS) */ 112 html:not(.mobile-landing) .orby-marketing-scroll-nav:not(.orby-marketing-scroll-nav--visible) { 113 visibility: hidden !important; 114 opacity: 0 !important; 115 pointer-events: none !important; 116 transform: translate3d(0, -100%, 0) !important; 117 } 118 html.mobile-landing .orby-marketing-scroll-nav { 119 display: block !important; 120 visibility: visible !important; 121 opacity: 1 !important; 122 pointer-events: auto !important; 123 transform: none !important; 124 } 125 html.mobile-landing .dropzone-disclaimer { 126 display: none !important; 127 } 128 </style> 129<!-- Open Graph / Facebook --> 130 <meta property="og:type" content="website" /> 131 <meta property="og:title" content="Orby â 3D viewer and virtual studio in the browser" /> 132 <meta property="og:description" content="Drop a GLB or SVG. Light, grade, and export â locally, no account. Free at orby.studio" /> 133 <meta property="og:image" content="https://orby.studio/assets/images/orby-shareimage.jpg" /> 134 <meta property="og:image:secure_url" content="https://orby.studio/assets/images/orby-shareimage.jpg" /> 135 <meta property="og:image:type" content="image/jpeg" /> 136 <meta property="og:image:width" content="1200" /> 137 <meta property="og:image:height" content="630" /> 138 <meta property="og:url" content="https://orby.studio/" /> 139 <meta property="og:site_name" content="Orby" /> 140 141 <!-- Twitter --> 142 <meta name="twitter:card" content="summary_large_image" /> 143 <meta name="twitter:title" content="Orby â 3D viewer and virtual studio in the browser" /> 144 <meta name="twitter:description" content="Drop a GLB or SVG. Light, grade, and export â locally, no account. Free at orby.studio" /> 145 <meta name="twitter:image" content="https://orby.studio/assets/images/orby-shareimage.jpg" /> 146 <meta name="twitter:image:alt" content="Orby - 3D Model Viewer" /> 147 148 <title>Orby â 3D viewer and virtual studio in the browser</title> 149 <link 150 rel="icon" 151 type="image/svg+xml" 152 href="./assets/images/favicon.svg" 153 /> 154 <!-- Browser gate + platform classes before styles.css --> 155
155<script src="./scripts/orbyUnsupportedBrowserBoot.js"></script>
155 156
156<script src="./scripts/orbySafariBrowserBoot.js"></script>
156 157 <link rel="stylesheet" href="./styles/orby-unsupported-browser-gate.css" /> 158 <link rel="stylesheet" href="./styles/fontawesome/orby-icons.css" /> 159 <link rel="stylesheet" href="./styles.css?v=0.5.1052" /> 160 <link rel="stylesheet" href="./styles/background-gradient.css" /> 161 <link rel="stylesheet" href="./styles/background-image.css" /> 162 <link rel="stylesheet" href="./styles/map-inspect.css" /> 163 <link rel="stylesheet" href="./styles/shape-library.css" /> 164 <link rel="stylesheet" href="./styles/marketing/09-scroll-cue-responsive.css" /> 165
165<script> 166 (function () { 167 if (typeof window !== 'undefined' && window.__ORBY_SR_OFF__ === true) { 168 document.documentElement.classList.add('orby-sr-on'); 169 return; 170 } 171 try { 172 var SK = 'orby_sr_s'; 173 var CK = 'orby_sr_c'; 174 var CHALLENGE_EVERY_N_VISITS = 5; 175 var prev = parseInt(sessionStorage.getItem(CK) || '0', 10); 176 var visitSeq = (isNaN(prev) ? 0 : prev) + 1; 177 sessionStorage.setItem(CK, String(visitSeq)); 178 if (visitSeq % CHALLENGE_EVERY_N_VISITS === 0) { 179 sessionStorage.removeItem(SK); 180 } 181 if (sessionStorage.getItem(SK) === '1') { 182 document.documentElement.classList.add('orby-sr-on'); 183 } 184 } catch (e) {} 185 })(); 186 </script>
186 187 <!-- Before first paint on mobile â avoid one-frame desktop dropzone flash until main.js runs --> 188
188<script src="./scripts/orbyMobileLandingBoot.js"></script>
188 189 <!-- Desktop homepage â orby-home-scroll before styles.css gray studio tokens paint --> 190
190<script src="./scripts/orbyHomeScrollBoot.js"></script>
190 191 <!-- Reduced marketing tier before first paint â disables dropzone frost blur on lower-spec home loads --> 192
192<script src="./scripts/orbyMarketingPerformanceBoot.js"></script>
192 193 <!-- Empty in source; CI may set via BUG_REPORT_API_URL (see build.js). --> 194 <meta name="orby-version" content="0.5.1052" /> 195 <meta name="orby-bug-report-api" content="" /> 196 <meta name="orby-stats-api" content="" /> 197 <!-- Cloudflare Turnstile site key; CI via TURNSTILE_SITE_KEY (see build.js). Pair with TURNSTILE_SECRET_KEY on Vercel. --> 198 <meta name="orby-turnstile-site-key" content="" /> 199 </head> 200 <body data-theme="violet" class="dropzone-visible"> 201 <!-- orby:homepage-site-nav --> 202 <nav class="orby-marketing-scroll-nav orby-marketing-scroll-nav--mobile-fixed" data-orby-marketing-scroll-nav aria-label="Site"> 203 <div class="orby-marketing-scroll-nav__bar"> 204 <a class="orby-marketing-scroll-nav__brand" href="./index.html" data-orby-marketing-scroll-top aria-label="Back to top"> 205 <span class="orby-marketing-scroll-nav__brand-mark" aria-hidden="true"></span> 206 </a> 207 <div class="orby-marketing-scroll-nav__links orby-marketing-scroll-nav__links--inline"><a class="orby-marketing-scroll-nav__link" href="./about/">About</a><a class="orby-marketing-scroll-nav__link" href="./support/">Support</a><a class="orby-marketing-scroll-nav__link" href="./stats/">Statistics</a></div> 208 <button type="button" class="orby-marketing-scroll-nav__menu-toggle" data-orby-marketing-nav-toggle aria-expanded="false" aria-controls="orby-site-nav-menu" aria-label="Open menu"> 209 <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span> 210 <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span> 211 <span class="orby-marketing-scroll-nav__menu-bar" aria-hidden="true"></span> 212 </button> 213 <div class="orby-marketing-scroll-nav__cta"><span class="orby-magic-btn-host"><button type="button" class="orby-magic-btn orby-magic-btn--nav-outline orby-marketing-scroll-nav__browse" data-orby-marketing-browse> 214 <span class="orby-magic-btn__fill" aria-hidden="true"></span> 215 <span class="orby-magic-btn__inner"> 216 <span class="orby-magic-btn__label">Browse files</span> 217 <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 218 </span> 219 </button></span></div> 220 </div> 221 <div class="orby-marketing-scroll-nav__menu" id="orby-site-nav-menu" data-orby-marketing-nav-menu aria-hidden="true"> 222 <div class="orby-marketing-scroll-nav__links orby-marketing-scroll-nav__links--overlay"><a class="orby-marketing-scroll-nav__link" href="./about/">About</a><a class="orby-marketing-scroll-nav__link" href="./support/">Support</a><a class="orby-marketing-scroll-nav__link" href="./stats/">Statistics</a></div> 223 <div class="orby-marketing-scroll-nav__menu-social"><a class="orby-marketing-scroll-nav__menu-social-link" href="https://www.instagram.com/dropittoorby" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><span class="orby-marketing-scroll-nav__menu-social-icon orby-marketing-scroll-nav__menu-social-icon--instagram" aria-hidden="true"></span></a><a class="orby-marketing-scroll-nav__menu-social-link" href="https://github.com/stellanjoh2/orby" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><span class="orby-marketing-scroll-nav__menu-social-icon orby-marketing-scroll-nav__menu-social-icon--github" aria-hidden="true"></span></a></div> 224 </div> 225 </nav> 226 <div 227 id="orby-sr-root" 228 class="orby-sr" 229 role="dialog" 230 aria-modal="true" 231 aria-labelledby="orby-sr-title" 232 > 233 <div class="orby-sr__panel"> 234 <h1 id="orby-sr-title" class="orby-sr__title">Orby</h1> 235 <form class="orby-sr__form" id="orby-sr-form" autocomplete="off"> 236 <label class="orby-sr__label" for="orby-sr-field" 237 ><span class="orby-sr__label-text">Continue</span></label 238 > 239 <input 240 id="orby-sr-field" 241 class="orby-sr__input" 242 type="text" 243 name="orby-sr-field" 244 autocomplete="off" 245 autocorrect="off" 246 autocapitalize="off" 247 spellcheck="false" 248 /> 249 <p class="orby-sr__msg" id="orby-sr-msg" aria-live="polite"></p> 250 <button type="submit" class="orby-sr__btn accent-action-btn"> 251 Continue 252 </button> 253 </form> 254 </div> 255 </div> 256 <section 257 id="orbyNotFoundPage" 258 class="orby-not-found-page" 259 hidden 260 aria-hidden="true" 261 role="alert" 262 aria-labelledby="orbyNotFoundTitle" 263 > 264 <div class="orby-not-found-copy"> 265 <h1 id="orbyNotFoundTitle" class="orby-not-found-title">404</h1> 266 <p class="orby-not-found-message">
267 <span class="orby-not-found-emphasis">Nothing to see here.</span> You've drifted beyond the scene bounds. 268 There's nothing out here â no geometry, no light, no ground. Just void. 269 </p> 270 <button 271 type="button" 272 id="orbyNotFoundReturnBtn" 273 class="orby-pill-btn orby-pill-btn--accent orby-pill-btn--xl orby-not-found-btn" 274 > 275 Return home screen â 276 </button> 277 </div> 278 </section> 279
279<script src="./scripts/orbyShellReady.js"></script>
279 280 <div id="app"> 281 <main class="workspace"> 282 <section class="viewport"> 283 <canvas id="webgl" tabindex="0"></canvas> 284 <canvas 285 id="viewportCaptureFreeze" 286 class="viewport-capture-freeze" 287 hidden 288 aria-hidden="true" 289 ></canvas> 290 <div 291 id="viewportExportPreviewBanner" 292 class="viewport-export-preview-banner" 293 hidden 294 aria-hidden="true" 295 role="status" 296 > 297 <span class="viewport-export-preview-banner__spinner" aria-hidden="true"> 298 <img src="./assets/images/favicon.svg" alt="" width="40" height="40" draggable="false" /> 299 </span> 300 <span class="viewport-export-preview-banner__copy"> 301 <span class="viewport-export-preview-banner__title">Preview mode</span> 302 <span class="viewport-export-preview-banner__hint">Orbit locked â exit to adjust camera</span> 303 </span> 304 <button 305 type="button" 306 id="viewportExportPreviewExit" 307 class="accent-action-btn viewport-export-preview-banner__exit" 308 aria-label="Exit preview and restore camera orbit" 309 > 310 <i class="fa-solid fa-stop" aria-hidden="true"></i> 311 <span>Exit preview</span> 312 </button> 313 </div> 314 <div 315 id="viewportOfflineExportOverlay" 316 class="viewport-offline-export" 317 hidden 318 aria-hidden="true" 319 role="status" 320 > 321 <div class="viewport-offline-export__center"> 322 <div class="viewport-offline-export__section"> 323 <p class="viewport-offline-export__title">Rendering PNG sequence</p> 324 <p class="viewport-offline-export__progress"> 325 <span class="viewport-offline-export__progress-leading"> 326 <span class="viewport-offline-export__spinner" aria-hidden="true"></span> 327 <span id="viewportOfflineExportFrame" class="viewport-offline-export__stat">Frame 0 / 0</span> 328 </span> 329 </p> 330 </div> 331 <div class="viewport-offline-export__section"> 332 <div class="viewport-offline-export__table-wrap"> 333 <div id="viewportOfflineExportFilename" class="viewport-offline-export__filename" hidden> 334 <span class="viewport-offline-export__filename-label">Filename</span> 335 <span id="viewportOfflineExportFilenameValue" class="viewport-offline-export__filename-value">â</span> 336 </div> 337 <table class="viewport-offline-export__table"> 338 <tbody id="viewportOfflineExportSummary"></tbody> 339 </table> 340 </div> 341 </div> 342 <div class="viewport-offline-export__section"> 343 <p id="viewportOfflineExportElapsed" class="viewport-offline-export__elapsed"> 344 <span class="viewport-offline-export__elapsed-label">Elapsed</span> 345 <span id="viewportOfflineExportElapsedValue" class="viewport-offline-export__elapsed-value">0s</span> 346 </p> 347 <p class="viewport-offline-export__helper"> 348 Long sequences â especially many frames at 4K â can take several minutes. If your browser 349 says the page is unresponsive, choose <strong>Wait</strong>. Rendering continues in the 350 background and should finish soon. 351 </p> 352 <p class="viewport-offline-export__helper"> 353 If creating a .ZIP truly fails, switch to <strong>Chrome or Edge</strong>, choose an 354 <strong>Output folder</strong>, and export again. <strong>Safari and Firefox</strong> do not 355 support folder export â frames download as a ZIP instead. 356 </p> 357 </div> 358 <div id="viewportOfflineExportFooter" class="viewport-offline-export__footer"> 359 <button 360 type="button" 361 id="viewportOfflineExportCancel" 362 class="orby-pill-btn orby-pill-btn--normal orby-pill-btn--danger viewport-offline-export__cancel" 363 > 364 Cancel render 365 </button> 366 <button 367 type="button" 368 id="viewportOfflineExportGoBack" 369 class="orby-pill-btn orby-pill-btn--normal orby-pill-btn--accent viewport-offline-export__go-back" 370 hidden 371 aria-hidden="true" 372 > 373 Go back 374 </button> 375 </div> 376 </div> 377 <div 378 id="viewportOfflineExportPreview" 379 class="viewport-offline-export__preview" 380 hidden 381 aria-hidden="true" 382 > 383 <div class="viewport-offline-export__preview-frame"> 384 <canvas 385 id="viewportOfflineExportPreviewCanvas" 386 class="viewport-offline-export__preview-canvas" 387 width="16" 388 height="9" 389 ></canvas> 390 </div> 391 <p class="viewport-offline-export__preview-caption">Live frame preview</p> 392 </div> 393 </div> 394 <div 395 id="viewportLetterbox219" 396 class="viewport-letterbox" 397 hidden 398 aria-hidden="true" 399 > 400 <div class="viewport-letterbox__bar viewport-letterbox__bar--top"></div> 401 <div class="viewport-letterbox__bar viewport-letterbox__bar--bottom"></div> 402 <div class="viewport-letterbox__bar viewport-letterbox__bar--left"></div> 403 <div class="viewport-letterbox__bar viewport-letterbox__bar--right"></div> 404 </div> 405 <div 406 id="compositionGridOverlay" 407 class="composition-grid-overlay" 408 hidden 409 aria-hidden="true" 410 > 411 <!-- Full-viewport cross + diagonals (true panel corners; not clipped to the 16Ã9 frame) --> 412 <svg 413 class="composition-grid-overlay__viewport-guides"
414 viewBox="0 0 100 100" 415 preserveAspectRatio="none" 416 width="100%" 417 height="100%" 418 role="presentation" 419 focusable="false" 420 aria-hidden="true" 421 > 422 <line x1="50" y1="0" x2="50" y2="100" /> 423 <line x1="0" y1="50" x2="100" y2="50" /> 424 <line x1="0" y1="0" x2="100" y2="100" /> 425 <line x1="100" y1="0" x2="0" y2="100" /> 426 </svg> 427 <!-- Largest centered square â matches shape-library thumbnail center-crop --> 428 <div class="composition-grid-overlay__thumb-safe" aria-hidden="true"></div> 429 <!-- Horizontal thirds: full panel width (inner SVG can letterbox X on wide views) --> 430 <div class="composition-grid-overlay__thirds-horizontal" aria-hidden="true"> 431 <span class="composition-grid-overlay__thirds-horizontal-line composition-grid-overlay__thirds-horizontal-line--upper"></span> 432 <span class="composition-grid-overlay__thirds-horizontal-line composition-grid-overlay__thirds-horizontal-line--lower"></span> 433 </div> 434 <!-- Inner frame: largest 16Ã9 â action safe (90%) + vertical thirds + center circle --> 435 <div class="composition-grid-overlay__frame"> 436 <svg 437 class="composition-grid-overlay__svg"
438 viewBox="0 0 160 90" 439 preserveAspectRatio="xMidYMid meet" 440 overflow="visible" 441 width="100%" 442 height="100%" 443 role="presentation" 444 focusable="false" 445 > 446 <!-- HD action safe: 90% of picture area (5% inset each side) --> 447 <rect 448 class="composition-grid-overlay__action-safe" 449 x="8" 450 y="4.5" 451 width="144" 452 height="81" 453 /> 454 <g class="composition-grid-overlay__lines"> 455 <!-- Rule of thirds (vertical only â horizontals are full-bleed above) --> 456 <line x1="53.333333" y1="0" x2="53.333333" y2="90" /> 457 <line x1="106.666667" y1="0" x2="106.666667" y2="90" /> 458 <!-- Center circle (~10% of frame height) --> 459 <circle cx="80" cy="45" r="4.5" /> 460 </g> 461 </svg> 462 <div 463 class="composition-grid-overlay__portrait-crop" 464 aria-hidden="true" 465 > 466 <div class="composition-grid-overlay__portrait-crop-shade composition-grid-overlay__portrait-crop-shade--left" aria-hidden="true"></div> 467 <div class="composition-grid-overlay__portrait-crop-shade composition-grid-overlay__portrait-crop-shade--right" aria-hidden="true"></div> 468 <svg 469 class="composition-grid-overlay__portrait-crop-svg"
470 viewBox="0 0 90 160" 471 preserveAspectRatio="xMidYMid meet" 472 overflow="visible" 473 width="100%" 474 height="100%" 475 role="presentation" 476 focusable="false" 477 > 478 <rect 479 class="composition-grid-overlay__action-safe" 480 x="4.5" 481 y="8" 482 width="81" 483 height="144" 484 /> 485 <g class="composition-grid-overlay__lines"> 486 <line x1="0" y1="53.333333" x2="90" y2="53.333333" /> 487 <line x1="0" y1="106.666667" x2="90" y2="106.666667" /> 488 <line x1="30" y1="0" x2="30" y2="160" /> 489 <line x1="60" y1="0" x2="60" y2="160" /> 490 <circle cx="45" cy="80" r="4.5" /> 491 </g> 492 </svg> 493 </div> 494 </div> 495 </div> 496 <div class="dropzone" id="dropzone"> 497 <p class="dropzone-disclaimer"> 498 <i class="fa-solid fa-circle-exclamation dropzone-disclaimer__icon" aria-hidden="true"></i> 499 In Development. Chrome, Brave, and Safari only. 500 </p> 501 <div class="dropzone-hero-deco" aria-hidden="true"> 502 <picture class="dropzone-hero-deco__slot dropzone-hero-deco__slot--ur"> 503 <img 504 class="dropzone-hero-deco__img" 505 data-src="./assets/marketing/orby-hero-area-topright.jpg" 506 alt="" 507 width="2880" 508 height="2880" 509 decoding="async" 510 /> 511 </picture> 512 <picture class="dropzone-hero-deco__slot dropzone-hero-deco__slot--ll"> 513 <img 514 class="dropzone-hero-deco__img" 515 data-src="./assets/marketing/orby-hero-area-bottomleft.jpg" 516 alt="" 517 width="2880" 518 height="2880" 519 decoding="async" 520 /> 521 </picture> 522 </div> 523 <div id="logotypeAnimation" class="drop-logo"></div> 524 <p class="drop-primary"><span class="drop-primary-line">Drag and drop your <span class="brand-highlight">GLB</span></span><span class="drop-primary-line drop-primary-line--second">or <span class="brand-highlight">SVG</span> file here</span></p> 525 <div class="dropzone-actions"> 526 <span class="orby-magic-btn-host"><button 527 id="browseButton" 528 type="button" 529 class="orby-magic-btn dropzone-btn" 530 data-tooltip="Open a 3D file (GLB, SVG, â¦) or a saved .orby scene" 531 > 532 <span class="orby-magic-btn__fill" aria-hidden="true"></span> 533 <span class="orby-magic-btn__inner"> 534 <span class="orby-magic-btn__label">Browse files</span> 535 <span class="orby-magic-btn__arrow" aria-hidden="true"> 536 <svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 537 <path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/> 538 </svg> 539 </span> 540 </span> 541 </button></span> 542 </div> 543 <p class="drop-secondary">Orby is built for <strong class="brand-highlight">glTF</strong>/<strong class="brand-highlight">GLB</strong> and <strong class="brand-highlight">SVG</strong> extrusion. Files stay on your machine â nothing is uploaded. Read more on the <a href="./legal/privacy-policy.html" class="drop-link">privacy policy</a>. For the best experience, go full screen. · <a href="#" id="blankCanvasLink" class="drop-link">Blank canvas</a> · <a href="#" id="loadTestLink" class="drop-link">Load test object</a><a href="#" id="debugExportOverlayLink" class="drop-link" hidden aria-hidden="true">Preview export overlay</a><a href="/?orby404Debug=1" id="debug404Link" class="drop-link" hidden aria-hidden="true">Debug 404</a><br /><br /><span class="drop-shortcuts-row"><span class="drop-shortcuts-inline"><strong>V</strong> â Hide UI · <strong>F</strong> â Focus camera · <strong>Q/W/E/R</strong> â Select / move / rotate / scale · <strong>
5431/2/3/4</strong> â Display modes</span></span></p> 544 <div class="dropzone-hero-credits"> 545 <p class="dropzone-hero-credit"> 546 <span class="dropzone-hero-credit__label">Featured Dropzone Artists:</span> 547 <span class="dropzone-hero-credit__sep" aria-hidden="true"> · </span> 548 <a href="https://sketchfab.com/3d-models/purple-music-0302fbca6ac745bc8db2a6248c21438a" target="_blank" rel="noopener noreferrer">Purple Music</a> 549 by Moon on 550 <a href="https://sketchfab.com/" target="_blank" rel="noopener noreferrer">Sketchfab</a> 551 <span class="dropzone-hero-credit__sep" aria-hidden="true"> · </span> 552 <a href="https://www.meshy.ai/sv/3d-models/Prismatic-Dragon-v2-019e06ea-6c30-7548-b991-3d69ca464e36" target="_blank" rel="noopener noreferrer">Prismatic Dragon</a> 553 by kaesar3d on 554 <a href="https://www.meshy.ai/" target="_blank" rel="noopener noreferrer">Meshy</a> 555 </p> 556 </div> 557 </div> 558 <input 559 type="file" 560 id="fileInput" 561 class="sr-only" 562 accept=".glb,.gltf,.obj,.fbx,.stl,.usd,.usda,.usdc,.usdz,.svg,.bvh,.orby" 563 aria-label="Import 3D model file" 564 /> 565 <button 566 id="fullscreenToggle" 567 class="viewport-fullscreen-btn" 568 type="button" 569 data-tooltip="Toggle fullscreen" 570 > 571 <i class="fa-solid fa-expand"></i> 572 </button> 573 <div 574 id="viewportLoadSpinner" 575 class="viewport-load-spinner" 576 aria-hidden="true" 577 role="status" 578 > 579 <img src="./assets/images/favicon.svg" alt="" width="70" height="70" draggable="false" /> 580 <span id="viewportLoadSpinnerElapsed" class="viewport-load-spinner__elapsed" hidden></span> 581 </div> 582 <div id="demoLogotype" class="demo-logotype"></div> 583 <div 584 id="watermarkOverlay" 585 class="watermark-overlay" 586 data-placement="left" 587 data-logo="orby" 588 aria-hidden="true" 589 hidden 590 > 591 <div class="watermark-overlay__logo"> 592 <div class="watermark-overlay__orby" id="watermarkOverlayOrby"></div> 593 <div class="watermark-overlay__custom" id="watermarkOverlayCustom" role="img" aria-label="Custom logotype" hidden></div> 594 </div> 595 <div class="watermark-overlay__credit" id="watermarkOverlayCredit"></div> 596 </div> 597 <div 598 id="shapeLibraryPanel" 599 class="shape-library-panel" 600 hidden 601 role="dialog" 602 aria-modal="false" 603 aria-label="Shape library" 604 > 605 <div class="shape-library-panel__chrome"> 606 <div class="load-settings-header shape-library-panel__header"> 607 <button 608 type="button" 609 id="shapeLibraryPanelDrag" 610 class="shape-library-panel__drag" 611 aria-label="Drag panel" 612 > 613 <span class="shape-library-panel__grip" aria-hidden="true"></span> 614 </button> 615 <p class="shape-library-panel__title">Shape Library</p> 616 <button 617 type="button" 618 id="shapeLibraryPanelClose" 619 class="close-btn" 620 aria-label="Close" 621 ></button> 622 </div> 623 <div class="shape-library-panel__body"> 624 <div id="shapeLibraryGrid" class="shape-library-grid" role="list"></div> 625 </div> 626 </div> 627 </div> 628 <div 629 id="mapPreviewPanel" 630 class="map-preview-panel" 631 hidden 632 role="dialog" 633 aria-modal="false" 634 aria-label="Texture map preview" 635 > 636 <div class="map-preview-panel__chrome"> 637 <div class="load-settings-header map-preview-panel__header"> 638 <button 639 type="button" 640 id="mapPreviewPanelDrag" 641 class="map-preview-panel__drag" 642 aria-label="Drag panel" 643 >
644 <span class="map-preview-panel__grip" aria-hidden="true"></span> 645 </button> 646 <div id="mapPreviewPanelTabs" class="map-preview-panel__tabs"></div> 647 <button 648 type="button" 649 id="mapPreviewPanelClose" 650 class="close-btn" 651 aria-label="Close" 652 ></button> 653 </div> 654 <div class="map-preview-panel__body"> 655 <img 656 id="mapPreviewPanelImage" 657 class="map-preview-panel__image" 658 alt="" 659 role="button" 660 tabindex="0" 661 aria-label="Inspect texture at full size" 662 data-tooltip="Inspect at 100% scale" 663 /> 664 </div> 665 </div> 666 </div> 667 <div 668 id="mapFullsizeView" 669 class="map-fullsize-view" 670 hidden 671 role="dialog" 672 aria-modal="true" 673 aria-labelledby="mapFullsizeName" 674 > 675 <div class="map-fullsize-view__header load-settings-header"> 676 <div class="map-fullsize-view__meta"> 677 <p id="mapFullsizeMeta" class="map-fullsize-view__meta-line"> 678 <span id="mapFullsizeName" class="map-fullsize-view__name">Texture map</span><span 679 id="mapFullsizeDims" 680 class="map-fullsize-view__dims" 681 ></span> 682 </p> 683 </div> 684 <p class="map-fullsize-view__hint">Drag to pan · Esc to close</p> 685 <button 686 type="button" 687 id="mapFullsizeClose" 688 class="close-btn" 689 aria-label="Close full-size preview" 690 ></button> 691 </div> 692 <div id="mapFullsizeViewport" class="map-fullsize-view__viewport"> 693 <canvas id="mapFullsizeCanvas" class="map-fullsize-view__canvas" aria-hidden="true"></canvas> 694 <img id="mapFullsizeImage" class="map-fullsize-view__source" alt="" draggable="false" hidden /> 695 </div> 696 </div> 697 </section> 698 699 <aside class="shelf is-shelf-hidden" id="shelf"> 700 <nav class="tabs" role="tablist" aria-label="Orby Panels"> 701 <button class="tab active" data-tab="mesh" aria-selected="true" data-tooltip="Object"> 702 <i class="fa-solid fa-cube"></i> 703 </button> 704 <button class="tab" data-tab="studio" aria-selected="false" data-tooltip="Studio"> 705 <i class="fa-solid fa-lightbulb"></i> 706 </button> 707 <button class="tab" data-tab="render" aria-selected="false" data-tooltip="Camera & FX"> 708 <i class="fa-solid fa-camera"></i> 709 </button> 710 <button class="tab" data-tab="export" aria-selected="false" data-tooltip="Export"> 711 <i class="fa-solid fa-file-export"></i> 712 </button> 713 <button class="tab" data-tab="info" aria-selected="false" data-tooltip="Information"> 714 <i class="fa-solid fa-circle-info"></i> 715 </button> 716 </nav> 717 718 <div class="shelf-scroll"> 719 <div class="panels"> 720 <!-- Shelf panels: edit partials/shelf-panels/*.html (stitched at build + dev serve) --> 721 <h2 class="panel-header-title" data-header="mesh">Object</h2> 722 <section class="panel visible" data-panel="mesh"> 723 724 <div class="panel-block"> 725 <div class="block-title">Display</div> 726 <div class="mode-icons" role="group"> 727 <label class="mode-icon" data-mode="shaded" data-tooltip="Shaded â Full lighting and materials"> 728 <input 729 type="radio" 730 name="shading" 731 value="shaded" 732 checked 733 /> 734 <img src="./assets/images/modeicon-color.png" alt="Shaded" /> 735 </label> 736 <label class="mode-icon" data-mode="textures" data-tooltip="Unlit â Textures without lighting"> 737 <input type="radio" name="shading" value="textures" />
738 <span class="mode-icon__flat" role="img" aria-label="Unlit"></span> 739 </label> 740 <label class="mode-icon" data-mode="clay" data-tooltip="Clay â Uniform material preview"> 741 <input type="radio" name="shading" value="clay" /> 742 <img src="./assets/images/modeicon-clay.png" alt="Clay" /> 743 </label> 744 <label class="mode-icon" data-mode="wireframe" data-tooltip="Wireframe â Mesh structure view"> 745 <input type="radio" name="shading" value="wireframe" /> 746 <img src="./assets/images/modeicon-wire.png" alt="Wire" /> 747 </label> 748 </div> 749 </div> 750 751 <div class="panel-block" id="mapInspectBlock" hidden> 752 <div class="block-title">Maps</div> 753 <div 754 id="mapInspectGrid" 755 class="map-inspect-grid" 756 role="group" 757 aria-label="Texture map preview" 758 ></div> 759 </div> 760 761 <div class="panel-block" id="fbxMapSlotsBlock" hidden> 762 <div class="subsection" data-subsection="fbxMapSlots" id="fbxMapSlotsSub
762section"> 763 <div class="block-title"> 764 <span class="block-title-name"> 765 <span>Map Slots</span> 766 <span class="dev-badge" data-tooltip="This feature is still under development" tabindex="0" role="img" aria-label="This feature is still under development"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span> 767 </span> 768 </div> 769 <p class="panel-hint map-slots-hint">FBX â drop the whole folder (FBX + PNGs) to auto-assign maps named like MaterialName_BaseColor.png. To override one slot, pick a material target, then assign per part. Packed ORM: red = AO, green = roughness, blue = metallic.</p> 770 <label class="select-line map-slot-material-line" id="fbxMapMaterialLine" hidden> 771 <span data-tooltip="FBX files often duplicate materials per mesh; we group by material name.">Material</span> 772 <select id="fbxMapMaterial" aria-label="Material to assign textures to"></select> 773 </label> 774 <input type="file" id="fbxMapFileInput" class="sr-only" accept="image/*,.png,.jpg,.jpeg,.webp,.tif,.tiff,.bmp" tabindex="-1" aria-hidden="true" /> 775 <div class="map-slot-row"> 776 <span class="map-slot-label">Albedo</span> 777 <div class="map-slot-control" data-fbx-map-row="albedo"> 778 <button type="button" class="map-slot-choose" data-fbx-map-slot="albedo">Choose</button> 779 <button type="button" class="map-slot-file" data-fbx-map-slot="albedo" hidden data-tooltip="Replace texture"></button> 780 <button type="button" class="map-slot-clear" data-fbx-map-clear="albedo" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 781 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 782 </button> 783 </div> 784 </div> 785 <div class="map-slot-row"> 786 <span class="map-slot-label">Normal</span> 787 <div class="map-slot-control" data-fbx-map-row="normal"> 788 <button type="button" class="map-slot-choose" data-fbx-map-slot="normal">Choose</button> 789 <button type="button" class="map-slot-file" data-fbx-map-slot="normal" hidden data-tooltip="Replace texture"></button> 790 <button type="button" class="map-slot-clear" data-fbx-map-clear="normal" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 791 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 792 </button> 793 </div> 794 </div> 795 <div class="map-slot-row"> 796 <span class="map-slot-label" data-tooltip="Single texture: ambient occlusion in red, roughness in green, metallic in blue">ORM Packed</span> 797 <div class="map-slot-control" data-fbx-map-row="orm"> 798 <button type="button" class="map-slot-choose" data-fbx-map-slot="orm">Choose</button> 799 <button type="button" class="map-slot-file" data-fbx-map-slot="orm" hidden data-tooltip="Replace texture"></button> 800 <button type="button" class="map-slot-clear" data-fbx-map-clear="orm" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 801 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 802 </button> 803 </div> 804 </div> 805 <div class="map-slot-row"> 806 <span class="map-slot-label">Roughness</span> 807 <div class="map-slot-control" data-fbx-map-row="roughness"> 808 <button type="button" class="map-slot-choose" data-fbx-map-slot="roughness">Choose</button> 809 <button type="button" class="map-slot-file" data-fbx-map-slot="roughness" hidden data-tooltip="Replace texture"></button> 810 <button type="button" class="map-slot-clear" data-fbx-map-clear="roughness" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 811 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 812 </button> 813 </div> 814 </div> 815 <div class="map-slot-row">
816 <span class="map-slot-label">Metallic</span> 817 <div class="map-slot-control" data-fbx-map-row="metallic"> 818 <button type="button" class="map-slot-choose" data-fbx-map-slot="metallic">Choose</button> 819 <button type="button" class="map-slot-file" data-fbx-map-slot="metallic" hidden data-tooltip="Replace texture"></button> 820 <button type="button" class="map-slot-clear" data-fbx-map-clear="metallic" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 821 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 822 </button> 823 </div> 824 </div> 825 <div class="map-slot-row"> 826 <span class="map-slot-label">Occlusion</span> 827 <div class="map-slot-control" data-fbx-map-row="occlusion"> 828 <button type="button" class="map-slot-choose" data-fbx-map-slot="occlusion">Choose</button> 829 <button type="button" class="map-slot-file" data-fbx-map-slot="occlusion" hidden data-tooltip="Replace texture"></button> 830 <button type="button" class="map-slot-clear" data-fbx-map-clear="occlusion" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 831 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 832 </button> 833 </div> 834 </div> 835 <div class="map-slot-row"> 836 <span class="map-slot-label">Displacement</span> 837 <div class="map-slot-control" data-fbx-map-row="displacement"> 838 <button type="button" class="map-slot-choose" data-fbx-map-slot="displacement">Choose</button> 839 <button type="button" class="map-slot-file" data-fbx-map-slot="displacement" hidden data-tooltip="Replace texture"></button> 840 <button type="button" class="map-slot-clear" data-fbx-map-clear="displacement" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 841 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 842 </button> 843 </div> 844 </div> 845 <div class="map-slot-row"> 846 <span class="map-slot-label">Emissive</span> 847 <div class="map-slot-control" data-fbx-map-row="emissive"> 848 <button type="button" class="map-slot-choose" data-fbx-map-slot="emissive">Choose</button> 849 <button type="button" class="map-slot-file" data-fbx-map-slot="emissive" hidden data-tooltip="Replace texture"></button> 850 <button type="button" class="map-slot-clear" data-fbx-map-clear="emissive" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 851 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 852 </button> 853 </div> 854 </div> 855 <div class="map-slot-row"> 856 <span class="map-slot-label">Opacity</span> 857 <div class="map-slot-control" data-fbx-map-row="opacity"> 858 <button type="button" class="map-slot-choose" data-fbx-map-slot="opacity">Choose</button> 859 <button type="button" class="map-slot-file" data-fbx-map-slot="opacity" hidden data-tooltip="Replace texture"></button> 860 <button type="button" class="map-slot-clear" data-fbx-map-clear="opacity" hidden aria-label="Remove texture" data-tooltip="Remove texture"> 861 <i class="fa-solid fa-xmark" aria-hidden="true"></i> 862 </button> 863 </div> 864 </div> 865 <div class="panel-block-divider map-slots-tuning-divider" aria-hidden="true"></div> 866 <p class="panel-hint map-slots-tuning-title">Map tuning</p> 867 <label class="select-line map-slot-tuning-line"> 868 <span data-tooltip="How tangent normals are oriented. Match albedo works for most FBX folder drops; use OpenGL or DirectX when bumps look wrong.">Normal convention</span> 869 <select id="fbxMapNormalConvention" aria-label="Normal map convention"> 870 <option value="match-albedo">Match albedo</option> 871 <option value="opengl">OpenGL</option> 872 <option value="directx">DirectX</option> 873 </select> 874 </label> 875 <label class="select-line map-slot-tuning-line">
876 <span data-tooltip="Roughness, metallic, AO, and ORM can use UV2 when your bake used a second set. Normal maps always use UV1.">Detail maps UV</span> 877 <select id="fbxMapPbrUvChannel" aria-label="UV channel for detail maps"> 878 <option value="0">UV1 (first)</option> 879 <option value="1">UV2 (second)</option> 880 </select> 881 </label> 882 <label class="select-line map-slot-tuning-line"> 883 <span data-tooltip="Channel order inside packed ORM textures. glTF/Blender/Unreal: R=AO, G=roughness, B=metallic. Unity HDRP: R=metallic, G=AO, B=roughness.">ORM packing</span> 884 <select id="fbxMapOrmPacking" aria-label="Packed ORM channel layout"> 885 <option value="gltf">glTF / Blender / Unreal</option> 886 <option value="unity-hdrp">Unity HDRP</option> 887 </select> 888 </label> 889 <div class="export-controls map-slots-action-row"> 890 <button type="button" class="accent-action-btn" id="fbxMapRescanFolder" data-tooltip="Re-match textures from the dropped folder into empty slots only.">Scan folder again</button> 891 <button type="button" class="accent-action-btn" id="fbxMapApplyTuningAll" data-tooltip="Copy this material's tuning to every material in the FBX.">Apply tuning to all</button> 892 </div> 893 </div> 894 </div> 895 896 <div class="panel-block"> 897 <div class="subsection" data-subsection="material"> 898 <div class="block-title has-reset"> 899 <span>Material</span> 900 <button class="block-reset-btn" data-reset="material" aria-label="Reset Material" data-tooltip="Reset Material settings"> 901 <i class="fa-solid fa-rotate-left"></i> 902 <span class="sr-only">Reset</span> 903 </button> 904 </div> 905 <label class="slider-line"> 906 <span data-tooltip="Adjust overall material brightness">Brightness</span> 907 <input 908 id="materialBrightness" 909 type="range" 910 min="0" 911 max="2.5" 912 step="0.01" 913 value="1.0" 914 /> 915 <span class="value" data-output="materialBrightness">1.0</span> 916 </label> 917 <label class="slider-line"> 918 <span data-tooltip="Scales each material's authored metalness â 1.0 matches the file">Metalness</span> 919 <input 920 id="materialMetalness" 921 type="range" 922 min="0" 923 max="1" 924 step="0.01" 925 value="0" 926 /> 927 <span class="value" data-output="materialMetalness">0.00</span> 928 </label> 929 <label class="slider-line"> 930 <span data-tooltip="Scales each material's authored roughness â 1.0 matches the file">Roughness</span> 931 <input 932 id="materialRoughness" 933 type="range" 934 min="0" 935 max="1" 936 step="0.01" 937 value="1" 938 /> 939 <span class="value" data-output="materialRoughness">1.00</span> 940 </label> 941 <label class="slider-line"> 942 <span data-tooltip="Add glowing emissive light to materials (great for sci-fi effects)">Emissive</span> 943 <input 944 id="materialEmissive" 945 type="range" 946 min="0" 947 max="4" 948 step="0.01" 949 value="0" 950 /> 951 <span class="value" data-output="materialEmissive">0.00</span> 952 </label> 953 <div id="materialColorSection" hidden> 954 <div 955 class="slider-line slider-line--toggle-only" 956 id="materialColorOverrideToggleRow" 957 hidden 958 >
959 <span data-tooltip="Replace opaque albedo with a solid colour. Transparent / decal maps stay as a tint">Override colour</span> 960 <label class="effect-toggle"> 961 <input type="checkbox" id="materialColorOverride" /> 962 <span class="effect-indicator" aria-hidden="true"></span> 963 <span class="sr-only">Override material colour</span> 964 </label> 965 </div> 966 <label class="color-line" id="materialColorRow" hidden> 967 <span>Colour</span> 968 <input 969 type="color" 970 id="materialOverrideColor" 971 class="color-chip" 972 value="#ffffff" 973 /> 974 </label> 975 </div> 976 <div class="slider-line"> 977 <span>Normal Map</span> 978 <label class="effect-toggle" data-tooltip="Use tangent-space normal maps in Shaded and Clay (full PBR materials only)"> 979 <input type="checkbox" id="clayNormalMap" checked /> 980 <span class="effect-indicator" aria-hidden="true"></span> 981 <span class="sr-only">Toggle normal maps in shaded and clay modes</span> 982 </label> 983 </div> 984 <div class="panel-block-divider" id="objectSurfaceDivider" hidden aria-hidden="true"></div> 985 <div id="objectSurfaceSection" class="subsection object-surface-subsection" data-subsection="object-surface" hidden> 986 <div class="block-title has-toggle"> 987 <span data-tooltip="Triplanar normal-map micro-detail â scratched metal, galvanized steel, and similar">Surface</span> 988 <label class="effect-toggle" data-tooltip="Add procedural surface detail on eligible meshes"> 989 <input type="checkbox" id="toggleObjectSurface" /> 990 <span class="effect-indicator" aria-hidden="true"></span> 991 <span class="sr-only">Enable object surface detail</span> 992 </label> 993 </div> 994 <div 995 class="effect-foldout effect-foldout--collapsed" 996 data-effect-foldout="object-surface" 997 aria-hidden="true" 998 > 999 <div id="objectSurfaceControlsMount" class="object-surface-controls surface-controls-mount"></div> 1000 </div> 1001 </div> 1002 </div> 1003 <div class="panel-block-divider"></div> 1004 <div class="subsection" data-subsection="fresnel"> 1005 <div class="block-title has-toggle"> 1006 <span>Fresnel</span> 1007 <div style="display: flex; align-items: center; gap: 0.5rem;"> 1008 <button class="block-reset-btn" data-reset="fresnel" aria-label="Reset Fresnel" data-tooltip="Reset Fresnel settings"> 1009 <i class="fa-solid fa-rotate-left"></i> 1010 <span class="sr-only">Reset</span> 1011 </button> 1012 <label class="effect-toggle" data-tooltip="Enable edge lighting effect"> 1013 <input type="checkbox" id="toggleFresnel" /> 1014 <span class="effect-indicator" aria-hidden="true"></span> 1015 <span class="sr-only">Enable Fresnel</span> 1016 </label> 1017 </div> 1018 </div> 1019 <div 1020 class="effect-foldout effect-foldout--collapsed" 1021 data-effect-foldout="fresnel" 1022 aria-hidden="true" 1023 > 1024 <label class="color-line"> 1025 <span>Color</span> 1026 <input 1027 type="color" 1028 id="fresnelColor" 1029 class="color-chip" 1030 value="#808080" 1031 /> 1032 </label> 1033 <label class="slider-line">
1034 <span>Radius</span> 1035 <input 1036 id="fresnelRadius" 1037 type="range" 1038 min="0.5" 1039 max="5" 1040 step="0.1" 1041 value="2" 1042 /> 1043 <span class="value" data-output="fresnelRadius">2.0</span> 1044 </label> 1045 <label class="slider-line"> 1046 <span>Strength</span> 1047 <input 1048 id="fresnelStrength" 1049 type="range" 1050 min="0" 1051 max="1" 1052 step="0.01" 1053 value="0.3" 1054 /> 1055 <span class="value" data-output="fresnelStrength">0.30</span> 1056 </label> 1057 </div> 1058 </div> 1059 <div class="panel-block-divider" id="claySubsectionDivider" hidden></div> 1060 <div class="subsection" data-subsection="clay" hidden> 1061 <div class="block-title has-reset"> 1062 <span>Clay</span> 1063 <button class="block-reset-btn" data-reset="clay" aria-label="Reset Clay" data-tooltip="Reset Clay settings"> 1064 <i class="fa-solid fa-rotate-left"></i> 1065 <span class="sr-only">Reset</span> 1066 </button> 1067 </div> 1068 <label class="color-line"> 1069 <span>Clay Color</span> 1070 <input 1071 type="color" 1072 id="clayColor" 1073 class="color-chip" 1074 value="#808080" 1075 /> 1076 </label> 1077 </div> 1078 <!-- Subsurface: temporarily disabled â set SUBSURFACE_FEATURE_ENABLED in MaterialController.js and uncomment MeshControl
1078s / UIManager / EventManager blocks to restore. 1079 <div class="panel-block-divider"></div> 1080 <div class="subsection" data-subsection="subsurface"> 1081 <div class="block-title has-toggle"> 1082 <span>Subsurface</span> 1083 <div style="display: flex; align-items: center; gap: 0.5rem;"> 1084 <button class="block-reset-btn" data-reset="subsurface" aria-label="Reset Subsurface" data-tooltip="Reset Subsurface settings"> 1085 <i class="fa-solid fa-rotate-left"></i> 1086 <span class="sr-only">Reset</span> 1087 </button> 1088 <label class="effect-toggle" data-tooltip="Enable volumetric translucency (PBR transmission â needs Studio HDRI for best results; differs from three.js SubsurfaceScatteringShader demo)"> 1089 <input type="checkbox" id="toggleSubsurface" /> 1090 <span class="effect-indicator" aria-hidden="true"></span> 1091 <span class="sr-only">Enable subsurface translucency</span> 1092 </label> 1093 </div> 1094 </div> 1095 <label class="slider-line"> 1096 <span data-tooltip="Transmission strength â use Shaded or Clay mode; rotate lighting / HDRI to see light through the volume">Translucency</span> 1097 <input 1098 id="subsurfaceTranslucency" 1099 type="range" 1100 min="0" 1101 max="1" 1102 step="0.01" 1103 value="0" 1104 /> 1105 <span class="value" data-output="subsurfaceTranslucency">0.00</span> 1106 </label> 1107 <label class="color-line"> 1108 <span>Scatter tint</span> 1109 <input 1110 type="color" 1111 id="subsurfaceScatterTint" 1112 class="color-chip" 1113 value="#ffd4b8" 1114 /> 1115 </label> 1116 </div> 1117 --> 1118 <div class="panel-block-divider"></div> 1119 <div class="subsection" data-subsection="wireframe"> 1120 <div class="block-title has-toggle has-reset"> 1121 <span>Wireframe</span> 1122 <div style="display: flex; align-items: center; gap: 0.5rem;"> 1123 <button class="block-reset-btn" data-reset="wireframe" aria-label="Reset Wireframe" data-tooltip="Reset Wireframe settings"> 1124 <i class="fa-solid fa-rotate-left"></i> 1125 <span class="sr-only">Reset</span> 1126 </button> 1127 <label class="effect-toggle" data-tooltip="Show wireframe overlay on all display modes"> 1128 <input type="checkbox" id="wireframeAlwaysOn" /> 1129 <span class="effect-indicator" aria-hidden="true"></span> 1130 <span class="sr-only">Enable wireframe overlay</span> 1131 </label> 1132 </div> 1133 </div> 1134 <div 1135 class="effect-foldout effect-foldout--collapsed" 1136 data-effect-foldout="wireframe-settings" 1137 aria-hidden="true" 1138 > 1139 <div class="slider-line"> 1140 <span>Only Visible Faces</span> 1141 <label class="effect-toggle" data-tooltip="Hide wireframe lines on back-facing surfaces"> 1142 <input type="checkbox" id="wireframeOnlyVisibleFaces" checked /> 1143 <span class="effect-indicator" aria-hidden="true"></span> 1144 <span class="sr-only">Show wireframe only on visible faces</span> 1145 </label> 1146 </div> 1147 <div class="slider-line"> 1148 <span>Hide Mesh</span> 1149 <label class="effect-toggle" data-tooltip="Hide the underlying mesh to show only wireframe"> 1150 <input type="checkbox" id="wireframeHideMesh" />
1151 <span class="effect-indicator" aria-hidden="true"></span> 1152 <span class="sr-only">Hide mesh</span> 1153 </label> 1154 </div> 1155 <label class="color-line"> 1156 <span>Color</span> 1157 <input 1158 type="color" 1159 id="wireframeColor" 1160 class="color-chip" 1161 value="#c4ff00" 1162 /> 1163 </label> 1164 <label class="slider-line"> 1165 <span data-tooltip="Wireframe line thickness">Thickness</span> 1166 <input 1167 id="wireframeThickness" 1168 type="range" 1169 min="0.5" 1170 max="2.5" 1171 step="0.05" 1172 value="1" 1173 /> 1174 <span class="value" data-output="wireframeThickness">1.00</span> 1175 </label> 1176 <label class="slider-line"> 1177 <span data-tooltip="Wireframe line opacity">Opacity</span> 1178 <input 1179 id="wireframeOpacity" 1180 type="range" 1181 min="0" 1182 max="1" 1183 step="0.01" 1184 value="1" 1185 /> 1186 <span class="value" data-output="wireframeOpacity">1.00</span> 1187 </label> 1188 </div> 1189 </div> 1190 <div class="panel-block-divider"></div> 1191 <div class="subsection" data-subsection="creative-look" data-block="creative-look"> 1192 <div class="block-title has-toggle creative-look-heading"> 1193 <div class="creative-look-heading-start"> 1194 <span>Shader Lab</span> 1195 </div> 1196 <div class="creative-look-heading-actions"> 1197 <button 1198 class="block-reset-btn" 1199 data-reset="creative-look" 1200 aria-label="Reset Shader Lab" 1201 data-tooltip="Reset Shader Lab" 1202 > 1203 <i class="fa-solid fa-rotate-left"></i> 1204 <span class="sr-only">Reset</span> 1205 </button> 1206 <label class="effect-toggle" data-tooltip="Replace mesh materials with stylized Shader Lab presets (original GLB materials return when off)"> 1207 <input type="checkbox" id="creativeLookEnabled" /> 1208 <span class="effect-indicator" aria-hidden="true"></span> 1209 <span class="sr-only">Enable Shader Lab</span> 1210 </label> 1211 </div> 1212 </div> 1213 <div 1214 id="creativeLookSectionContainer" 1215 class="creative-look-foldout creative-look-foldout--collapsed" 1216 > 1217 <div class="creative-look-foldout-body"> 1218 <div class="creative-look-grid" id="creativeLookGrid"> 1219 <div class="creative-look-grid-section"> 1220 <p class="creative-look-grid-section-label">General</p> 1221 <div class="hdri-grid"> 1222 <button type="button" data-creative-look="toon" class="hdri-icon" data-tooltip="Toon â stepped cel shading with rim"> 1223 <img src="./assets/images/creative-look-toon.png" alt="Toon" width="128" height="128" /> 1224 </button> 1225 <button type="button" data-creative-look="chrome" class="hdri-icon" data-tooltip="True Chrome â PBR metal; reflections follow the current HDRI (strength, rotation, blur)"> 1226 <img src="./assets/images/creative-look-chrome.png" alt="True Chrome" width="128" height="128" /> 1227 </button> 1228 <button type="button" data-creative-look="glass" class="hdri-icon" data-tooltip="Glass â physical transmission & refraction (Three.js); HDRI + scene. Scale = slab thickness / frost"> 1229 <img src="./assets/images/creative-look-glass.png" alt="Glass" width="128" height="128" /> 1230 </button> 1231 <button type="button" data-creative-look="holo-glass" class="hdri-icon" data-tooltip="Holo Glass â physical transmission + thin-film iridescence; animated rainbow rim bands at grazing angles. Scale = slab thickness / frost; Intensity = holo punch"> 1232 <img src="./assets/images/creative-look-holo-glass.png" alt="Holo Glass" width="128" height="128" /> 1233 </button> 1234 <button type="button" data-creative-look="crystal-gem" class="hdri-icon" data-tooltip="Crystal Gem â sapphire body + prismatic dispersion + internal facet fire; physical transmission (IOR 1.77). Scale = facet / inclusion size; Intensity = dispersion & body saturation. HDRI + Render Backdrop recommended."> 1235 <img src="./assets/images/creative-look-crystal-gem.png" alt="Crystal Gem" width="128" height="128" /> 1236 </button> 1237 <button type="button" data-creative-look="holographic" class="hdri-icon" data-tooltip="Holographic â thin-film rainbow shifts with view angle"> 1238 <img src="./assets/images/creative-look-holographic.png" alt="Holographic" width="128" height="128" /> 1239 </button> 1240 <button type="button" data-creative-look="neon-edge" class="hdri-icon" data-tooltip="Neon Edge â dark core with cyan rim glow"> 1241 <img src="./assets/images/creative-look-neon-edge.png" alt="Neon Edge" width="128" height="128" /> 1242 </button> 1243 <button type="button" data-creative-look="scanline-hologram" class="hdri-icon" data-tooltip="Scanline Hologram â RGB horizontal glitch bands, slice displacement, scrolling scanlines. Scale = line density"> 1244 <img src="./assets/images/creative-look-scanl
1244ine-hologram.png" alt="Scanline Hologram" width="128" height="128" /> 1245 </button> 1246 <button type="button" data-creative-look="wire-pulse" class="hdri-icon" data-tooltip="Wire Pulse â holographic wireframe with emissive light pulses. Intensity = line thickness. Scale = pulse spacing"> 1247 <img src="./assets/images/creative-look-wire-pulse.png" alt="Wire Pulse" width="128" height="128" /> 1248 </button> 1249 <button type="button" data-creative-look="fractal-storm" class="hdri-icon" data-tooltip="Topo Minimal â domain-warped height map with glowing topographic contour lines. Intensity = line glow. Scale = contour density"> 1250 <img src="./assets/images/creative-look-fractal-storm.png" alt="Topo Minimal" width="128" height="128" /> 1251 </button> 1252 <button type="button" data-creative-look="holo-topo" class="hdri-icon" data-tooltip="Holographic 2 â smooth liquid thermal-chrome; oil-slick rainbow iridescence shifts with view angle. Intensity = rainbow band richness. Scale = flow size"> 1253 <img src="./assets/images/creative-look-holo-topo.png" alt="Holographic 2" width="128" height="128" /> 1254 </button> 1255 <button type="button" data-creative-look="flow-field" class="hdri-icon" data-tooltip="Flow Field â animated color drift in world space"> 1256 <img src="./assets/images/creative-look-flow-field.png" alt="Flow Field" width="128" height="128" /> 1257 </button> 1258 <button type="button" data-creative-look="plasma" class="hdri-icon" data-tooltip="Plasma â psychedelic animated interference pattern"> 1259 <img src="./assets/images/creative-look-plasma.png" alt="Plasma" width="128" height="128" /> 1260 </button> 1261 <button type="button" data-creative-look="chrome-plasma" class="hdri-icon" data-tooltip="Neon Marbling â liquid neon ink marbling; blue, cyan, and magenta on Orby black; slow diagonal flow; Intensity = contrast & color punch"> 1262 <img src="./assets/images/creative-look-chrome-plasma.png" alt="Neon Marbling" width="128" height="128" /> 1263 </button> 1264 <button type="button" data-creative-look="voronoi" class="hdri-icon" data-tooltip="Voronoi â stained-glass cells with dark grout; slow seed drift. Scale = cell size; mid-tone from mesh color"> 1265 <img src="./assets/images/creative-look-voronoi.png" alt="Voronoi" width="128" height="128" /> 1266 </button> 1267 <button type="button" data-creative-look="spectral-storm" class="hdri-icon" data-tooltip="Spectral Storm â very slow BW plasma, extreme contrast (mostly pure black/white), strobing rim"> 1268 <img src="./assets/images/creative-look-spectral-storm.png" alt="Spectral Storm" width="128" height="128" /> 1269 </button> 1270 <button type="button" data-creative-look="dust-field" class="hdri-icon" data-tooltip="Dust Field â 8,000 surface-sampled particles follow your mesh (GLB skinning & morph targets). Intensity = point size. Scale = wobble. Bloom recommended." title="Dust Field"> 1271 <img src="./assets/images/creative-look-dust-field.svg" alt="Dust Field" width="128" height="128" /> 1272 </button> 1273 <button type="button" data-creative-look="thermal" class="hdri-icon" data-tooltip="Thermal â full-scene false-color IR; HDRI + mesh graded together. Lit faces read hot (red/white), silhouettes cool (blue/cyan). Scale = soft â hard color-band seams + halo width (low = smooth FLIR blend, high = poster steps); Intensity = contrast; Object Hue shifts palette; Material brightness = heat gain. Bloom recommended."> 1274 <img src="./assets/images/creative-look-thermal.png" alt="Thermal" width="128" height="128" /> 1275 </button> 1276 <button type="button" data-creative-look="thermal-extreme" class="hdri-icon" data-tooltip="Thermal Extreme â full-scene crushed poster IR; purple shadows, neon cyan/green mids, pure red hot zones, film grain. Scale = soft â hard band seams, band count & halo width (low = smooth blends, high = hard poster crush); Intensity = punch; Object Hue shifts palette. Bloom recommended."> 1277 <img src="./assets/images/creative-look-thermal-extreme.png" alt="Thermal Extreme" width="128" height="128" /> 1278 </button> 1279 <button type="button" data-creative-look="thermal-acid" class="hdri-icon" data-tooltip="Thermal Acid â full-scene expressive false-color IR (Thermal 3); cobalt cold, purple/red shadow punch, cyan mids, wide neon-green band, yellow/orange/red hot zones. Scale = soft â hard color-band seams, halo width & post grain (mesh crawl-waves stay fixed); halation bloom + animated sensor grain + crawling mesh heat waves (Anim Speed). Intensity = contrast & hot punch; Material brightness = heat gain. Bloom recommended."> 1280 <img src="./assets/images/creative-look-thermal-acid.png" alt="Thermal Acid" width="128" height="128" /> 1281 </button> 1282 </div> 1283 </div> 1284 <div class="creative-look-grid-section"> 1285 <p class="creative-look-grid-section-label">Screen pixels</p> 1286 <div class="hdri-grid"> 1287 <button type="button" data-creative-look="ega-pixel" class="hdri-icon" data-tooltip="EGA Pixel â 640Ã350 macro pixels; SCUMM / Monkey Islandâinspired 16-color palette with purple/blue dither; colormap cel prepass + 2Ã2 Bayer; Object Hue shifts palette (Scale & Intensity locked)"> 1288 <img src="./assets/images/creative-look-ega-pixel.png" alt="EGA Pixel" width="128" height="128" /> 1289 </button> 1290 <button type="button" data-creative-look="c64-pixel" class="hdri-icon" data-tooltip="C64 Pixel â 320Ã200 macro pixels; colormap cel prepass + 16-color palette + 2Ã2 dither; Object Hue shifts palette (Scale & Intensity locked)"> 1291 <img src="./assets/images/creative-look-c64-pixel.png" alt="C64 Pixel" width="128" height="128" /> 1292 </button> 1293 <button type="button" data-creative-look="gameboy-pixel" class="hdri-icon" data-tooltip="Game Boy â original DMG 4-shade greenscale; 160Ã144 macro pixels; colormap â luma + Object Hue shifts palette (Scale & Intensity locked)"> 1294 <img src="./assets/images/creative-look-gameboy-pixel.png" alt="Game Boy" width="128" height="128" /> 1295 </button> 1296 <button type="button" data-creative-look="gba-pixel" class="hdri-icon" data-tooltip="Game Boy Advance â
129615-bit high-color (32,768); 240Ã160 macro pixels; colormap cel prepass + 2Ã2 dither; Object Hue shifts output (Scale & Intensity locked)"> 1297 <img src="./assets/images/creative-look-gba-pixel.png" alt="Game Boy Advance" width="128" height="128" /> 1298 </button> 1299 <button type="button" data-creative-look="nes-pixel" class="hdri-icon" data-tooltip="NES â 2C02 PPU palette (55 unique / 64 indices); 256Ã224 NTSC macro pixels; colormap cel prepass + 2Ã2 dither; Object Hue shifts palette (Scale & Intensity locked)"> 1300 <img src="./assets/images/creative-look-nes-pixel.png" alt="NES" width="128" height="128" /> 1301 </button> 1302 <button type="button" data-creative-look="megadrive-pixel" class="hdri-icon" data-tooltip="Mega Drive â 9-bit VDP palette (512 colors); 320Ã224 NTSC macro pixels; colormap cel prepass + 2Ã2 dither; Object Hue shifts output (Scale & Intensity locked)"> 1303 <img src="./assets/images/creative-look-megadrive-pixel.png" alt="Mega Drive" width="128" height="128" /> 1304 </button> 1305 <button type="button" data-creative-look="intellivision-pixel" class="hdri-icon" data-tooltip="Intellivision â STIC 16-color palette (Primary + Pastel); 160Ã96 macro pixels; colormap cel prepass + 2Ã2 dither; Object Hue shifts palette (Scale & Intensity locked)"> 1306 <img src="./assets/images/creative-look-intellivision-pixel.png" alt="Intellivision" width="128" height="128" /> 1307 </button> 1308 <button type="button" data-creative-look="apple2-pixel" class="hdri-icon" data-tooltip="Apple II â HGR 280Ã192 VRAM dots; orange/green artifact fills (Oil's Well style), white on peaks only; MSB phase every 7 px; Object Hue (Scale & Intensity locked)"> 1309 <img src="./assets/images/creative-look-apple2-pixel.png" alt="Apple II" width="128" height="128" /> 1310 </button> 1311 </div> 1312 </div> 1313 <div class="creative-look-grid-section"> 1314 <p class="creative-look-grid-section-label">Dither</p> 1315 <div class="hdri-grid"> 1316 <button type="button" data-creative-look="dither-neutral" class="hdri-icon" data-tooltip="Neutral â hard square pixels with 4Ã4 Bayer ordered dither; default Scale 0 (finest), Intensity 2; Object Hue shifts output"> 1317 <img src="./assets/images/creative-look-dither-neutral.png" alt="Neutral Dither" width="128" height="128" /> 1318 </button> 1319 <button type="button" data-creative-look="dither-tritone" class="hdri-icon" data-tooltip="Tritone â hard 3-tier luminance poster (crushed shadows, lifted highlights); default Scale 0.5, Intensity 0"> 1320 <img src="./assets/images/creative-look-dither-tritone.png" alt="Tritone Dither" width="128" height="128" /> 1321 </button> 1322 <button type="button" data-creative-look="dither-crosshatch" class="hdri-icon" data-tooltip="Crosshatch â extreme 8-color crush with transposed Bayer lattice; default Scale 1, Intensity 0; Object Hue shifts output"> 1323 <img src="./assets/images/creative-look-dither-crosshatch.png" alt="Crosshatch Dither" width="128" height="128" /> 1324 </button> 1325 <button type="button" data-creative-look="dither-raster" class="hdri-icon" data-tooltip="Raster â amplitude halftone dots sized by luminance; default Scale 1, Intensity 0 (raise for more crush)"> 1326 <img src="./assets/images/creative-look-dither-raster.png" alt="Raster Dither" width="128" height="128" /> 1327 </button> 1328 </div> 1329 </div> 1330 <div class="creative-look-grid-section"> 1331 <p class="creative-look-grid-section-label">Retro 3D</p> 1332 <div class="hdri-grid"> 1333 <button type="button" data-creative-look="ps2-crush" class="hdri-icon" data-tooltip="PS2
1333Crush â mesh decimation, affine UVs, bilinear low-res textures, flat light bands (24-bit, no dither)"> 1334 <img src="./assets/images/creative-look-ps2-crush.png" alt="PS2 Crush" width="128" height="128" /> 1335 </button> 1336 <button type="button" data-creative-look="psx" class="hdri-icon" data-tooltip="PSX â coarser mesh decimation, affine UVs, nearest-neighbor crushed textures, 15-bit bands + 2Ã2 ordered dither"> 1337 <img src="./assets/images/creative-look-psx.png" alt="PSX" width="128" height="128" /> 1338 </button> 1339 <button type="button" data-creative-look="vga-dos-3d" class="hdri-icon" data-tooltip="VGA/DOS 3D â stable snap, affine UVs, nearest crushed textures, flat DOS lighting, 256-color palette (no dither)"> 1340 <img src="./assets/images/creative-look-vga-dos-3d.png" alt="VGA/DOS 3D" width="128" height="128" /> 1341 </button> 1342 <button type="button" data-creative-look="vectrex" class="hdri-icon" data-tooltip="Vectrex â P31 phosphor wireframe on black; steady green CRT lines, vertex glow, analog wobble (Scale). Intensity = line brightness"> 1343 <img src="./assets/images/creative-look-vectrex.png" alt="Vectrex" width="128" height="128" /> 1344 </button> 1345 </div> 1346 </div> 1347 <div class="creative-look-grid-section"> 1348 <p class="creative-look-grid-section-label">ASCII</p> 1349 <div class="hdri-grid"> 1350 <button type="button" data-creative-look="ascii-art" class="hdri-icon" data-tooltip="ASCII Art â ORBY letters + abstract charset; VGA 4Ã atlas / 2Ã screen; lime duotone, Object Hue (Scale & Intensity locked)"> 1351 <img src="./assets/images/creative-look-ascii-art.png" alt="ASCII Art" width="128" height="128" /> 1352 </button> 1353 <button type="button" data-creative-look="ascii-art-2" class="hdri-icon" data-tooltip="ASCII 2 â conventional terminal charset (ASCII 1âinspired); finer 12Ã20 grid; 25% ink in shadows, Object Hue (Scale & Intensity locked)"> 1354 <img src="./assets/images/creative-look-ascii-art-3.png" alt="ASCII 2" width="128" height="128" /> 1355 </button> 1356 <button type="button" data-creative-look="ascii-art-3" class="hdri-icon" data-tooltip="ASCII 3 â braille halftone (bonus look); finer 12Ã20 grid; 25% ink in shadows, Object Hue (Scale & Intensity locked)"> 1357 <img src="./assets/images/creative-look-ascii-art-2.png" alt="ASCII 3" width="128" height="128" /> 1358 </button> 1359 <button type="button" data-creative-look="ascii-art-4" class="hdri-icon" data-tooltip="ASCII 4 â Split Block; CP437 half-blocks; fine 12Ã20 grid; Orby lime with 50% mid-fill; deep shadows black out; cycling glyphs; Object Hue (Scale & Intensity locked, Anim Speed)"> 1360 <img src="./assets/images/creative-look-ascii-art.png" alt="ASCII 4" width="128" height="128" /> 1361 </button> 1362 </div> 1363 </div> 1364 <div class="creative-look-grid-section"> 1365 <p class="creative-look-grid-section-label">Artistic</p> 1366 <div class="hdri-grid"> 1367 <button type="button" data-creative-look="watercolour" class="hdri-icon" data-tooltip="Watercolour â clip-space mesh wobble + soft colormap + comic ink + outward paint bleed; Kuwahara post with mega-halo; Scale = brush size & wobble, Intensity = paint strength"> 1368 <img src="./assets/images/creative-look-watercolour.png" alt="Watercolour" width="128" height="128" /> 1369 </button> 1370 <button type="button" data-creative-look="sketch" class="hdri-icon" data-tooltip="Sketch â high-contrast B&W pencil illustration; harsh toon shadow bands + manga screentone + ink outlines; paper backdrop; Stroke Width & Raster Size sliders, Intensity = contrast & ink"> 1371 <img src="./assets/images/creative-look-sketch.png" alt="Sketch" width="128" height="128" /> 1372 </button> 1373 <button type="button" data-creative-look="sketch-colour" class="hdri-icon" data-tooltip="Sketch Colour â coloured manga illustration; watercolour-washed fills + screentone + ink outlines; paper backdrop; Stroke Width & Raster Size sliders, Intensity = contrast & ink"> 1374 <img src="./assets/images/creative-look-sketch-colour.png" alt="Sketch Colour" width="128" height="128" /> 1375 </button> 1376 <button type="button" data-creative-look="gouache" class="hdri-icon" data-tooltip="Gouache â matte poster paint; flat opaque colour blocks + chalk grain + comic ink outlines; paper backdrop; Scale = block size & ink (min â fine pen), Intensity = chalk & opacity"> 1377 <img src="./assets/images/creative-look-gouache.png" alt="Gouache" width="128" height="128" /> 1378 </button> 1379 </div> 1380 </div> 1381 </div> 1382 <label class="slider-line">
1383 <span data-tooltip="Global hue shift for all Shader Lab presets (-180°â¦180°). Independent of Cam/FX color grading.">Object Hue</span> 1384 <input 1385 type="range" 1386 id="creativeLookMasterHue" 1387 min="-180" 1388 max="180" 1389 step="1" 1390 value="0" 1391 /> 1392 <span class="value" data-output="creativeLookMasterHue">0°</span> 1393 </label> 1394 <label class="slider-line"> 1395 <span data-tooltip="Pushes each preset's signature effect. 1 = default. Wire Pulse: line thickness. Dust Field: point size. Topo Minimal, Neon Edge, Holographic, Scanline Hologram, and Spectral Storm also respond.">Intensity</span> 1396 <input 1397 type="range" 1398 id="creativeLookIntensity" 1399 min="0" 1400 max="2" 1401 step="0.05" 1402 value="1" 1403 /> 1404 <span class="value" data-output="creativeLookIntensity">1.00</span> 1405 </label> 1406 <label class="slider-line"> 1407 <span data-tooltip="Shadow lift (+) vs black crush (â) on shader preset output. All shader looks respond; True Chrome ignores. Glass uses crush for env/specular/attenuation.">Lift/Crush</span> 1408 <input 1409 type="range" 1410 id="creativeLookLiftCrush" 1411 min="-1" 1412 max="1" 1413 step="0.05" 1414 value="0" 1415 /> 1416 <span class="value" data-output="creativeLookLiftCrush">0.00</span> 1417 </label> 1418 <label class="slider-line"> 1419 <span data-tooltip="Speed for animated Shader Lab presets (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). True Chrome / Glass ignore. Pause freezes motion.">Anim Speed</span> 1420 <input 1421 type="range" 1422 id="creativeLookShaderAnimationSpeed" 1423 min="0" 1424 max="2" 1425 step="0.05" 1426 value="0.4" 1427 /> 1428 <span class="value" data-output="creativeLookShaderAnimationSpeed">0.40</span> 1429 </label> 1430 <label class="slider-line" id="creativeLookPatternScaleRow"> 1431 <span data-tooltip="Pattern scale (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). EGA / C64 / Game Boy / NES / etc.: fixed grid. True Chrome: reflection sharpness. Glass: thickness & frost. PS2 Crush: fixed at 2Ã. PSX: fixed at 2.5Ã. VGA/DOS 3D: fixed at 2.2à (decimation runs once at apply). Watercolour: brush size & wobble. Sketch uses Stroke Width / Raster Size instead.">Scale</span> 1432 <input 1433 type="range" 1434 id="creativeLookPatternScale" 1435 min="0.02" 1436 max="5" 1437 step="0.02" 1438 value="1" 1439 /> 1440 <span class="value" data-output="creativeLookPatternScale">1.00Ã</span> 1441 </label> 1442 <div id="creativeLookTransmissionControls" class="creative-look-transmission-controls" hidden> 1443 <label class="slider-line"> 1444 <span data-tooltip="Refraction sharpness for Glass, Holo-Glass, and Crystal Gem. On WebGL this maps to transmission blur via roughness (1 = softest, 10 = sharpest). Solid meshes blur more on camera-facing surfaces so refraction looks similar from all angles.">Transmission Samples</span> 1445 <input 1446 type="range" 1447 id="creativeLookTransmissionSamples" 1448 min="1" 1449 max="10" 1450 step="1" 1451 value="4" 1452 />
1453 <span class="value" data-output="creativeLookTransmissionSamples">4</span> 1454 </label> 1455 <label class="slider-line"> 1456 <span data-tooltip="Subtle RGB split in refraction (chromatic dispersion). Reads premium at low values â Crystal Gem defaults higher. 0 = off.">Dispersion</span> 1457 <input 1458 type="range" 1459 id="creativeLookTransmissionDispersion" 1460 min="0" 1461 max="1" 1462 step="0.01" 1463 value="0.28" 1464 /> 1465 <span class="value" data-output="creativeLookTransmissionDispersion">0.28</span> 1466 </label> 1467 <div class="slider-line slider-line--toggle-only"> 1468 <span data-tooltip="Closed scans (heads, statues): front faces only, stronger blur, and a best-effort cull of interior-facing facets. Turns off double-sided transmission.">Solid Mesh Glass</span> 1469 <label class="effect-toggle"> 1470 <input type="checkbox" id="creativeLookTransmissionSolidMeshGlass" /> 1471 <span class="effect-indicator" aria-hidden="true"></span> 1472 <span class="sr-only">Solid mesh glass mode</span> 1473 </label> 1474 </div> 1475 <div class="slider-line slider-line--toggle-only"> 1476 <span data-tooltip="Thin hollow shells (windshields, bottles) â renders back faces for correct interior refraction. Disabled while Solid Mesh Glass is on.">Double-Sided Transmission</span> 1477 <label class="effect-toggle"> 1478 <input type="checkbox" id="creativeLookTransmissionDoubleSide" /> 1479 <span class="effect-indicator" aria-hidden="true"></span> 1480 <span class="sr-only">Double-sided transmission</span> 1481 </label> 1482 </div> 1483 </div> 1484 <div id="creativeLookPresetSliders" class="creative-look-preset-sliders" hidden> 1485 <label class="slider-line creative-look-preset-slider" data-slider-id="creativeLookSketchStrokeWidth" hidden> 1486 <span data-tooltip="Ink outline thickness, silhouette edge dilation, and mesh wobble. Independent of screentone raster.">Stroke Width</span> 1487 <input 1488 type="range" 1489 id="creativeLookSketchStrokeWidth" 1490 min="0.2" 1491 max="2.8" 1492 step="0.02" 1493 value="1" 1494 /> 1495 <span class="value" data-output="creativeLookSketchStrokeWidth">1.00Ã</span> 1496 </label> 1497 <label class="slider-line creative-look-preset-slider" data-slider-id="creativeLookSketchRasterSize" hidden> 1498 <span data-tooltip="0 = off. Manga screentone dot pitch and paper grain scale. Independent of stroke width.">Raster Size</span> 1499 <input 1500 type="range" 1501 id="creativeLookSketchRasterSize" 1502 min="0" 1503 max="2.8" 1504 step="0.02" 1505 value="1" 1506 /> 1507 <span class="value" data-output="creativeLookSketchRasterSize">1.00Ã</span> 1508 </label> 1509 <label class="color-line creative-look-preset-ink" data-ink-control="strokeColor" hidden> 1510 <span data-tooltip="Ink outlines, band strokes, and screentone dots.">Stroke Colour</span> 1511 <input 1512 type="color" 1513 id="creativeLookInkStrokeColor" 1514 class="color-chip" 1515 value="#080808" 1516 /> 1517 </label> 1518 </div> 1519 <div class="slider-line slider-line--toggle-only">
1520 <span class="slider-line-label"> 1521 Bloom 1522 <span 1523 class="feature-info-hint" 1524 tabindex="0" 1525 aria-label="More information about Bloom" 1526 data-tooltip="Viewport bloom for Shader Lab â uses Camera & FX bloom sliders (threshold, strength, radius, quality). Separate from the Cam/FX bloom toggle. Skips Cam/FX grading while on â background reads blacker and contrast jumps. Extra fullscreen pass each frame. Not in PNG exports, including transparent." 1527 ><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span> 1528 </span> 1529 <label class="effect-toggle"> 1530 <input type="checkbox" id="creativeLookBloomEnabled" /> 1531 <span class="effect-indicator" aria-hidden="true"></span> 1532 <span class="sr-only">Enable bloom with Shader Lab</span> 1533 </label> 1534 </div> 1535 <div class="slider-line slider-line--toggle-only"> 1536 <span data-tooltip="On: the HDRI is drawn behind the scene. Off: only the solid background color is shown; HDRI still lights the model. Same as Studio â HDRI â Render Backdrop (`B`).">Render Backdrop</span> 1537 <label class="effect-toggle"> 1538 <input type="checkbox" id="creativeLookRenderBackdrop" checked /> 1539 <span class="effect-indicator" aria-hidden="true"></span> 1540 <span class="sr-only">Render HDRI as viewport backdrop</span> 1541 </label> 1542 </div> 1543 <button 1544 type="button" 1545 id="creativeLookPauseAnimations" 1546 class="ghost-btn small creative-look-pause-btn" 1547 data-tooltip="Freeze animated Shader Lab presets (Flow Field, Plasma, Holographic, Voronoi, Scanline Hologram, Wire Pulse, Topo Minimal, Dust Field, Spectral Storm). True Chrome and Toon keep following the scene / HDRI." 1548 > 1549 Pause shader animations 1550 </button> 1551 </div> 1552 </div> 1553 </div> 1554 </div> 1555 1556 <div class="panel-block" id="svgExtrudePanelBlock" hidden> 1557 <div class="subsection" data-subsection="svg-extrude"> 1558 <div class="block-title has-reset"> 1559 <span>SVG Extrude</span> 1560 <button class="block-reset-btn" data-reset="svg-extrude" aria-label="Reset SVG Extrude" data-tooltip="Reset SVG extrusion settings"> 1561 <i class="fa-solid fa-rotate-left"></i> 1562 <span class="sr-only">Reset</span> 1563 </button> 1564 </div> 1565 <div id="svgExtrudeCoreControlsMount" class="svg-extrude-core-controls"></div> 1566 <div class="slider-line"> 1567 <span data-tooltip="Inverts extrusion direction along the Z axis">Flip Extrude Direction</span> 1568 <label class="effect-toggle"> 1569 <input type="checkbox" id="svgExtrudeFlipDirection" /> 1570 <span class="effect-indicator" aria-hidden="true"></span> 1571 <span class="sr-only">Flip SVG extrusion direction</span> 1572 </label> 1573 </div> 1574 <div id="svgExtrudeColorDepths" data-tooltip="Per-color depth and position controls for detected SVG fills"></div> 1575 <div class="slider-line"> 1576 <span data-tooltip="Replace all imported SVG fills with one chosen color">Color Override</span> 1577 <label class="effect-toggle"> 1578 <input type="checkbox" id="svgExtrudeColorOverride" /> 1579 <span class="effect-indicator" aria-hidden="true"></span> 1580 <span class="sr-only">
1580Enable SVG color override</span> 1581 </label> 1582 </div> 1583 <div 1584 class="effect-foldout effect-foldout--collapsed" 1585 data-effect-foldout="svg-color-override" 1586 aria-hidden="true" 1587 > 1588 <label class="color-line"> 1589 <span data-tooltip="Front faces and bevels when Color Override is enabled">Face color</span> 1590 <input 1591 type="color" 1592 id="svgExtrudeColor" 1593 class="color-chip" 1594 value="#7ed321" 1595 /> 1596 </label> 1597 <label class="color-line"> 1598 <span data-tooltip="Extruded side walls and depth â pick a contrasting color for two-tone SVG">Extrude color</span> 1599 <input 1600 type="color" 1601 id="svgExtrudeExtrudeColor" 1602 class="color-chip" 1603 value="#7ed321" 1604 /> 1605 </label> 1606 </div> 1607 </div> 1608 </div> 1609 1610 <div class="panel-block"> 1611 <div class="subsection" data-subsection="advanced"> 1612 <div class="block-title has-reset"> 1613 <span>Advanced</span> 1614 <button class="block-reset-btn" data-reset="advanced" aria-label="Reset Advanced" data-tooltip="Reset Advanced settings"> 1615 <i class="fa-solid fa-rotate-left"></i> 1616 <span class="sr-only">Reset</span> 1617 </button> 1618 </div> 1619 <div class="slider-line slider-line--toggle-only"> 1620 <span data-tooltip="Reverse mesh normal direction on the current model">Reverse Normals</span> 1621 <label class="effect-toggle"> 1622 <input type="checkbox" id="reverseNormals" /> 1623 <span class="effect-indicator" aria-hidden="true"></span> 1624 <span class="sr-only">Reverse normal direction</span> 1625 </label> 1626 </div> 1627 <div class="slider-line slider-line--toggle-only"> 1628 <span data-tooltip="Color surface normals as RGB to spot flipped shading or inspect tangent-space normal maps">Normal View</span> 1629 <label class="effect-toggle"> 1630 <input type="checkbox" id="normalView" /> 1631 <span class="effect-indicator" aria-hidden="true"></span> 1632 <span class="sr-only">Toggle normal view overlay</span> 1633 </label> 1634 </div> 1635 <div 1636 class="effect-foldout effect-foldout--collapsed" 1637 data-effect-foldout="normal-view" 1638 aria-hidden="true" 1639 > 1640 <label class="select-line"> 1641 <span data-tooltip="Geometry shows smoothed vertex normals. Tangent samples assigned normal maps in tangent space (flat blue when none).">Normal View Mode</span> 1642 <select id="normalViewMode" aria-label="Normal View Mode"> 1643 <option value="geometry">Geometry</option> 1644 <option value="tangent">Tangent (normal map)</option> 1645 </select> 1646 </label> 1647 </div> 1648 <div id="stlSmoothingControls" hidden> 1649 <div class="slider-line slider-line--toggle-only"> 1650 <span data-tooltip="Recompute vertex normals from triangle facets. STL imports enable this automatically; turn on for GLB/OBJ when you want to adjust crease smoothing.">Smooth Shading</span> 1651 <label class="effect-toggle"> 1652 <input type="checkbox" id="stlSmoothShading" /> 1653 <span class="effect-indicator" aria-hidden="true"></span> 1654 <span class="sr-only">Toggle imported mesh smooth shading</span> 1655 </label> 1656 </div> 1657 <label class="slider-line">
1658 <span data-tooltip="Crease angle in degrees â lower keeps hard edges faceted, higher blends curved areas (0 = all facets, 180 = fully smooth). Only applies when Smooth Shading is on.">Smoothing Angle</span> 1659 <input 1660 id="stlSmoothingAngle" 1661 type="range" 1662 min="0" 1663 max="180" 1664 step="1" 1665 value="40" 1666 /> 1667 <span class="value" data-output="stlSmoothingAngle">40°</span> 1668 </label> 1669 </div> 1670 <div class="slider-line slider-line--toggle-only"> 1671 <span data-tooltip="Tile a UV checker map across the model so you can spot stretching and seams. Texture by Atlux.">UV Checker</span> 1672 <label class="effect-toggle"> 1673 <input type="checkbox" id="uvChecker" /> 1674 <span class="effect-indicator" aria-hidden="true"></span> 1675 <span class="sr-only">Toggle UV checker overlay</span> 1676 </label> 1677 </div> 1678 <div 1679 class="effect-foldout effect-foldout--collapsed" 1680 data-effect-foldout="uv-checker" 1681 aria-hidden="true" 1682 > 1683 <label class="select-line"> 1684 <span data-tooltip="Pick the checker pattern. Orby is the default brand map; Classic uses Atlux's colored map; Monochrome is grayscale and reads better on already-colored meshes.">UV Checker Style</span> 1685 <select id="uvCheckerStyle" aria-label="UV Checker Style"> 1686 <option value="orby">Orby</option> 1687 <option value="classic">Classic</option> 1688 <option value="monochrome">Monochrome</option> 1689 </select> 1690 </label> 1691 <label class="slider-line"> 1692 <span data-tooltip="How many times the checker pattern tiles across each UV island. 1 = one full tile per island.">UV Checker Repeat</span> 1693 <input 1694 id="uvCheckerScale" 1695 type="range" 1696 min="0" 1697 max="10" 1698 step="0.05" 1699 value="5" 1700 /> 1701 <span class="value" data-output="uvCheckerScale">5.00</span> 1702 </label> 1703 </div> 1704 <div class="panel-block-divider" aria-hidden="true"></div> 1705 <div id="topologyWarningsBlock" class="topology-warnings-block"> 1706 <div class="export-controls topology-warnings-actions"> 1707 <button 1708 type="button" 1709 id="centerPivotBtn" 1710 class="accent-action-btn topology-warnings-scan center-pivot-btn" 1711 data-tooltip="Move the mesh pivot to the current bounding-box center. Keeps the model in place on screen; fixes off-axis turntable spin. Use again after extrude or other geometry changes." 1712 disabled 1713 > 1714 <i class="fa-solid fa-crosshairs" aria-hidden="true"></i> 1715 Center Pivot 1716 </button> 1717 </div> 1718 <div class="export-controls topology-warnings-actions"> 1719 <button 1720 type="button" 1721 id="topologyWarningsScan" 1722 class="accent-action-btn topology-warnings-scan" 1723 data-tooltip="Analyze the loaded model for common topology problems" 1724 aria-pressed="false" 1725 > 1726 <i class="fa-solid fa-stethoscope" aria-hidden="true"></i> 1727 Mesh Health 1728 </button> 1729 </div> 1730 <div id="topologyWarningsResults" class="topology-warnings-results" hidden> 1731 <ul id="topologyWarningsList" class="topology-warnings-list" aria-live="polite"></ul> 1732 </div> 1733 </div>
1734 <div id="advancedAlphaControls" class="advanced-alpha-controls" hidden> 1735 <div class="panel-block-divider" aria-hidden="true"></div> 1736 <p class="panel-hint advanced-section-title">Transparency</p> 1737 <p class="panel-hint advanced-import-hint"> 1738 Blended transparent surfaces are sorted per mesh in WebGL. Fine glass often needs glTF transmission or separate materials from the author. 1739 <button type="button" class="drop-link advanced-info-doc-btn" data-open-info-section="#info-transparency">Read more under Information â Transparency</button>. 1740 </p> 1741 <label class="select-line"> 1742 <span 1743 data-tooltip="Auto applies viewer defaults. Other modes trade sorting vs solid surfacesâtry if layers look wrong." 1744 >Transparency Mode</span> 1745 <select id="transparencyFix" aria-label="Transparency Mode"> 1746 <option value="default">Auto (recommended)</option> 1747 <option value="opaqueBlend">Treat blend as solid</option> 1748 <option value="frontFace">Front faces only</option> 1749 <option value="opaqueAndFrontFace">Solid + front faces</option> 1750 </select> 1751 </label> 1752 <div class="slider-line slider-line--toggle-only"> 1753 <span 1754 data-tooltip="Uses light dither so stacked blended surfaces sort more predictably (common on Sketchfab). Turn off if hair or cloth looks too grainy." 1755 >Stabilize Layered Transparency</span> 1756 <label class="effect-toggle"> 1757 <input type="checkbox" id="blendSortingMitigation" checked /> 1758 <span class="effect-indicator" aria-hidden="true"></span> 1759 <span class="sr-only">Stabilize Layered Transparency</span> 1760 </label> 1761 </div> 1762 <div class="slider-line slider-line--toggle-only"> 1763 <span class="block-title-name"> 1764 <span 1765 data-tooltip="Extra transmission and glass controls. Turn on to reveal Physical Glass, flip normals, and front-faces-only." 1766 >Rare Fixes â Transmission & Glass</span> 1767 <span class="dev-badge" data-tooltip="This feature is still under development" aria-hidden="true"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span> 1768 </span> 1769 <label class="effect-toggle"> 1770 <input type="checkbox" id="rareFixesGlassOpen" /> 1771 <span class="effect-indicator" aria-hidden="true"></span> 1772 <span class="sr-only">Show rare transmission and glass fixes</span> 1773 </label> 1774 </div> 1775 <div 1776 class="effect-foldout effect-foldout--collapsed" 1777 data-effect-foldout="rare-fixes-glass" 1778 aria-hidden="true" 1779 > 1780 <div class="slider-line slider-line--toggle-only"> 1781 <span 1782 data-tooltip="KHR transmission + named window glass use MeshPhysicalMaterial.transmission (real refraction). Reflections come from PBR roughness and the HDRI â not fake BLEND opacity. Needs Render Backdrop. Costs more GPU than Auto glass." 1783 >Physical Glass Transmission</span> 1784 <label class="effect-toggle"> 1785 <input type="checkbox" id="physicalGlassTransmission" /> 1786 <span class="effect-indicator" aria-hidden="true"></span> 1787 <span class="sr-only">Physical glass transmission</span> 1788 </label> 1789 </div> 1790 <div class="slider-line slider-line--toggle-only"> 1791 <span 1792 data-tooltip="Only affects transmission or meshes/materials named like glass, window, visor⦠Flip if glazing looks inside-out." 1793 >Flip Glass Normal Y</span> 1794 <label class="effect-toggle"> 1795 <input type="checkbox" id="flipGlassNormalMapY" />
1796 <span class="effect-indicator" aria-hidden="true"></span> 1797 <span class="sr-only">Flip glass normal map Y</span> 1798 </label> 1799 </div> 1800 <div class="slider-line slider-line--toggle-only"> 1801 <span 1802 data-tooltip="Front-side only for those same materialsânot for whole-body BLEND characters (use Transparency Mode)." 1803 >Glass: Front Faces Only</span> 1804 <label class="effect-toggle"> 1805 <input type="checkbox" id="glassFrontFacesOnly" /> 1806 <span class="effect-indicator" aria-hidden="true"></span> 1807 <span class="sr-only">Glass front faces only</span> 1808 </label> 1809 </div> 1810 </div> 1811 <div id="advancedGlassControls" class="advanced-glass-controls" hidden> 1812 <p class="panel-hint advanced-glass-hint">When glTF transmission or named windows / glass are detected:</p> 1813 <label class="slider-line"> 1814 <span 1815 data-tooltip="Physical glass: scales transmission strength. BLEND glass (Auto): opacity for detected windows." 1816 >Glass opacity</span> 1817 <input 1818 id="glassOpacity" 1819 type="range" 1820 min="0.02" 1821 max="1" 1822 step="0.01" 1823 value="0.45" 1824 /> 1825 <span class="value" data-output="glassOpacity">0.45</span> 1826 </label> 1827 <label class="slider-line"> 1828 <span 1829 data-tooltip="How soft the background looks through physical glass. Three.js blurs transmission with roughness â 0 is sharp, 1 is frosted." 1830 >Refraction blur</span> 1831 <input 1832 id="glassRefractionBlur" 1833 type="range" 1834 min="0" 1835 max="1" 1836 step="0.01" 1837 value="0.08" 1838 /> 1839 <span class="value" data-output="glassRefractionBlur">0.08</span> 1840 </label> 1841 <label class="slider-line"> 1842 <span 1843 data-tooltip="PBR environment reflection strength on glass (roughness blurs the HDRI lobe â not a planar mirror)." 1844 >Glass reflections</span> 1845 <input 1846 id="glassReflection" 1847 type="range" 1848 min="0" 1849 max="4" 1850 step="0.05" 1851 value="2" 1852 /> 1853 <span class="value" data-output="glassReflection">2.00</span> 1854 </label> 1855 <label class="color-line"> 1856 <span 1857 data-tooltip="Only when Transparency Mode is Auto. Tint for detected glass / windows." 1858 >Glass tint</span> 1859 <input 1860 type="color" 1861 id="glassTint" 1862 class="color-chip" 1863 value="#080808" 1864 /> 1865 </label> 1866 <label class="slider-line"> 1867 <span 1868 data-tooltip="Only when Transparency Mode is Auto. Makes heuristic glass read more solid (transmission, tint)." 1869 >Glass body</span> 1870 <input 1871 id="glassBody" 1872 type="range" 1873 min="0" 1874 max="1" 1875 step="0.01" 1876 value="0" 1877 /> 1878 <span class="value" data-output="glassBody">0.00</span> 1879 </label> 1880 </div> 1881 </div> 1882 </div> 1883 </div> 1884 1885 <div class="panel-block"> 1886 <div class="subsection" data-subsection="transform"> 1887 <div class="block-title has-reset">
1888 <span>Transform</span> 1889 <button class="block-reset-btn" data-reset="transform" aria-label="Reset Transform" data-tooltip="Reset Transform settings"> 1890 <i class="fa-solid fa-rotate-left"></i> 1891 <span class="sr-only">Reset</span> 1892 </button> 1893 </div> 1894 <label class="slider-line"> 1895 <span data-tooltip="Scale object along X axis">Scale X</span> 1896 <input 1897 id="scaleXControl" 1898 type="range" 1899 min="0.1" 1900 max="4" 1901 value="1" 1902 step="0.01" 1903 /> 1904 <span class="value" data-output="scale">1.00Ã</span> 1905 </label> 1906 <label class="slider-line"> 1907 <span data-tooltip="Scale object along Y axis">Scale Y</span> 1908 <input 1909 id="scaleYControl" 1910 type="range" 1911 min="0.1" 1912 max="4" 1913 value="1" 1914 step="0.01" 1915 /> 1916 <span class="value" data-output="scaleY">1.00Ã</span> 1917 </label> 1918 <label class="slider-line"> 1919 <span data-tooltip="Scale object along Z axis">Scale Z</span> 1920 <input 1921 id="scaleZControl" 1922 type="range" 1923 min="0.1" 1924 max="4" 1925 value="1" 1926 step="0.01" 1927 /> 1928 <span class="value" data-output="scaleZ">1.00Ã</span> 1929 </label> 1930 <label class="slider-line"> 1931 <span data-tooltip="Move object along X axis">Move X</span> 1932 <input 1933 id="xOffsetControl" 1934 type="range" 1935 min="-2" 1936 max="2" 1937 value="0" 1938 step="0.01" 1939 /> 1940 <span class="value" data-output="xOffset">0.00m</span> 1941 </label> 1942 <label class="slider-line"> 1943 <span data-tooltip="Move object along Y axis">Move Y</span> 1944 <input 1945 id="yOffsetControl" 1946 type="range" 1947 min="-2" 1948 max="2" 1949 value="0" 1950 step="0.01" 1951 /> 1952 <span class="value" data-output="yOffset">0.00m</span> 1953 </label> 1954 <label class="slider-line"> 1955 <span data-tooltip="Move object along Z axis">Move Z</span> 1956 <input 1957 id="zOffsetControl" 1958 type="range" 1959 min="-2" 1960 max="2" 1961 value="0" 1962 step="0.01" 1963 /> 1964 <span class="value" data-output="zOffset">0.00m</span> 1965 </label> 1966 <label class="slider-line"> 1967 <span data-tooltip="Rotate object around X axis">Rotate X</span> 1968 <input 1969 id="rotationXControl" 1970 type="range" 1971 min="-180" 1972 max="180" 1973 value="0" 1974 step="1" 1975 /> 1976 <span class="value" data-output="rotationX">0°</span> 1977 </label> 1978 <label class="slider-line"> 1979 <span data-tooltip="Rotate object around Y axis">Rotate Y</span> 1980 <input 1981 id="rotationYControl" 1982 type="range" 1983 min="-180" 1984 max="180" 1985 value="0" 1986 step="1" 1987 />
1988 <span class="value" data-output="rotationY">0°</span> 1989 </label> 1990 <label class="slider-line"> 1991 <span data-tooltip="Rotate object around Z axis">Rotate Z</span> 1992 <input 1993 id="rotationZControl" 1994 type="range" 1995 min="-180" 1996 max="180" 1997 value="0" 1998 step="1" 1999 /> 2000 <span class="value" data-output="rotationZ">0°</span> 2001 </label> 2002 </div> 2003 <div class="subsection" data-subsection="modifiers" hidden> 2004 <div class="block-title has-reset"> 2005 <span 2006 class="block-title-name" 2007 data-tooltip="Still in progress and being evaluated." 2008 >Modifiers (Experimental)</span> 2009 <button class="block-reset-btn" data-reset="modifiers" aria-label="Reset Modifiers" data-tooltip="Reset modifier settings"> 2010 <i class="fa-solid fa-rotate-left"></i> 2011 <span class="sr-only">Reset</span> 2012 </button> 2013 </div> 2014 <label class="slider-line"> 2015 <span>Bend</span> 2016 <input id="modifierBendAmount" type="range" min="-100" max="100" value="0" step="1" /> 2017 <span class="value" data-output="modifierBendAmount">0</span> 2018 </label> 2019 <label class="slider-line"> 2020 <span>Twist</span> 2021 <input id="modifierTwistAmount" type="range" min="-100" max="100" value="0" step="1" /> 2022 <span class="value" data-output="modifierTwistAmount">0</span> 2023 </label> 2024 <label class="slider-line"> 2025 <span>Taper</span> 2026 <input id="modifierTaperAmount" type="range" min="-100" max="100" value="0" step="1" /> 2027 <span class="value" data-output="modifierTaperAmount">0</span> 2028 </label> 2029 <label class="slider-line"> 2030 <span>Skew</span> 2031 <input id="modifierSkewAmount" type="range" min="-100" max="100" value="0" step="1" /> 2032 <span class="value" data-output="modifierSkewAmount">0</span> 2033 </label> 2034 <label class="slider-line"> 2035 <span>FFD</span> 2036 <input id="modifierFfdAmount" type="range" min="-100" max="100" value="0" step="1" /> 2037 <span class="value" data-output="modifierFfdAmount">0</span> 2038 </label> 2039 <div class="modifier-mesh-actions"> 2040 <button 2041 type="button" 2042 id="modifierSubdivideMesh" 2043 class="accent-action-btn" 2044 data-tooltip="Add one subdivision pass for smoother modifier deformation (max 3). Shape library only." 2045 > 2046 Subdivide Mesh 2047 </button> 2048 <button 2049 type="button" 2050 id="modifierRestoreOriginalMesh" 2051 class="accent-action-btn" 2052 data-tooltip="Remove subdivision and restore the imported shape library mesh." 2053 > 2054 Remove SubD 2055 </button> 2056 </div> 2057 </div> 2058 <div class="panel-block-divider"></div> 2059 <div class="subsection"> 2060 <div class="block-title">Turntable</div> 2061 <div class="segmented compact"> 2062 <label> 2063 <input type="radio" name="autorotate" value="0" checked /> 2064 OFF 2065 </label> 2066 <label> 2067 <input type="radio" name="autorotate" value="0.2" /> 2068 NORMAL 2069 </label> 2070 <label> 2071 <input type="radio" name="autorotate" value="
20710.5" /> 2072 FAST 2073 </label> 2074 </div> 2075 <label class="select-line"> 2076 <span>Direction</span> 2077 <select id="autoRotateDirection" aria-label="Turntable direction"> 2078 <option value="forward">Forward</option> 2079 <option value="reverse">Reverse</option> 2080 </select> 2081 </label> 2082 </div> 2083 </div> 2084 2085 <div class="panel-block"> 2086 <div class="subsection" data-subsection="grid"> 2087 <div class="block-title has-toggle"> 2088 <span>Grid</span> 2089 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2090 <button class="block-reset-btn" data-reset="grid" aria-label="Reset Grid" data-tooltip="Reset Grid settings"> 2091 <i class="fa-solid fa-rotate-left"></i> 2092 <span class="sr-only">Reset</span> 2093 </button> 2094 <label class="effect-toggle" data-tooltip="Show/hide ground grid"> 2095 <input type="checkbox" id="groundWire" /> 2096 <span class="effect-indicator" aria-hidden="true"></span> 2097 <span class="sr-only">Enable grid</span> 2098 </label> 2099 </div> 2100 </div> 2101 <div 2102 class="effect-foldout effect-foldout--collapsed" 2103 data-effect-foldout="grid" 2104 aria-hidden="true" 2105 > 2106 <label class="color-line"> 2107 <span>Color</span> 2108 <input 2109 type="color" 2110 id="groundWireColor" 2111 class="color-chip" 2112 value="#646464" 2113 /> 2114 </label> 2115 <label class="slider-line"> 2116 <span>Opacity</span> 2117 <input 2118 id="groundWireOpacity" 2119 type="range" 2120 min="0" 2121 max="1" 2122 value="0.5" 2123 step="0.01" 2124 /> 2125 <span class="value" data-output="groundWireOpacity">0.5</span> 2126 </label> 2127 <label class="slider-line"> 2128 <span data-tooltip="Grid line thickness">Thickness</span> 2129 <input 2130 id="gridLineWidth" 2131 type="range" 2132 min="0.5" 2133 max="2.5" 2134 step="0.05" 2135 value="1" 2136 /> 2137 <span class="value" data-output="gridLineWidth">1.00</span> 2138 </label> 2139 <label class="slider-line"> 2140 <span data-tooltip="Vertical position of the grid">Y Position</span> 2141 <input 2142 id="gridY" 2143 type="range" 2144 min="-2" 2145 max="2" 2146 step="0.01" 2147 value="0" 2148 /> 2149 <span class="value" data-output="gridY">0.00m</span> 2150 </label> 2151 <label class="slider-line"> 2152 <span>Scale</span> 2153 <input 2154 id="gridScale" 2155 type="range" 2156 min="0.5" 2157 max="3" 2158 step="0.01" 2159 value="1" 2160 /> 2161 <span class="value" data-output="gridScale">1.00</span> 2162 </label> 2163 <button id="gridSnap" class="ghost-btn small" type="button"> 2164 Snap to Mesh 2165 </button> 2166 </div> 2167 </div> 2168 </div> 2169 2170 <div class="panel-block stats-block"> 2171 <div class="subsection" data-subsection="object-info"> 2172 <div class="block-title has-toggle">
2173 <span data-tooltip="File metadata and geometry statistics">Object Info</span> 2174 <label class="effect-toggle" data-tooltip="Show object file and geometry details"> 2175 <input type="checkbox" id="toggleObjectInfo" /> 2176 <span class="effect-indicator" aria-hidden="true"></span> 2177 <span class="sr-only">Show object info</span> 2178 </label> 2179 </div> 2180 <div 2181 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 2182 data-effect-foldout="object-info" 2183 aria-hidden="true" 2184 > 2185 <dl id="meshStats"> 2186 <div><dt>Asset Name</dt><dd>â</dd></div> 2187 <div><dt>Generator</dt><dd>â</dd></div> 2188 <div><dt>Version</dt><dd>â</dd></div> 2189 <div><dt>Copyright</dt><dd>â</dd></div> 2190 <div><dt>Triangles</dt><dd>â</dd></div> 2191 <div><dt>Vertices</dt><dd>â</dd></div> 2192 <div><dt>Materials</dt><dd>â</dd></div> 2193 <div><dt>Textures</dt><dd>â</dd></div> 2194 <div><dt>File Size</dt><dd>â</dd></div> 2195 <div><dt>Bounds</dt><dd>â</dd></div> 2196 </dl> 2197 </div> 2198 </div> 2199 </div> 2200 2201 <div class="panel-block" id="animationBlock"> 2202 <div class="block-title">Animation</div> 2203 <div class="animation-timeline"> 2204 <div class="animation-controls"> 2205 <div class="animation-transport-btns"> 2206 <button id="playPause" class="animation-play-btn" disabled aria-label="Play animation"> 2207 <i class="fa-solid fa-play" aria-hidden="true"></i> 2208 <span class="sr-only">Play</span> 2209 </button> 2210 <button 2211 id="animationReverseBtn" 2212 type="button" 2213 class="animation-play-btn" 2214 disabled 2215 aria-pressed="false" 2216 aria-label="Reverse animation playback" 2217 data-tooltip="Play the animation clip backwards" 2218 > 2219 <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> 2220 <span class="sr-only">Reverse animation playback</span> 2221 </button> 2222 </div> 2223 <input 2224 type="range" 2225 id="animationScrub" 2226 min="0" 2227 max="1" 2228 step="0.001" 2229 value="0" 2230 disabled 2231 aria-label="Animation timeline" 2232 /> 2233 <span id="animationTime">0:00</span> 2234 </div> 2235 </div> 2236 <label class="select-line"> 2237 <span>Clip</span> 2238 <select id="animationSelect" disabled aria-label="Animation clip"></select> 2239 </label> 2240 <div class="slider-line slider-line--toggle-only animation-time-reference-header"> 2241 <span>Frame Reference</span> 2242 <label 2243 class="effect-toggle" 2244 data-tooltip="Show frame counter and FPS grid for timing notes" 2245 > 2246 <input type="checkbox" id="animationTimeReference" disabled /> 2247 <span class="effect-indicator" aria-hidden="true"></span> 2248 <span class="sr-only">Frame Reference</span> 2249 </label> 2250 </div> 2251 <div 2252 id="animationTimeReferenceSection" 2253 class="effect-foldout effect-foldout--collapsed animation-time-reference-foldout" 2254 hidden 2255 aria-hidden="true" 2256 > 2257 <label class="select-line animation-time-reference-line">
2258 <span id="animationFrameNumbers" class="animation-frame-numbers" aria-live="polite">001 / 060</span> 2259 <select 2260 id="animationDisplayFps" 2261 aria-label="Frame reference frame rate" 2262 disabled 2263 > 2264 <option value="24">24 fps</option> 2265 <option value="30">30 fps</option> 2266 <option value="60" selected>60 fps</option> 2267 </select> 2268 </label> 2269 </div> 2270 <div class="segmented compact segmented--2" id="animationClipModeSegmented"> 2271 <label> 2272 <input type="radio" name="animationClipMode" value="loop" checked disabled /> 2273 Loop Selected 2274 </label> 2275 <label> 2276 <input type="radio" name="animationClipMode" value="cycle" disabled /> 2277 Cycle All 2278 </label> 2279 </div> 2280 <div class="panel-block-divider" aria-hidden="true"></div> 2281 <div class="subsection"> 2282 <div class="block-title">Playback speed</div> 2283 <div class="segmented compact segmented--4" id="animationSpeedSegmented"> 2284 <label> 2285 <input type="radio" name="animationPlaybackSpeed" value="0.1" disabled /> 2286 0.1Ã 2287 </label> 2288 <label> 2289 <input type="radio" name="animationPlaybackSpeed" value="0.25" disabled /> 2290 0.25Ã 2291 </label> 2292 <label> 2293 <input type="radio" name="animationPlaybackSpeed" value="0.5" disabled /> 2294 0.5Ã 2295 </label> 2296 <label> 2297 <input type="radio" name="animationPlaybackSpeed" value="1" checked disabled /> 2298 1.0Ã 2299 </label> 2300 </div> 2301 </div> 2302 <div class="panel-block-divider" aria-hidden="true"></div> 2303 <div class="subsection"> 2304 <div class="slider-line slider-line--toggle-only"> 2305 <span>Show bones</span> 2306 <label class="effect-toggle" data-tooltip="Reveal the animated skeleton rig over the mesh"> 2307 <input type="checkbox" id="animationShowBones" disabled /> 2308 <span class="effect-indicator" aria-hidden="true"></span> 2309 <span class="sr-only">Show animation bones</span> 2310 </label> 2311 </div> 2312 <div class="slider-line slider-line--toggle-only" id="animationShowJointNamesRow" hidden> 2313 <span>Show joint names</span> 2314 <label class="effect-toggle" data-tooltip="Always show joint name labels over the skeleton"> 2315 <input type="checkbox" id="animationShowJointNames" disabled /> 2316 <span class="effect-indicator" aria-hidden="true"></span> 2317 <span class="sr-only">Show joint name labels</span> 2318 </label> 2319 </div> 2320 <div class="slider-line slider-line--toggle-only" id="animationHideMeshRow" hidden> 2321 <span>Hide mesh</span> 2322 <label class="effect-toggle" data-tooltip="Hide the mesh completely and playback bones only"> 2323 <input type="checkbox" id="animationHideMesh" disabled /> 2324 <span class="effect-indicator" aria-hidden="true"></span> 2325 <span class="sr-only">Hide mesh during bone playback</span> 2326 </label> 2327 </div> 2328 <label class="slider-line" id="animationBoneStrokeRow" hidden> 2329 <span>Bone stroke</span> 2330 <input 2331 id="animationBoneStrokeWidth" 2332 type="range" 2333 min="1" 2334 max="8" 2335 step="0.5" 2336 value="2" 2337 disabled 2338 aria-label="Bone line stroke width" 2339 />
2340 <span class="value" data-output="animationBoneStrokeWidth">2.0</span> 2341 </label> 2342 <label class="slider-line" id="animationJointScaleRow" hidden> 2343 <span>Joint scale</span> 2344 <input 2345 id="animationJointScale" 2346 type="range" 2347 min="0.25" 2348 max="3" 2349 step="0.05" 2350 value="0.5" 2351 disabled 2352 aria-label="Joint marker scale" 2353 /> 2354 <span class="value" data-output="animationJointScale">0.50</span> 2355 </label> 2356 </div> 2357 </div> 2358 2359 <div class="panel-block"> 2360 <div class="block-title">Scene</div> 2361 <div class="export-controls"> 2362 <div class="scene-controls"> 2363 <button id="loadMeshButton" class="accent-action-btn" data-tooltip="Load a new 3D model file"> 2364 <i class="fa-solid fa-wand-magic-sparkles"></i> 2365 Import Object 2366 </button> 2367 <button 2368 type="button" 2369 id="hideObjectBtn" 2370 class="accent-action-btn hide-object-btn" 2371 data-tooltip="Hide the loaded object from the viewport and exports" 2372 aria-pressed="false" 2373 disabled 2374 > 2375 <i class="fa-solid fa-eye" aria-hidden="true"></i> 2376 Hide Object 2377 </button> 2378 <button id="resetMeshSettings" class="accent-action-btn" data-tooltip="Reset all object settings to defaults"> 2379 <i class="fa-solid fa-rotate-left"></i> 2380 Reset Object 2381 </button> 2382 </div> 2383 <div class="panel-block-divider" aria-hidden="true"></div> 2384 <div class="scene-controls"> 2385 <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas"> 2386 <i class="fa-solid fa-arrow-left"></i> 2387 Reset Scene 2388 </button> 2389 <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard"> 2390 <i class="fa-solid fa-copy"></i> 2391 Copy Scene Settings 2392 </button> 2393 <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog"> 2394 <i class="fa-solid fa-upload"></i> 2395 Paste Scene Settings 2396 </button> 2397 <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file"> 2398 <i class="fa-solid fa-floppy-disk"></i> 2399 Save .orby Scene 2400 </button> 2401 <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file"> 2402 <i class="fa-solid fa-file-import"></i> 2403 Load .orby Scene 2404 </button> 2405 </div> 2406 </div> 2407 </div> 2408 <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div> 2409 <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home"> 2410 <img src="./assets/images/favicon.svg" width="28" height="28" alt="" /> 2411 </button> 2412 </section> 2413 2414 <h2 class="panel-header-title" data-header="studio">Studio</h2> 2415 <section class="panel" data-panel="studio"> 2416 2417 <div class="panel-block" data-block="hdri"> 2418 <div class="block-title has-toggle"> 2419 <span>HDRI</span> 2420 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2421 <button class="block-reset-btn" data-reset="hdri" aria-label="Reset HDRI" data-tooltip="Reset HDRI settings"> 2422 <i class="fa-solid fa-rotate-left"></i>
2423 <span class="sr-only">Reset</span> 2424 </button> 2425 <label class="effect-toggle" data-tooltip="Enable/disable HDRI environment lighting"> 2426 <input type="checkbox" id="hdriEnabled" checked /> 2427 <span class="effect-indicator" aria-hidden="true"></span> 2428 <span class="sr-only">Enable HDRI Lighting</span> 2429 </label> 2430 </div> 2431 </div> 2432 <div 2433 class="effect-foldout effect-foldout--expanded effect-foldout--md" 2434 data-effect-foldout="hdri" 2435 aria-hidden="false" 2436 > 2437 <input 2438 type="file" 2439 id="hdriFileInput" 2440 class="sr-only" 2441 accept=".hdr,.hdri,.exr,image/*,.png,.jpg,.jpeg,.webp,.tif,.tiff" 2442 tabindex="-1" 2443 aria-hidden="true" 2444 /> 2445 <div class="hdri-grid" id="hdriGrid"> 2446 <button type="button" data-hdri="congress" class="hdri-icon" data-tooltip="Congress Hall environment">
2447 <img src="./assets/images/hdri-thumbnail-congress.png" alt="Congress" /> 2448 </button> 2449 <button data-hdri="luminous-sky" class="hdri-icon" data-tooltip="Forest environment"> 2450 <img src="./assets/images/hdri-thumbnail-forest.png" alt="Forest" /> 2451 </button> 2452 <button data-hdri="sunset" class="hdri-icon" data-tooltip="Sunset environment"> 2453 <img src="./assets/images/hdri-thumbnail-sunset.png" alt="Sunset" /> 2454 </button> 2455 <button data-hdri="meadow" class="hdri-icon" data-tooltip="Meadow environment"> 2456 <img src="./assets/images/hdri-thumbnail-meadow.png" alt="Meadow" /> 2457 </button> 2458 <button data-hdri="abandoned" class="hdri-icon" data-tooltip="Abandoned building environment"> 2459 <img src="./assets/images/hdri-thumbnail-abandoned.png" alt="Abandoned" /> 2460 </button> 2461 <button type="button" data-hdri="beach" class="hdri-icon active" data-tooltip="Beach environment">
2462 <img src="./assets/images/hdri-thumbnail-beach.png" alt="Beach" /> 2463 </button> 2464 <button type="button" data-hdri="blue-hour" class="hdri-icon" data-tooltip="Blue hour â Rangiroa"> 2465 <img src="./assets/images/hdri-thumbnail-blue-hour.png" alt="Blue hour" /> 2466 </button> 2467 <button type="button" data-hdri="sunny-parking" class="hdri-icon" data-tooltip="Sunny parking â urban daylight"> 2468 <img src="./assets/images/hdri-thumbnail-sunny-parking.png" alt="Sunny parking" /> 2469 </button> 2470 <button 2471 type="button" 2472 id="hdriUploadBtn" 2473 class="hdri-icon hdri-icon--upload" 2474 data-tooltip="Upload custom HDRI (.hdr, .exr, .jpg, .png) â 2:1 equirectangular" 2475 > 2476 <span class="hdri-icon__disc" aria-hidden="true"></span> 2477 <i class="fa-solid fa-plus hdri-icon__plus" aria-hidden="true"></i> 2478 <i class="fa-solid fa-check hdri-icon__check" aria-hidden="true"></i> 2479 <span class="sr-only">Upload custom HDRI</span> 2480 </button> 2481 </div> 2482 <label class="slider-line"> 2483 <span data-tooltip="HDRI lighting intensity">Intensity</span> 2484 <input 2485 id="hdriStrength" 2486 type="range" 2487 min="0" 2488 max="3" 2489 value="2" 2490 step="0.1" 2491 /> 2492 <span class="value" data-output="hdriStrength">2</span> 2493 </label> 2494 <label class="slider-line"> 2495 <span data-tooltip="Blur amount for HDRI reflections">Blurriness</span> 2496 <input 2497 id="hdriBlurriness" 2498 type="range" 2499 min="0" 2500 max="1" 2501 value="0" 2502 step="0.01" 2503 /> 2504 <span class="value" data-output="hdriBlurriness">0.00</span> 2505 </label> 2506 <label class="slider-line"> 2507 <span>Rotation</span> 2508 <input 2509 id="hdriRotation" 2510 type="range" 2511 min="0" 2512 max="360" 2513 value="0" 2514 step="1" 2515 /> 2516 <span class="value" data-output="hdriRotation">0°</span> 2517 </label> 2518 <div class="slider-line"> 2519 <span data-tooltip="On: the HDRI is drawn behind the scene. Off: only the solid background color is shown; HDRI still lights the model.">Render Backdrop</span> 2520 <label class="effect-toggle"> 2521 <input type="checkbox" id="hdriBackground" checked /> 2522 <span class="effect-indicator" aria-hidden="true"></span> 2523 <span class="sr-only">Render HDRI as viewport backdrop</span> 2524 </label> 2525 </div> 2526 <!-- TEMP: HDRI Receive Shadows + AO hidden (catcher / N8AO composite bugs). Runtime forced off in SceneManager. --> 2527 <div class="slider-line" hidden aria-hidden="true"> 2528 <span data-tooltip="Invisible floor at Ground Y under the model: Ambient Occlusion for contact on the HDRI; 3-point lights + Cast Shadows for directional shadow maps. Uses Ground Y (snap to mesh if it floats).">Receive Shadows + AO</span> 2529 <label class="effect-toggle"> 2530 <input type="checkbox" id="hdriReceiveShadowsAo" /> 2531 <span class="effect-indicator" aria-hidden="true"></span> 2532 <span class="sr-only">Receive shadows and ambient occlusion on HDRI backdrop</span> 2533 </label> 2534 </div> 2535 </div> 2536 </div> 2537 2538 <div 2539 class="panel-block panel-block--compact-head" 2540 data-block="background"
2541 id="studioBackgroundPanel" 2542 hidden 2543 > 2544 <div class="block-title has-reset"> 2545 <span data-tooltip="Solid color, image, or gradient behind the scene when Render Backdrop is off â HDRI still lights the model">Background</span> 2546 <button 2547 type="button" 2548 class="block-reset-btn" 2549 data-reset="background" 2550 aria-label="Reset Background" 2551 data-tooltip="Reset background color" 2552 > 2553 <i class="fa-solid fa-rotate-left"></i> 2554 <span class="sr-only">Reset</span> 2555 </button> 2556 </div> 2557 <div class="slider-line"> 2558 <span data-tooltip="Flat color behind the scene when Render Backdrop is off">Solid color</span> 2559 <label class="effect-toggle"> 2560 <input type="checkbox" id="backgroundSolidEnabled" checked /> 2561 <span class="effect-indicator" aria-hidden="true"></span> 2562 <span class="sr-only">Enable solid color background</span> 2563 </label> 2564 </div> 2565 <div 2566 id="backgroundSolidFoldout" 2567 class="effect-foldout effect-foldout--collapsed" 2568 data-effect-foldout="background-solid" 2569 aria-hidden="true" 2570 > 2571 <label class="color-line"> 2572 <span>Color</span> 2573 <input 2574 type="color" 2575 id="backgroundColor" 2576 class="color-chip" 2577 value="#505050" 2578 /> 2579 </label> 2580 </div> 2581 <div class="slider-line"> 2582 <span data-tooltip="Multi-stop linear or radial gradient"> 2583 <span class="block-title-name"> 2584 <span>Gradient</span> 2585 <span 2586 class="dev-badge" 2587 data-tooltip="Export and capture preview can look slightly brighter than the viewport â the background uses your gradient colors directly, without exposure, tone map, or Shader Lab on the backdrop. Use Capture preview frame in the Export tab to preview and adjust before exporting. We're working on a fix to get closer to the viewport preview." 2588 tabindex="0" 2589 role="img" 2590 aria-label="Export and capture preview can look slightly brighter than the viewport â the background uses your gradient colors directly, without exposure, tone map, or Shader Lab on the backdrop. Use Capture preview frame in the Export tab to preview and adjust before exporting. We're working on a fix to get closer to the viewport preview." 2591 ><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span> 2592 </span> 2593 </span> 2594 <label class="effect-toggle"> 2595 <input type="checkbox" id="backgroundGradientEnabled" /> 2596 <span class="effect-indicator" aria-hidden="true"></span> 2597 <span class="sr-only">Enable gradient background</span> 2598 </label> 2599 </div> 2600 <div 2601 id="backgroundGradientFoldout" 2602 class="effect-foldout effect-foldout--collapsed bg-gradient-foldout" 2603 data-effect-foldout="background-gradient" 2604 aria-hidden="true" 2605 > 2606 <div class="export-option-group bg-gradient-controls"> 2607 <div class="bg-gradient-preview-wrap"> 2608 <canvas 2609 id="backgroundGradientPreview" 2610 class="bg-gradient-preview" 2611 aria-label="Gradient preview â drag stops (max 3), click empty bar to add" 2612 role="img" 2613 ></canvas> 2614 </div> 2615 <label class="color-line">
2616 <span>Stop color</span> 2617 <input 2618 type="color" 2619 id="backgroundGradientStopColor" 2620 class="color-chip" 2621 value="#080808" 2622 /> 2623 </label> 2624 <div class="export-button-group"> 2625 <button type="button" data-bg-gradient-type="linear" class="export-option-btn active">Linear</button> 2626 <button type="button" data-bg-gradient-type="radial" class="export-option-btn">Radial</button> 2627 </div> 2628 <label class="slider-line" id="backgroundGradientAngleRow"> 2629 <span data-tooltip="Gradient direction â same convention as CSS linear-gradient (0° = up)">Angle</span> 2630 <input id="backgroundGradientAngle" type="range" min="0" max="360" step="1" value="180" /> 2631 <span class="value" data-output="backgroundGradientAngle">180°</span> 2632 </label> 2633 <div id="backgroundGradientCenterRow" hidden> 2634 <label class="slider-line"> 2635 <span>Center X</span> 2636 <input id="backgroundGradientCenterX" type="range" min="0" max="100" step="1" value="50" /> 2637 <span class="value" data-output="backgroundGradientCenterX">50%</span> 2638 </label> 2639 <label class="slider-line"> 2640 <span>Center Y</span> 2641 <input id="backgroundGradientCenterY" type="range" min="0" max="100" step="1" value="50" /> 2642 <span class="value" data-output="backgroundGradientCenterY">50%</span> 2643 </label> 2644 </div> 2645 </div> 2646 </div> 2647 <div class="slider-line"> 2648 <span data-tooltip="Custom image behind the scene">Image</span> 2649 <label class="effect-toggle"> 2650 <input type="checkbox" id="backgroundImageEnabled" /> 2651 <span class="effect-indicator" aria-hidden="true"></span> 2652 <span class="sr-only">Enable image background</span> 2653 </label> 2654 </div> 2655 <div 2656 id="backgroundImageFoldout" 2657 class="effect-foldout effect-foldout--collapsed" 2658 data-effect-foldout="background-image" 2659 aria-hidden="true" 2660 > 2661 <input 2662 type="file" 2663 id="backgroundImageFileInput" 2664 class="sr-only" 2665 accept=".png,.jpg,.jpeg,.webp,.gif,.bmp,.tif,.tiff,image/*" 2666 tabindex="-1" 2667 aria-hidden="true" 2668 /> 2669 <div class="export-option-group bg-image-controls"> 2670 <button 2671 type="button" 2672 id="backgroundImageSelectBtn" 2673 class="export-option-btn bg-image-select-btn" 2674 data-tooltip="Upload a PNG, JPG, or WebP" 2675 > 2676 Select background image 2677 </button> 2678 <div 2679 id="backgroundImageFitPanel" 2680 class="export-button-group export-button-group--triple" 2681 hidden 2682 > 2683 <button type="button" data-bg-image-fit="cover" class="export-option-btn active">Cover</button> 2684 <button type="button" data-bg-image-fit="contain" class="export-option-btn">Contain</button> 2685 <button type="button" data-bg-image-fit="fill" class="export-option-btn">Fill</button> 2686 </div> 2687 <label class="slider-line" id="backgroundImageBlurRow" hidden> 2688 <span data-tooltip="Soften the background image">Blur</span> 2689 <input 2690 id="backgroundImageBlur" 2691 type="range" 2692 min="0" 2693 max="1" 2694 step="0.01"
2695 value="0" 2696 /> 2697 <span class="value" data-output="backgroundImageBlur">0.00</span> 2698 </label> 2699 </div> 2700 </div> 2701 </div> 2702 2703 <div class="panel-block" data-block="base"> 2704 <div class="block-title has-toggle has-reset"> 2705 <span>Base</span> 2706 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2707 <button class="block-reset-btn" data-reset="base" aria-label="Reset Base" data-tooltip="Reset Base settings"> 2708 <i class="fa-solid fa-rotate-left"></i> 2709 <span class="sr-only">Reset</span> 2710 </button> 2711 <label class="effect-toggle" data-tooltip="Show/hide solid base platform"> 2712 <input type="checkbox" id="groundSolid" /> 2713 <span class="effect-indicator" aria-hidden="true"></span> 2714 <span class="sr-only">Enable base</span> 2715 </label> 2716 </div> 2717 </div> 2718 <div class="base-placement-controls"> 2719 <div class="slider-line"> 2720 <span class="block-title-name slider-line-label"> 2721 <span id="groundYLabel" data-tooltip="Vertical position of the base and glass">Y Position</span> 2722 <button 2723 id="baseSnap" 2724 class="slider-snap-btn" 2725 type="button" 2726 aria-label="Snap base to mesh" 2727 data-tooltip="Align base to mesh bottom" 2728 > 2729 <i class="fa-solid fa-magnet" aria-hidden="true"></i> 2730 </button> 2731 </span> 2732 <input 2733 id="groundY" 2734 type="range" 2735 min="-2" 2736 max="2" 2737 step="0.01" 2738 value="0" 2739 aria-labelledby="groundYLabel" 2740 /> 2741 <span class="value" data-output="groundY">0.00m</span> 2742 </div> 2743 <label class="slider-line"> 2744 <span data-tooltip="Size of the base and glass">Scale</span> 2745 <input 2746 id="baseScale" 2747 type="range" 2748 min="0.5" 2749 max="10" 2750 step="0.01" 2751 value="1" 2752 /> 2753 <span class="value" data-output="baseScale">1.00</span> 2754 </label> 2755 </div> 2756 <div 2757 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 2758 data-effect-foldout="base" 2759 aria-hidden="true" 2760 > 2761 <div class="subsection" data-subsection="base-material"> 2762 <div class="panel-block-divider" aria-hidden="true"></div> 2763 <label class="color-line"> 2764 <span>Color</span> 2765 <input 2766 type="color" 2767 id="groundSolidColor" 2768 class="color-chip" 2769 value="#808080" 2770 /> 2771 </label> 2772 <label class="slider-line"> 2773 <span data-tooltip="PBR metalness â higher reads more like metal">Metalness</span> 2774 <input 2775 id="baseMetalness" 2776 type="range" 2777 min="0" 2778 max="1" 2779 step="0.01" 2780 value="0.08" 2781 /> 2782 <span class="value" data-output="baseMetalness">0.08</span> 2783 </label> 2784 <label class="slider-line"> 2785 <span data-tooltip="Lower roughness = glossier surface">Roughness</span> 2786 <input 2787 id="baseRoughness" 2788 type="range" 2789 min="0" 2790 max="1" 2791 step="0.01"
2792 value="0.50" 2793 /> 2794 <span class="value" data-output="baseRoughness">0.50</span> 2795 </label> 2796 <div class="panel-block-divider" aria-hidden="true"></div> 2797 <div id="baseSurfaceControlsMount" class="surface-controls-mount"></div> 2798 </div> 2799 </div> 2800 </div> 2801 2802 <div class="panel-block" data-block="base-glass"> 2803 <div class="block-title has-toggle has-reset"> 2804 <span>Base Glass</span> 2805 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2806 <button class="block-reset-btn" data-reset="base-glass" aria-label="Reset Base Glass" data-tooltip="Reset Base Glass settings"> 2807 <i class="fa-solid fa-rotate-left"></i> 2808 <span class="sr-only">Reset</span> 2809 </button> 2810 <label class="effect-toggle" data-tooltip="Realtime planar reflection of the loaded mesh on the base top (extra GPU). Shares placement and scale with Base."> 2811 <input type="checkbox" id="baseGlassSurface" /> 2812 <span class="effect-indicator" aria-hidden="true"></span> 2813 <span class="sr-only">Enable planar reflection on the base top</span> 2814 </label> 2815 </div> 2816 </div> 2817 <div 2818 class="effect-foldout effect-foldout--collapsed" 2819 data-effect-foldout="base-glass" 2820 aria-hidden="true" 2821 > 2822 <label class="slider-line"> 2823 <span data-tooltip="Base tone under the reflection â black to white (mid gray is neutral).">Brightness</span> 2824 <input 2825 id="baseGlassBrightness" 2826 type="range" 2827 min="0" 2828 max="1" 2829 step="0.01" 2830 value="0.1" 2831 /> 2832 <span class="value" data-output="baseGlassBrightness">0.10</span> 2833 </label> 2834 <label class="slider-line"> 2835 <span data-tooltip="Progressive softness â blur spreads wider as you increase. Disabled when Base Glass reflection is off.">Blur</span> 2836 <input 2837 id="baseGlassBlur" 2838 type="range" 2839 min="0" 2840 max="1" 2841 step="0.01" 2842 value="0.1" 2843 /> 2844 <span class="value" data-output="baseGlassBlur">0.10</span> 2845 </label> 2846 <label class="slider-line"> 2847 <span data-tooltip="How strong the reflection is vs the base tone (lower = subtler, less mirror-like).">Amount</span> 2848 <input 2849 id="baseGlassAmount" 2850 type="range" 2851 min="0" 2852 max="1" 2853 step="0.01" 2854 value="0.5" 2855 /> 2856 <span class="value" data-output="baseGlassAmount">0.50</span> 2857 </label> 2858 <div class="panel-block-divider" aria-hidden="true"></div> 2859 <div id="baseGlassSurfaceControlsMount" class="surface-controls-mount"></div> 2860 </div> 2861 </div> 2862 2863 <div class="panel-block" data-block="backdrop"> 2864 <div class="block-title has-toggle has-reset"> 2865 <span>Studio</span> 2866 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2867 <button class="block-reset-btn" data-reset="backdrop" aria-label="Reset Studio" data-tooltip="Reset Studio settings"> 2868 <i class="fa-solid fa-rotate-left"></i> 2869 <span class="sr-only">Reset</span> 2870 </button> 2871 <label class="effect-toggle" data-tooltip="Show/hide seamless photo backdrop wall"> 2872 <input type="checkbox" id="backdropEnabled" />
2873 <span class="effect-indicator" aria-hidden="true"></span> 2874 <span class="sr-only">Enable seamless backdrop</span> 2875 </label> 2876 </div> 2877 </div> 2878 <div 2879 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 2880 data-effect-foldout="backdrop" 2881 aria-hidden="true" 2882 > 2883 <label class="color-line"> 2884 <span>Color</span> 2885 <input 2886 type="color" 2887 id="backdropColor" 2888 class="color-chip" 2889 value="#808080" 2890 /> 2891 </label> 2892 <label class="slider-line"> 2893 <span data-tooltip="PBR metalness â higher reads more like metal">Metalness</span> 2894 <input 2895 id="backdropMetalness" 2896 type="range" 2897 min="0" 2898 max="1" 2899 step="0.01" 2900 value="0.02" 2901 /> 2902 <span class="value" data-output="backdropMetalness">0.02</span> 2903 </label> 2904 <label class="slider-line"> 2905 <span data-tooltip="Lower roughness = glossier surface">Roughness</span> 2906 <input 2907 id="backdropRoughness" 2908 type="range" 2909 min="0" 2910 max="1" 2911 step="0.01" 2912 value="0.90" 2913 /> 2914 <span class="value" data-output="backdropRoughness">0.90</span> 2915 </label> 2916 <label class="slider-line"> 2917 <span data-tooltip="Uniform size of the backdrop wall">Scale</span> 2918 <input 2919 id="backdropScale" 2920 type="range" 2921 min="0.5" 2922 max="3" 2923 step="0.01" 2924 value="1" 2925 /> 2926 <span class="value" data-output="backdropScale">1.00</span> 2927 </label> 2928 <label class="slider-line"> 2929 <span data-tooltip="Width of the backdrop (left-right framing)">Width</span> 2930 <input 2931 id="backdropWidth" 2932 type="range" 2933 min="0.5" 2934 max="3" 2935 step="0.01" 2936 value="2" 2937 /> 2938 <span class="value" data-output="backdropWidth">2.00</span> 2939 </label> 2940 <label class="slider-line"> 2941 <span data-tooltip="Rotate backdrop around scene center">Rotation</span> 2942 <input 2943 id="backdropRotation" 2944 type="range" 2945 min="0" 2946 max="360" 2947 step="1" 2948 value="0" 2949 /> 2950 <span class="value" data-output="backdropRotation">0°</span> 2951 </label> 2952 <div class="slider-line"> 2953 <span class="block-title-name slider-line-label"> 2954 <span id="backdropYLabel" data-tooltip="Vertical position of the backdrop">Y Position</span> 2955 <button 2956 id="backdropSnap" 2957 class="slider-snap-btn" 2958 type="button" 2959 aria-label="Snap backdrop to mesh" 2960 data-tooltip="Align backdrop floor to mesh base" 2961 > 2962 <i class="fa-solid fa-magnet" aria-hidden="true"></i> 2963 </button> 2964 </span> 2965 <input 2966 id="backdropY" 2967 type="range" 2968 min="-2" 2969 max="2" 2970 step="0.01"
2971 value="0" 2972 aria-labelledby="backdropYLabel" 2973 /> 2974 <span class="value" data-output="backdropY">0.00m</span> 2975 </div> 2976 <div class="panel-block-divider" aria-hidden="true"></div> 2977 <div id="backdropSurfaceControlsMount" class="surface-controls-mount"></div> 2978 </div> 2979 </div> 2980 2981 <div class="panel-block" data-block="infinity-cove"> 2982 <div class="block-title has-toggle has-reset"> 2983 <span>Infinity Cove</span> 2984 <div style="display: flex; align-items: center; gap: 0.5rem;"> 2985 <button class="block-reset-btn" data-reset="infinity-cove" aria-label="Reset Infinity Cove" data-tooltip="Reset Infinity Cove settings"> 2986 <i class="fa-solid fa-rotate-left"></i> 2987 <span class="sr-only">Reset</span> 2988 </button> 2989 <label class="effect-toggle" data-tooltip="Show/hide seamless 360° infinity cove (flat floor + curved wall)"> 2990 <input type="checkbox" id="infinityCoveEnabled" /> 2991 <span class="effect-indicator" aria-hidden="true"></span> 2992 <span class="sr-only">Enable infinity cove</span> 2993 </label> 2994 </div> 2995 </div> 2996 <div 2997 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 2998 data-effect-foldout="infinity-cove" 2999 aria-hidden="true" 3000 > 3001 <label class="color-line"> 3002 <span>Color</span> 3003 <input 3004 type="color" 3005 id="infinityCoveColor" 3006 class="color-chip" 3007 value="#808080" 3008 /> 3009 </label> 3010 <label class="slider-line"> 3011 <span data-tooltip="PBR metalness â higher reads more like metal">Metalness</span> 3012 <input 3013 id="infinityCoveMetalness" 3014 type="range" 3015 min="0" 3016 max="1" 3017 step="0.01" 3018 value="0.02" 3019 /> 3020 <span class="value" data-output="infinityCoveMetalness">0.02</span> 3021 </label> 3022 <label class="slider-line"> 3023 <span data-tooltip="Lower roughness = glossier surface">Roughness</span> 3024 <input 3025 id="infinityCoveRoughness" 3026 type="range" 3027 min="0" 3028 max="1" 3029 step="0.01" 3030 value="0.90" 3031 /> 3032 <span class="value" data-output="infinityCoveRoughness">0.90</span> 3033 </label> 3034 <label class="slider-line"> 3035 <span data-tooltip="Uniform size of the cove">Scale</span> 3036 <input 3037 id="infinityCoveScale" 3038 type="range" 3039 min="0.5" 3040 max="3" 3041 step="0.01" 3042 value="2" 3043 /> 3044 <span class="value" data-output="infinityCoveScale">2.00</span> 3045 </label> 3046 <label class="slider-line"> 3047 <span data-tooltip="Radius of the flat circular floor stage">Width</span> 3048 <input 3049 id="infinityCoveWidth" 3050 type="range" 3051 min="0.5" 3052 max="3" 3053 step="0.01" 3054 value="2" 3055 /> 3056 <span class="value" data-output="infinityCoveWidth">2.00</span> 3057 </label> 3058 <label class="slider-line"> 3059 <span data-tooltip="Rotate cove around scene center">Rotation</span> 3060 <input 3061 id="infinityCoveRotation" 3062 type="range" 3063 min="0" 3064 max="360" 3065 step="1"
3066 value="0" 3067 /> 3068 <span class="value" data-output="infinityCoveRotation">0°</span> 3069 </label> 3070 <div class="slider-line"> 3071 <span class="block-title-name slider-line-label"> 3072 <span id="infinityCoveYLabel" data-tooltip="Vertical position of the cove floor">Y Position</span> 3073 <button 3074 id="infinityCoveSnap" 3075 class="slider-snap-btn" 3076 type="button" 3077 aria-label="Snap infinity cove to mesh" 3078 data-tooltip="Align cove floor to mesh base" 3079 > 3080 <i class="fa-solid fa-magnet" aria-hidden="true"></i> 3081 </button> 3082 </span> 3083 <input 3084 id="infinityCoveY" 3085 type="range" 3086 min="-2" 3087 max="2" 3088 step="0.01" 3089 value="0" 3090 aria-labelledby="infinityCoveYLabel" 3091 /> 3092 <span class="value" data-output="infinityCoveY">0.00m</span> 3093 </div> 3094 <div class="panel-block-divider" aria-hidden="true"></div> 3095 <div id="infinityCoveSurfaceControlsMount" class="surface-controls-mount"></div> 3096 </div> 3097 </div> 3098 3099 <div class="panel-block lights" data-block="lights"> 3100 <div class="block-title has-toggle"> 3101 <span id="lightsTitle">Lights</span> 3102 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3103 <button class="block-reset-btn" data-reset="lights" aria-label="Reset Lights" data-tooltip="Reset all light settings"> 3104 <i class="fa-solid fa-rotate-left"></i> 3105 <span class="sr-only">Reset</span> 3106 </button> 3107 <label class="effect-toggle" data-tooltip="Enable/disable 3-point lighting system"> 3108 <input type="checkbox" id="lightsEnabled" /> 3109 <span class="effect-indicator" aria-hidden="true"></span> 3110 <span class="sr-only">Enable 3-Point Lighting</span> 3111 </label> 3112 </div> 3113 </div> 3114 3115 <div 3116 class="effect-foldout effect-foldout--collapsed effect-foldout--xl" 3117 data-effect-foldout="lights-rig" 3118 aria-hidden="true" 3119 > 3120 <!-- Global Light Controls --> 3121 <div class="subsection" data-subsection="globalLights"> 3122 <label class="slider-line"> 3123 <span data-tooltip="Overall light intensity multiplier">Intensity</span> 3124 <input 3125 id="lightsMaster" 3126 type="range" 3127 min="0" 3128 max="5" 3129 step="0.01" 3130 value="0.30" 3131 /> 3132 <span class="value" data-output="lightsMaster">1.00</span> 3133 </label> 3134 <label class="slider-line"> 3135 <span data-tooltip="Vertical position of all lights">Height</span> 3136 <input 3137 id="lightsHeight" 3138 type="range" 3139 min="0" 3140 max="10" 3141 step="0.1" 3142 value="5" 3143 /> 3144 <span class="value" data-output="lightsHeight">5.0</span> 3145 </label> 3146 <label class="slider-line"> 3147 <span data-tooltip="Scale the entire 3-point light rig â spreads lights farther from or closer to the subject">Rig Scale</span> 3148 <input 3149 id="lightsRigScale" 3150 type="range" 3151 min="0.25" 3152 max="4" 3153 step="0.01" 3154 value="1" 3155 />
3156 <span class="value" data-output="lightsRigScale">1.00Ã</span> 3157 </label> 3158 <label class="slider-line"> 3159 <span data-tooltip="Rotate all lights around the object">Rotate</span> 3160 <input 3161 id="lightsRotation" 3162 type="range" 3163 min="0" 3164 max="360" 3165 value="0" 3166 step="1" 3167 /> 3168 <span class="value" data-output="lightsRotation">0°</span> 3169 </label> 3170 <div class="slider-line"> 3171 <span>Auto Rotate</span> 3172 <label class="effect-toggle" data-tooltip="Rotate lights around the object (360° every 10s; matches 10s PNG/MP4 export when enabled)"> 3173 <input type="checkbox" id="lightsAutoRotate" /> 3174 <span class="effect-indicator" aria-hidden="true"></span> 3175 <span class="sr-only">Auto rotate lights</span> 3176 </label> 3177 </div> 3178 <div class="slider-line"> 3179 <span data-tooltip="Show visual indicators for light positions">Show Spotlights</span> 3180 <label class="effect-toggle" data-tooltip="Display light position indicators in the viewport"> 3181 <input type="checkbox" id="showLightIndicators" /> 3182 <span class="effect-indicator" aria-hidden="true"></span> 3183 <span class="sr-only">Show spotlights</span> 3184 </label> 3185 </div> 3186 <div class="slider-line"> 3187 <span data-tooltip="Wireframe beam lines from each light to the shadow coverage area">Show Light Beams</span> 3188 <label class="effect-toggle" data-tooltip="Display wireframe falloff and shadow-frustum guides"> 3189 <input type="checkbox" id="showLightFalloffIndicators" /> 3190 <span class="effect-indicator" aria-hidden="true"></span> 3191 <span class="sr-only">Show light beams</span> 3192 </label> 3193 </div> 3194 </div> 3195 3196 <div class="panel-block-divider"></div> 3197 3198 <!-- Key Light --> 3199 <div class="subsection" data-subsection="keyLight"> 3200 <div class="block-title has-toggle has-reset"> 3201 <span>Key</span> 3202 <div class="creative-look-heading-actions"> 3203 <button class="block-reset-btn" data-reset="keyLight" aria-label="Reset Key Light" data-tooltip="Reset Key Light settings"> 3204 <i class="fa-solid fa-rotate-left"></i> 3205 <span class="sr-only">Reset</span> 3206 </button> 3207 <button 3208 type="button" 3209 id="keyLightGoboBtn" 3210 class="gobo-panel-btn" 3211 aria-expanded="false" 3212 aria-controls="keyLightGoboFoldout" 3213 data-tooltip="Gobo â project patterned light/shadow from the key light" 3214 > 3215 <i class="fa-solid fa-tree" aria-hidden="true"></i> 3216 <span class="sr-only">Gobo textures</span> 3217 </button> 3218 <label class="effect-toggle" data-tooltip="Enable/disable Key Light (main light)"> 3219 <input type="checkbox" id="keyLightEnabled" /> 3220 <span class="effect-indicator" aria-hidden="true"></span> 3221 <span class="sr-only">Enable Key Light</span> 3222 </label> 3223 </div> 3224 </div> 3225 <div 3226 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 3227 data-effect-foldout="key-light" 3228 aria-hidden="true" 3229 > 3230 <label class="color-line light-color-row" data-light="key">
3231 <span>Color</span> 3232 <input type="color" id="keyLightColor" name="keyLightColor" class="color-chip light-chip" value="#ffdfc9" /> 3233 </label> 3234 <label class="slider-line"> 3235 <span>Intensity</span> 3236 <input 3237 id="keyLightStrength" 3238 type="range" 3239 min="0" 3240 max="5" 3241 step="0.01" 3242 value="1.28" 3243 /> 3244 <span class="value" data-output="keyLightStrength">1.28</span> 3245 </label> 3246 <label class="slider-line"> 3247 <span>Height</span> 3248 <input 3249 id="keyLightHeight" 3250 type="range" 3251 min="0" 3252 max="10" 3253 step="0.1" 3254 value="5" 3255 /> 3256 <span class="value" data-output="keyLightHeight">5.0</span> 3257 </label> 3258 <label class="slider-line"> 3259 <span>Rotate</span> 3260 <input 3261 id="keyLightRotate" 3262 type="range" 3263 min="0" 3264 max="360" 3265 value="0" 3266 step="1" 3267 /> 3268 <span class="value" data-output="keyLightRotate">0°</span> 3269 </label> 3270 <div class="slider-line"> 3271 <span>Cast Shadows</span> 3272 <label class="effect-toggle"> 3273 <input type="checkbox" id="keyLightCastShadows" /> 3274 <span class="effect-indicator" aria-hidden="true"></span> 3275 <span class="sr-only">Cast shadows</span> 3276 </label> 3277 </div> 3278 <div 3279 id="keyLightGoboFoldout" 3280 class="creative-look-foldout creative-look-foldout--collapsed" 3281 > 3282 <div class="creative-look-foldout-body"> 3283 <div class="slider-line slider-line--toggle-only"> 3284 <span data-tooltip="Project the selected gobo pattern from the key light">Gobo</span> 3285 <label class="effect-toggle"> 3286 <input type="checkbox" id="goboEnabled" /> 3287 <span class="effect-indicator" aria-hidden="true"></span> 3288 <span class="sr-only">Enable gobo projection</span> 3289 </label> 3290 </div> 3291 <div class="hdri-grid" id="goboGrid"> 3292 <button 3293 type="button" 3294 data-gobo="palm" 3295 class="hdri-icon active" 3296 data-tooltip="Palm leaf gobo â dappled foliage shadows" 3297 > 3298 <img 3299 src="./assets/gobos/orby-spotlight-gobo01-palm.jpg" 3300 alt="Palm gobo" 3301 width="192" 3302 height="192" 3303 /> 3304 </button> 3305 <button 3306 type="button" 3307 data-gobo="leaf" 3308 class="hdri-icon" 3309 data-tooltip="Single leaf gobo â soft organic shadow" 3310 > 3311 <img 3312 src="./assets/gobos/orby-spotlight-gobo02-leaf.jpg" 3313 alt="Leaf gobo" 3314 width="192" 3315 height="192" 3316 /> 3317 </button> 3318 <button 3319 type="button" 3320 data-gobo="tree" 3321 class="hdri-icon" 3322 data-tooltip="Tree canopy gobo â broad branching shadows" 3323 > 3324 <img 3325 src="./assets/gobos/orby-spotlight-gobo03-tree.jpg" 3326 alt="Tree gobo" 3327 width="192" 3328 height="192" 3329 /> 3330 </button> 3331 </div> 3332 <label class="slider-line">
3333 <span data-tooltip="Blur the gobo mask. Independent from cast-shadow softness â tune per texture.">Softness</span> 3334 <input 3335 id="goboSoftness" 3336 type="range" 3337 min="0" 3338 max="4" 3339 step="0.05" 3340 value="0.3" 3341 /> 3342 <span class="value" data-output="goboSoftness">0.30</span> 3343 </label> 3344 <label class="select-line"> 3345 <span data-tooltip="Gobo penumbra sample count â raise for cinematic stills (Ultra = 49-tap separable blur).">Softness quality</span> 3346 <select id="goboSoftnessQuality" aria-label="Gobo softness quality"> 3347 <option value="low">Low</option> 3348 <option value="medium" selected>Medium</option> 3349 <option value="high">High</option> 3350 <option value="ultra">Ultra</option> 3351 </select> 3352 </label> 3353 <label class="slider-line"> 3354 <span data-tooltip="Pattern size (0â10). Higher = smaller pattern. 5 matches the former 0.50 setting.">Scale</span> 3355 <input 3356 id="goboScale" 3357 type="range" 3358 min="0" 3359 max="10" 3360 step="0.05" 3361 value="5" 3362 /> 3363 <span class="value" data-output="goboScale">5.00</span> 3364 </label> 3365 <label class="slider-line"> 3366 <span data-tooltip="Rotate the projected pattern around its center">Rotation</span> 3367 <input 3368 id="goboRotation" 3369 type="range" 3370 min="0" 3371 max="360" 3372 step="1" 3373 value="0" 3374 /> 3375 <span class="value" data-output="goboRotation">0°</span> 3376 </label> 3377 </div> 3378 </div> 3379 </div> 3380 </div> 3381 3382 <div class="panel-block-divider"></div> 3383 3384 <!-- Fill Light --> 3385 <div class="subsection" data-subsection="fillLight"> 3386 <div class="block-title has-toggle has-reset"> 3387 <span>Fill</span> 3388 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3389 <button class="block-reset-btn" data-reset="fillLight" aria-label="Reset Fill Light" data-tooltip="Reset Fill Light settings"> 3390 <i class="fa-solid fa-rotate-left"></i> 3391 <span class="sr-only">Reset</span> 3392 </button> 3393 <label class="effect-toggle" data-tooltip="Enable/disable Fill Light (soft fill)"> 3394 <input type="checkbox" id="fillLightEnabled" /> 3395 <span class="effect-indicator" aria-hidden="true"></span> 3396 <span class="sr-only">Enable Fill Light</span> 3397 </label> 3398 </div> 3399 </div> 3400 <div 3401 class="effect-foldout effect-foldout--collapsed" 3402 data-effect-foldout="fill-light" 3403 aria-hidden="true" 3404 > 3405 <label class="color-line light-color-row" data-light="fill"> 3406 <span>Color</span> 3407 <input type="color" id="fillLightColor" name="fillLightColor" class="color-chip light-chip" value="#b0c7ff" /> 3408 </label> 3409 <label class="slider-line"> 3410 <span>Intensity</span> 3411 <input 3412 id="fillLightStrength" 3413 type="range" 3414 min="0" 3415 max="5" 3416 step="0.01"
3417 value="0.8" 3418 /> 3419 <span class="value" data-output="fillLightStrength">0.80</span> 3420 </label> 3421 <label class="slider-line"> 3422 <span>Height</span> 3423 <input 3424 id="fillLightHeight" 3425 type="range" 3426 min="0" 3427 max="10" 3428 step="0.1" 3429 value="3" 3430 /> 3431 <span class="value" data-output="fillLightHeight">3.0</span> 3432 </label> 3433 <label class="slider-line"> 3434 <span>Rotate</span> 3435 <input 3436 id="fillLightRotate" 3437 type="range" 3438 min="0" 3439 max="360" 3440 value="0" 3441 step="1" 3442 /> 3443 <span class="value" data-output="fillLightRotate">0°</span> 3444 </label> 3445 <div class="slider-line"> 3446 <span>Cast Shadows</span> 3447 <label class="effect-toggle"> 3448 <input type="checkbox" id="fillLightCastShadows" /> 3449 <span class="effect-indicator" aria-hidden="true"></span> 3450 <span class="sr-only">Cast shadows</span> 3451 </label> 3452 </div> 3453 </div> 3454 </div> 3455 3456 <div class="panel-block-divider"></div> 3457 3458 <!-- Rim Light --> 3459 <div class="subsection" data-subsection="rimLight"> 3460 <div class="block-title has-toggle has-reset"> 3461 <span>Rim</span> 3462 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3463 <button class="block-reset-btn" data-reset="rimLight" aria-label="Reset Rim Light" data-tooltip="Reset Rim Light settings"> 3464 <i class="fa-solid fa-rotate-left"></i> 3465 <span class="sr-only">Reset</span> 3466 </button> 3467 <label class="effect-toggle" data-tooltip="Enable/disable Rim Light (edge highlight)"> 3468 <input type="checkbox" id="rimLightEnabled" /> 3469 <span class="effect-indicator" aria-hidden="true"></span> 3470 <span class="sr-only">Enable Rim Light</span> 3471 </label> 3472 </div> 3473 </div> 3474 <div 3475 class="effect-foldout effect-foldout--collapsed" 3476 data-effect-foldout="rim-light" 3477 aria-hidden="true" 3478 > 3479 <label class="color-line light-color-row" data-light="rim"> 3480 <span>Color</span> 3481 <input type="color" id="rimLightColor" name="rimLightColor" class="color-chip light-chip" value="#a0eaf9" /> 3482 </label> 3483 <label class="slider-line"> 3484 <span>Intensity</span> 3485 <input 3486 id="rimLightStrength" 3487 type="range" 3488 min="0" 3489 max="5" 3490 step="0.01" 3491 value="0.96" 3492 /> 3493 <span class="value" data-output="rimLightStrength">0.96</span> 3494 </label> 3495 <label class="slider-line"> 3496 <span>Height</span> 3497 <input 3498 id="rimLightHeight" 3499 type="range" 3500 min="0" 3501 max="10" 3502 step="0.1" 3503 value="4" 3504 /> 3505 <span class="value" data-output="rimLightHeight">4.0</span> 3506 </label> 3507 <label class="slider-line"> 3508 <span>Rotate</span> 3509 <input 3510 id="rimLightRotate" 3511 type="range" 3512 min="0" 3513 max="360"
3514 value="0" 3515 step="1" 3516 /> 3517 <span class="value" data-output="rimLightRotate">0°</span> 3518 </label> 3519 <div class="slider-line"> 3520 <span>Cast Shadows</span> 3521 <label class="effect-toggle"> 3522 <input type="checkbox" id="rimLightCastShadows" /> 3523 <span class="effect-indicator" aria-hidden="true"></span> 3524 <span class="sr-only">Cast shadows</span> 3525 </label> 3526 </div> 3527 </div> 3528 </div> 3529 3530 <div class="panel-block-divider"></div> 3531 3532 <!-- Ambient Light --> 3533 <div class="subsection" data-subsection="ambientLight"> 3534 <div class="block-title has-toggle has-reset"> 3535 <span>Ambient</span> 3536 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3537 <button class="block-reset-btn" data-reset="ambientLight" aria-label="Reset Ambient Light" data-tooltip="Reset Ambient Light settings"> 3538 <i class="fa-solid fa-rotate-left"></i> 3539 <span class="sr-only">Reset</span> 3540 </button> 3541 <label class="effect-toggle" data-tooltip="Enable/disable Ambient Light (global illumination)"> 3542 <input type="checkbox" id="ambientLightEnabled" /> 3543 <span class="effect-indicator" aria-hidden="true"></span> 3544 <span class="sr-only">Enable Ambient Light</span> 3545 </label> 3546 </div> 3547 </div> 3548 <div 3549 class="effect-foldout effect-foldout--collapsed" 3550 data-effect-foldout="ambient-light" 3551 aria-hidden="true" 3552 > 3553 <label class="color-line light-color-row" data-light="ambient"> 3554 <span>Color</span> 3555 <input type="color" id="ambientLightColor" name="ambientLightColor" class="color-chip light-chip" value="#7c8ca6" /> 3556 </label> 3557 <label class="slider-line"> 3558 <span>Intensity</span> 3559 <input 3560 id="ambientLightStrength" 3561 type="range" 3562 min="0" 3563 max="5" 3564 step="0.01" 3565 value="0.48" 3566 /> 3567 <span class="value" data-output="ambientLightStrength">0.48</span> 3568 </label> 3569 </div> 3570 </div> 3571 3572 <div class="panel-block-divider"></div> 3573 <div class="subsection" data-subsection="lightsShadows"> 3574 <div class="block-title has-toggle has-reset"> 3575 <span>Shadows</span> 3576 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3577 <button class="block-reset-btn" data-reset="lights-shadows" aria-label="Reset Shadows" data-tooltip="Reset shadow settings"> 3578 <i class="fa-solid fa-rotate-left"></i> 3579 <span class="sr-only">Reset</span> 3580 </button> 3581 <label class="effect-toggle" data-tooltip="Enable/disable shadow casting from 3-point lights"> 3582 <input type="checkbox" id="lightsCastShadows" /> 3583 <span class="effect-indicator" aria-hidden="true"></span> 3584 <span class="sr-only">Enable shadows</span> 3585 </label> 3586 </div> 3587 </div> 3588 <div 3589 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 3590 data-effect-foldout="lights-shadows" 3591 aria-hidden="true" 3592 > 3593 <label class="select-line"> 3594 <span data-tooltip="Shadow map resolution for 3-point lights">Quality</span> 3595 <select id="lightsShadowQuality" aria-label="Shadow quality"> 3596 <option value="low">Low</option> 3597 <option value="medium" selected>Medium</option> 3598 <option value="high">High</option> 3599 <option value="ultra">Ultra</option> 3600 </select> 3601 </label> 3602 <label class="color-line">
3603 <span data-tooltip="Color of shadowed areas. Black gives the darkest shadows.">Shadow Color</span> 3604 <input type="color" id="lightsShadowColor" class="color-chip" value="#080808" /> 3605 </label> 3606 <label class="slider-line"> 3607 <span data-tooltip="0 = harder shadow edge. Higher values = softer penumbra.">Softness</span> 3608 <input 3609 id="lightsShadowSoftness" 3610 type="range" 3611 min="0" 3612 max="4" 3613 step="0.05" 3614 value="0.6" 3615 /> 3616 <span class="value" data-output="lightsShadowSoftness">0.6</span> 3617 </label> 3618 <label class="slider-line"> 3619 <span data-tooltip="How strong the shadow tint is. Lower for softer, less solid shadows.">Opacity</span> 3620 <input 3621 id="lightsShadowOpacity" 3622 type="range" 3623 min="0" 3624 max="1" 3625 step="0.01" 3626 value="0.25" 3627 /> 3628 <span class="value" data-output="lightsShadowOpacity">0.25</span> 3629 </label> 3630 <label class="slider-line"> 3631 <span data-tooltip="Cast-shadow contact only â does not fix bright leaks on side faces (use Hard Edge Angle under 3D Shape). Negative pulls shadows onto surfaces.">Cast Shadow Offset</span> 3632 <input 3633 id="lightsShadowContactOffset" 3634 type="range" 3635 min="-0.002" 3636 max="0.0005" 3637 step="0.00001" 3638 value="-0.0005" 3639 /> 3640 <span class="value" data-output="lightsShadowContactOffset">-0.0005</span> 3641 </label> 3642 <label class="slider-line"> 3643 <span data-tooltip="Offsets shadow-map comparison along surface normals â reduces cast-shadow acne and terminator gaps on receiving surfaces.">Normal Bias</span> 3644 <input 3645 id="lightsShadowNormalBias" 3646 type="range" 3647 min="0" 3648 max="0.08" 3649 step="0.001" 3650 value="0.010" 3651 /> 3652 <span class="value" data-output="lightsShadowNormalBias">0.010</span> 3653 </label> 3654 <div class="slider-line"> 3655 <span data-tooltip="Lets both faces of a mesh receive cast shadows. Good for thin cards and foliage, and for extruded typography (inner strokes, back faces).">Two-Sided Cast</span> 3656 <label class="effect-toggle"> 3657 <input type="checkbox" id="lightsShadowTwoSided" /> 3658 <span class="effect-indicator" aria-hidden="true"></span> 3659 <span class="sr-only">Enable two-sided shadow casting</span> 3660 </label> 3661 <span class="value" aria-hidden="true"></span> 3662 </div> 3663 </div> 3664 </div> 3665 </div> 3666 </div> 3667 3668 <div class="panel-block"> 3669 <div class="block-title">Scene</div> 3670 <div class="scene-controls"> 3671 <button id="resetStudioSettings" class="accent-action-btn" data-tooltip="Reset all studio settings to defaults"> 3672 <i class="fa-solid fa-rotate-left"></i> 3673 Reset Studio 3674 </button> 3675 <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas"> 3676 <i class="fa-solid fa-arrow-left"></i> 3677 Reset Scene 3678 </button> 3679 <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard"> 3680 <i class="fa-solid fa-copy"></i> 3681 Copy Scene Settings 3682 </button> 3683 <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog"> 3684 <i class="fa-solid fa-upload"></i> 3685 Paste Scene Settings 3686 </button> 3687 <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file"> 3688 <i class="fa-solid fa-floppy-disk"></i> 3689 Save .orby Scene 3690 </button> 3691 <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file"> 3692 <i class="fa-solid fa-file-import"></i> 3693 Load .orby Scene 3694 </button> 3695 </div> 3696 </div> 3697 <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div> 3698 <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home"> 3699 <img src="./assets/images/favicon.svg" width="28" height="28" alt="" /> 3700 </button> 3701 </section> 3702 3703 <h2 class="panel-header-title" data-header="render">Camera</h2> 3704 <section class="panel" data-panel="render"> 3705 3706 <div class="panel-block"> 3707 <div class="subsection"> 3708 <div class="block-title has-reset">
3709 <span>Basic</span> 3710 <button class="block-reset-btn" data-reset="camera" aria-label="Reset Camera" data-tooltip="Reset Camera settings"> 3711 <i class="fa-solid fa-rotate-left"></i> 3712 <span class="sr-only">Reset</span> 3713 </button> 3714 </div> 3715 <label class="slider-line"> 3716 <span data-tooltip="Camera roll â rotate the frame around the view axis (Dutch angle)">Roll</span> 3717 <input 3718 id="cameraTilt" 3719 type="range" 3720 min="-45" 3721 max="45" 3722 value="0" 3723 step="1" 3724 /> 3725 <span class="value" data-output="cameraTilt">0°</span> 3726 </label> 3727 <label class="slider-line"> 3728 <span data-tooltip="Camera world position along X axis">Position X</span> 3729 <input 3730 id="cameraPosX" 3731 type="range" 3732 min="-20" 3733 max="20" 3734 value="0" 3735 step="0.01" 3736 /> 3737 <span class="value" data-output="cameraPosX">0.00m</span> 3738 </label> 3739 <label class="slider-line"> 3740 <span data-tooltip="Camera world position along Y axis">Position Y</span> 3741 <input 3742 id="cameraPosY" 3743 type="range" 3744 min="-20" 3745 max="20" 3746 value="1.5" 3747 step="0.01" 3748 /> 3749 <span class="value" data-output="cameraPosY">1.50m</span> 3750 </label> 3751 <label class="slider-line"> 3752 <span data-tooltip="Camera world position along Z axis">Position Z</span> 3753 <input 3754 id="cameraPosZ" 3755 type="range" 3756 min="-20" 3757 max="20" 3758 value="6" 3759 step="0.01" 3760 /> 3761 <span class="value" data-output="cameraPosZ">6.00m</span> 3762 </label> 3763 <label class="slider-line"> 3764 <span data-tooltip="Distance from camera to orbit target">Distance</span> 3765 <input 3766 id="cameraDistance" 3767 type="range" 3768 min="0.5" 3769 max="50" 3770 value="6.02" 3771 step="0.01" 3772 /> 3773 <span class="value" data-output="cameraDistance">6.02m</span> 3774 </label> 3775 <div 3776 class="effect-foldout effect-foldout--expanded" 3777 data-effect-foldout="manual-exposure" 3778 aria-hidden="false" 3779 > 3780 <label class="slider-line"> 3781 <span data-tooltip="Overall scene brightness">Exposure</span> 3782 <input 3783 id="exposure" 3784 type="range" 3785 min="0" 3786 max="2" 3787 value="1.0" 3788 step="0.01" 3789 /> 3790 <span class="value" data-output="exposure">1.00</span> 3791 </label> 3792 </div> 3793 <div class="slider-line"> 3794 <span>Auto Exposure</span> 3795 <label class="effect-toggle" data-tooltip="Automatically adjust exposure for optimal brightness"> 3796 <input type="checkbox" id="autoExposure" /> 3797 <span class="effect-indicator" aria-hidden="true"></span> 3798 <span class="sr-only">Enable auto exposure</span> 3799 </label> 3800 </div> 3801 <div class="slider-line"> 3802 <span>Manual Render Distance</span> 3803 <label class="effect-toggle" data-tooltip="Rare override â set near/far manually for telephoto or isometric shots when AO banding appears on the backdrop"> 3804 <input type="checkbox" id="manualClipPlanes" />
3805 <span class="effect-indicator" aria-hidden="true"></span> 3806 <span class="sr-only">Enable manual render distance</span> 3807 </label> 3808 </div> 3809 <div 3810 id="clipPlanesFoldout" 3811 class="clip-planes-foldout clip-planes-foldout--collapsed" 3812 aria-hidden="true" 3813 > 3814 <label class="slider-line"> 3815 <span data-tooltip="Near clip plane â geometry closer than this is not rendered">Near Clip</span> 3816 <input 3817 id="cameraClipNear" 3818 type="range" 3819 min="0.01" 3820 max="50" 3821 value="0.1" 3822 step="0.01" 3823 /> 3824 <span class="value" data-output="cameraClipNear">0.10</span> 3825 </label> 3826 <label class="slider-line"> 3827 <span data-tooltip="Far clip plane â geometry farther than this is not rendered">Far Clip</span> 3828 <input 3829 id="cameraClipFar" 3830 type="range" 3831 min="1" 3832 max="500" 3833 value="100" 3834 step="0.5" 3835 /> 3836 <span class="value" data-output="cameraClipFar">100</span> 3837 </label> 3838 </div> 3839 <div class="panel-block-divider"></div> 3840 <div class="subsection" data-subsection="view-presets"> 3841 <div class="block-title">View Presets</div> 3842 <div 3843 class="view-preset-grid" 3844 role="group" 3845 aria-label="View presets" 3846 > 3847 <button type="button" class="lens-preset-btn" data-view-preset="front" aria-pressed="false"> 3848 <span class="lens-preset-btn__focal">Front</span> 3849 </button> 3850 <button type="button" class="lens-preset-btn" data-view-preset="left" aria-pressed="false"> 3851 <span class="lens-preset-btn__focal">Left</span> 3852 </button> 3853 <button type="button" class="lens-preset-btn" data-view-preset="right" aria-pressed="false"> 3854 <span class="lens-preset-btn__focal">Right</span> 3855 </button> 3856 <button type="button" class="lens-preset-btn" data-view-preset="top" aria-pressed="false"> 3857 <span class="lens-preset-btn__focal">Top</span> 3858 </button> 3859 </div> 3860 </div> 3861 <div class="panel-block-divider"></div> 3862 <div class="subsection" data-subsection="lens"> 3863 <div class="block-title has-reset"> 3864 <span>Lens</span> 3865 <button 3866 class="block-reset-btn" 3867 data-reset="lens" 3868 aria-label="Reset Lens" 3869 data-tooltip="Reset Lens settings" 3870 > 3871 <i class="fa-solid fa-rotate-left"></i> 3872 <span class="sr-only">Reset</span> 3873 </button> 3874 </div> 3875 <div 3876 class="lens-preset-grid" 3877 role="group" 3878 aria-label="Focal length presets" 3879 > 3880 <button type="button" class="lens-preset-btn" data-lens-focal="14" aria-pressed="false"> 3881 <span class="lens-preset-btn__focal">14mm</span> 3882 <span class="lens-preset-btn__label">Ultra wide</span> 3883 </button> 3884 <button type="button" class="lens-preset-btn" data-lens-focal="24" aria-pressed="false"> 3885 <span class="lens-preset-btn__focal">24mm</span> 3886 <span class="lens-preset-btn__label">Wide</span> 3887 </button> 3888 <button type="button" class="lens-preset-btn" data-lens-focal="35" aria-pressed="false">
3889 <span class="lens-preset-btn__focal">35mm</span> 3890 <span class="lens-preset-btn__label">Wide</span> 3891 </button> 3892 <button type="button" class="lens-preset-btn" data-lens-focal="50" aria-pressed="false"> 3893 <span class="lens-preset-btn__focal">50mm</span> 3894 <span class="lens-preset-btn__label">Standard</span> 3895 </button> 3896 <button type="button" class="lens-preset-btn" data-lens-focal="85" aria-pressed="false"> 3897 <span class="lens-preset-btn__focal">85mm</span> 3898 <span class="lens-preset-btn__label">Portrait</span> 3899 </button> 3900 <button type="button" class="lens-preset-btn" data-lens-focal="100" aria-pressed="false"> 3901 <span class="lens-preset-btn__focal">100mm</span> 3902 <span class="lens-preset-btn__label">Macro</span> 3903 </button> 3904 <button type="button" class="lens-preset-btn" data-lens-focal="135" aria-pressed="false"> 3905 <span class="lens-preset-btn__focal">135mm</span> 3906 <span class="lens-preset-btn__label">Tele</span> 3907 </button> 3908 <button type="button" class="lens-preset-btn" data-lens-focal="200" aria-pressed="false"> 3909 <span class="lens-preset-btn__focal">200mm</span> 3910 <span class="lens-preset-btn__label">Tele</span> 3911 </button> 3912 </div> 3913 <label class="select-line"> 3914 <span data-tooltip="Sensor size used to convert focal length to field of view">Sensor</span> 3915 <select id="lensSensor" aria-label="Camera sensor format"> 3916 <option value="full-frame">Full frame (36mm)</option> 3917 <option value="aps-c" selected>APS-C (23.5mm)</option> 3918 <option value="m43">Micro Four Thirds (17.3mm)</option> 3919 <option value="super-35">Super 35 (24.9mm)</option> 3920 </select> 3921 </label> 3922 <label class="slider-line"> 3923 <span data-tooltip="Vertical field of view â fine-tune after choosing a focal length preset">Manual FOV</span> 3924 <input 3925 id="cameraFov" 3926 type="range" 3927 min="2" 3928 max="120" 3929 value="45" 3930 step="0.1" 3931 /> 3932 <span class="value" data-output="cameraFov">45°</span> 3933 </label> 3934 </div> 3935 <div class="panel-block-divider"></div> 3936 <div class="subsection" data-subsection="isometric"> 3937 <div class="block-title has-toggle has-reset"> 3938 <span data-tooltip="RTS isometric view â locks orbit; pan optional via Unlock. Zoom and focal length still work. Roll and fisheye are disabled until turned off.">Isometric Camera</span> 3939 <div style="display: flex; align-items: center; gap: 0.5rem;"> 3940 <button 3941 class="block-reset-btn" 3942 data-reset="isometric" 3943 aria-label="Reset Isometric Camera" 3944 data-tooltip="Reset Isometric Camera settings" 3945 > 3946 <i class="fa-solid fa-rotate-left"></i> 3947 <span class="sr-only">Reset</span> 3948 </button> 3949 <label class="effect-toggle" data-tooltip="Enable isometric camera (orbit/pan locked; focal length still adjustable)"> 3950 <input type="checkbox" id="isometricEnabled" /> 3951 <span class="effect-indicator" aria-hidden="true"></span> 3952 <span class="sr-only">Enable isometric camera</span> 3953 </label> 3954 </div> 3955 </div> 3956 <div 3957 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 3958 data-effect-foldout="isometric" 3959 aria-hidden="true" 3960 > 3961 <div 3962 class="iso-controls-stack" 3963 role="group" 3964 aria-label="Isometric Camera presets" 3965 > 3966 <div class="iso-preset-grid"> 3967 <button type="button" class="iso-preset-btn" data-iso-preset="true-isometric" aria-pressed="false">
3968 <span class="iso-preset-btn__title">True iso</span> 3969 <span class="iso-preset-btn__subtitle">45° / 35.26°</span> 3970 </button> 3971 <button type="button" class="iso-preset-btn" data-iso-preset="dimetric" aria-pressed="false"> 3972 <span class="iso-preset-btn__title">Dimetric</span> 3973 <span class="iso-preset-btn__subtitle">45° / 30° â RTS</span> 3974 </button> 3975 <button type="button" class="iso-preset-btn" data-iso-preset="high-oblique" aria-pressed="false"> 3976 <span class="iso-preset-btn__title">High Oblique</span> 3977 <span class="iso-preset-btn__subtitle">45° / 60° â City Builder</span> 3978 </button> 3979 <button type="button" class="iso-preset-btn" data-iso-preset="pixel-2-1" aria-pressed="false"> 3980 <span class="iso-preset-btn__title">2:1 pixel</span> 3981 <span class="iso-preset-btn__subtitle">Pixel-perfect</span> 3982 </button> 3983 </div> 3984 <div class="iso-action-row"> 3985 <button 3986 id="isoOrbitStep" 3987 class="ghost-btn small" 3988 type="button" 3989 data-tooltip="Rotate the isometric camera 45° around the model (repeats)" 3990 > 3991 Rotate camera 45 3992 </button> 3993 <button 3994 id="isoAssetRotateStep" 3995 class="ghost-btn small" 3996 type="button" 3997 data-tooltip="Rotate the asset 45° on Y â shortcut for Object â Rotate Y when batching isometric renders" 3998 > 3999 Rotate asset 45 4000 </button> 4001 </div> 4002 </div> 4003 <button 4004 id="isoPanUnlock" 4005 class="ghost-btn small" 4006 type="button" 4007 aria-pressed="false" 4008 data-tooltip="Allow right-drag to pan the orbit target while isometric angles stay locked" 4009 > 4010 Unlock Camera Pan 4011 </button> 4012 </div> 4013 </div> 4014 <div class="panel-block-divider"></div> 4015 <div class="subsection" data-subsection="fisheye"> 4016 <div class="block-title has-toggle"> 4017 <span data-tooltip="Post-process barrel / fisheye (Giliam de Carpentier). Renders after full grading stack.">Fisheye Lens</span> 4018 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4019 <button 4020 type="button" 4021 class="block-reset-btn" 4022 data-reset="fisheye" 4023 aria-label="Reset Fisheye Lens" 4024 data-tooltip="Reset Fisheye Lens to defaults" 4025 > 4026 <i class="fa-solid fa-rotate-left"></i> 4027 <span class="sr-only">Reset</span> 4028 </button> 4029 <label class="effect-toggle" data-tooltip="Enable lens distortion (uses Horizontal + strength + cylindrical ratio)"> 4030 <input type="checkbox" id="fisheyeEnabled" /> 4031 <span class="effect-indicator" aria-hidden="true"></span> 4032 <span class="sr-only">Enable Fisheye Lens</span> 4033 </label> 4034 </div> 4035 </div> 4036 <div 4037 class="effect-foldout effect-foldout--collapsed" 4038 data-effect-foldout="fisheye" 4039 aria-hidden="true" 4040 > 4041 <label class="slider-line"> 4042 <span data-tooltip="Target horizontal field of view; vertical FOV is derived so the shader matches the projection (avoids black edges)">
4042Horizontal</span> 4043 <input 4044 id="fisheyeHorizontalFOV" 4045 type="range" 4046 min="5" 4047 max="160" 4048 value="131" 4049 step="1" 4050 /> 4051 <span class="value" data-output="fisheyeHorizontalFOV">131°</span> 4052 </label> 4053 <label class="slider-line"> 4054 <span data-tooltip="0 = no distortion, 1 = full stereographic-style remapping">Strength</span> 4055 <input 4056 id="fisheyeStrength" 4057 type="range" 4058 min="0" 4059 max="1" 4060 value="0.37" 4061 step="0.01" 4062 /> 4063 <span class="value" data-output="fisheyeStrength">0.37</span> 4064 </label> 4065 <label class="slider-line"> 4066 <span data-tooltip="1 = spherical; higher bends verticals less (anamorphic-like)">Cylindrical</span> 4067 <input 4068 id="fisheyeCylindricalRatio" 4069 type="range" 4070 min="0.25" 4071 max="4" 4072 value="4" 4073 step="0.025" 4074 /> 4075 <span class="value" data-output="fisheyeCylindricalRatio">4.00</span> 4076 </label> 4077 </div> 4078 </div> 4079 <div class="panel-block-divider"></div> 4080 <div class="subsection" data-subsection="auto-orbit"> 4081 <div class="block-title">Auto Orbit</div> 4082 <div class="segmented compact"> 4083 <label> 4084 <input type="radio" name="cameraAutoOrbit" value="off" checked /> 4085 OFF 4086 </label> 4087 <label> 4088 <input type="radio" name="cameraAutoOrbit" value="slow" /> 4089 SLOW 4090 </label> 4091 <label> 4092 <input type="radio" name="cameraAutoOrbit" value="fast" /> 4093 FAST 4094 </label> 4095 </div> 4096 </div> 4097 <div class="panel-block-divider"></div> 4098 <div class="subsection" data-subsection="handheld"> 4099 <div class="block-title" data-tooltip="Procedural shake on top of orbit; does not affect controls. Not visible in PNG exports.">Handheld</div> 4100 <div class="segmented compact"> 4101 <label> 4102 <input type="radio" name="cameraHandheld" value="off" checked /> 4103 OFF 4104 </label> 4105 <label> 4106 <input type="radio" name="cameraHandheld" value="low" /> 4107 SUBTLE 4108 </label> 4109 <label> 4110 <input type="radio" name="cameraHandheld" value="high" /> 4111 STRONG 4112 </label> 4113 </div> 4114 </div> 4115 </div> 4116 </div> 4117 4118 <div class="panel-block"> 4119 <div class="subsection" data-subsection="color-tone"> 4120 <div class="block-title has-reset"> 4121 <span>Color & Tone</span> 4122 <button class="block-reset-btn" data-reset="color-correction" aria-label="Reset Color & Tone" data-tooltip="Reset Color & Tone settings"> 4123 <i class="fa-solid fa-rotate-left"></i> 4124 <span class="sr-only">Reset</span> 4125 </button> 4126 </div> 4127 <label class="slider-line slider-line--temperature"> 4128 <span>Temperature</span> 4129 <input 4130 id="cameraTemperature" 4131 type="range" 4132 min="2000" 4133 max="10000" 4134 value="6000" 4135 step="50" 4136 />
4137 <span class="value" data-output="cameraTemperature">6000K</span> 4138 </label> 4139 <label class="slider-line slider-line--tint"> 4140 <span>Tint</span> 4141 <input 4142 id="cameraTint" 4143 type="range" 4144 min="-100" 4145 max="100" 4146 value="0" 4147 step="1" 4148 /> 4149 <span class="value" data-output="cameraTint">0</span> 4150 </label> 4151 <label class="slider-line slider-line--saturation"> 4152 <span>Saturation</span> 4153 <input 4154 id="cameraSaturation" 4155 type="range" 4156 min="0" 4157 max="2" 4158 value="1.0" 4159 step="0.01" 4160 /> 4161 <span class="value" data-output="cameraSaturation">1.00</span> 4162 </label> 4163 <label class="slider-line"> 4164 <span>Contrast</span> 4165 <input 4166 id="cameraContrast" 4167 type="range" 4168 min="0" 4169 max="2" 4170 value="1.0" 4171 step="0.01" 4172 /> 4173 <span class="value" data-output="cameraContrast">1.00</span> 4174 </label> 4175 <label class="slider-line"> 4176 <span>Highlights</span> 4177 <input 4178 id="cameraHighlights" 4179 type="range" 4180 min="-100" 4181 max="100" 4182 value="0" 4183 step="1" 4184 /> 4185 <span class="value" data-output="cameraHighlights">0</span> 4186 </label> 4187 <label class="slider-line"> 4188 <span>Shadows</span> 4189 <input 4190 id="cameraShadows" 4191 type="range" 4192 min="-50" 4193 max="50" 4194 value="0" 4195 step="1" 4196 /> 4197 <span class="value" data-output="cameraShadows">0</span> 4198 </label> 4199 <label class="slider-line"> 4200 <span>Clarity</span> 4201 <input 4202 id="cameraClarity" 4203 type="range" 4204 min="-100" 4205 max="100" 4206 value="0" 4207 step="1" 4208 /> 4209 <span class="value" data-output="cameraClarity">0</span> 4210 </label> 4211 <label class="slider-line"> 4212 <span>Fade</span> 4213 <input 4214 id="cameraFade" 4215 type="range" 4216 min="0" 4217 max="100" 4218 value="0" 4219 step="1" 4220 /> 4221 <span class="value" data-output="cameraFade">0</span> 4222 </label> 4223 <label class="slider-line"> 4224 <span>Sharpness</span> 4225 <input 4226 id="cameraSharpness" 4227 type="range" 4228 min="0" 4229 max="100" 4230 value="0" 4231 step="1" 4232 /> 4233 <span class="value" data-output="cameraSharpness">0</span> 4234 </label> 4235 </div> 4236 <div class="panel-block-divider"></div> 4237 <div class="subsection" data-subsection="histogram"> 4238 <div class="block-title has-toggle"> 4239 <span>Histogram</span> 4240 <label class="effect-toggle" data-tooltip="Show/hide exposure histogram"> 4241 <input type="checkbox" id="histogramEnabled" /> 4242 <span class="effect-indicator" aria-hidden="true"></span> 4243 <span class="sr-only">Enable Histogram</span> 4244 </label> 4245 </div> 4246 <div id="histogramContainer" class="histogram-container histogram-container--collapsed"></div> 4247 </div> 4248 <div class="panel-block-divider"></div> 4249 <div class="subsection tone-curve-sub" data-subsection="tone-curve"> 4250 <div class="block-title has-toggle has-reset">
4251 <span>Curve</span> 4252 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4253 <button 4254 class="block-reset-btn" 4255 data-reset="tone-curve" 4256 aria-label="Reset curve" 4257 data-tooltip="Reset" 4258 > 4259 <i class="fa-solid fa-rotate-left"></i> 4260 <span class="sr-only">Reset</span> 4261 </button> 4262 <label class="effect-toggle" data-tooltip="Show or hide the Tone Curve"> 4263 <input type="checkbox" id="toneCurveOpen" /> 4264 <span class="effect-indicator" aria-hidden="true"></span> 4265 <span class="sr-only">Show Tone Curve</span> 4266 </label> 4267 </div> 4268 </div> 4269 <div 4270 id="toneCurveContainer" 4271 class="tone-curve-foldout tone-curve-foldout--collapsed" 4272 > 4273 <div class="tone-curve-canvas-wrap"> 4274 <canvas 4275 id="toneCurveCanvas" 4276 class="tone-curve-canvas" 4277 width="400" 4278 height="400" 4279 aria-label="Tone Curve" 4280 ></canvas> 4281 </div> 4282 </div> 4283 </div> 4284 <div class="panel-block-divider"></div> 4285 <div class="subsection" data-subsection="look-filters"> 4286 <div class="block-title has-toggle"> 4287 <span>Look Filters</span> 4288 <label class="effect-toggle" data-tooltip="Show Look Filter presets"> 4289 <input type="checkbox" id="lookFilterPresetsOpen" /> 4290 <span class="effect-indicator" aria-hidden="true"></span> 4291 <span class="sr-only">Show Look Filters</span> 4292 </label> 4293 </div> 4294 <div 4295 id="lookFilterPresetsContainer" 4296 class="look-filter-presets-container look-filter-presets-container--collapsed" 4297 > 4298 <div class="look-filter-grid" role="list" aria-label="Look Filters"> 4299 <button 4300 type="button" 4301 class="look-filter-tile" 4302 data-look-filter="none" 4303 role="listitem" 4304 aria-pressed="false" 4305 > 4306 <img 4307 class="look-filter-tile__thumb" 4308 data-src="./assets/images/look-filters/none.png" 4309 alt="" 4310 width="96" 4311 height="96" 4312 decoding="async" 4313 /> 4314 <span class="look-filter-tile__label">None</span> 4315 </button> 4316 <button 4317 type="button" 4318 class="look-filter-tile" 4319 data-look-filter="studio" 4320 role="listitem" 4321 aria-pressed="false" 4322 > 4323 <img 4324 class="look-filter-tile__thumb" 4325 data-src="./assets/images/look-filters/studio.png" 4326 alt="" 4327 width="96" 4328 height="96" 4329 decoding="async" 4330 /> 4331 <span class="look-filter-tile__label">Studio</span> 4332 </button> 4333 <button 4334 type="button" 4335 class="look-filter-tile" 4336 data-look-filter="noir" 4337 role="listitem" 4338 aria-pressed="false" 4339 > 4340 <img 4341 class="look-filter-tile__thumb" 4342 data-src="./assets/images/look-filters/noir.png" 4343 alt="" 4344 width="96" 4345 height="96" 4346 decoding="async" 4347 />
4348 <span class="look-filter-tile__label">Noir</span> 4349 </button> 4350 <button 4351 type="button" 4352 class="look-filter-tile" 4353 data-look-filter="mood" 4354 role="listitem" 4355 aria-pressed="false" 4356 > 4357 <img 4358 class="look-filter-tile__thumb" 4359 data-src="./assets/images/look-filters/mood.png" 4360 alt="" 4361 width="96" 4362 height="96" 4363 decoding="async" 4364 /> 4365 <span class="look-filter-tile__label">Mood</span> 4366 </button> 4367 <button 4368 type="button" 4369 class="look-filter-tile" 4370 data-look-filter="vintage" 4371 role="listitem" 4372 aria-pressed="false" 4373 > 4374 <img 4375 class="look-filter-tile__thumb" 4376 data-src="./assets/images/look-filters/vintage.png" 4377 alt="" 4378 width="96" 4379 height="96" 4380 decoding="async" 4381 /> 4382 <span class="look-filter-tile__label">Vintage</span> 4383 </button> 4384 <button 4385 type="button" 4386 class="look-filter-tile" 4387 data-look-filter="cinema" 4388 role="listitem" 4389 aria-pressed="false" 4390 > 4391 <img 4392 class="look-filter-tile__thumb" 4393 data-src="./assets/images/look-filters/cinema.png" 4394 alt="" 4395 width="96" 4396 height="96" 4397 decoding="async" 4398 /> 4399 <span class="look-filter-tile__label">Cinema</span> 4400 </button> 4401 <button 4402 type="button" 4403 class="look-filter-tile" 4404 data-look-filter="frost" 4405 role="listitem" 4406 aria-pressed="false" 4407 > 4408 <img 4409 class="look-filter-tile__thumb" 4410 data-src="./assets/images/look-filters/frost.png" 4411 alt="" 4412 width="96" 4413 height="96" 4414 decoding="async" 4415 /> 4416 <span class="look-filter-tile__label">Frost</span> 4417 </button> 4418 <button 4419 type="button" 4420 class="look-filter-tile" 4421 data-look-filter="golden" 4422 role="listitem" 4423 aria-pressed="false" 4424 > 4425 <img 4426 class="look-filter-tile__thumb" 4427 data-src="./assets/images/look-filters/golden.png" 4428 alt="" 4429 width="96" 4430 height="96" 4431 decoding="async" 4432 /> 4433 <span class="look-filter-tile__label">Golden</span> 4434 </button> 4435 <button 4436 type="button" 4437 class="look-filter-tile" 4438 data-look-filter="dream" 4439 role="listitem" 4440 aria-pressed="false" 4441 > 4442 <img 4443 class="look-filter-tile__thumb" 4444 data-src="./assets/images/look-filters/dream.png" 4445 alt="" 4446 width="96" 4447 height="96" 4448 decoding="async" 4449 />
4450 <span class="look-filter-tile__label">Dream</span> 4451 </button> 4452 <button 4453 type="button" 4454 class="look-filter-tile" 4455 data-look-filter="neon" 4456 role="listitem" 4457 aria-pressed="false" 4458 > 4459 <img 4460 class="look-filter-tile__thumb" 4461 data-src="./assets/images/look-filters/neon.png" 4462 alt="" 4463 width="96" 4464 height="96" 4465 decoding="async" 4466 /> 4467 <span class="look-filter-tile__label">Neon</span> 4468 </button> 4469 </div> 4470 </div> 4471 </div> 4472 <div class="panel-block-divider"></div> 4473 <div class="subsection" data-subsection="ambient-occlusion"> 4474 <div class="block-title has-toggle"> 4475 <span>Ambient Occlusion</span> 4476 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4477 <button class="block-reset-btn" data-reset="ambient-occlusion" aria-label="Reset Ambient Occlusion" data-tooltip="Reset ambient occlusion settings"> 4478 <i class="fa-solid fa-rotate-left"></i> 4479 <span class="sr-only">Reset</span> 4480 </button> 4481 <label class="effect-toggle" data-tooltip="Screen-space AO (N8AO). Uses WebGL post-processing; off by default. Turn off Render Quality â Low if this stays disabled there."> 4482 <input type="checkbox" id="toggleAmbientOcclusion" /> 4483 <span class="effect-indicator" aria-hidden="true"></span> 4484 <span class="sr-only">Enable Ambient Occlusion</span> 4485 </label> 4486 </div> 4487 </div> 4488 <div 4489 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 4490 data-effect-foldout="ambient-occlusion" 4491 aria-hidden="true" 4492 > 4493 <label class="slider-line"> 4494 <span>Strength</span> 4495 <input 4496 id="ambientOcclusionIntensity" 4497 type="range" 4498 min="0.25" 4499 max="20" 4500 value="3" 4501 step="0.25" 4502 /> 4503 <span class="value" data-output="ambientOcclusionIntensity">3.00</span> 4504 </label> 4505 <label class="slider-line"> 4506 <span>Radius</span> 4507 <input 4508 id="ambientOcclusionRadius" 4509 type="range" 4510 min="0.1" 4511 max="12" 4512 value="1" 4513 step="0.05" 4514 /> 4515 <span class="value" data-output="ambientOcclusionRadius">1.00</span> 4516 </label> 4517 <label class="color-line"> 4518 <span>
4518Colour</span> 4519 <input 4520 type="color" 4521 id="ambientOcclusionColor" 4522 class="color-chip" 4523 value="#080808" 4524 /> 4525 </label> 4526 <label class="select-line"> 4527 <span data-tooltip="Low: half-res buffer + lighter N8AO samples. Medium: half-res + balanced denoise (default). Ultra: full resolution + Ultra N8AO preset.">AO Quality</span> 4528 <select id="ambientOcclusionQuality" aria-label="Ambient Occlusion quality"> 4529 <option value="low">Low</option> 4530 <option value="medium" selected>Medium</option> 4531 <option value="max">Ultra</option> 4532 </select> 4533 </label> 4534 </div> 4535 </div> 4536 <div class="panel-block-divider"></div> 4537 <div class="subsection" data-subsection="dof"> 4538 <div class="block-title has-toggle"> 4539 <span class="block-title-name"> 4540 <span>Depth of Field</span> 4541 <span class="dev-badge" data-tooltip="This feature is still under development" tabindex="0" role="img" aria-label="This feature is still under development"><i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i></span> 4542 </span> 4543 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4544 <button class="block-reset-btn" data-reset="dof" aria-label="Reset Depth of Field" data-tooltip="Reset Depth of Field settings"> 4545 <i class="fa-solid fa-rotate-left"></i> 4546 <span class="sr-only">Reset</span> 4547 </button> 4548 <label class="effect-toggle" data-tooltip="Enable/disable depth of field blur effect"> 4549 <input type="checkbox" id="toggleDof" /> 4550 <span class="effect-indicator" aria-hidden="true"></span> 4551 <span class="sr-only">Enable Depth of Field</span> 4552 </label> 4553 </div> 4554 </div> 4555 <div 4556 class="effect-foldout effect-foldout--collapsed" 4557 data-effect-foldout="dof" 4558 aria-hidden="true" 4559 > 4560 <label class="select-line"> 4561 <span>Focus mode</span> 4562 <select id="dofFocusMode" aria-label="Depth of field focus mode" data-tooltip="Auto tracks the screen center on the model. Manual locks focus to the distance slider."> 4563 <option value="auto" selected>Auto</option> 4564 <option value="manual">Manual</option> 4565 </select> 4566 </label> 4567 <div class="slider-line slider-line--toggle-only"> 4568 <span class="slider-line-label">Focus plane</span> 4569 <label 4570 class="effect-toggle" 4571 data-tooltip="View-depth focal plane used by the DOF shader (purple = in focus here). If blur seams sit in front of or behind this plane, that is a DOF bug â not wrong slider use." 4572 > 4573 <input type="checkbox" id="toggleDofFocusPlane" /> 4574 <span class="effect-indicator" aria-hidden="true"></span> 4575 <span class="sr-only">Show focus plane</span> 4576 </label> 4577 </div> 4578 <label class="slider-line"> 4579 <span>Focus distance</span> 4580 <input 4581 id="dofFocus" 4582 type="range" 4583 min="0.1" 4584 max="10" 4585 value="1.5" 4586 step="0.1" 4587 /> 4588 <span class="value" data-output="dofFocus">1.5m</span> 4589 </label> 4590 <label class="slider-line">
4591 <span data-tooltip="Blur on geometry nearer than the focal plane (nose, front wings). Keep low to avoid artifacts.">Near blur</span> 4592 <input 4593 id="dofForegroundBlur" 4594 type="range" 4595 min="0" 4596 max="2" 4597 value="1" 4598 step="0.05" 4599 /> 4600 <span class="value" data-output="dofForegroundBlur">1.00</span> 4601 </label> 4602 <label class="slider-line"> 4603 <span data-tooltip="Blur on geometry farther than the focal plane (rear wings, background).">Far blur</span> 4604 <input 4605 id="dofBackgroundBlur" 4606 type="range" 4607 min="0" 4608 max="2" 4609 value="1" 4610 step="0.05" 4611 /> 4612 <span class="value" data-output="dofBackgroundBlur">1.00</span> 4613 </label> 4614 <label class="slider-line"> 4615 <span data-tooltip="Lens aperture â lower f-stop values yield a shallower depth of field.">F-stop</span> 4616 <input 4617 id="dofAperture" 4618 type="range" 4619 min="0.001" 4620 max="0.01" 4621 value="0.003" 4622 step="0.0001" 4623 /> 4624 <span class="value" data-output="dofAperture">f/4</span> 4625 </label> 4626 <div class="slider-line slider-line--toggle-only"> 4627 <span class="slider-line-label">Compensate zoom</span> 4628 <label 4629 class="effect-toggle" 4630 data-tooltip="Reduce depth of field when the camera pulls back to a wide framing." 4631 > 4632 <input type="checkbox" id="toggleDofZoomAttenuation" checked /> 4633 <span class="effect-indicator" aria-hidden="true"></span> 4634 <span class="sr-only">Compensate zoom</span> 4635 </label> 4636 </div> 4637 <label class="select-line"> 4638 <span>Quality</span> 4639 <select id="dofQuality" aria-label="Depth of field quality" data-tooltip="Martins Upitis bokeh (three.js dof2). Quality sets ring à sample count â High matches the official example defaults."> 4640 <option value="low">Low</option> 4641 <option value="medium">Medium</option> 4642 <option value="high" selected>High</option> 4643 <option value="ultra">Ultra</option> 4644 </select> 4645 </label> 4646 </div> 4647 </div> 4648 <div class="panel-block-divider"></div> 4649 <div class="subsection" data-subsection="bloom"> 4650 <div class="block-title has-toggle"> 4651 <span>Bloom</span> 4652 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4653 <button class="block-reset-btn" data-reset="bloom" aria-label="Reset Bloom" data-tooltip="Reset Bloom settings"> 4654 <i class="fa-solid fa-rotate-left"></i> 4655 <span class="sr-only">Reset</span> 4656 </button> 4657 <label class="effect-toggle" data-tooltip="Enable/disable bloom glow effect"> 4658 <input type="checkbox" id="toggleBloom" checked /> 4659 <span class="effect-indicator" aria-hidden="true"></span> 4660 <span class="sr-only">Enable Bloom</span> 4661 </label> 4662 </div> 4663 </div> 4664 <div 4665 class="effect-foldout effect-foldout--expanded effect-foldout--md" 4666 data-effect-foldout="bloom" 4667 aria-hidden="false" 4668 > 4669 <label class="slider-line">
4670 <span>Threshold</span> 4671 <input 4672 id="bloomThreshold" 4673 type="range" 4674 min="0" 4675 max="1" 4676 value="1" 4677 step="0.01" 4678 /> 4679 <span class="value" data-output="bloomThreshold">1.00</span> 4680 </label> 4681 <label class="slider-line"> 4682 <span>Strength</span> 4683 <input 4684 id="bloomStrength" 4685 type="range" 4686 min="0" 4687 max="2" 4688 value="0.2" 4689 step="0.01" 4690 /> 4691 <span class="value" data-output="bloomStrength">0.20</span> 4692 </label> 4693 <label class="slider-line"> 4694 <span>Radius</span> 4695 <input 4696 id="bloomRadius" 4697 type="range" 4698 min="0" 4699 max="1" 4700 value="0.2" 4701 step="0.01" 4702 /> 4703 <span class="value" data-output="bloomRadius">0.20</span> 4704 </label> 4705 <label class="color-line"> 4706 <span>Color</span> 4707 <input type="color" id="bloomColor" class="color-chip" value="#ffe9cc" /> 4708 </label> 4709 <label class="select-line"> 4710 <span>Quality</span> 4711 <select id="bloomQuality" aria-label="Bloom quality"> 4712 <option value="low">Low</option> 4713 <option value="medium" selected>Medium</option> 4714 <option value="high">High</option> 4715 <option value="ultra">Ultra</option> 4716 </select> 4717 </label> 4718 </div> 4719 </div> 4720 <div class="panel-block-divider"></div> 4721 <div class="subsection" data-subsection="anamorphic-lens-flare"> 4722 <div class="block-title has-toggle"> 4723 <span>Anamorphic Bloom</span> 4724 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4725 <button class="block-reset-btn" data-reset="anamorphic-bloom" aria-label="Reset Anamorphic Bloom" data-tooltip="Reset Anamorphic Bloom settings"> 4726 <i class="fa-solid fa-rotate-left"></i> 4727 <span class="sr-only">Reset</span> 4728 </button> 4729 <label class="effect-toggle" data-tooltip="Streak on bright areas; angle control below (requires Bloom on)"> 4730 <input type="checkbox" id="anamorphicBloomEnabled" /> 4731 <span class="effect-indicator" aria-hidden="true"></span> 4732 <span class="sr-only">Enable Anamorphic Bloom</span> 4733 </label> 4734 </div> 4735 </div> 4736 <div 4737 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 4738 data-effect-foldout="anamorphic-lens-flare" 4739 aria-hidden="true" 4740 > 4741 <label class="slider-line"> 4742 <span>Strength</span> 4743 <input 4744 id="anamorphicBloomStrength" 4745 type="range" 4746 min="0" 4747 max="3" 4748 value="1" 4749 step="0.01" 4750 /> 4751 <span class="value" data-output="anamorphicBloomStrength">1.00</span> 4752 </label> 4753 <label class="slider-line"> 4754 <span>Spread</span> 4755 <input 4756 id="anamorphicBloomSpread" 4757 type="range" 4758 min="0" 4759 max="1.68"
4760 value="0.2" 4761 step="0.01" 4762 /> 4763 <span class="value" data-output="anamorphicBloomSpread">0.20</span> 4764 </label> 4765 <label class="slider-line"> 4766 <span data-tooltip="0° = horizontal (classic anamorphic); 180° flips the streak axis â enough for lens / flare direction">Streak angle</span> 4767 <input 4768 id="anamorphicBloomStreakAngle" 4769 type="range" 4770 min="0" 4771 max="180" 4772 value="0" 4773 step="1" 4774 /> 4775 <span class="value" data-output="anamorphicBloomStreakAngle">0°</span> 4776 </label> 4777 <label class="slider-line"> 4778 <span data-tooltip="Linear luminance after bloom. Max (2) targets only the brightest pixels; small frame-to-frame swings there can strobe â the engine widens soften automatically above 1.0, or lower threshold.">Threshold</span> 4779 <input 4780 id="anamorphicBloomThreshold" 4781 type="range" 4782 min="0" 4783 max="2" 4784 value="0.7" 4785 step="0.01" 4786 /> 4787 <span class="value" data-output="anamorphicBloomThreshold">0.70</span> 4788 </label> 4789 <label class="slider-line"> 4790 <span>Soften</span> 4791 <input 4792 id="anamorphicBloomSoften" 4793 type="range" 4794 min="0.01" 4795 max="0.6" 4796 value="0.12" 4797 step="0.01" 4798 /> 4799 <span class="value" data-output="anamorphicBloomSoften">0.12</span> 4800 </label> 4801 <label class="color-line"> 4802 <span>Tint</span> 4803 <input type="color" id="anamorphicBloomStreakTint" class="color-chip" value="#7ec8ff" /> 4804 </label> 4805 <label class="select-line"> 4806 <span>Quality</span> 4807 <select id="anamorphicBloomQuality" aria-label="Anamorphic bloom quality"> 4808 <option value="low">Low</option> 4809 <option value="medium" selected>Medium</option> 4810 <option value="high">High</option> 4811 <option value="ultra">Ultra</option> 4812 </select> 4813 </label> 4814 </div> 4815 </div> 4816 <div class="panel-block-divider"></div> 4817 <div class="subsection" data-subsection="lens-flare"> 4818 <div class="block-title has-toggle"> 4819 <span>Lens Flare</span> 4820 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4821 <button class="block-reset-btn" data-reset="lens-flare" aria-label="Reset Lens Flare" data-tooltip="Reset Lens Flare settings"> 4822 <i class="fa-solid fa-rotate-left"></i> 4823 <span class="sr-only">Reset</span> 4824 </button> 4825 <label class="effect-toggle" data-tooltip="Enable/disable lens flare effect"> 4826 <input type="checkbox" id="lensFlareEnabled" /> 4827 <span class="effect-indicator" aria-hidden="true"></span> 4828 <span class="sr-only">Enable lens flare</span> 4829 </label> 4830 </div> 4831 </div> 4832 <div 4833 class="effect-foldout effect-foldout--collapsed effect-foldout--lg" 4834 data-effect-foldout="lens-flare" 4835 aria-hidden="true" 4836 > 4837 <label class="slider-line"> 4838 <span>Rotation</span> 4839 <input 4840 id="lensFlareRotation" 4841 type="range" 4842 min="0" 4843 max="360"
4844 value="0" 4845 step="1" 4846 /> 4847 <span class="value" data-output="lensFlareRotation">0°</span> 4848 </label> 4849 <label class="slider-line"> 4850 <span>Height</span> 4851 <input 4852 id="lensFlareHeight" 4853 type="range" 4854 min="0" 4855 max="90" 4856 value="15" 4857 step="1" 4858 /> 4859 <span class="value" data-output="lensFlareHeight">15°</span> 4860 </label> 4861 <label class="slider-line" data-tooltip="Push the rainbow halo brighter and wider"> 4862 <span>Halo</span> 4863 <input 4864 id="lensFlareHalo" 4865 type="range" 4866 min="0" 4867 max="5" 4868 value="1" 4869 step="0.05" 4870 /> 4871 <span class="value" data-output="lensFlareHalo">1.00Ã</span> 4872 </label> 4873 <label class="slider-line" data-tooltip="Shorten or lengthen the star rays from the flare"> 4874 <span>Streak Length</span> 4875 <input 4876 id="lensFlareStreakLength" 4877 type="range" 4878 min="0" 4879 max="10" 4880 value="5" 4881 step="0.1" 4882 /> 4883 <span class="value" data-output="lensFlareStreakLength">5.0</span> 4884 </label> 4885 <label class="color-line"> 4886 <span>Color</span> 4887 <input 4888 type="color" 4889 id="lensFlareColor" 4890 class="color-chip" 4891 value="#d28756" 4892 /> 4893 </label> 4894 <label class="slider-line" data-tooltip="Sun disc at the light source â eases out when occluded"> 4895 <span>Sun Disc Size</span> 4896 <input 4897 id="lensFlareSunDiscScale" 4898 type="range" 4899 min="0" 4900 max="10" 4901 value="1.5" 4902 step="0.1" 4903 /> 4904 <span class="value" data-output="lensFlareSunDiscScale">1.5</span> 4905 </label> 4906 <label class="slider-line" data-tooltip="0 = solid sharp disc, 5 = soft diffuse glow"> 4907 <span>Sun Disc Blur</span> 4908 <input 4909 id="lensFlareSunDiscBlur" 4910 type="range" 4911 min="0" 4912 max="5" 4913 value="1.25" 4914 step="0.1" 4915 /> 4916 <span class="value" data-output="lensFlareSunDiscBlur">1.25</span> 4917 </label> 4918 <label class="color-line"> 4919 <span>Sun Disc Color</span> 4920 <input 4921 type="color" 4922 id="lensFlareSunDiscColor" 4923 class="color-chip" 4924 value="#fff0c8" 4925 /> 4926 </label> 4927 <label class="slider-line" data-tooltip="Brightness of the soft glow around the sun"> 4928 <span>Glow Intensity</span> 4929 <input 4930 id="lensFlareDiscGlowIntensity" 4931 type="range" 4932 min="0" 4933 max="10" 4934 value="0" 4935 step="0.1" 4936 /> 4937 <span class="value" data-output="lensFlareDiscGlowIntensity">0</span> 4938 </label> 4939 <label class="slider-line" data-tooltip="How far the glow extends from the sun"> 4940 <span>Glow Size</span> 4941 <input 4942 id="lensFlareDiscGlowSize" 4943 type="range" 4944 min="0" 4945 max="10" 4946 value="5" 4947 step="0.1" 4948 />
4949 <span class="value" data-output="lensFlareDiscGlowSize">5</span> 4950 </label> 4951 <label class="color-line"> 4952 <span>Glow Color</span> 4953 <input 4954 type="color" 4955 id="lensFlareDiscGlowColor" 4956 class="color-chip" 4957 value="#ff8844" 4958 /> 4959 </label> 4960 <label class="select-line"> 4961 <span>Quality</span> 4962 <select id="lensFlareQuality" aria-label="Lens flare quality" data-tooltip="Lowers ghost/dirt sample counts â same look, less GPU work (not feature cutoffs)"> 4963 <option value="low">Low</option> 4964 <option value="medium">Medium</option> 4965 <option value="high" selected>High</option> 4966 <option value="ultra">Ultra</option> 4967 </select> 4968 </label> 4969 <div 4970 class="slider-line" 4971 data-tooltip="Animate flare streaks with iTime â only while camera auto-orbit is on (off by default)" 4972 > 4973 <span>Spin during orbit</span> 4974 <label class="effect-toggle"> 4975 <input type="checkbox" id="lensFlareSpinDuringOrbit" /> 4976 <span class="effect-indicator" aria-hidden="true"></span> 4977 <span class="sr-only">Animate lens flare streaks during camera auto-orbit</span> 4978 </label> 4979 </div> 4980 <button 4981 id="lensFlareKeyLightConnect" 4982 class="ghost-btn small" 4983 type="button" 4984 aria-pressed="false" 4985 data-tooltip="Match key-light direction to lens flare rotation and height" 4986 > 4987 Connect Key Light Position 4988 </button> 4989 </div> 4990 </div> 4991 <div class="panel-block-divider"></div> 4992 <div class="subsection" data-subsection="volumetric-scattering"> 4993 <div class="block-title has-toggle"> 4994 <span data-tooltip="Volumetric light rays â follows Lens Flare rotation and height (virtual sun mesh)">Light Rays</span> 4995 <div style="display: flex; align-items: center; gap: 0.5rem;"> 4996 <button class="block-reset-btn" data-reset="volumetric-scattering" aria-label="Reset Light Rays" data-tooltip="Reset Light Rays settings"> 4997 <i class="fa-solid fa-rotate-left"></i> 4998 <span class="sr-only">Reset</span> 4999 </button> 5000 <label class="effect-toggle" data-tooltip="Enable/disable light rays from the sun"> 5001 <input type="checkbox" id="godRaysEnabled" /> 5002 <span class="effect-indicator" aria-hidden="true"></span> 5003 <span class="sr-only">Enable Light Rays</span> 5004 </label> 5005 </div> 5006 </div> 5007 <div 5008 class="effect-foldout effect-foldout--collapsed effect-foldout--lg" 5009 data-effect-foldout="volumetric-scattering" 5010 aria-hidden="true" 5011 > 5012 <label class="color-line"> 5013 <span>Color</span> 5014 <input 5015 type="color" 5016 id="godRaysColor" 5017 class="color-chip" 5018 value="#ffe8c4" 5019 /> 5020 </label> 5021 <label 5022 class="slider-line" 5023 data-tooltip="Size of the virtual sun mesh that casts rays (1 = full default disc)" 5024 > 5025 <span>Sun size</span> 5026 <input 5027 id="godRaysLightScale" 5028 type="range" 5029 min="0.08" 5030 max="1.25"
5031 value="0.4" 5032 step="0.01" 5033 /> 5034 <span class="value" data-output="godRaysLightScale">0.4</span> 5035 </label> 5036 <label class="slider-line" data-tooltip="Overall opacity of the light rays composite"> 5037 <span>Opacity</span> 5038 <input 5039 id="godRaysOpacity" 5040 type="range" 5041 min="0" 5042 max="1" 5043 value="1" 5044 step="0.01" 5045 /> 5046 <span class="value" data-output="godRaysOpacity">1</span> 5047 </label> 5048 <label class="slider-line" data-tooltip="Ray density â higher reaches farther across the frame"> 5049 <span>Density</span> 5050 <input 5051 id="godRaysDensity" 5052 type="range" 5053 min="0" 5054 max="1" 5055 value="0.96" 5056 step="0.01" 5057 /> 5058 <span class="value" data-output="godRaysDensity">0.96</span> 5059 </label> 5060 <label class="slider-line" data-tooltip="Illumination decay along each ray sample (lower = faster falloff)"> 5061 <span>Decay</span> 5062 <input 5063 id="godRaysDecay" 5064 type="range" 5065 min="0" 5066 max="1" 5067 value="0.92" 5068 step="0.01" 5069 /> 5070 <span class="value" data-output="godRaysDecay">0.92</span> 5071 </label> 5072 <label class="slider-line" data-tooltip="Weight of each ray sample"> 5073 <span>Weight</span> 5074 <input 5075 id="godRaysWeight" 5076 type="range" 5077 min="0" 5078 max="1" 5079 value="0.4" 5080 step="0.01" 5081 /> 5082 <span class="value" data-output="godRaysWeight">0.4</span> 5083 </label> 5084 <label class="slider-line" data-tooltip="Exposure multiplier after radial blur"> 5085 <span>Exposure</span> 5086 <input 5087 id="godRaysExposure" 5088 type="range" 5089 min="0" 5090 max="2" 5091 value="0.6" 5092 step="0.01" 5093 /> 5094 <span class="value" data-output="godRaysExposure">0.6</span> 5095 </label> 5096 <label class="slider-line" data-tooltip="Maximum output intensity clamp"> 5097 <span>Clamp Max</span> 5098 <input 5099 id="godRaysClampMax" 5100 type="range" 5101 min="0" 5102 max="1" 5103 value="1" 5104 step="0.01" 5105 /> 5106 <span class="value" data-output="godRaysClampMax">1</span> 5107 </label> 5108 <div 5109 class="slider-line" 5110 data-tooltip="Blur the sun mask before radial blur (reduces artifacts)" 5111 > 5112 <span>Blur mask</span> 5113 <label class="effect-toggle"> 5114 <input type="checkbox" id="godRaysBlur" checked /> 5115 <span class="effect-indicator" aria-hidden="true"></span> 5116 <span class="sr-only">Blur sun mask before radial blur</span> 5117 </label> 5118 </div> 5119 <label class="select-line" data-tooltip="Resolution scale and sample count preset"> 5120 <span>Quality</span> 5121 <select id="godRaysQuality" aria-label="God rays quality"> 5122 <option value="low">Low</option> 5123 <option value="medium" selected>Medium</option> 5124 <option value="high">High</option> 5125 <option value="ultra">Ultra</option> 5126 </select> 5127 </label> 5128 </div> 5129 </div> 5130 <div class="panel-block-divider"></div> 5131 <div class="subsection" data-subsection="lens-dirt"> 5132 <div class="block-title has-toggle">
5133 <span>Lens Dirt</span> 5134 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5135 <button class="block-reset-btn" data-reset="lens-dirt" aria-label="Reset Lens Dirt" data-tooltip="Reset Lens Dirt settings"> 5136 <i class="fa-solid fa-rotate-left"></i> 5137 <span class="sr-only">Reset</span> 5138 </button> 5139 <label class="effect-toggle" data-tooltip="Enable/disable lens dirt overlay"> 5140 <input type="checkbox" id="lensDirtEnabled" /> 5141 <span class="effect-indicator" aria-hidden="true"></span> 5142 <span class="sr-only">Enable Lens Dirt</span> 5143 </label> 5144 </div> 5145 </div> 5146 <div 5147 class="effect-foldout effect-foldout--collapsed" 5148 data-effect-foldout="lens-dirt" 5149 aria-hidden="true" 5150 > 5151 <label class="slider-line"> 5152 <span>Strength</span> 5153 <input 5154 id="lensDirtStrength" 5155 type="range" 5156 min="0" 5157 max="1" 5158 step="0.01" 5159 value="0.8" 5160 /> 5161 <span class="value" data-output="lensDirtStrength">0.80</span> 5162 </label> 5163 <label 5164 class="color-line" 5165 data-tooltip="Multiplies the lens dirt texture. White keeps the original texture; pick a colour to match bright lights (e.g. cool blue)." 5166 > 5167 <span>Dirt tint</span> 5168 <input type="color" id="lensDirtTintColor" class="color-chip" value="#ffffff" /> 5169 </label> 5170 </div> 5171 </div> 5172 <div class="panel-block-divider"></div> 5173 <div class="subsection" data-subsection="grain"> 5174 <div class="block-title has-toggle"> 5175 <span>Grain</span> 5176 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5177 <button class="block-reset-btn" data-reset="grain" aria-label="Reset Grain" data-tooltip="Reset Grain settings"> 5178 <i class="fa-solid fa-rotate-left"></i> 5179 <span class="sr-only">Reset</span> 5180 </button> 5181 <label class="effect-toggle" data-tooltip="Enable/disable grain effect"> 5182 <input type="checkbox" id="toggleGrain" /> 5183 <span class="effect-indicator" aria-hidden="true"></span> 5184 <span class="sr-only">Enable Grain</span> 5185 </label> 5186 </div> 5187 </div> 5188 <div 5189 class="effect-foldout effect-foldout--collapsed" 5190 data-effect-foldout="grain" 5191 aria-hidden="true" 5192 > 5193 <label class="slider-line"> 5194 <span>Strength</span> 5195 <input 5196 id="grainIntensity" 5197 type="range" 5198 min="0" 5199 max="5" 5200 value="0.20" 5201 step="0.02" 5202 /> 5203 <span class="value" data-output="grainIntensity">0.20</span> 5204 </label> 5205 <label class="slider-line"> 5206 <span>Scale</span> 5207 <input 5208 id="grainScale" 5209 type="range" 5210 min="1" 5211 max="3" 5212 value="1" 5213 step="0.05" 5214 /> 5215 <span class="value" data-output="grainScale" data-format="multiplier">1.00Ã</span> 5216 </label> 5217 </div> 5218 </div> 5219 <div class="panel-block-divider"></div> 5220 <div class="subsection" data-subsection="vignette"> 5221 <div class="block-title has-toggle">
5222 <span>Vignette</span> 5223 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5224 <button class="block-reset-btn" data-reset="vignette" aria-label="Reset Vignette" data-tooltip="Reset Vignette settings"> 5225 <i class="fa-solid fa-rotate-left"></i> 5226 <span class="sr-only">Reset</span> 5227 </button> 5228 <label class="effect-toggle" data-tooltip="Enable/disable vignette darkening at frame edges"> 5229 <input type="checkbox" id="toggleVignette" /> 5230 <span class="effect-indicator" aria-hidden="true"></span> 5231 <span class="sr-only">Enable Vignette</span> 5232 </label> 5233 </div> 5234 </div> 5235 <div 5236 class="effect-foldout effect-foldout--collapsed" 5237 data-effect-foldout="vignette" 5238 aria-hidden="true" 5239 > 5240 <label class="slider-line"> 5241 <span>Strength</span> 5242 <input 5243 id="vignetteIntensity" 5244 type="range" 5245 min="0" 5246 max="1" 5247 value="0.5" 5248 step="0.01" 5249 /> 5250 <span class="value" data-output="vignetteIntensity">0.50</span> 5251 </label> 5252 <label class="color-line"> 5253 <span>Color</span> 5254 <input 5255 type="color" 5256 id="vignetteColor" 5257 class="color-chip" 5258 value="#080808" 5259 /> 5260 </label> 5261 </div> 5262 </div> 5263 <div class="panel-block-divider"></div> 5264 <div class="subsection" data-subsection="aberration"> 5265 <div class="block-title has-toggle"> 5266 <span>Chromatic Aberration</span> 5267 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5268 <button class="block-reset-btn" data-reset="aberration" aria-label="Reset Chromatic Aberration" data-tooltip="Reset Chromatic Aberration settings"> 5269 <i class="fa-solid fa-rotate-left"></i> 5270 <span class="sr-only">Reset</span> 5271 </button> 5272 <label class="effect-toggle" data-tooltip="Enable/disable chromatic aberration effect"> 5273 <input type="checkbox" id="toggleAberration" /> 5274 <span class="effect-indicator" aria-hidden="true"></span> 5275 <span class="sr-only">Enable Chromatic Aberration</span> 5276 </label> 5277 </div> 5278 </div> 5279 <div 5280 class="effect-foldout effect-foldout--collapsed" 5281 data-effect-foldout="aberration" 5282 aria-hidden="true" 5283 > 5284 <label class="slider-line"> 5285 <span data-tooltip="Overall radial red/blue channel separation magnitude.">Amount</span> 5286 <input 5287 id="aberrationAmount" 5288 type="range" 5289 min="0" 5290 max="0.02" 5291 value="0.0006" 5292 step="0.0001" 5293 /> 5294 <span class="value" data-output="aberrationAmount">0.0006</span> 5295 </label> 5296 <label class="slider-line"> 5297 <span data-tooltip="Radial smear along the color split â zoom-blur style streaks at the frame edges.">Blur</span> 5298 <input 5299 id="aberrationBlur" 5300 type="range" 5301 min="0" 5302 max="1" 5303 value="0" 5304 step="0.01" 5305 />
5306 <span class="value" data-output="aberrationBlur">0.00</span> 5307 </label> 5308 <label class="slider-line"> 5309 <span data-tooltip="How far aberration reaches toward the frame center. Higher = more spread.">Edge</span> 5310 <input 5311 id="aberrationFalloff" 5312 type="range" 5313 min="0.5" 5314 max="3" 5315 value="1" 5316 step="0.05" 5317 /> 5318 <span class="value" data-output="aberrationFalloff">1.00</span> 5319 </label> 5320 <label class="select-line"> 5321 <span data-tooltip="Blur streak sample count â higher tiers smooth heavy smear with more GPU taps.">Quality</span> 5322 <select id="aberrationQuality" aria-label="Chromatic aberration quality"> 5323 <option value="low">Low</option> 5324 <option value="medium" selected>Medium</option> 5325 <option value="high">High</option> 5326 <option value="ultra">Ultra</option> 5327 </select> 5328 </label> 5329 </div> 5330 </div> 5331 </div> 5332 5333 <div class="panel-block"> 5334 <div class="subsection" data-subsection="color-checker"> 5335 <div class="block-title has-toggle"> 5336 <span>ColorChecker</span> 5337 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5338 <button type="button" class="block-reset-btn" data-reset="color-checker" aria-label="Reset ColorChecker" data-tooltip="Reset ColorChecker placement"> 5339 <i class="fa-solid fa-rotate-left"></i> 5340 <span class="sr-only">Reset</span> 5341 </button> 5342 <label class="effect-toggle" data-tooltip="Show or hide the ColorChecker chart in the viewport"> 5343 <input type="checkbox" id="colorCheckerEnabled" /> 5344 <span class="effect-indicator" aria-hidden="true"></span> 5345 <span class="sr-only">Show ColorChecker chart</span> 5346 </label> 5347 </div> 5348 </div> 5349 <div 5350 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 5351 data-effect-foldout="color-checker" 5352 aria-hidden="true" 5353 > 5354 <button 5355 type="button" 5356 id="colorCheckerRawToggle" 5357 class="accent-action-btn color-checker-raw-toggle" 5358 aria-pressed="false" 5359 data-tooltip="Same as Display â Unlit on the Object tab: neutral mesh view for comparing grade + chart. Toggle off restores your previous display mode." 5360 > 5361 <i class="fa-solid fa-palette" aria-hidden="true"></i> 5362 <span class="color-checker-raw-toggle__label">Reference colors â Off</span> 5363 </button> 5364 <label class="slider-line"> 5365 <span data-tooltip="Radius of the orbit around the orbit target in the horizontal plane (scene units).">Distance</span> 5366 <input 5367 id="colorCheckerDistance" 5368 type="range" 5369 min="0.1" 5370 max="6" 5371 value="2" 5372 step="0.05" 5373 /> 5374 <span class="value" data-output="colorCheckerDistance">2.00m</span> 5375 </label> 5376 <label class="slider-line"> 5377 <span data-tooltip="Yaw around the vertical axis through the target â independent of Studio Lights and HDRI dome rotation.">Rotate</span> 5378 <input 5379 id="colorCheckerRotate" 5380 type="range" 5381 min="0" 5382 max="360" 5383 value="333" 5384 step="1" 5385 />
5386 <span class="value" data-output="colorCheckerRotate">333°</span> 5387 </label> 5388 <label class="slider-line"> 5389 <span data-tooltip="Lift above the ground/grid (chart base rests on the floor; positive values raise it further).">Height</span> 5390 <input 5391 id="colorCheckerHeight" 5392 type="range" 5393 min="-3" 5394 max="10" 5395 value="0.05" 5396 step="0.1" 5397 /> 5398 <span class="value" data-output="colorCheckerHeight">0.05m</span> 5399 </label> 5400 <label class="slider-line"> 5401 <span data-tooltip="Uniform size of the chart. Default matches a real ColorChecker (~356 mm) on import-normalized models (~2 m).">Scale</span> 5402 <input 5403 id="colorCheckerScale" 5404 type="range" 5405 min="0.02" 5406 max="4" 5407 value="0.055" 5408 step="0.01" 5409 /> 5410 <span class="value" data-output="colorCheckerScale">0.06Ã</span> 5411 </label> 5412 </div> 5413 </div> 5414 <div class="panel-block-divider"></div> 5415 <div class="subsection" data-subsection="composition-guides"> 5416 <div class="block-title has-toggle"> 5417 <span data-tooltip="Rule of thirds, center cross, diagonals, center circle, 90% action safe, and a centered square for shape-library thumbnail framing">Composition Guides</span> 5418 <label class="effect-toggle" data-tooltip="Show composition overlays in the viewport"> 5419 <input type="checkbox" id="compositionGridEnabled" /> 5420 <span class="effect-indicator" aria-hidden="true"></span> 5421 <span class="sr-only">Show composition guides</span> 5422 </label> 5423 </div> 5424 <div 5425 class="effect-foldout effect-foldout--collapsed" 5426 data-effect-foldout="composition-guides" 5427 aria-hidden="true" 5428 > 5429 <label class="select-line"> 5430 <span data-tooltip="Light lines suit dark footage; dark lines suit bright scenes.">Colour</span> 5431 <select id="compositionGuidesColor" aria-label="Composition guides colour"> 5432 <option value="light">Light</option> 5433 <option value="dark">Dark</option> 5434 </select> 5435 </label> 5436 </div> 5437 </div> 5438 <div class="panel-block-divider"></div> 5439 <div class="subsection" data-subsection="cinematic-letterbox"> 5440 <div class="block-title has-toggle"> 5441 <span data-tooltip="Black bars matting the viewport to a 21â¶9 picture area (common on 16â¶9 displays). Opaque PNG exports include these mattes when enabled; export pixel size is unchanged.">21â¶9 Letterbox</span> 5442 <label class="effect-toggle" data-tooltip="Show cinematic widescreen mattes in the viewport"> 5443 <input type="checkbox" id="cinematicLetterbox219" /> 5444 <span class="effect-indicator" aria-hidden="true"></span> 5445 <span class="sr-only">Show 21â¶9 Letterbox</span> 5446 </label> 5447 </div> 5448 </div> 5449 </div> 5450 5451 <div class="panel-block panel-block--compact-head"> 5452 <div class="block-title"> 5453 <span>Quality</span> 5454 </div> 5455 <label class="select-line"> 5456 <span data-tooltip="Low: no bloom, no depth of field, no FXAA, plus 1K shadows and 1à DPR â your settings stay saved. Medium: lower DPR, 1K shadows, half-res bloom (depth of field still works if on). Ultra: full quality.">Render Quality</span> 5457 <select id="renderQuality" aria-label="Render Quality"> 5458 <option value="low">Low</option> 5459 <option value="medium" selected>Medium</option> 5460 <option value="max">Ultra</option> 5461 </select> 5462 </label> 5463 <label class="select-line">
5464 <span>Anti-Aliasing</span> 5465 <select id="antiAliasing" aria-label="Anti-aliasing"> 5466 <option value="none">None</option> 5467 <option value="fxaa" selected>FXAA</option> 5468 </select> 5469 </label> 5470 <label class="select-line"> 5471 <span>Tone Mapping</span> 5472 <select id="toneMapping" aria-label="Tone mapping"> 5473 <option value="none">None</option> 5474 <option value="reinhard">Reinhard</option> 5475 <option value="aces-filmic" selected>ACES Filmic</option> 5476 </select> 5477 </label> 5478 </div> 5479 5480 <div class="panel-block export-block" style="display: none;"> 5481 <button id="exportImageLegacy" class="accent-action-btn" data-tooltip="Export current view as image"> 5482 <i class="fa-solid fa-download"></i> 5483 Export image 5484 </button> 5485 </div> 5486 5487 <div class="panel-block"> 5488 <div class="block-title">Scene</div> 5489 <div class="export-controls"> 5490 <button id="resetRenderSettings" class="accent-action-btn" data-tooltip="Reset all camera settings to defaults"> 5491 <i class="fa-solid fa-rotate-left"></i> 5492 Reset Camera 5493 </button> 5494 <button class="reset-scene accent-action-btn" data-tooltip="Clear the workspace and restore a blank canvas"> 5495 <i class="fa-solid fa-arrow-left"></i> 5496 Reset Scene 5497 </button> 5498 <button class="copy-scene-settings accent-action-btn" data-tooltip="Copy all scene settings to clipboard"> 5499 <i class="fa-solid fa-copy"></i> 5500 Copy Scene Settings 5501 </button> 5502 <button class="load-scene-settings accent-action-btn" data-tooltip="Paste scene settings from clipboard into a dialog"> 5503 <i class="fa-solid fa-upload"></i> 5504 Paste Scene Settings 5505 </button> 5506 <button class="save-orby-scene accent-action-btn" data-tooltip="Save entire scene and model as .orby file"> 5507 <i class="fa-solid fa-floppy-disk"></i> 5508 Save .orby Scene 5509 </button> 5510 <button class="load-orby-scene accent-action-btn" data-tooltip="Load entire scene and model from .orby file"> 5511 <i class="fa-solid fa-file-import"></i> 5512 Load .orby Scene 5513 </button> 5514 </div> 5515 </div> 5516 <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div> 5517 <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home"> 5518 <img src="./assets/images/favicon.svg" width="28" height="28" alt="" /> 5519 </button> 5520 </section> 5521 5522 <h2 class="panel-header-title" data-header="export">Export</h2> 5523 <section class="panel" data-panel="export"> 5524 <div class="panel-block" data-export-section="image"> 5525 <div class="block-title has-toggle"> 5526 <span>Image</span> 5527 <label class="effect-toggle" data-tooltip="Show Image export options"> 5528 <input type="checkbox" id="exportImageSectionOpen" /> 5529 <span class="effect-indicator" aria-hidden="true"></span> 5530 <span class="sr-only">Show Image export options</span> 5531 </label> 5532 </div> 5533 <div 5534 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 5535 data-export-foldout="image" 5536 aria-hidden="true" 5537 > 5538 <p class="export-format-sub"> 5539 Raster snapshot of the current viewâlighting, materials, and post effects included. Choose PNG, JPEG, or WebP; toggle transparency when the format supports it. Size is relative to the viewerâ1à matches your current screen resolution, 2à exports at double that (larger file, more detail). 5540 </p>
5541 <div class="export-controls"> 5542 <div class="export-option-group"> 5543 <span class="export-label">Format</span> 5544 <div class="export-button-group export-button-group--triple"> 5545 <button type="button" data-export-image-format="png" class="export-option-btn active" data-tooltip="Lossless PNG with optional transparency">.PNG</button> 5546 <button type="button" data-export-image-format="jpeg" class="export-option-btn" data-tooltip="Smaller JPEG â no transparency">.JPEG</button> 5547 <button type="button" data-export-image-format="webp" class="export-option-btn" data-tooltip="WebP with optional transparency">.WEBP</button> 5548 </div> 5549 </div> 5550 <div id="exportImageTransparentSettings" class="export-option-group"> 5551 <span class="export-label">Transparent</span> 5552 <div class="export-button-group"> 5553 <button type="button" data-export-transparent="false" class="export-option-btn" data-tooltip="Export with solid background">NO</button> 5554 <button type="button" data-export-transparent="true" class="export-option-btn active" data-tooltip="Export with transparent background">YES</button> 5555 </div> 5556 </div> 5557 <div id="exportImageTransparentFraming" class="export-image-transparent-framing is-muted"> 5558 <div class="export-option-group"> 5559 <span class="export-label">Framing</span> 5560 <div class="export-button-group"> 5561 <button type="button" data-export-transparent-framing="crop" class="export-option-btn active" data-tooltip="Trim empty pixels around the mesh â best for stickers and compositing">CROP TO ASSET</button> 5562 <button type="button" data-export-transparent-framing="full" class="export-option-btn" data-tooltip="Keep the viewport canvas with transparent margins â best for overlays and motion graphics">FULL FRAME</button> 5563 </div> 5564 </div> 5565 </div> 5566 <div class="export-option-group"> 5567 <span class="export-label">Size</span> 5568 <div class="export-button-group"> 5569 <button data-export-size="1" class="export-option-btn" data-tooltip="Export at 1Ã resolution">1X</button> 5570 <button data-export-size="2" class="export-option-btn active" data-tooltip="Export at 2Ã resolution (higher quality)">2X</button> 5571 </div> 5572 </div> 5573 <button id="exportImageButton" class="accent-action-btn" data-tooltip="Export current view as image"> 5574 <i class="fa-solid fa-download"></i> 5575 <span class="export-image-btn-label">Export .PNG</span> 5576 </button> 5577 </div> 5578 </div> 5579 </div> 5580 5581 <div class="panel-block" data-export-section="svg"> 5582 <div class="block-title has-toggle"> 5583 <span>SVG</span> 5584 <label class="effect-toggle" data-tooltip="Show SVG export options"> 5585 <input type="checkbox" id="exportSvgSectionOpen" /> 5586 <span class="effect-indicator" aria-hidden="true"></span> 5587 <span class="sr-only">Show SVG export options</span> 5588 </label> 5589 </div> 5590 <div 5591 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 5592 data-export-foldout="svg" 5593 aria-hidden="true" 5594 > 5595 <p class="export-format-sub"> 5596 Vector output derived from the current framingâgreat for logos, precision edges, and scaling without pixels. Silhouette traces a single outline; Color builds flat filled regions from the render. 5597 </p> 5598 <label class="select-line">
5599 <span data-tooltip="Low: fewer colors and coarser paths (smaller files). Medium: balanced. High: maximum colors and trace detail (larger files).">Detail Level</span> 5600 <select id="exportSvgColorDetail" aria-label="SVG export detail level"> 5601 <option value="low">Low</option> 5602 <option value="medium">Medium</option> 5603 <option value="high" selected>High</option> 5604 </select> 5605 </label> 5606 <div class="export-controls"> 5607 <button id="exportSvgButton" class="accent-action-btn" data-tooltip="Export silhouette as vector SVG"> 5608 <i class="fa-solid fa-draw-polygon"></i> 5609 Export .SVG (Silhouette) 5610 </button> 5611 <button id="exportSvgColorButton" class="accent-action-btn" data-tooltip="Export flat-color vector SVG using the detail level above"> 5612 <i class="fa-solid fa-palette"></i> 5613 Export .SVG (Color) 5614 </button> 5615 </div> 5616 </div> 5617 </div> 5618 5619 <div class="panel-block" data-export-section="glb"> 5620 <div class="block-title has-toggle"> 5621 <span>GLB</span> 5622 <label class="effect-toggle" data-tooltip="Show GLB export options"> 5623 <input type="checkbox" id="exportGlbSectionOpen" /> 5624 <span class="effect-indicator" aria-hidden="true"></span> 5625 <span class="sr-only">Show GLB export options</span> 5626 </label> 5627 </div> 5628 <div 5629 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 5630 data-export-foldout="glb" 5631 aria-hidden="true" 5632 > 5633 <p class="export-format-sub"> 5634 Export a .GLB for other 3D tools and AR â from an imported SVG extrusion, or from Shader Lab <strong>PS2 Crush</strong>, <strong>PSX</strong>, or <strong>VGA/DOS 3D</strong> (with the look applied). Tip: dial in extrusion or Shader Lab before exporting. 5635 </p> 5636 <div class="export-controls"> 5637 <button id="exportSvgGlbButton" class="accent-action-btn" data-tooltip="Export .GLB â SVG extrusion, or Shader Lab PS2 Crush / PSX / VGA with the look applied"> 5638 <i class="fa-solid fa-cube"></i> 5639 Export .GLB 5640 </button> 5641 </div> 5642 </div> 5643 </div> 5644 <div class="panel-block" data-export-section="video"> 5645 <div class="block-title has-toggle"> 5646 <span>Video</span> 5647 <label class="effect-toggle" data-tooltip="Show Video export options"> 5648 <input type="checkbox" id="exportVideoSectionOpen" /> 5649 <span class="effect-indicator" aria-hidden="true"></span> 5650 <span class="sr-only">Show Video export options</span> 5651 </label> 5652 </div> 5653 <div 5654 class="effect-foldout effect-foldout--collapsed effect-foldout--xl" 5655 data-export-foldout="video" 5656 aria-hidden="true" 5657 > 5658 <p class="export-format-sub"> 5659 Combine object turntable, camera orbit/dolly/roll, and optional HDRI rotation. 5660 </p> 5661 <p class="export-format-sub export-format-warning"> 5662 MP4 is a real-time viewport capture, not an offline render. Heavier scenes may drop frames or failâbest for previews and lighter setups. For dependable output, export a PNG sequence. 5663 </p> 5664 <div class="export-controls"> 5665 <div class="block-title export-section-title">Object</div> 5666 <div id="exportVideoObjectGroup" class="export-option-group export-video-object-group"> 5667 <div class="export-button-group"> 5668 <button type="button" data-video-movement="turntable" class="export-option-btn active" data-tooltip="Rotate the mesh in place over the export length">TURNTABLE</button> 5669 </div>
5670 <span class="export-label">Laps</span> 5671 <div class="export-button-group export-button-group--triple"> 5672 <button type="button" data-video-object-spins="0" class="export-option-btn" data-tooltip="No full 360° mesh rotation â use arc below for partial turns">0</button> 5673 <button type="button" data-video-object-spins="1" class="export-option-btn active" data-tooltip="One full mesh rotation over the export length">1</button> 5674 <button type="button" data-video-object-spins="2" class="export-option-btn" data-tooltip="Two full mesh rotations over the same duration">2</button> 5675 </div> 5676 <span class="export-label">Arc</span> 5677 <div id="exportObjectArcGroup" class="export-button-group export-button-group--triple"> 5678 <button type="button" data-video-object-arc="22.5" class="export-option-btn" data-tooltip="Partial 22.5° mesh rotation when laps is 0">22.5°</button> 5679 <button type="button" data-video-object-arc="45" class="export-option-btn" data-tooltip="Partial 45° mesh rotation when laps is 0">45°</button> 5680 <button type="button" data-video-object-arc="90" class="export-option-btn" data-tooltip="Partial 90° mesh rotation when laps is 0">90°</button> 5681 </div> 5682 <span class="export-label">Direction</span> 5683 <div class="export-button-group"> 5684 <button type="button" data-video-object-direction="reverse" class="export-option-btn" data-tooltip="Opposite mesh rotation direction">REVERSE</button> 5685 <button type="button" data-video-object-direction="forward" class="export-option-btn active" data-tooltip="Default mesh rotation direction">FORWARD</button> 5686 </div> 5687 </div> 5688 <div class="panel-block-divider" aria-hidden="true"></div> 5689 <div class="block-title export-section-title">Camera</div> 5690 <div class="export-option-group export-video-camera-group"> 5691 <div class="export-button-group"> 5692 <button type="button" data-video-movement="orbit" class="export-option-btn" data-tooltip="Orbit around your current target over the export length">ORBIT</button> 5693 </div> 5694 <span class="export-label">Orbit Laps</span> 5695 <div class="export-button-group export-button-group--triple"> 5696 <button type="button" data-video-camera-spins="0" class="export-option-btn" data-tooltip="No full 360° camera orbit â use arc below for partial moves">0</button> 5697 <button type="button" data-video-camera-spins="1" class="export-option-btn active" data-tooltip="One full camera orbit over the export length">1</button> 5698 <button type="button" data-video-camera-spins="2" class="export-option-btn" data-tooltip="Two full camera orbits over the same duration">2</button> 5699 </div> 5700 <span class="export-label">Orbit Arc</span> 5701 <div id="exportCameraArcGroup" class="export-button-group export-button-group--triple"> 5702 <button type="button" data-video-camera-arc="22.5" class="export-option-btn" data-tooltip="Partial 22.5° camera orbit when orbit laps is 0">22.5°</button> 5703 <button type="button" data-video-camera-arc="45" class="export-option-btn" data-tooltip="Partial 45° camera orbit when orbit laps is 0">45°</button> 5704 <button type="button" data-video-camera-arc="90" class="export-option-btn" data-tooltip="Partial 90° camera orbit when orbit laps is 0">90°</button> 5705 </div> 5706 <span class="export-label">Orbit Direction</span> 5707 <div class="export-button-group"> 5708 <button type="button" data-video-camera-direction="reverse" class="export-option-btn" data-tooltip="Opposite camera orbit direction">REVERSE</button> 5709 <button type="button" data-video-camera-direction="forward" class="export-option-btn active" data-tooltip="Default camera orbit direction">FORWARD</button> 5710 </div> 5711 <div class="export-button-group"> 5712 <button type="button" data-video-movement="zoom-in" class="export-option-btn" data-tooltip="Dolly toward the orbit target over the export length">ZOOM IN</button> 5713 <button type="button" data-video-movement="zoom-out" class="export-option-btn" data-tooltip="Dolly away from the orbit target over the export length">ZOOM OUT</button> 5714 </div> 5715 <div class="export-button-group"> 5716 <button type="button" data-video-movement="tilt-left" class="export-option-btn" data-tooltip="Roll left (counter-clockwise) over the export length">ROLL LEFT</button> 5717 <button type="button" data-video-movement="tilt-right" class="export-option-btn" data-tooltip="Roll right (clockwise) over the export length">ROLL RIGHT</button> 5718 </div> 5719 <div id="exportMovementSliders" class="export-video-camera-sliders"> 5720 <label id="exportZoomDistanceSettings" class="slider-line">
5721 <span data-tooltip="Camera: how far the camera dollies in or out over the export length (scene units).">Zoom distance</span> 5722 <input 5723 id="exportZoomDistance" 5724 type="range" 5725 min="0.1" 5726 max="6" 5727 value="1.5" 5728 step="0.05" 5729 /> 5730 <span class="value" data-output="exportZoomDistance">1.50m</span> 5731 </label> 5732 <label id="exportTiltAngleSettings" class="slider-line"> 5733 <span data-tooltip="Camera: roll angle applied over the export length (degrees).">Roll angle</span> 5734 <input 5735 id="exportTiltAngle" 5736 type="range" 5737 min="0" 5738 max="180" 5739 value="15" 5740 step="1" 5741 /> 5742 <span class="value" data-output="exportTiltAngle">15°</span> 5743 </label> 5744 <label id="exportFovOffsetSettings" class="slider-line"> 5745 <span data-tooltip="Camera: animate field of view linearly over the export length. Center = no change; left narrows (telephoto), right widens (wide-angle).">FOV animation</span> 5746 <input 5747 id="exportFovOffset" 5748 type="range" 5749 min="-40" 5750 max="40" 5751 value="0" 5752 step="1" 5753 /> 5754 <span class="value" data-output="exportFovOffset">0°</span> 5755 </label> 5756 <label id="exportPitchOffsetSettings" class="slider-line"> 5757 <span data-tooltip="Camera: pivot up or down on the orbit target over the export length â like nodding your head. Center = no change; right tilts up, left tilts down.">Pitch animation</span> 5758 <input 5759 id="exportPitchOffset" 5760 type="range" 5761 min="-90" 5762 max="90" 5763 value="0" 5764 step="1" 5765 /> 5766 <span class="value" data-output="exportPitchOffset">0°</span> 5767 </label> 5768 </div> 5769 </div> 5770 <div class="block-title export-section-title" data-tooltip="One curve for the whole clip â object spin, camera moves, FOV, and pitch.">Timing</div> 5771 <div class="export-option-group export-video-timing-group"> 5772 <label id="exportMovementEasingFamilyLine" class="select-line"> 5773 <span data-tooltip="Linear is default for turntables; ease out suits camera dollies and orbits.">Easing</span> 5774 <select id="exportMovementEasingFamily" aria-label="Export timing easing curve"> 5775 <option value="linear" selected>Linear</option> 5776 <option value="sine">Sine</option> 5777 <option value="quad">Quad</option> 5778 <option value="cubic">Cubic</option> 5779 <option value="quart">Quart</option> 5780 <option value="quint">Quint</option> 5781 <option value="expo">Expo</option> 5782 <option value="circ">Circ</option> 5783 </select> 5784 </label> 5785 <label id="exportMovementEasingTypeLine" class="select-line is-muted"> 5786 <span data-tooltip="Ease in accelerates from rest; ease out decelerates into the end of the clip; in-out blends both.">Type</span> 5787 <select id="exportMovementEasingType" aria-label="Export timing easing type" disabled> 5788 <option value="in">In</option> 5789 <option value="out" selected>Out</option> 5790 <option value="inOut">In-out</option> 5791 </select> 5792 </label> 5793 </div>
5794 <div class="export-video-preview-actions scene-controls"> 5795 <button 5796 type="button" 5797 id="exportVideoCameraSaveButton" 5798 class="accent-action-btn export-video-camera-btn" 5799 data-tooltip="Remember this camera framing for this session (position, target, and roll)" 5800 > 5801 <i class="fa-solid fa-floppy-disk" aria-hidden="true"></i> 5802 <span>Save Camera Position</span> 5803 </button> 5804 <button 5805 type="button" 5806 id="exportVideoCameraRestoreButton" 5807 class="accent-action-btn export-video-camera-btn" 5808 disabled 5809 data-tooltip="Restore the camera framing you saved this session" 5810 > 5811 <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> 5812 <span>Restore Camera Position</span> 5813 </button> 5814 </div> 5815 <div id="exportMeshAnimationsSettings" class="export-option-group" hidden> 5816 <label class="select-line"> 5817 <span data-tooltip="GLB clip baked into export and preview timeline. Off: static mesh in the export file; preview keeps live studio playback.">GLB animation</span> 5818 <select id="exportMeshAnimationSelect" aria-label="GLB animation for export"></select> 5819 </label> 5820 <div id="exportMeshMatchDurationWrap" class="slider-line" hidden> 5821 <span data-tooltip="Set export length to the selected clip duration. Length presets (5s / 10s / 15s) are ignored while this is on.">Match export length to clip</span> 5822 <label class="effect-toggle"> 5823 <input type="checkbox" id="exportMeshMatchDurationToClip" /> 5824 <span class="effect-indicator" aria-hidden="true"></span> 5825 <span class="sr-only">Match export length to selected GLB clip</span> 5826 </label> 5827 </div> 5828 <div id="exportMeshSyncCameraWrap" class="slider-line" hidden> 5829 <span data-tooltip="When off, camera and turntable moves keep your Length preset timing while the clip plays at normal speed over the export.">Sync camera move to duration</span> 5830 <label class="effect-toggle"> 5831 <input type="checkbox" id="exportMeshSyncCameraToDuration" checked /> 5832 <span class="effect-indicator" aria-hidden="true"></span> 5833 <span class="sr-only">Sync camera and turntable to export duration</span> 5834 </label> 5835 </div> 5836 </div> 5837 <div class="panel-block-divider" aria-hidden="true"></div> 5838 <div class="block-title export-section-title">Output</div> 5839 <div class="export-option-group"> 5840 <span class="export-label">Format</span> 5841 <div class="export-button-group"> 5842 <button data-video-format="mp4" class="export-option-btn active" data-tooltip="Encoded .MP4 export">.MP4</button> 5843 <button data-video-format="png" class="export-option-btn" data-tooltip="Numbered PNG sequence">.PNG</button> 5844 </div> 5845 </div> 5846 <div id="exportPngTransparentSettings" class="export-png-transparent is-muted"> 5847 <div class="export-option-group"> 5848 <span class="export-label">Transparent</span> 5849 <div class="export-button-group"> 5850 <button type="button" data-video-mov-transparent="false" class="export-option-btn active" disabled data-tooltip="Solid background">NO</button> 5851 <button type="button" data-video-mov-transparent="true" class="export-option-btn is-disabled" disabled data-tooltip="Transparent PNG sequence for compositing">YES</button> 5852 </div> 5853 </div> 5854 </div> 5855 <div id="exportVideoTransparentFraming" class="export-video-transparent-framing is-muted"> 5856 <div class="export-option-group">
5857 <span class="export-label">Framing</span> 5858 <div class="export-button-group"> 5859 <button type="button" data-export-transparent-framing="crop" class="export-option-btn active" data-tooltip="Trim empty pixels around the mesh â best for stickers and compositing">CROP TO ASSET</button> 5860 <button type="button" data-export-transparent-framing="full" class="export-option-btn" data-tooltip="Keep the export canvas with transparent margins â best for overlays and motion graphics">FULL FRAME</button> 5861 </div> 5862 </div> 5863 </div> 5864 <div id="exportPngFolderSettings" class="export-png-folder is-muted"> 5865 <div class="export-option-group"> 5866 <span class="export-label">Output folder</span> 5867 <div class="export-path-row"> 5868 <button type="button" id="exportPngFolderChoose" class="export-option-btn export-path-choose" data-tooltip="Choose a folder â frames write directly to disk (Chrome / Edge; Safari and Firefox use ZIP)">Chooseâ¦</button> 5869 <span id="exportPngFolderLabel" class="export-path-label">No folder â downloads as ZIP</span> 5870 </div> 5871 </div> 5872 </div> 5873 <div id="exportMp4Settings" class="export-video-foldout export-video-foldout--borderless"> 5874 <div class="export-option-group"> 5875 <span class="export-label">Quality</span> 5876 <div class="export-button-group export-button-group--triple"> 5877 <button data-video-mp4-quality="low" class="export-option-btn" data-tooltip="Smaller file, lower quality">LOW</button> 5878 <button data-video-mp4-quality="medium" class="export-option-btn active" data-tooltip="Balanced quality and size">MEDIUM</button> 5879 <button data-video-mp4-quality="high" class="export-option-btn" data-tooltip="Higher quality, larger file">HIGH</button> 5880 </div> 5881 </div> 5882 </div> 5883 <div id="exportVideoLengthGroup" class="export-option-group"> 5884 <span class="export-label">Length</span> 5885 <div class="export-button-group export-button-group--triple"> 5886 <button data-video-duration="5" class="export-option-btn active" data-tooltip="5 second export duration">5s</button> 5887 <button data-video-duration="10" class="export-option-btn" data-tooltip="10 second export duration">10s</button> 5888 <button data-video-duration="15" class="export-option-btn" data-tooltip="15 second export duration">15s</button> 5889 </div> 5890 <span id="exportVideoLengthClipHint" class="export-length-clip-hint" hidden></span> 5891 </div> 5892 <div class="export-option-group"> 5893 <span class="export-label">FPS</span> 5894 <div class="export-button-group export-button-group--triple"> 5895 <button data-video-fps="24" class="export-option-btn" data-tooltip="Cinematic motion">24</button> 5896 <button data-video-fps="30" class="export-option-btn active" data-tooltip="Smoother standard video">30</button> 5897 <button data-video-fps="60" class="export-option-btn" data-tooltip="Very smooth motion, larger files">60</button> 5898 </div> 5899 </div> 5900 <div class="export-option-group"> 5901 <span class="export-label">Resolution</span> 5902 <div class="export-button-group export-button-group--triple"> 5903 <button data-video-resolution="1080p" class="export-option-btn active" data-tooltip="1920 à 1080">1080p</button> 5904 <button data-video-resolution="1440p" class="export-option-btn" data-tooltip="2560 à 1440">1440p</button>
5905 <button data-video-resolution="2160p" class="export-option-btn" data-tooltip="3840 Ã 2160 (4K). Heavy encode; some browsers may fall back.">2160p</button> 5906 </div> 5907 </div> 5908 <button 5909 id="exportVideoCapturePreviewButton" 5910 class="accent-action-btn" 5911 data-tooltip="Render one offline frame at export resolution (same path as PNG encode). Uses preview scrub time when preview is active." 5912 > 5913 <i class="fa-solid fa-camera"></i> 5914 Capture preview frame 5915 </button> 5916 <div class="export-capture-preview-thumb" id="exportCapturePreviewThumbWrap"> 5917 <div class="export-capture-preview-thumb-frame"> 5918 <img id="exportCapturePreviewThumb" alt="Last export capture preview" hidden /> 5919 <div class="export-capture-preview-thumb-empty" id="exportCapturePreviewThumbEmpty"> 5920 <i class="fa-solid fa-eye" aria-hidden="true"></i> 5921 <span>Capture a preview frame to see it here</span> 5922 </div> 5923 </div> 5924 <span class="export-capture-preview-thumb-label" id="exportCapturePreviewThumbLabel"></span> 5925 </div> 5926 <button id="exportVideoButton" class="accent-action-btn" data-tooltip="Export MP4 or PNG sequence. For long PNG exports, choose an output folder to write frames directly to disk."> 5927 <i class="fa-solid fa-film"></i> 5928 Export Video 5929 </button> 5930 </div> 5931 </div> 5932 </div> 5933 5934 <div class="panel-block" data-export-section="watermark"> 5935 <div class="block-title has-toggle"> 5936 <span>Logotype & Credit</span> 5937 <div style="display: flex; align-items: center; gap: 0.5rem;"> 5938 <button class="block-reset-btn" id="watermarkResetBtn" aria-label="Reset logotype and credit" data-tooltip="Reset logotype and credit settings"> 5939 <i class="fa-solid fa-rotate-left"></i> 5940 <span class="sr-only">Reset</span> 5941 </button> 5942 <label class="effect-toggle" data-tooltip="Add a logotype and credit line to the viewport and exports"> 5943 <input type="checkbox" id="exportWatermarkSectionOpen" /> 5944 <span class="effect-indicator" aria-hidden="true"></span> 5945 <span class="sr-only">Toggle logotype and credit</span> 5946 </label> 5947 </div> 5948 </div> 5949 <div 5950 class="effect-foldout effect-foldout--collapsed effect-foldout--md" 5951 data-export-foldout="watermark" 5952 aria-hidden="true" 5953 > 5954 <div class="export-controls"> 5955 <div class="export-option-group"> 5956 <span class="export-label">Logotype</span> 5957 <div class="export-button-group"> 5958 <button type="button" data-watermark-logo="orby" class="export-option-btn active" data-tooltip="Use the Orby mark">Orby</button> 5959 <button type="button" id="watermarkCustomBtn" data-watermark-logo="custom" class="export-option-btn watermark-custom-btn" data-tooltip="Upload your own SVG logotype">Custom</button> 5960 </div> 5961 <input type="file" id="watermarkCustomFile" name="watermarkCustomFile" class="sr-only" accept=".svg,image/svg+xml" aria-label="Custom watermark SVG file" /> 5962 </div> 5963 <label class="slider-line"> 5964 <span data-tooltip="Scale the logotype up or down">Logotype Scale</span> 5965 <input id="watermarkLogoScale" type="range" min="50" max="200" step="1" value="100" /> 5966 <span class="value" data-output="watermarkLogoScale">100%</span> 5967 </label> 5968 <label class="color-line">
5969 <span data-tooltip="Tint the logotype">Logotype Color</span> 5970 <input type="color" id="watermarkLogoColor" class="color-chip" value="#c4ff00" /> 5971 </label> 5972 <div class="export-option-group"> 5973 <span class="export-label">Placement</span> 5974 <div class="export-button-group"> 5975 <button type="button" data-watermark-placement="left" class="export-option-btn active" data-tooltip="Logotype bottom-left, credit bottom-right">LEFT</button> 5976 <button type="button" data-watermark-placement="right" class="export-option-btn" data-tooltip="Logotype bottom-right, credit bottom-left">RIGHT</button> 5977 </div> 5978 </div> 5979 <div class="slider-line"> 5980 <span data-tooltip="Show a credit line on the opposite side of the logotype">Credit</span> 5981 <label class="effect-toggle"> 5982 <input type="checkbox" id="watermarkCreditEnabled" /> 5983 <span class="effect-indicator" aria-hidden="true"></span> 5984 <span class="sr-only">Toggle credit text</span> 5985 </label> 5986 </div> 5987 <div class="effect-foldout effect-foldout--collapsed watermark-credit-foldout" data-watermark-credit-foldout hidden aria-hidden="true"> 5988 <input 5989 type="text" 5990 id="watermarkCredit" 5991 class="watermark-credit-input" 5992 maxlength="160" 5993 placeholder="Credit, name, or © line" 5994 value="" 5995 autocomplete="off" 5996 spellcheck="false" 5997 aria-label="Credit text" 5998 data-tooltip="Credit, name, or legal text shown opposite the logotype" 5999 /> 6000 <label class="slider-line"> 6001 <span data-tooltip="Scale the credit text up or down">Credit Scale</span> 6002 <input id="watermarkCreditScale" type="range" min="50" max="200" step="1" value="100" /> 6003 <span class="value" data-output="watermarkCreditScale">100%</span> 6004 </label> 6005 <label class="color-line"> 6006 <span data-tooltip="Credit text color">Credit Color</span> 6007 <input type="color" id="watermarkCreditColor" class="color-chip" value="#ffffff" /> 6008 </label> 6009 </div> 6010 </div> 6011 </div> 6012 </div> 6013 6014 <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div> 6015 <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home"> 6016 <img src="./assets/images/favicon.svg" width="28" height="28" alt="" /> 6017 </button> 6018 </section> 6019 6020 <section class="panel" data-panel="info"> 6021 <!-- Logotype Animation --> 6022 <div class="info-logotype-container"> 6023 <div id="infoLogotypeAnimation" class="info-logotype"></div> 6024 </div> 6025 6026 <div class="panel-block info-panel-block info-panel-block--compact bug-report-panel-block" id="info-bug-report"> 6027 <div class="block-title"> 6028 <i class="fa-solid fa-circle-exclamation" style="display: inline-block; vertical-align: -0.125em; margin-right: 0.5rem; color: var(--accent);"></i> 6029 Report An Issue 6030 </div> 6031 <p class="bug-report-panel-description"> 6032 Spotted something wrong? Use the quick form here or the full 6033 <a href="./support/#report-issue" class="about-highlight" target="_blank" rel="noopener noreferrer">Support page</a> 6034 for troubleshooting and reports. We canât reply, but we read everything you send. 6035 </p> 6036 <button type="button" class="bug-report-panel-open accent-action-btn" data-bug-report-open> 6037 <i class="fa-solid fa-paper-plane" aria-hidden="true"></i> 6038 Tell us what happened 6039 </button> 6040 </div> 6041 6042 <div class="panel-block info-panel-block info-panel-block--compact" id="info-sounds"> 6043 <div class="block-title has-toggle">
6044 <span> 6045 <i class="fa-solid fa-volume-high" style="display: inline-block; vertical-align: -0.125em; margin-right: 0.5rem; color: var(--accent);"></i> 6046 UI Sounds 6047 </span> 6048 <div style="display: flex; align-items: center; gap: 0.5rem;"> 6049 <label class="effect-toggle"> 6050 <input type="checkbox" id="uiSoundsEnabled" checked /> 6051 <span class="effect-indicator" aria-hidden="true"></span> 6052 <span class="sr-only">UI sounds on</span> 6053 </label> 6054 </div> 6055 </div> 6056 <label class="slider-line"> 6057 <span>Volume</span> 6058 <input 6059 id="uiSoundsVolume" 6060 type="range" 6061 min="0" 6062 max="100" 6063 step="1" 6064 value="100" 6065 /> 6066 <span class="value" data-output="uiSoundsVolume">100%</span> 6067 </label> 6068 </div> 6069 6070 <div 6071 id="infoPanelProseMount" 6072 class="info-panel-prose-mount" 6073 hidden 6074 aria-busy="true" 6075 aria-live="polite" 6076 ></div> 6077 6078 6079 <div class="info-version-tag">v0.5.1052 · 2026-10-02 19:44:45 UTC</div> 6080 <button type="button" class="info-orby-mark" data-tooltip="Home" aria-label="Home"> 6081 <img src="./assets/images/favicon.svg" width="28" height="28" alt="" /> 6082 </button> 6083 </section> 6084 6085 </div> 6086 <div class="shelf-scrollbar" aria-hidden="true"> 6087 <div class="shelf-scrollbar-thumb"></div> 6088 </div> 6089 </div> 6090 <div 6091 id="exportVideoPreviewDock" 6092 class="export-video-preview-dock" 6093 hidden 6094 aria-hidden="true" 6095 > 6096 <div class="export-video-preview-dock__inner"> 6097 <div class="block-title export-section-title">Preview</div> 6098 <div class="animation-timeline"> 6099 <div class="animation-controls"> 6100 <div class="animation-transport-btns"> 6101 <button 6102 id="exportPreviewPlayPause" 6103 type="button" 6104 class="animation-play-btn" 6105 disabled 6106 aria-label="Play export preview" 6107 data-tooltip="Play export movement preview in the viewport" 6108 > 6109 <i class="fa-solid fa-play" aria-hidden="true"></i> 6110 <span class="sr-only">Play</span> 6111 </button> 6112 <button 6113 id="exportPreviewReset" 6114 type="button" 6115 class="animation-play-btn" 6116 disabled 6117 aria-label="Stop preview and return to start" 6118 data-tooltip="End preview, return to frame 0, and restore camera orbit" 6119 > 6120 <i class="fa-solid fa-rotate-left" aria-hidden="true"></i> 6121 <span class="sr-only">Stop preview</span> 6122 </button> 6123 </div> 6124 <input 6125 type="range" 6126 id="exportPreviewScrub" 6127 min="0" 6128 max="1" 6129 step="0.001" 6130 value="0" 6131 disabled 6132 aria-label="Export preview timeline" 6133 /> 6134 <span id="exportPreviewTime">00:00</span> 6135 </div> 6136 </div> 6137 <div class="export-preview-pause-all-row"> 6138 <button 6139 type="button" 6140 id="exportPreviewPauseAll" 6141 class="ghost-btn small" 6142 disabled 6143 data-tooltip="Freeze export preview motion (camera, turntable, GLB), 3D type reveal/constant loops, and animated Shader Lab presets (Flow Field, Plasma, etc.). Stays in sync with Object â Pause shader animations. Press again to resume." 6144 > 6145 Pause all animations 6146 </button> 6147 </div> 6148 </div> 6149 </div> 6150 </aside> 6151 </main> 6152 </div> 6153 6154 <template id="isometricToastTemplate"> 6155 <div class="toast-isometric-cluster"> 6156 <div 6157 class="toast toast--persistent toast--isometric-hint" 6158 role="status"
6159 aria-live="polite" 6160 data-toast-icon="info" 6161 > 6162 <span class="toast-icon toast-icon--info" aria-hidden="true"> 6163 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 6164 <circle cx="9" cy="9" r="9" fill="currentColor"/> 6165 <path d="M9 8.1V12.15" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round"/> 6166 <circle cx="9" cy="5.55" r="0.9" fill="var(--orby-black)"/> 6167 </svg> 6168 </span> 6169 <span class="toast-message"> 6170 Isometric Camera <span class="toast-status-on">ON</span> 6171 <span class="toast-isometric-sep" aria-hidden="true"> â </span> 6172 <span class="toast-isometric-detail">Camera Pan locked</span> 6173 </span> 6174 <button type="button" class="toast-dismiss close-btn" aria-label="Dismiss"></button> 6175 </div> 6176 <button type="button" class="toast-isometric-unlock-btn orby-pill-btn orby-pill-btn--accent"> 6177 Unlock Camera Pan 6178 </button> 6179 </div> 6180 </template> 6181 6182 <template id="toastTemplate"> 6183 <div class="toast" role="status" aria-live="polite"> 6184 <span class="toast-icon toast-icon--success" aria-hidden="true"> 6185 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 6186 <circle cx="9" cy="9" r="9" fill="currentColor"/> 6187 <path d="M5.25 9.15L7.65 11.55L12.75 6.45" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"/> 6188 </svg> 6189 </span> 6190 <span class="toast-icon toast-icon--info" aria-hidden="true"> 6191 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 6192 <circle cx="9" cy="9" r="9" fill="currentColor"/> 6193 <path d="M9 8.1V12.15" stroke="var(--orby-black)" stroke-width="1.65" stroke-linecap="round"/> 6194 <circle cx="9" cy="5.55" r="0.9" fill="var(--orby-black)"/> 6195 </svg> 6196 </span> 6197 <span class="toast-message"></span> 6198 </div> 6199 </template> 6200 6201
6201<script type="importmap"> 6202 { 6203 "imports": { 6204 "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", 6205 "opentype": "./scripts/vendor/opentype.module.js", 6206 "three/examples/jsm/postprocessing/Pass.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/Pass.js", 6207 "three/examples/jsm/objects/Reflector.js": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/objects/Reflector.js", 6208 "postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js", 6209 "n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js", 6210 "gsap": "https://cdn.jsdelivr.net/npm/[email protected]/+esm", 6211 "gsap/ScrollTrigger": "https://cdn.jsdelivr.net/npm/[email protected]/ScrollTrigger.js" 6212 } 6213 } 6214 </script>
6214 6215
6215<script type="module" src="./scripts/entry.js?v=0.5.1052"></script>
6215 6216 6217 <!-- Long messages: stay open until OK (e.g. unsupported USDZ); short text still uses toast --> 6218 <div 6219 id="messageAlertModal" 6220 class="load-settings-modal message-alert-modal" 6221 style="display: none;" 6222 role="dialog" 6223 aria-modal="true" 6224 aria-labelledby="messageAlertTitle" 6225 > 6226 <div class="load-settings-content message-alert-content"> 6227 <div class="load-settings-header"> 6228 <h3 id="messageAlertTitle">Message</h3> 6229 <button type="button" id="messageAlertClose" class="close-btn" aria-label="Close"></button> 6230 </div> 6231 <p id="messageAlertBody" class="message-alert-body"></p> 6232 <div class="load-settings-actions message-alert-actions" id="messageAlertActions"> 6233 <button type="button" id="messageAlertCancel" class="ghost-btn" hidden> 6234 No 6235 </button> 6236 <button type="button" id="messageAlertOk" class="accent-action-btn">OK</button> 6237 </div> 6238 </div> 6239 </div> 6240 6241 <!-- Paste scene settings modal (JSON) --> 6242 <div id="loadSceneSettingsModal" class="load-settings-modal" style="display: none;"> 6243 <div class="load-settings-content"> 6244 <div class="load-settings-header"> 6245 <h3>Paste Scene Settings</h3> 6246 <button type="button" id="closeLoadSceneSettings" class="close-btn" aria-label="Close"></button> 6247 </div> 6248 <p class="load-settings-description">Paste your scene settings JSON below and click Apply. This includes all visual settings: lighting, camera position and angle, post-processing, materials, and object transforms (scale, position, rotation).</p> 6249 <label class="sr-only" for="loadSceneSettingsText">Scene settings JSON</label> 6250 <textarea 6251 id="loadSceneSettingsText" 6252 placeholder="Paste scene settings JSON here..." 6253 rows="10" 6254 aria-label="Scene settings JSON" 6255 ></textarea> 6256 <div class="load-settings-actions"> 6257 <button id="applySceneSettings" class="ghost-btn"> 6258 Apply 6259 </button> 6260 <button id="cancelLoadSceneSettings" class="ghost-btn"> 6261 Cancel 6262 </button> 6263 </div> 6264 </div> 6265 </div> 6266 6267 <div id="bugReportModal" class="load-settings-modal bug-report-modal" style="display: none;"> 6268 <div class="load-settings-content bug-report-content"> 6269 <div class="load-settings-header"> 6270 <h3>Report an issue</h3> 6271 <button type="button" id="closeBugReport" class="close-btn" aria-label="Close"></button> 6272 </div> 6273 <p class="load-settings-description"> 6274 Tell me whatâs happening. I read every report and appreciate the detail. If you can, use <span class="bug-report-intro-emphasis">Copy Scene Settings</span> from the menu and paste it into Details â that helps pinpoint the issue. <span class="bug-report-intro-emphasis">I donât collect contact details</span>, so I canât reply, but every submission is read. 6275 </p> 6276 <form id="bugReportForm"> 6277 <div class="bug-report-field"> 6278 <span id="bugReportCategoryLabel" class="bug-report-field-label">Category</span> 6279 <div class="bug-report-combo" id="bugReportCategoryCombo"> 6280 <input type="hidden" name="category" id="bugReportCategory" value="rendering" required /> 6281 <button 6282 type="button" 6283 id="bugReportCategoryTrigger" 6284 class="bug-report-combo-trigger" 6285 aria-haspopup="listbox" 6286 aria-expanded="false" 6287 aria-controls="bugReportCategoryListbox" 6288 aria-labelledby="bugReportCategoryLabel" 6289 > 6290 <span class="bug-report-combo-trigger-text" id="bugReportCategoryTriggerText" 6291 >Rendering / Display</span 6292 > 6293 </button> 6294 <ul 6295 id="bugReportCategoryListbox" 6296 class="bug-report-combo-listbox" 6297 role="listbox" 6298 tabindex="-1" 6299 aria-labelledby="bugReportCategoryLabel" 6300 hidden 6301 > 6302 <li role="option" data-value="crash" class="bug-report-combo-option" aria-selected="false" tabindex="-1"> 6303 Crash / Freeze 6304 </li> 6305 <li role="option" data-value="rendering" class="bug-report-combo-option" aria-selected="true" tabindex="-1"> 6306 Rendering / Display 6307 </li> 6308 <li 6309 role="option" 6310 data-value="loaded-mesh-materials" 6311 class="bug-report-combo-option" 6312 aria-selected="false" 6313 tabindex="-1" 6314 > 6315 Loaded Mesh / Materials 6316 </li> 6317 <li role="option" data-value="ui" class="bug-report-combo-option" aria-selected="false" tabindex="-1"> 6318 UI / Controls 6319 </li> 6320 <li role="option" data-value="export" class="bug-report-combo-option" aria-selected="false" tabindex="-1"> 6321 Export 6322 </li> 6323 <li role="option" data-value="performance" class="bug-report-combo-option" aria-selected="false" tabindex="-1"> 6324 Performance 6325 </li> 6326 <li role="option" data-value="other" class="bug-report-combo-option" aria-selected="false" tabindex="-1"> 6327 Other 6328 </li> 6329 </ul> 6330 </div> 6331 </div> 6332 <div class="bug-report-field bug-report-field-severity">
6333 <span id="bugReportSeverityLabel" class="bug-report-field-label">Severity</span> 6334 <div class="bug-report-severity-combo" id="bugReportSeverityCombo"> 6335 <input type="hidden" name="severity" id="bugReportSeverity" value="moderate" /> 6336 <button 6337 type="button" 6338 id="bugReportSeverityTrigger" 6339 class="bug-report-severity-trigger" 6340 aria-haspopup="listbox" 6341 aria-expanded="false" 6342 aria-controls="bugReportSeverityListbox" 6343 aria-labelledby="bugReportSeverityLabel" 6344 > 6345 <span class="bug-report-severity-trigger-inner"> 6346 <span class="bug-report-severity-dot" data-severity="moderate" aria-hidden="true"></span> 6347 <span class="bug-report-severity-trigger-text" id="bugReportSeverityTriggerText" 6348 ><span class="bug-report-severity-level">Moderate</span 6349 ><span class="bug-report-severity-desc"> â Noticeable issue</span></span 6350 > 6351 </span> 6352 </button> 6353 <ul 6354 id="bugReportSeverityListbox" 6355 class="bug-report-severity-listbox" 6356 role="listbox" 6357 tabindex="-1" 6358 aria-labelledby="bugReportSeverityLabel" 6359 hidden 6360 > 6361 <li role="option" data-value="cosmetic" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1"> 6362 <span class="bug-report-severity-dot" data-severity="cosmetic" aria-hidden="true"></span> 6363 <span class="bug-report-severity-label" 6364 ><span class="bug-report-severity-level">Low</span 6365 ><span class="bug-report-severity-desc"> â Visual issue or polish</span></span 6366 > 6367 </li> 6368 <li role="option" data-value="minor" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1"> 6369 <span class="bug-report-severity-dot" data-severity="minor" aria-hidden="true"></span> 6370 <span class="bug-report-severity-label" 6371 ><span class="bug-report-severity-level">Minor</span 6372 ><span class="bug-report-severity-desc"> â Minor glitch</span></span 6373 > 6374 </li> 6375 <li role="option" data-value="moderate" class="bug-report-severity-list-option" aria-selected="true" tabindex="-1"> 6376 <span class="bug-report-severity-dot" data-severity="moderate" aria-hidden="true"></span> 6377 <span class="bug-report-severity-label" 6378 ><span class="bug-report-severity-level">Moderate</span 6379 ><span class="bug-report-severity-desc"> â Noticeable issue</span></span 6380 > 6381 </li> 6382 <li role="option" data-value="major" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1"> 6383 <span class="bug-report-severity-dot" data-severity="major" aria-hidden="true"></span> 6384 <span class="bug-report-severity-label" 6385 ><span class="bug-report-severity-level">Major</span 6386 ><span class="bug-report-severity-desc"> â Important feature broken</span></span 6387 > 6388 </li> 6389 <li role="option" data-value="blocker" class="bug-report-severity-list-option" aria-selected="false" tabindex="-1"> 6390 <span class="bug-report-severity-dot" data-severity="blocker" aria-hidden="true"></span> 6391 <span class="bug-report-severity-label" 6392 ><span class="bug-report-severity-level">
6392Blocker</span 6393 ><span class="bug-report-severity-desc"> â Canât use the app or it crashes</span></span 6394 > 6395 </li> 6396 </ul> 6397 </div> 6398 </div> 6399 <div class="bug-report-field"> 6400 <label for="bugReportMessage" id="bugReportMessageLabel">Details</label> 6401 <div class="bug-report-message-block"> 6402 <div class="bug-report-message-stage"> 6403 <textarea 6404 id="bugReportMessage" 6405 class="bug-report-message-textarea" 6406 name="message" 6407 rows="6" 6408 maxlength="8000" 6409 required 6410 placeholder="About 5+ words: steps to reproduce, browser/OS, what you expected⦠Paste Copy Scene Settings here if you can." 6411 aria-labelledby="bugReportMessageLabel" 6412 ></textarea> 6413 <div class="bug-report-message-sending-overlay" hidden aria-hidden="true"> 6414 <div class="bug-report-message-sending-bar-track"> 6415 <div class="bug-report-message-sending-bar-fill"></div> 6416 </div> 6417 </div> 6418 </div> 6419 <div 6420 class="bug-report-word-meter" 6421 id="bugReportWordMeter" 6422 role="progressbar" 6423 aria-valuemin="0" 6424 aria-valuemax="5" 6425 aria-valuenow="0" 6426 aria-label="Words of detail" 6427 > 6428 <div class="bug-report-word-meter-fill" id="bugReportWordMeterFill"></div> 6429 </div> 6430 </div> 6431 </div> 6432 <input 6433 type="text" 6434 name="honeypot" 6435 class="sr-only" 6436 tabindex="-1" 6437 autocomplete="off" 6438 aria-hidden="true" 6439 /> 6440 <p class="bug-report-status" aria-live="polite"> 6441 <span class="bug-report-status-text"></span> 6442 </p> 6443 <div class="load-settings-actions bug-report-actions"> 6444 <button 6445 type="button" 6446 id="cancelBugReport" 6447 class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark bug-report-action-btn" 6448 > 6449 <span class="orby-magic-btn__ring" aria-hidden="true"></span> 6450 <span class="orby-magic-btn__inner"> 6451 <span class="orby-magic-btn__label">Cancel</span> 6452 <span class="orby-magic-btn__arrow" aria-hidden="true" 6453 ><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" 6454 ><path 6455 d="M3.5 8h9M9 4.5L12.5 8 9 11.5" 6456 stroke="currentColor" 6457 stroke-width="1.75" 6458 stroke-linecap="round" 6459 stroke-linejoin="round" /></svg 6460 ></span> 6461 </span> 6462 </button> 6463 <span class="bug-report-submit-wrap" id="bugReportSubmitWrap"> 6464 <button 6465 type="submit" 6466 id="submitBugReport" 6467 class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark bug-report-action-btn" 6468 > 6469 <span class="orby-magic-btn__ring" aria-hidden="true"></span> 6470 <span class="orby-magic-btn__inner"> 6471 <span class="orby-magic-btn__label">Send</span> 6472 <span class="orby-magic-btn__arrow" aria-hidden="true" 6473 ><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" 6474 ><path 6475 d="M3.5 8h9M9 4.5L12.5 8 9 11.5" 6476 stroke="currentColor" 6477 stroke-width="1.75" 6478 stroke-linecap="round" 6479 stroke-linejoin="round" /></svg 6480 ></span> 6481 </span> 6482 </button> 6483 </span> 6484 </div> 6485 </form> 6486 </div> 6487 </div> 6488
6489 <!-- Same full-screen treatment as bug-report thank-you (brand headline font, blur scrim, fade-up) --> 6490 <div 6491 id="orbyFullscreenPrompt" 6492 class="bug-report-thank-you-layer" 6493 hidden 6494 aria-hidden="true" 6495 role="alertdialog" 6496 aria-modal="true" 6497 aria-labelledby="orbyFullscreenPromptMessage" 6498 > 6499 <div class="bug-report-thank-you-stack orby-fullscreen-prompt-stack" id="orbyFullscreenPromptStack"> 6500 <p class="bug-report-thank-you-message" id="orbyFullscreenPromptMessage"></p> 6501 <div class="orby-fullscreen-prompt-actions" id="orbyFullscreenPromptActions"> 6502 <button 6503 type="button" 6504 id="orbyFullscreenPromptNo" 6505 class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark" 6506 > 6507 <span class="orby-magic-btn__ring" aria-hidden="true"></span> 6508 <span class="orby-magic-btn__inner"> 6509 <span class="orby-magic-btn__label">Stay</span> 6510 <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 6511 </span> 6512 </button> 6513 <button 6514 type="button" 6515 id="orbyFullscreenPromptYes" 6516 class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark" 6517 > 6518 <span class="orby-magic-btn__ring" aria-hidden="true"></span> 6519 <span class="orby-magic-btn__inner"> 6520 <span class="orby-magic-btn__label">Go Home</span> 6521 <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 6522 </span> 6523 </button> 6524 </div> 6525 </div> 6526 </div> 6527 6528 <div id="bugReportThankYouLayer" class="bug-report-thank-you-layer" hidden aria-hidden="true" role="status"> 6529 <div class="bug-report-thank-you-stack" id="bugReportThankYouStack"> 6530 <p class="bug-report-thank-you-message" id="bugReportThankYouMessage"></p> 6531 <button 6532 type="button" 6533 id="bugReportThankYouOk" 6534 class="orby-magic-btn orby-magic-btn--on-dark orby-magic-btn--outline-dark" 6535 > 6536 <span class="orby-magic-btn__ring" aria-hidden="true"></span> 6537 <span class="orby-magic-btn__inner"> 6538 <span class="orby-magic-btn__label">Keep Orbing</span> 6539 <span class="orby-magic-btn__arrow" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 6540 </span> 6541 </button> 6542 </div> 6543 </div> 6544 <div 6545 id="orby-turnstile-host" 6546 class="orby-turnstile-host" 6547 hidden 6548 aria-hidden="true" 6549 aria-label="Security check" 6550 ></div> 6551 </body> 6552</html> 6553
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.