[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":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","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_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":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","57594e398b37849c5a5f36f8e9d9bb2356f5e36c","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",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":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",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_154":155,"_176":177,"_178":-5},"handle","shapedlines","name","sundays","path","shared/gradient.ts","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":112,"_113":-5,"_12":114,"_115":-5,"_116":20,"_117":-5,"_118":-5,"_119":33,"_14":120,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":132,"_135":136,"_140":141,"_153":20},"id","c36c5844-f7e9-11f0-8dec-42dde27851f2","createdAt",["D",1769124382651],"deletedAt","legacyEnvVars","privacy","public","description","sundays in sf :)","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_133":134},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","org",{"_95":96,"_137":134,"_12":114,"_138":139},"avatar","tier","free","branch",{"_142":143,"_97":45,"_103":144,"_145":104,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":98,"_152":96},"version",54,"c36ccee6-f7e9-11f0-8dec-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":156,"_97":157,"_158":159,"_160":161,"_162":144,"_163":164,"_165":166,"_105":167,"_142":33,"_168":169,"_170":171,"_172":20,"_173":-5,"_99":174},"f32a3bf0-0522-11f1-973b-42dde27851f2","gradient.ts","fileId","f32a3cae-0522-11f1-973b-42dde27851f2","parentId","f2b1f4ba-0522-11f1-a9d7-42dde27851f2","branchId","branchVersion",18,"latest",true,["D",1770578309177],"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",[175,157],"shared","permalink","https://www.val.town/x/shapedlines/sundays/code/shared/gradient.ts","extension","actionData","errors"]