[{"_1":2,"_173":-5,"_174":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","48807a73dfb4c250ae0af97d07e94d04aadb2cac","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_148":149,"_170":171,"_172":-5},"handle","shapedlines","name","horizon","path","shared/gradient.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":73,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","4437ac18-e420-11f0-81dd-42dde27851f2","createdAt",["D",1766948768303],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","e9195859-3c6b-4b40-bb3e-c11844477fdf","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","org",{"_94":95,"_133":130,"_12":112},"avatar","branch",{"_136":137,"_96":44,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":97,"_146":95},"version",11,"4437fcf4-e420-11f0-81dd-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":150,"_96":151,"_152":153,"_154":155,"_156":138,"_157":158,"_159":160,"_104":161,"_136":32,"_162":163,"_164":165,"_166":20,"_167":-5,"_98":168},"876355ca-e423-11f0-801a-42dde27851f2","gradient.ts","fileId","87635692-e423-11f0-801a-42dde27851f2","parentId","86ee5d9c-e423-11f0-9c73-42dde27851f2","branchId","branchVersion",9,"latest",true,["D",1766950168846],"fileType","script","content","/**\n * Atmosphere gradient renderer (single scattering) using CSS linear-gradient\n *\n * Physical model and parameter choices derived from \"A Scalable and Production\n * Ready Sky and Atmosphere Rendering Technique\" (Sébastien Hillaire).\n *\n * Implementation derived from \"Production Sky Rendering\" (Andrew Helmer,\n * MIT License). Source: https://www.shadertoy.com/view/slSXRW\n */\n\nimport { clamp, dot, len, norm, add, scale, exp, type Vec3 } from \"./utils.ts\";\n\nconst PI = Math.PI;\n\n// Coefficients of media components (m^-1)\nconst RAYLEIGH_SCATTER = [5.802e-6, 13.558e-6, 33.1e-6];\nconst MIE_SCATTER = 3.996e-6;\nconst MIE_ABSORB = 4.44e-6;\nconst OZONE_ABSORB = [0.65e-6, 1.881e-6, 0.085e-6];\n\n// Altitude density distribution metrics\nconst RAYLEIGH_SCALE_HEIGHT = 8e3;\nconst MIE_SCALE_HEIGHT = 1.2e3;\n\n// Additional parameters\nconst GROUND_RADIUS = 6_360e3;\nconst TOP_RADIUS = 6_460e3;\nconst SUN_INTENSITY = 1.0;\n\n// Rendering\nconst SAMPLES = 32; // used for gradient stops and integration steps\nconst FOV_DEG = 75;\n\n// Post-processing\nconst EXPOSURE = 25.0;\nconst GAMMA = 2.2;\nconst SUNSET_BIAS_STRENGTH = 0.1;\n\n// ACES tonemapper (Knarkowicz)\nfunction aces(color: Vec3): Vec3 {\n return color.map((c) => {\n const n = c * (2.51 * c + 0.03);\n const d = c * (2.43 * c + 0.59) + 0.14;\n return Math.max(0, Math.min(1, n / d));\n }) as Vec3;\n}\n\n// Enhance sunset hues (i.e., make warmer)\nfunction applySunsetBias([r, g, b]: Vec3): Vec3 {\n // Relative luminance (sRGB)\n const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n // Weight is higher for darker sky (near horizon/twilight), lower midday\n const w = 1.0 / (1.0 + 2.0 * lum);\n const k = SUNSET_BIAS_STRENGTH; // overall strength\n const rb = 1.0 + 0.5 * k * w; // boost red\n const gb = 1.0 - 0.5 * k * w; // suppress green\n const bb = 1.0 + 1.0 * k * w; // boost blue\n return [Math.max(0, r * rb), Math.max(0, g * gb), Math.max(0, b * bb)];\n}\n\nfunction rayleighPhase(angle: number) {\n return (3 * (1 + Math.cos(angle) ** 2)) / (16 * PI);\n}\n\nfunction miePhase(angle: number) {\n const g = 0.8;\n const scale = 3 / (8 * PI);\n const num = (1 - g ** 2) * (1 + Math.cos(angle) ** 2);\n const denom =\n (2 + g ** 2) * (1 + g ** 2 - 2 * g * Math.cos(angle)) ** (3 / 2);\n return (scale * num) / denom;\n}\n\n// From \"5.3.2 Intersecting Ray or Segment Against Sphere\" (Real-Time Collision Detection)\nfunction intersectSphere(p: Vec3, d: Vec3, r: number) {\n // Sphere center is at origin, so M = P - C = P\n const m = p;\n const b = dot(m, d);\n const c = dot(m, m) - r ** 2;\n const discr = b ** 2 - c;\n if (discr < 0)\n // Ray misses sphere\n return null;\n const t = -b - Math.sqrt(discr);\n if (t < 0)\n // Ray inside sphere; Use far discriminant\n return -b + Math.sqrt(discr);\n return t;\n}\n\n// Optical depth approximation\nfunction computeTransmittance(height: number, angle: number) {\n const rayOrigin: Vec3 = [0, GROUND_RADIUS + height, 0];\n const rayDirection: Vec3 = [Math.sin(angle), Math.cos(angle), 0];\n\n const distance = intersectSphere(rayOrigin, rayDirection, TOP_RADIUS);\n if (!distance) return [1, 1, 1];\n\n // March along the ray using a fixed step size\n const segmentLength = distance / SAMPLES;\n let t = 0.5 * segmentLength;\n\n // Accumulate path-integrated densities\n let odRayleigh = 0; // molecules (Rayleigh)\n let odMie = 0; // aerosols (Mie)\n let odOzone = 0; // ozone (absorption only)\n for (let i = 0; i < SAMPLES; i++) {\n // Position along the ray and its altitude above ground\n const pos = add(rayOrigin, scale(rayDirection, t));\n const h = len(pos) - GROUND_RADIUS;\n\n // Exponential falloff with altitude for Rayleigh and Mie densities\n const dR = Math.exp(-h / RAYLEIGH_SCALE_HEIGHT);\n const dM = Math.exp(-h / MIE_SCALE_HEIGHT);\n\n // Integrate (density × path length)\n odRayleigh += dR * segmentLength;\n\n // Simple ozone layer: triangular profile centered at 25 km, width 30 km\n const ozoneDensity = 1.0 - Math.min(Math.abs(h - 25e3) / 15e3, 1.0);\n odOzone += ozoneDensity * segmentLength;\n\n odMie += dM * segmentLength;\n t += segmentLength;\n }\n\n // Convert integrated densities into per-channel optical depth (Beer-Lambert)\n const tauR = [\n RAYLEIGH_SCATTER[0] * odRayleigh,\n RAYLEIGH_SCATTER[1] * odRayleigh,\n RAYLEIGH_SCATTER[2] * odRayleigh,\n ];\n const tauM = [MIE_ABSORB * odMie, MIE_ABSORB * odMie, MIE_ABSORB * odMie];\n const tauO = [\n OZONE_ABSORB[0] * odOzone,\n OZONE_ABSORB[1] * odOzone,\n OZONE_ABSORB[2] * odOzone,\n ];\n\n // Total optical depth: transmittance T = exp(-tau)\n const tau = [\n -(tauR[0] + tauM[0] + tauO[0]),\n -(tauR[1] + tauM[1] + tauO[1]),\n -(tauR[2] + tauM[2] + tauO[2]),\n ];\n return exp(tau as Vec3);\n}\n\n// Render sky at given solar elevation\nexport default function renderGradient(altitude: number): [string, Vec3, Vec3] {\n const cameraPosition: Vec3 = [0, GROUND_RADIUS, 0];\n const sunDirection: Vec3 = norm([Math.cos(altitude), Math.sin(altitude), 0]);\n\n // Projection constant (used to tilt rays upward)\n const focalZ = 1.0 / Math.tan((FOV_DEG * 0.5 * PI) / 180.0);\n\n const stops = [] as Array<{ percent: number; rgb: Vec3 }>;\n for (let i = 0; i < SAMPLES; i++) {\n const s = i / (SAMPLES - 1);\n\n const viewDirection = norm([0, s, focalZ]);\n\n let inscattered: Vec3 = [0, 0, 0];\n\n const tExitTop = intersectSphere(cameraPosition, viewDirection, TOP_RADIUS);\n if (tExitTop !== null && tExitTop > 0) {\n const rayOrigin = cameraPosition.slice() as Vec3;\n\n // Fixed-step integration along the valid path segment\n const segmentLength = tExitTop / SAMPLES;\n let tRay = segmentLength * 0.5;\n\n // Precompute camera-to-space transmittance and the direction polarity\n const rayOriginRadius = len(rayOrigin);\n const isRayPointingDownwardAtStart =\n dot(rayOrigin, viewDirection) / rayOriginRadius < 0.0;\n const startHeight = rayOriginRadius - GROUND_RADIUS;\n const startRayCos = clamp(\n dot(\n [\n rayOrigin[0] / rayOriginRadius,\n rayOrigin[1] / rayOriginRadius,\n rayOrigin[2] / rayOriginRadius,\n ],\n viewDirection,\n ),\n -1,\n 1,\n );\n const startRayAngle = Math.acos(Math.abs(startRayCos));\n const transmittanceCameraToSpace = computeTransmittance(\n startHeight,\n startRayAngle,\n );\n\n for (let j = 0; j < SAMPLES; j++) {\n // Position and local frame\n const samplePos = add(rayOrigin, scale(viewDirection, tRay));\n const sampleRadius = len(samplePos);\n const upUnit: Vec3 = [\n samplePos[0] / sampleRadius,\n samplePos[1] / sampleRadius,\n samplePos[2] / sampleRadius,\n ];\n const sampleHeight = sampleRadius - GROUND_RADIUS;\n\n // Angles for view ray and sun relative to local up\n const viewCos = clamp(dot(upUnit, viewDirection), -1, 1);\n const sunCos = clamp(dot(upUnit, sunDirection), -1, 1);\n const viewAngle = Math.acos(Math.abs(viewCos));\n const sunAngle = Math.acos(sunCos);\n\n // Transmittance camera→sample and sample→space\n const transmittanceToSpace = computeTransmittance(\n sampleHeight,\n viewAngle,\n );\n const transmittanceCameraToSample = [0, 0, 0] as Vec3;\n for (let k = 0; k < 3; k++) {\n transmittanceCameraToSample[k] = isRayPointingDownwardAtStart\n ? transmittanceToSpace[k] / transmittanceCameraToSpace[k]\n : transmittanceCameraToSpace[k] / transmittanceToSpace[k];\n }\n\n // Transmittance from sample toward the sun\n const transmittanceLight = computeTransmittance(sampleHeight, sunAngle);\n\n // Local densities and phase functions\n const opticalDensityRay = Math.exp(\n -sampleHeight / RAYLEIGH_SCALE_HEIGHT,\n );\n const opticalDensityMie = Math.exp(-sampleHeight / MIE_SCALE_HEIGHT);\n const sunViewCos = clamp(dot(sunDirection, viewDirection), -1, 1);\n const sunViewAngle = Math.acos(sunViewCos);\n const phaseR = rayleighPhase(sunViewAngle);\n const phaseM = miePhase(sunViewAngle);\n\n // Single-scattering contribution\n const scatteredRgb = [0, 0, 0] as Vec3;\n for (let k = 0; k < 3; k++) {\n const rayleighTerm = RAYLEIGH_SCATTER[k] * opticalDensityRay * phaseR;\n const mieTerm = MIE_SCATTER * opticalDensityMie * phaseM;\n scatteredRgb[k] = transmittanceLight[k] * (rayleighTerm + mieTerm);\n }\n\n // Accumulate along the ray\n for (let k = 0; k < 3; k++) {\n inscattered[k] +=\n transmittanceCameraToSample[k] * scatteredRgb[k] * segmentLength;\n }\n tRay += segmentLength;\n }\n\n for (let k = 0; k < 3; k++) inscattered[k] *= SUN_INTENSITY;\n }\n\n // Post-process: exposure → gentle sunset bias → ACES tonemap → gamma → 8-bit RGB\n let color = inscattered.slice() as Vec3;\n color = color.map((c) => c * EXPOSURE) as Vec3;\n color = applySunsetBias(color);\n color = aces(color);\n color = color.map((c) => Math.pow(c, 1.0 / GAMMA)) as Vec3;\n const rgb = color.map((c) => Math.round(clamp(c, 0, 1) * 255)) as Vec3;\n\n // 0% at zenith (top), 100% at horizon (bottom)\n const percent = (1 - s) * 100;\n stops.push({ percent, rgb });\n }\n\n // Compose CSS gradient string from the ordered stops\n stops.sort((a, b) => a.percent - b.percent);\n const colorStops = stops\n .map(\n ({ percent, rgb }) =>\n `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]}) ${Math.round(percent * 100) / 100\n }%`,\n )\n .join(\", \");\n return [\n `linear-gradient(to bottom, ${colorStops})`,\n stops[0].rgb,\n stops[stops.length - 1].rgb,\n ];\n}\n","deleted","label",[169,151],"shared","permalink","https://www.val.town/x/shapedlines/horizon/code/shared/gradient.ts","extension","actionData","errors"]