본문으로 건너뛰기
cccskills
무료GitHub에 공개

3d-sky-background

Build sky backgrounds for 3D scenes using procedural atmosphere or panoramic images. Align the horizon, sun, shadows, and environment lighting, while handling camera movement, image loading, and smooth transitions between day, dusk, and night.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Create a camera-correct sky background for a 3D scene with a procedural atmosphere or panorama, horizon haze, aligned sunlight, and coherent environment lighting. Use for architectural skies, outdoor 3D backgrounds, golden hour, and day-to-night sky transitions.

설치 방법 보기

이럴 때 유용합니다

  • Creating sky backgrounds for architecture and outdoor scenes
  • Aligning sunset skies with shadows and reflections
  • Designing transitions from day through dusk to night
  • Checking sky seams and distortion during camera movement

포함된 파일(3)

  • SKILL.md4.9 KB
  • agents/openai.yaml228 B
  • REFERENCES.md387 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

3D Sky Background

Build a sky that surrounds the world, with a readable horizon and lighting that belongs to the same atmosphere.

Choose the representation

Inspect the project's renderer, camera range, color pipeline, environment lighting, and existing assets. Use an existing licensed panorama when its cloud composition matters, a procedural sky when changing sun position matters, or a restrained hybrid. Keep the project's rendering backend and version; do not add a second renderer for the sky.

Keep three responsibilities explicit: the visible sky background, the reflection/ambient environment, and direct sun lighting. A background photograph alone does not light PBR objects. A PMREM environment does not supply a shadow-casting directional sun. See the PMREM documentation.

Build a stable surrounding sky

  • Use the engine's background facility, a fullscreen direction shader, or an inward-facing dome with depth writes disabled and fog disabled. A dome must fit inside the camera's clipping range and follow camera translation; it should retain world orientation as the camera rotates.
  • Derive color from the normalized viewing direction. Blend a pale warm horizon through a muted middle band into a cooler zenith. Keep the lower hemisphere compatible with the ground haze rather than leaving an exposed hard edge.
  • Use a shared sun direction for the visible disk, glow, directional light, and any sky-ray pass. A broad halo and a small disk are separate terms; avoid a large white blob.
  • Add distant silhouettes only when the composition needs depth. Keep them low contrast, with a hue and value close to the horizon.

Map a panorama deliberately

A true equirectangular sky wraps a full 360° horizontally and 180° vertically. Establish a consistent world-axis convention, rotate the texture so its photographed sun matches the scene sun, and inspect both the seam and zenith.

A wide landscape photograph is a partial panorama. Record its angular coverage and horizon position; do not stretch it indiscriminately over a sphere. Seijaku aligns a partial sky image around the sun and mirrors its back coverage. That is a composition-specific shortcut; repeated cloud shapes may be visible during a full orbit. Prefer a complete panorama for unrestricted cameras.

When a custom shader wraps longitude, a discontinuity at the seam can cause bad texture derivatives and a blurred stripe. Prefer continuous sampling coordinates with texture wrapping; otherwise supply corrected gradients appropriate to the shader version. Test the seam while orbiting, not only in the initial view.

Keep color and lighting coherent

Annotate display-referred color images as sRGB and keep lighting calculations in linear space. Apply tone mapping and output conversion once at the intended final stage. Do not copy a fitted inverse tone-map function from another project: Seijaku's fit is coupled to its custom final shader and exposure. Decide explicitly whether a photograph should be tone-mapped with the scene or composited through a separate display-referred path.

Provide a procedural gradient immediately, then load the sky asset asynchronously and blend it in. An asset error should leave a usable sky. Fit texture resolution to the visible angular coverage and target display; do not gate first interaction on an oversized sky image.

Generate a prefiltered environment when needed and reuse it. During a day/night or season transition, interpolate cached environments where supported or refresh at meaningful state changes. Rebuilding PMREM every frame can dominate the scene cost. Dispose superseded environment render targets without disposing textures still in use.

Day, dusk, and night

Use continuous weights for horizon/zenith colors, sun glow, fog tint, exposure, moon, and stars. Fade stars after the sky darkens. Preserve enough ambient illumination to read materials at night. Animate cloud movement slowly, pause when hidden, and retain a designed still sky for reduced motion.

Verify

  • A full orbit and vertical look reveal no seam, stretched clouds, dome edge, or camera translation parallax.
  • Sun direction, shadows, rays, and reflections agree at the intended hero view.
  • Day/dusk/night changes avoid flashes, double tone mapping, and mismatched fog.
  • The sky remains useful before its image loads and when that image fails.
  • Mobile and 2× rendering preserve the horizon and avoid unexpected environment rebuilds.

Read REFERENCES.md for source inspection and official APIs. Seijaku's relevant functions are makeSky, makeHills, makeStars, and its environment update path.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating backlit curtains
  • Differentiating linen, silk, and wool
  • Adding hems and stitches for close-up views
MengTo/Skills6.9천2026년 10월 18일 업데이트

Build falling leaves in Three.js and similar 3D scenes, with visible front, edge, and back views as they tumble and drift. Coordinate wind, scene depth, camera-aware recycling, and performance checks for a convincing autumn effect.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding falling autumn leaves to a 3D scene
  • Coordinating leaf tumble, sideways drift, and wind
  • Managing leaves around buildings and camera movement
MengTo/Skills6.9천2026년 10월 18일 업데이트

Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Add a four-season selector to an outdoor 3D scene
  • Show seasonal changes in an architectural walkthrough
  • Coordinate foliage, sunlight, sky, and ground appearance
MengTo/Skills6.9천2026년 10월 18일 업데이트

Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating a detailed 3D model for close-up views
  • Replacing visibly faceted curves with smoother geometry
  • Preparing detailed architectural assets for rendering
MengTo/Skills6.9천2026년 10월 18일 업데이트

Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Prepare wood, stone, and fabric materials for close-up views
  • Fix texture seams, grain direction, and normal map orientation
  • Preserve floor and foliage detail at oblique or distant views
MengTo/Skills6.9천2026년 10월 18일 업데이트

Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Fixing metal that looks like gray plastic
  • Creating polished or brushed metal finishes
  • Adding patina and worn edges
MengTo/Skills6.9천2026년 10월 18일 업데이트

MengTo의 스킬 모두 보기

이 스킬의 문제 신고