Skip to content
Sample of Atmospheric Perspective Landscape

shader_legends_3 · HubertyAtmospheric

Atmospheric Perspective Landscape

A painterly 2D landscape built from depth-graded FBM bands: a soft sky gradient with a sun disc and cloud streaks, a low-amp haze band in the upper-middle, rolling green midground hills, and a sharp foreground silhouette of trees and grass. Each band is shaded in a different palette and blended at its boundary by a smooth depth weight so the picture reads as receding atmosphere.

Original: https://www.shadertoy.com/results?query=huberty

▶ Try the live demo (JS port) ▶ Run reference.py via Pyodide 10 formulas have instant JS ports. The Pyodide path runs the actual Python in your browser — first load is ~6 MB, then instant.

Family
shader_legends_3
Source
shader_legends_3
Evolution
atmosphere
Render
layered_field
Complexity
medium
Agents
0
Year
2014
Author
Antoine 'Huberty' C. (shadertoy user 'huberty')

Math essence

For each pixel, sky = lerp(sky_top, sky_bottom, 1-y); haze = haze_color * (0.85 + 0.30 * fbm(4x, 1.5*(1-y))); midground top edge = 0.40 - 0.10 * fbm(3x, 6y); foreground top edge = 0.18 - 0.06 * fbm(16x, 1) + 0.06 * (hash21(240x) - 0.5). A sky-disc, cloud alpha = clip((fbm(6x, 2y) - 0.55) * 4, 0, 1), and band masks smoothstep the layers in/out at their boundaries.

Parameters

Name Type Default Range Description
dim int 400 160–800 Square output size in pixels.
sky_top rgb 0.45,0.62,0.85 null–null Sky color at the top of the canvas.
sky_bottom rgb 0.9,0.78,0.62 null–null Sky color at the horizon.
haze_color rgb 0.55,0.62,0.7 null–null Distant-haze tint.
mid_color rgb 0.3,0.42,0.3 null–null Midground hill tint.
fore_color rgb 0.18,0.16,0.1 null–null Foreground silhouette tint.
sun_color rgb 1,0.92,0.78 null–null Sun-disc color.
drift float 0.05 -0.3–0.3 Per-step horizontal drift of the noise sample.

Reference

First 60 lines of reference.py. Full source: library_external/shader_legends_3/HubertyAtmospheric/reference.py

from __future__ import annotations

from typing import ClassVar

import numpy as np


def _hash21(x: np.ndarray, y: np.ndarray) -> np.ndarray:
    """Deterministic 2D hash returning float in [0, 1).

    Accepts both int arrays and broadcasts a scalar seed via the
    caller. Inputs are coerced to int64 before mixing.
    """
    x = np.asarray(x, dtype=np.int64)
    y = np.asarray(y, dtype=np.int64)
    h = (x * np.int64(374761393) + y * np.int64(668265263)) & np.int64(0xFFFFFFFF)
    h = (h ^ (h >> np.int64(13))) * np.int64(1274126177) & np.int64(0xFFFFFFFF)
    h = h ^ (h >> np.int64(16))
    return (h & np.int64(0xFFFFFFFF)).astype(np.float32) / np.float32(0xFFFFFFFF)


def _value_noise_2d(x: np.ndarray, y: np.ndarray, seed: int) -> np.ndarray:
    """Bilinearly smoothed value noise from a deterministic hash."""
    xi = np.floor(x).astype(np.int64)
    yi = np.floor(y).astype(np.int64)
    xf = (x - xi).astype(np.float32)
    yf = (y - yi).astype(np.float32)
    u = xf * xf * (3.0 - 2.0 * xf)
    v = yf * yf * (3.0 - 2.0 * yf)
    s = np.int64(seed)
    n00 = _hash21(xi, yi + s)
    n10 = _hash21(xi + 1, yi + s)
    n01 = _hash21(xi, yi + 1 + s)
    n11 = _hash21(xi + 1, yi + 1 + s)
    nx0 = n00 * (1.0 - u) + n10 * u
    nx1 = n01 * (1.0 - u) + n11 * u
    return nx0 * (1.0 - v) + nx1 * v


def _fbm(x: np.ndarray, y: np.ndarray, octaves: int, seed: int, lac: float = 2.0, gain: float = 0.5) -> np.ndarray:
    total = np.zeros_like(x, dtype=np.float32)
    amp = np.float32(1.0)
    freq = np.float32(1.0)
    norm = np.float32(0.0)
    for k in range(octaves):
        total = total + amp * _value_noise_2d(x * freq, y * freq, seed + k * 17)
        norm = norm + amp
        amp = amp * np.float32(gain)
        freq = freq * np.float32(lac)
    return total / max(norm, 1e-6)


class HubertyAtmospheric:
    """Atmospheric perspective landscape — Antoine "Huberty" C. (Shadertoy huberty).

    Huberty's hallmark is dense, painterly Shadertoy landscapes built
    with depth-graded FBM. The sky is a vertical gradient; the
    *foreground* band sits at the bottom of the canvas (low-noise,
    high-contrast silhouettes of trees and grass); a *midground* band
    rolls in with rolling hills shaped by FBM at a coarser scale; and

Try running it locally

The reference implementation is self-contained Python with numpy. Install the package and run:

python library_external/shader_legends_3/HubertyAtmospheric/reference.py

Need help? See Learn for the standard environment setup, or Playground for an in-browser sketchbook.

More from shader_legends_3

Sample of Animated FBM Nebula with Chromatic Aberration

Animated FBM Nebula with Chromatic Aberration

shader_legends_3 · AshleyGAnimNebula

A multi-coloured, slowly rotating cosmic gas cloud built from 5 layers of FBM noise at different scales, each layer rotated by a different angle that varies with time.

View →
Sample of Bokeh Blur with Light Leaks

Bokeh Blur with Light Leaks

shader_legends_3 · TaterBokeh

A 2D bokeh effect built by stamping 50-200 soft Gaussian discs onto a near-black backdrop, each at a hash-determined centre, radius, and warm-to-cool colour.

View →
Sample of Hash-driven Procedural City Skyline

Hash-driven Procedural City Skyline

shader_legends_3 · DaveHoskinsHashCity

A 2D orthographic night-time cityscape whose per-column building heights come from 1D FBM noise and whose lit windows are a per-cell hash threshold.

View →
Sample of Recursive Spherical Displacement Wireframe

Recursive Spherical Displacement Wireframe

shader_legends_3 · IQDisplacementSphere

A wireframe sphere whose surface is recursively displaced by spherical harmonics of the form amp * sin(N * theta) * cos(M * phi), rendered as overlapping latitude and meridian polylines plus random surface dots.

View →
Sample of Volumetric Clouds from Cellular + FBM

Volumetric Clouds from Cellular + FBM

shader_legends_3 · BigWingsClouds

A painterly cumulus-cloud sky built from a Worley/cellular noise layer (cloud puffs) gated by a low-frequency FBM (large-scale cloud coverage) and a high-frequency FBM (in-cloud detail).

View →

See all shader_legends_3 artworks →