atmosphereって？What is atmosphere?
WebGL のフラグメントシェーダ1枚で空を描くレンダラです。依存ライブラリはなく、DOM にも フレームワークにも依存しません。物理的な気象シミュレーションではないので正確ではありませんが、 移り変わる空の要素をプロシージャルにかつ手軽に表現できます。
A renderer that draws the sky from one WebGL fragment shader. No dependencies, and no coupling to the DOM or to any framework. It isn't a physical weather simulation, so it isn't accurate — it's an easy way to get a sky that keeps changing procedurally.
作例Examples
設定可能な項目What you can set
時刻と場所Time and place
緯度経度と日時から実際の太陽位置を計算します。空のグラデーション、夕焼け、星、月、夜の街明かり。 The real solar position from latitude, longitude and date. The sky's gradient, sunset, stars, the moon, city lights along the night horizon.
雲の形状Cloud shapes
巻雲から積乱雲まで、WMO の十種雲形を量で重ねます。ひとつ選ぶのではなく、実際の空のように混ざります。 Cirrus through cumulonimbus, layered by amount rather than picked one at a time — the way a real sky mixes them.
気象Weather
雨・雪・風・雷・靄。mm/h や m/s といった観測単位で渡せるので、気象 API の応答をほぼそのまま流し込めます。 Rain, snow, wind, lightning and haze — taken in observation units (mm/h, m/s, km), so a weather API's response passes through almost as-is.
夜空The night sky
光害はボートルスケールで。暗い空では天の川が星の集まりとして現れ、流星群は ZHR で流せます。月は地球照と欠けまで。 Light pollution on the Bortle scale. Under a dark sky the Milky Way appears as resolved stars, meteor showers run at a ZHR, and the moon carries its earthshine and phase.
露出と偏光Exposure and optics
合成は線形光。露出・コントラスト・ショルダーのトーンカーブと、CPL フィルタのエミュレーションを備えます。 Compositing is done in linear light, with a tone curve — exposure, contrast, shoulder — and a circular-polarizer emulation on top.
カラーフィルタColor filters
セピア、モノクロ、サイアノタイプなど。切り替えると色そのものが補間されるので滑らかに移ります。 Sepia, monochrome, cyanotype and the rest. Switching interpolates the colors themselves, so one flows into the next.
使い方Usage
import { Atmosphere } from '@takustaqu/atmosphere';
const sky = new Atmosphere(canvas, {
time: new Date(),
location: { latitude: 35.68, longitude: 139.77 },
weather: { cloudCover: 0.95, precipitation: 12, windSpeed: 18 },
});
// 数秒かけて滑らかに遷移する// eases over a few seconds
sky.set({ weather: 'clear' });