scottstts/threejs-awesome-graphics-agent-skills

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js.

소스 보기
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Atmosphere and Aerial Perspective

Treat sky rendering and aerial perspective as two views of the same scattering model. They must share radii, density profiles, coefficients, sun direction, exposure scale, and coordinate transforms.

This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.

Choose the implementation tier

  • Small scene with no orbital camera: analytic height/distance approximation.
  • Planetary ground-to-space camera: ray integration or precomputed LUTs.
  • Large geospatial world: LUTs plus world-to-planet transform, altitude correction, and depth-aware aerial perspective.

Read references/atmosphere-system-contract.md before implementation. It separates the LUT/ellipsoid architecture from dynamic integration and the shell/post handoff.

Read the LUT sky and aerial-perspective entry and its source/ modules for the SkyMaterial, SkyLightProbe, SunDirectionalLight, AerialPerspectiveEffect, precomputed-texture loader, sun/moon direction, lens flare, tone mapping, and dithering path used by the LUT example.

Required outputs

  • sky radiance;
  • sun transmittance/color;
  • segment transmittance from camera to visible surface;
  • segment inscattering;
  • optional sky irradiance for materials;
  • explicit scale conversion between world units and atmosphere units.

Failure conditions

  • sky and terrain haze use different sun directions or coefficients;
  • the atmosphere is a uniformly transparent sphere;
  • camera altitude is measured in a local flat frame during orbital motion;
  • scene depth is treated as linear when it is not;
  • exposure is used to hide incorrect radiance scale;
  • atmosphere fades abruptly at shell entry.

Routing boundary

This skill owns molecular/aerosol sky scattering and surface-segment aerial perspective. Use $threejs-volumetric-clouds for weather-shaped cloud density, temporal cloud reconstruction, and cloud shadows. Use $threejs-procedural-vfx for emissive aurora curtain volumes and their perspective/equirectangular radiance materials, and for standalone filmic HDR lens-flare compositors. Keep the LUT example's lens flare here when it remains one stage in the sky-scattering and aerial-perspective composition.

같은 저장소의 Skills

더 많은 Skills

모든 Skills
scottstts
커뮤니티

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

설치 수
1
GitHub Stars
805
업데이트
9월 10일
scottstts
커뮤니티

threejs-procedural-vegetation

Generate authored procedural trees, grass, ivy, flowers, and vegetation in Three.js or raw WebGPU. Use for surface-following vines, painted ivy paths, stylized or GPU grass, GPU-culled virtual flower fields, trunks, recursive branches, roots, canopies, leaf cards, species presets, deterministic growth, distance-tiered plant geometry, and rooted blade, stem, or petiole-hinge wind.

설치 수
1
GitHub Stars
805
업데이트
9월 10일
scottstts
커뮤니티

threejs-procedural-vfx

Author production real-time VFX in Three.js. Use for filmic HDR lens-flare compositors, highlight-derived ghosts, field-angle pupil deformation, localized glare and bloom, raymarched aurora curtains, finite-footprint emissive slabs, uniform volume integration, equirectangular radiance probes, WebGPU voxel fire and smoke, coupled volumetric fluid fields, mesh-surface emitters, signed-distance fire collisions, ship-conforming reentry plasma, generated capsule wakes, instanced analytic sparks, timed dissolving debris, dense-swap effect pools, additive holographic projections, Fresnel rim shells, scanline banding, glitch displacement, swept shape-to-shape handovers, and explicit scene-relative HDR emission hierarchy.

설치 수
1
GitHub Stars
805
업데이트
9월 10일
scottstts
커뮤니티

threejs-skill-router

Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.

설치 수
1
GitHub Stars
805
업데이트
9월 10일