genshin-engine 3.7.0 → 3.9.0

package/dist/index.d.ts

@@ -1,27 +1,60 @@
-import { BufferAttribute, BufferGeometry, Camera, Color, ColorRepresentation, Data3DTexture, DataTexture, DirectionalLight, Frustum, HemisphereLight, InstancedBufferGeometry, OrthographicCamera, Scene, Vector2, Vector3, Vector3Like } from "three";
+import { BufferAttribute, BufferGeometry, Camera, CanvasTexture, Color, ColorRepresentation, Data3DTexture, DataTexture, DirectionalLight, Frustum, HemisphereLight, InstancedBufferGeometry, Matrix4, OrthographicCamera, Scene, Sprite, Texture, ToneMapping, Vector2, Vector3, Vector3Like } from "three";
+import { MeshBasicNodeMaterial, MeshPhysicalNodeMaterial, MeshToonNodeMaterial, MeshToonNodeMaterialParameters, Node, RenderPipeline, RenderTarget, Renderer, TextureNode, UniformNode, WebGPURenderer } from "three/webgpu";
 import { CSMShadowNode } from "three/examples/jsm/csm/CSMShadowNode.js";
-import { MeshBasicNodeMaterial, MeshToonNodeMaterial, MeshToonNodeMaterialParameters, Node, RenderPipeline, RenderTarget, Renderer, TextureNode, UniformNode, WebGPURenderer } from "three/webgpu";
 import BloomNode from "three/examples/jsm/tsl/display/BloomNode.js";
 import GodraysNode from "three/examples/jsm/tsl/display/GodraysNode.js";
+//#region src/atmosphere/CloudBandOptions.d.ts
+export interface CloudBandOptions {
+  count: number;
+  distanceRange: [number, number];
+  heightRange: [number, number];
+  seed: number;
+  widthRange: [number, number];
+}
+//#endregion
+//#region src/atmosphere/CloudSprite.d.ts
+export interface CloudSprite {
+  lit: [number, number][][];
+  outline: [number, number][][];
+}
+//#endregion
 //#region src/atmosphere/SkyKeyframe.d.ts
 export interface SkyKeyframe {
+  cloudLitBackColor?: Color;
   cloudLitColor: Color;
+  cloudShadeBackColor?: Color;
   cloudShadeColor: Color;
+  haloColor?: Color;
   hemisphereGroundColor: Color;
   hemisphereIntensity: number;
   hemisphereSkyColor: Color;
+  horizonBackColor?: Color;
   horizonColor: Color;
   lightColor: Color;
   lightIntensity: number;
   minutes: number;
   starIntensity: number;
+  sunHaloColor?: Color;
+  zenithBackColor?: Color;
   zenithColor: Color;
 }
 //#endregion
+//#region src/atmosphere/SkyShape.d.ts
+export interface SkyShape {
+  frontBackBlend: number;
+  haloHeight: number;
+  horizonBand: number;
+  moonSize: number;
+  sunHaloSize: number;
+}
+//#endregion
 //#region src/atmosphere/SkyState.d.ts
 export interface SkyState extends Omit<SkyKeyframe, "minutes"> {
+  fogColor?: Color;
+  fogDensity?: number;
   lightDirection: Vector3;
   moonDirection: Vector3;
+  shape?: SkyShape;
   sunDirection: Vector3;
 }
 //#endregion
@@ -29,13 +62,27 @@ export interface SkyState extends Omit<SkyKeyframe, "minutes"> {
 export interface SkyUniforms {
   cloudCoverage: UniformNode<"float", number>;
   cloudDrift: UniformNode<"vec2", Vector2>;
+  cloudFrontBackBlend: UniformNode<"float", number>;
+  cloudLitBackColor: UniformNode<"color", Color>;
   cloudLitColor: UniformNode<"color", Color>;
+  cloudShadeBackColor: UniformNode<"color", Color>;
   cloudShadeColor: UniformNode<"color", Color>;
+  cloudSunBrighten: UniformNode<"float", number>;
+  frontBackBlend: UniformNode<"float", number>;
+  haloColor: UniformNode<"color", Color>;
+  haloHeight: UniformNode<"float", number>;
+  horizonBackColor: UniformNode<"color", Color>;
+  horizonBand: UniformNode<"float", number>;
   horizonColor: UniformNode<"color", Color>;
   lightColor: UniformNode<"color", Color>;
   moonDirection: UniformNode<"vec3", Vector3>;
+  moonGlowColor: UniformNode<"color", Color>;
+  moonSize: UniformNode<"float", number>;
   starIntensity: UniformNode<"float", number>;
   sunDirection: UniformNode<"vec3", Vector3>;
+  sunHaloColor: UniformNode<"color", Color>;
+  sunHaloSize: UniformNode<"float", number>;
+  zenithBackColor: UniformNode<"color", Color>;
   zenithColor: UniformNode<"color", Color>;
 }
 //#endregion
@@ -53,6 +100,10 @@ export interface FogUniforms {
   color: UniformNode<"color", Color>;
   density: UniformNode<"float", number>;
   heightFalloff: UniformNode<"float", number>;
+  scatterColor: UniformNode<"color", Color>;
+  scatterDirection: UniformNode<"vec3", Vector3>;
+  scatterPower: UniformNode<"float", number>;
+  scatterStrength: UniformNode<"float", number>;
   startDistance: UniformNode<"float", number>;
 }
 //#endregion
@@ -96,6 +147,37 @@ export declare const applySkyState: (skyState: SkyState, { fogUniforms, godraysL
 //#region src/atmosphere/computeSunDirection.d.ts
 export declare const computeSunDirection: (minutes: number, tilt: number, sunDirection: Vector3) => Vector3;
 //#endregion
+//#region src/atmosphere/constants.d.ts
+export declare const DEFAULT_SKY_SHAPE: Readonly<SkyShape>;
+export declare const DEFAULT_SKY_GRADIENT: {
+  green: number[];
+  red: number[];
+};
+//#endregion
+//#region src/atmosphere/createCloudAtlasTexture.d.ts
+export declare const getCloudAtlasColumns: (spriteCount: number) => number;
+export declare const createCloudAtlasTexture: (sprites: readonly CloudSprite[], cellSize: number) => CanvasTexture<OffscreenCanvas>;
+//#endregion
+//#region src/atmosphere/createCloudBandSprite.d.ts
+export declare const createCloudBandSprite: (atlas: Texture, clouds: readonly {
+  position: [number, number, number];
+  spriteIndex: number;
+  width: number;
+}[], { aspect, spriteCount }: {
+  aspect: number;
+  spriteCount: number;
+}, skyUniforms: SkyUniforms) => {
+  dispose: () => void;
+  places: [number, number, number][];
+  sprite: Sprite;
+};
+//#endregion
+//#region src/atmosphere/createSkyGradientTexture.d.ts
+export declare const createSkyGradientTexture: ({ green, red }: {
+  green: readonly number[];
+  red: readonly number[];
+}) => DataTexture;
+//#endregion
 //#region src/atmosphere/createSkyState.d.ts
 export declare const createSkyState: () => SkyState;
 //#endregion
@@ -105,6 +187,16 @@ export declare const createSkyUniforms: () => SkyUniforms;
 //#region src/atmosphere/createSunLight.d.ts
 export declare const createSunLight: ({ cascadeCount, maxFar, shadowMapSize }: SunLightOptions) => SunLight;
 //#endregion
+//#region src/atmosphere/orderByViewDepth.d.ts
+export declare const orderByViewDepth: (places: readonly (readonly number[])[], { elements }: Matrix4) => number[];
+//#endregion
+//#region src/atmosphere/placeCloudBand.d.ts
+export declare const placeCloudBand: ({ count, distanceRange: [near, far], heightRange: [low, high], seed, widthRange: [narrow, wide] }: CloudBandOptions, spriteCount: number) => {
+  position: [number, number, number];
+  spriteIndex: number;
+  width: number;
+}[];
+//#endregion
 //#region src/atmosphere/sampleSkyState.d.ts
 export declare const sampleSkyState: (skyKeyframes: readonly SkyKeyframe[], minutes: number, tilt: number, skyState: SkyState) => SkyState;
 //#endregion
@@ -121,6 +213,26 @@ export declare const advanceGameClock: (gameClock: GameClock, deltaSeconds: numb
 export declare const MINUTES_PER_DAY = 1440;
 export declare const GAME_MINUTES_PER_SECOND = 1;
 //#endregion
+//#region src/kits/architecture/LatheSection.d.ts
+export interface LatheSection {
+  bottomRadius: number;
+  height: number;
+  topRadius: number;
+}
+//#endregion
+//#region src/kits/architecture/LatheStackOptions.d.ts
+export interface LatheStackOptions {
+  isFaceted: boolean;
+  radialSegments: number;
+  sections: LatheSection[];
+}
+//#endregion
+//#region src/kits/architecture/createBoxesGeometry.d.ts
+export declare const createBoxesGeometry: (boxes: readonly (readonly number[])[]) => BufferGeometry;
+//#endregion
+//#region src/kits/architecture/createLatheStackGeometry.d.ts
+export declare const createLatheStackGeometry: ({ isFaceted, radialSegments, sections }: LatheStackOptions) => BufferGeometry;
+//#endregion
 //#region src/kits/statue/createStatueGeometry.d.ts
 export declare const createStatueGeometry: () => BufferGeometry;
 //#endregion
@@ -180,12 +292,25 @@ export interface RampOptions {
   terminator: number;
 }
 //#endregion
+//#region src/materials/addSmoothLoop.d.ts
+export declare const addSmoothLoop: (path: Path2D, points: readonly (readonly [number, number])[]) => void;
+//#endregion
 //#region src/materials/computeRampValues.d.ts
 export declare const computeRampValues: ({ resolution, softness, terminator }: RampOptions) => Uint8Array;
 //#endregion
 //#region src/materials/createRampTexture.d.ts
 export declare const createRampTexture: (rampOptions: RampOptions) => DataTexture;
 //#endregion
+//#region src/nodes/StoneMaterialOptions.d.ts
+export interface StoneMaterialOptions {
+  albedo: string;
+  rimColor: readonly number[];
+  rimPower: number;
+  rimStrength: number;
+  smoothness: number;
+  specularColor: readonly number[];
+}
+//#endregion
 //#region src/nodes/ToonMaterialOptions.d.ts
 export interface ToonMaterialOptions {
   color?: ColorRepresentation;
@@ -239,8 +364,14 @@ export declare const createLightUniforms: () => LightUniforms;
 //#region src/nodes/createRimNode.d.ts
 export declare const createRimNode: ({ rimColor, rimStrength, sunDirection }: LightUniforms) => Node<"vec3">;
 //#endregion
+//#region src/nodes/createSkyColorNode.d.ts
+export declare const createSkyColorNode: ({ frontBackBlend, haloColor, haloHeight, horizonBackColor, horizonBand, horizonColor, sunDirection, sunHaloColor, sunHaloSize, zenithBackColor, zenithColor }: SkyUniforms, gradient: Texture, direction: Node<"vec3">) => Node<"vec3">;
+//#endregion
 //#region src/nodes/createSkyNode.d.ts
-export declare const createSkyNode: ({ cloudCoverage, cloudDrift, cloudLitColor, cloudShadeColor, horizonColor, lightColor, moonDirection, starIntensity, sunDirection, zenithColor }: SkyUniforms) => Node<"vec3">;
+export declare const createSkyNode: (uniforms: SkyUniforms, gradient: Texture) => Node<"vec3">;
+//#endregion
+//#region src/nodes/createStoneMaterial.d.ts
+export declare const createStoneMaterial: ({ albedo, rimColor, rimPower, rimStrength, smoothness, specularColor }: StoneMaterialOptions, glowNode?: Node<"vec3">) => MeshPhysicalNodeMaterial;
 //#endregion
 //#region src/nodes/createToonMaterial.d.ts
 export declare const createToonMaterial: ({ color, isOutlined, isVertexColors, lightUniforms, rampTexture }: ToonMaterialOptions) => ToonNodeMaterial;
@@ -312,7 +443,7 @@ export declare const createGodraysLight: (shadowMapSize: number, halfExtent: num
 export declare const createGradeLutTexture: (gradeOptions: GradeOptions) => Data3DTexture;
 //#endregion
 //#region src/post/createHeightFogNode.d.ts
-export declare const createHeightFogNode: (colorNode: Node<"vec4">, depthNode: TextureNode, camera: Camera, { baseHeight, color, density, heightFalloff, startDistance }: FogUniforms) => Node<"vec4">;
+export declare const createHeightFogNode: (colorNode: Node<"vec4">, depthNode: TextureNode, camera: Camera, { baseHeight, color, density, heightFalloff, scatterColor, scatterDirection, scatterPower, scatterStrength, startDistance }: FogUniforms) => Node<"vec4">;
 //#endregion
 //#region src/post/createPostPipeline.d.ts
 export declare const createPostPipeline: ({ camera, fogUniforms, godraysLight, gradeLutTexture, postUniforms: { godraysColor, gradeIntensity, outlineColor, outlineFadeDistance, outlineThickness }, qualityTierSettings: { antialiasingMode, godraysStepCount, isBloomEnabled }, renderer, scene }: PostPipelineOptions) => PostPipeline;
@@ -320,6 +451,12 @@ export declare const createPostPipeline: ({ camera, fogUniforms, godraysLight, g
 //#region src/post/createPostUniforms.d.ts
 export declare const createPostUniforms: () => PostUniforms;
 //#endregion
+//#region src/post/toSceneColor.d.ts
+export declare const toSceneColor: (displayColor: Color) => Color;
+//#endregion
+//#region src/post/toneMapNeutral.d.ts
+export declare const toneMapNeutral: ([red, green, blue]: [number, number, number]) => [number, number, number];
+//#endregion
 //#region src/random/createSeededRandom.d.ts
 export declare const createSeededRandom: (seed: number) => (() => number);
 //#endregion
@@ -333,6 +470,44 @@ export declare enum QualityTier {
 //#region src/renderer/QualityTierSettingsMap.d.ts
 export declare const QualityTierSettingsMap: Readonly<Record<QualityTier, QualityTierSettings>>;
 //#endregion
+//#region src/renderer/constants.d.ts
+export declare const GENSHIN_TONE_MAPPING: ToneMapping;
+//#endregion
+//#region src/renderer/getScreenDirection.d.ts
+export declare const getScreenDirection: ({ aspect, fov, pitch, yaw }: {
+  aspect: number;
+  fov: number;
+  pitch: number;
+  yaw: number;
+}, [x, y]: [number, number]) => Vector3;
+//#endregion
+//#region src/scene/SceneMaterial.d.ts
+export interface SceneMaterial {
+  colors: Record<string, [number, number, number, number]>;
+  floats: Record<string, number>;
+  name: string;
+  textures: Record<string, {
+    name: string;
+    offset: [number, number];
+    scale: [number, number];
+  }>;
+}
+//#endregion
+//#region src/scene/ScenePlacement.d.ts
+export interface ScenePlacement {
+  materials: string[];
+  mesh: string;
+  position: [number, number, number];
+  rotation: [number, number, number, number];
+  scale: [number, number, number];
+}
+//#endregion
+//#region src/scene/SceneLayout.d.ts
+export interface SceneLayout {
+  materials: Record<string, SceneMaterial>;
+  placements: ScenePlacement[];
+}
+//#endregion
 //#region src/terrain/TerrainSelection.d.ts
 export interface TerrainSelection {
   count: number;

package/dist/index.js

@@ -1,8 +1,8 @@
-import { Box3, BufferAttribute, BufferGeometry, Color, CylinderGeometry, Data3DTexture, DataTexture, DirectionalLight, DoubleSide, HalfFloatType, InstancedBufferGeometry, LatheGeometry, LinearFilter, OrthographicCamera, Quaternion, RedFormat, Vector2, Vector3 } from "three";
-import { Fn, If, attribute, cameraFar, cameraNear, cameraPosition, cameraViewMatrix, cos, exp, exp2, float, getViewPosition, hash, instanceIndex, max, mix, modelViewMatrix, modelWorldMatrix, mrt, mx_cell_noise_float, mx_fractal_noise_float, mx_noise_float, normalView, normalWorldGeometry, output, perspectiveDepthToViewZ, positionGeometry, positionLocal, positionView, positionViewDirection, positionWorld, pow, reflect, renderOutput, screenUV, sin, smoothstep, step, texture, texture3D, time, uniform, uv, varying, vec2, vec3, vec4, velocity, viewportDepthTexture, viewportSharedTexture } from "three/tsl";
+import { Box3, BoxGeometry, BufferAttribute, BufferGeometry, CanvasTexture, ClampToEdgeWrapping, Color, CylinderGeometry, Data3DTexture, DataTexture, DirectionalLight, DoubleSide, HalfFloatType, InstancedBufferAttribute, InstancedBufferGeometry, LatheGeometry, LinearFilter, MathUtils, Matrix4, NeutralToneMapping, NoColorSpace, OrthographicCamera, Quaternion, RGBAFormat, RedFormat, Sprite, UnsignedByteType, Vector2, Vector3 } from "three";
+import { Fn, If, abs, asin, attribute, cameraFar, cameraNear, cameraPosition, cameraViewMatrix, clamp, color, cos, exp, exp2, float, getViewPosition, hash, instanceIndex, instancedBufferAttribute, max, min, mix, modelViewMatrix, modelWorldMatrix, mrt, mx_cell_noise_float, mx_fractal_noise_float, mx_noise_float, normalView, normalWorldGeometry, output, perspectiveDepthToViewZ, positionGeometry, positionLocal, positionView, positionViewDirection, positionWorld, pow, reflect, renderOutput, saturate, screenUV, sin, smoothstep, step, texture, texture3D, time, uniform, uv, varying, vec2, vec3, vec4, velocity, viewportDepthTexture, viewportSharedTexture } from "three/tsl";
+import { MeshBasicNodeMaterial, MeshPhysicalNodeMaterial, MeshToonNodeMaterial, RenderPipeline, RenderTarget, SpriteNodeMaterial, ToonOutlinePassNode, WebGPURenderer } from "three/webgpu";
 import { CSMShadowNode } from "three/examples/jsm/csm/CSMShadowNode.js";
 import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
-import { MeshBasicNodeMaterial, MeshToonNodeMaterial, NeutralToneMapping, RenderPipeline, RenderTarget, ToonOutlinePassNode, WebGPURenderer } from "three/webgpu";
 import { voronoi2d } from "three/examples/jsm/tsl/math/voronoiNoise.js";
 import { bilateralBlur } from "three/examples/jsm/tsl/display/BilateralBlurNode.js";
 import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
@@ -11,9 +11,72 @@ import { godrays } from "three/examples/jsm/tsl/display/GodraysNode.js";
 import { lut3D } from "three/examples/jsm/tsl/display/Lut3DNode.js";
 import { smaa } from "three/examples/jsm/tsl/display/SMAANode.js";
 import { traa } from "three/examples/jsm/tsl/display/TRAANode.js";
+//#region src/atmosphere/constants.ts
+const DEFAULT_SKY_SHAPE = {
+	frontBackBlend: 1,
+	haloHeight: 1,
+	horizonBand: .45,
+	moonSize: 1,
+	sunHaloSize: 1
+};
+const DEFAULT_SAMPLE_COUNT = 33;
+const DEFAULT_SKY_GRADIENT = {
+	green: Array.from({ length: DEFAULT_SAMPLE_COUNT }, () => 0),
+	red: Array.from({ length: DEFAULT_SAMPLE_COUNT }, (_, index) => {
+		const share = index / 32;
+		return 1 - share * share * (3 - 2 * share);
+	})
+};
+//#endregion
+//#region src/post/toneMapNeutral.ts
+const TOE_END = .08;
+const TOE_OFFSET = .04;
+const COMPRESSION_START = .76;
+const DESATURATION = .15;
+const toneMapNeutral = ([red, green, blue]) => {
+	const lowest = Math.min(red, green, blue);
+	const offset = lowest < TOE_END ? lowest - 6.25 * lowest * lowest : TOE_OFFSET;
+	const offsetColor = [
+		red - offset,
+		green - offset,
+		blue - offset
+	];
+	const peak = Math.max(...offsetColor);
+	if (peak < COMPRESSION_START) return offsetColor;
+	const headroom = .24;
+	const newPeak = 1 - headroom * headroom / (peak + headroom - COMPRESSION_START);
+	const whiteShare = 1 - 1 / (DESATURATION * (peak - newPeak) + 1);
+	return offsetColor.map((channel) => channel * newPeak / peak + (newPeak - channel * newPeak / peak) * whiteShare);
+};
+//#endregion
+//#region src/post/toSceneColor.ts
+const INVERSE_STEP_COUNT = 16;
+const SLOPE_NUDGE = 1e-4;
+const SCENE_CHANNEL_LIMIT = 1.5;
+const toSceneColor = (displayColor) => {
+	const target = [
+		displayColor.r,
+		displayColor.g,
+		displayColor.b
+	];
+	let input = [...target];
+	for (let step = 0; step < INVERSE_STEP_COUNT; step++) {
+		const current = input;
+		const output = toneMapNeutral(current);
+		input = current.map((channel, index) => {
+			const nudged = [...current];
+			nudged[index] = channel + SLOPE_NUDGE;
+			const slope = ((toneMapNeutral(nudged)[index] ?? 0) - (output[index] ?? 0)) / SLOPE_NUDGE;
+			return Math.min(Math.max(channel + ((target[index] ?? 0) - (output[index] ?? 0)) / slope, 0), SCENE_CHANNEL_LIMIT);
+		});
+	}
+	return new Color(...input);
+};
+//#endregion
 //#region src/atmosphere/applySkyState.ts
 const GODRAYS_REDRAW_COSINE = Math.cos(.6 * Math.PI / 180);
 const godraysDirection = new Vector3();
+const BLACK = new Color(0, 0, 0);
 const applySkyState = (skyState, { fogUniforms, godraysLight, hemisphere, light, lightDistance, lightUniforms, postUniforms, skyUniforms }) => {
 	const { horizonColor, lightColor, lightDirection } = skyState;
 	light.position.copy(light.target.position).addScaledVector(lightDirection, lightDistance);
@@ -25,16 +88,30 @@ const applySkyState = (skyState, { fogUniforms, godraysLight, hemisphere, light,
 	lightUniforms.lightColor.value.copy(lightColor);
 	lightUniforms.sunDirection.value.copy(lightDirection);
 	lightUniforms.rimColor.value.copy(horizonColor);
-	fogUniforms.color.value.copy(horizonColor);
+	fogUniforms.color.value.copy(toSceneColor(skyState.fogColor ?? horizonColor));
+	fogUniforms.scatterColor.value.copy(toSceneColor(lightColor));
+	fogUniforms.scatterDirection.value.copy(lightDirection);
 	postUniforms.godraysColor.value.copy(lightColor);
-	skyUniforms.cloudLitColor.value.copy(skyState.cloudLitColor);
-	skyUniforms.cloudShadeColor.value.copy(skyState.cloudShadeColor);
-	skyUniforms.horizonColor.value.copy(horizonColor);
+	skyUniforms.cloudLitColor.value.copy(toSceneColor(skyState.cloudLitColor));
+	skyUniforms.cloudShadeColor.value.copy(toSceneColor(skyState.cloudShadeColor));
+	skyUniforms.cloudLitBackColor.value.copy(toSceneColor(skyState.cloudLitBackColor ?? skyState.cloudLitColor));
+	skyUniforms.cloudShadeBackColor.value.copy(toSceneColor(skyState.cloudShadeBackColor ?? skyState.cloudShadeColor));
+	skyUniforms.horizonColor.value.copy(toSceneColor(horizonColor));
+	skyUniforms.horizonBackColor.value.copy(toSceneColor(skyState.horizonBackColor ?? horizonColor));
+	skyUniforms.zenithBackColor.value.copy(toSceneColor(skyState.zenithBackColor ?? skyState.zenithColor));
+	skyUniforms.haloColor.value.copy(toSceneColor(skyState.haloColor ?? BLACK));
+	skyUniforms.sunHaloColor.value.copy(toSceneColor(skyState.sunHaloColor ?? BLACK));
 	skyUniforms.lightColor.value.copy(lightColor);
 	skyUniforms.moonDirection.value.copy(skyState.moonDirection);
 	skyUniforms.starIntensity.value = skyState.starIntensity;
 	skyUniforms.sunDirection.value.copy(skyState.sunDirection);
-	skyUniforms.zenithColor.value.copy(skyState.zenithColor);
+	skyUniforms.zenithColor.value.copy(toSceneColor(skyState.zenithColor));
+	const { frontBackBlend, haloHeight, horizonBand, moonSize, sunHaloSize } = skyState.shape ?? DEFAULT_SKY_SHAPE;
+	skyUniforms.frontBackBlend.value = frontBackBlend;
+	skyUniforms.haloHeight.value = haloHeight;
+	skyUniforms.horizonBand.value = horizonBand;
+	skyUniforms.moonSize.value = moonSize;
+	skyUniforms.sunHaloSize.value = sunHaloSize;
 	godraysDirection.subVectors(godraysLight.position, godraysLight.target.position).normalize();
 	if (godraysDirection.dot(lightDirection) >= GODRAYS_REDRAW_COSINE) return;
 	godraysLight.position.copy(godraysLight.target.position).addScaledVector(lightDirection, lightDistance);
@@ -52,6 +129,135 @@ const computeSunDirection = (minutes, tilt, sunDirection) => {
 	return sunDirection.set(Math.sin(hourAngle), height * Math.cos(tilt), height * Math.sin(tilt));
 };
 //#endregion
+//#region src/materials/addSmoothLoop.ts
+const addSmoothLoop = (path, points) => {
+	if (points.length < 3) return;
+	const readMidpoint = (index) => {
+		const [startX = 0, startY = 0] = points[index % points.length] ?? [];
+		const [endX = 0, endY = 0] = points[(index + 1) % points.length] ?? [];
+		return [(startX + endX) / 2, (startY + endY) / 2];
+	};
+	path.moveTo(...readMidpoint(points.length - 1));
+	for (const [index, [x, y]] of points.entries()) path.quadraticCurveTo(x, y, ...readMidpoint(index));
+	path.closePath();
+};
+//#endregion
+//#region src/atmosphere/createCloudAtlasTexture.ts
+const EDGE_BLUR_SHARE = .012;
+const getCloudAtlasColumns = (spriteCount) => Math.ceil(Math.sqrt(spriteCount));
+const createCloudAtlasTexture = (sprites, cellSize) => {
+	const columns = getCloudAtlasColumns(sprites.length);
+	const canvas = new OffscreenCanvas(columns * cellSize, columns * cellSize);
+	const context = canvas.getContext("2d");
+	if (context) {
+		context.globalCompositeOperation = "lighter";
+		context.filter = `blur(${cellSize * EDGE_BLUR_SHARE}px)`;
+		const fill = (loops, column, row, style) => {
+			const path = new Path2D();
+			const toCanvas = ([x, y]) => [(column + x) * cellSize, (row + 1 - y) * cellSize];
+			for (const loop of loops) addSmoothLoop(path, loop.map((point) => toCanvas(point)));
+			context.fillStyle = style;
+			context.fill(path, "evenodd");
+		};
+		for (const [index, { lit, outline }] of sprites.entries()) {
+			const column = index % columns;
+			const row = Math.floor(index / columns);
+			fill(outline, column, row, "#f00");
+			fill(lit, column, row, "#0f0");
+		}
+	}
+	const texture = new CanvasTexture(canvas);
+	texture.colorSpace = NoColorSpace;
+	texture.magFilter = LinearFilter;
+	texture.minFilter = LinearFilter;
+	texture.generateMipmaps = false;
+	return texture;
+};
+//#endregion
+//#region src/atmosphere/orderByViewDepth.ts
+const orderByViewDepth = (places, { elements }) => {
+	const depths = places.map(([x = 0, y = 0, z = 0]) => elements[2] * x + elements[6] * y + elements[10] * z + elements[14]);
+	return depths.map((_, index) => index).toSorted((first, second) => (depths[first] ?? 0) - (depths[second] ?? 0));
+};
+//#endregion
+//#region src/atmosphere/createCloudBandSprite.ts
+const BELOW_FADE_START = .1;
+const BELOW_FADE_SCALE = 5;
+const COVERAGE_LIGHT_SHARE = .4;
+const EDGE_FADE_START = .15;
+const EDGE_FADE_END = .85;
+const DROPPED_COVERAGE = .01;
+const createCloudBandSprite = (atlas, clouds, { aspect, spriteCount }, skyUniforms) => {
+	const { cloudCoverage, cloudFrontBackBlend, cloudLitBackColor, cloudLitColor, cloudShadeBackColor, cloudShadeColor, cloudSunBrighten, sunDirection } = skyUniforms;
+	const columns = getCloudAtlasColumns(spriteCount);
+	const places = clouds.map(({ position }) => [...position]);
+	const cloudScales = clouds.map(({ width }) => [width, width / aspect]);
+	const cloudCells = clouds.map(({ spriteIndex }) => [spriteIndex % columns, columns - 1 - Math.floor(spriteIndex / columns)]);
+	const positions = new InstancedBufferAttribute(new Float32Array(clouds.length * 3), 3);
+	const scales = new InstancedBufferAttribute(new Float32Array(clouds.length * 2), 2);
+	const cells = new InstancedBufferAttribute(new Float32Array(clouds.length * 2), 2);
+	const mask = texture(atlas, uv().add(instancedBufferAttribute(cells)).div(columns));
+	const place = instancedBufferAttribute(positions);
+	const direction = place.sub(cameraPosition).normalize();
+	const elevation = asin(clamp(direction.y, -1, 1)).mul(2 / Math.PI);
+	const sunCosine = direction.dot(sunDirection);
+	const toward = pow(max(sunCosine.mul(cloudFrontBackBlend).add(float(1).sub(cloudFrontBackBlend)), 0), 3);
+	const lit = mix(cloudLitBackColor, cloudLitColor, toward);
+	const shade = mix(cloudShadeBackColor, cloudShadeColor, toward);
+	const cloudColor = mix(shade, lit, mask.g).add(lit.mul(cloudCoverage.mul(COVERAGE_LIGHT_SHARE))).mul(float(1).add(cloudSunBrighten.mul(sunCosine.mul(.5).add(.5))));
+	const material = new SpriteNodeMaterial({
+		depthWrite: false,
+		transparent: true
+	});
+	material.positionNode = place;
+	material.scaleNode = instancedBufferAttribute(scales);
+	material.colorNode = cloudColor;
+	material.opacityNode = smoothstep(EDGE_FADE_START, EDGE_FADE_END, mask.r).mul(smoothstep(0, 1, saturate(elevation.add(BELOW_FADE_START).mul(BELOW_FADE_SCALE))));
+	material.alphaTest = DROPPED_COVERAGE;
+	const sprite = new Sprite(material);
+	sprite.center.set(.5, 0);
+	sprite.count = clouds.length;
+	sprite.frustumCulled = false;
+	const modelViewMatrix = new Matrix4();
+	sprite.onBeforeRender = (_renderer, _scene, camera) => {
+		modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, sprite.matrixWorld);
+		for (const [instance, cloud] of orderByViewDepth(places, modelViewMatrix).entries()) {
+			positions.set(places[cloud] ?? [], instance * 3);
+			scales.set(cloudScales[cloud] ?? [], instance * 2);
+			cells.set(cloudCells[cloud] ?? [], instance * 2);
+		}
+		positions.needsUpdate = true;
+		scales.needsUpdate = true;
+		cells.needsUpdate = true;
+	};
+	return {
+		dispose: () => {
+			material.dispose();
+		},
+		places,
+		sprite
+	};
+};
+//#endregion
+//#region src/atmosphere/createSkyGradientTexture.ts
+const BYTE = 255;
+const createSkyGradientTexture = ({ green, red }) => {
+	const width = Math.max(red.length, green.length, 1);
+	const data = new Uint8Array(width * 4);
+	for (let index = 0; index < width; index++) {
+		data[index * 4] = Math.round((red[index] ?? 0) * BYTE);
+		data[index * 4 + 1] = Math.round((green[index] ?? 0) * BYTE);
+		data[index * 4 + 3] = BYTE;
+	}
+	const texture = new DataTexture(data, width, 1, RGBAFormat, UnsignedByteType);
+	texture.magFilter = LinearFilter;
+	texture.minFilter = LinearFilter;
+	texture.wrapS = ClampToEdgeWrapping;
+	texture.wrapT = ClampToEdgeWrapping;
+	texture.needsUpdate = true;
+	return texture;
+};
+//#endregion
 //#region src/atmosphere/createSkyState.ts
 const createSkyState = () => ({
 	cloudLitColor: new Color(),
@@ -73,13 +279,27 @@ const createSkyState = () => ({
 const createSkyUniforms = () => ({
 	cloudCoverage: uniform(0),
 	cloudDrift: uniform(new Vector2()),
+	cloudFrontBackBlend: uniform(1),
+	cloudLitBackColor: uniform(new Color()),
 	cloudLitColor: uniform(new Color()),
+	cloudShadeBackColor: uniform(new Color()),
 	cloudShadeColor: uniform(new Color()),
+	cloudSunBrighten: uniform(0),
+	frontBackBlend: uniform(DEFAULT_SKY_SHAPE.frontBackBlend),
+	haloColor: uniform(new Color(0, 0, 0)),
+	haloHeight: uniform(DEFAULT_SKY_SHAPE.haloHeight),
+	horizonBackColor: uniform(new Color()),
+	horizonBand: uniform(DEFAULT_SKY_SHAPE.horizonBand),
 	horizonColor: uniform(new Color()),
 	lightColor: uniform(new Color()),
 	moonDirection: uniform(new Vector3(0, -1, 0)),
+	moonGlowColor: uniform(new Color(0, 0, 0)),
+	moonSize: uniform(DEFAULT_SKY_SHAPE.moonSize),
 	starIntensity: uniform(0),
 	sunDirection: uniform(new Vector3(0, 1, 0)),
+	sunHaloColor: uniform(new Color(0, 0, 0)),
+	sunHaloSize: uniform(DEFAULT_SKY_SHAPE.sunHaloSize),
+	zenithBackColor: uniform(new Color()),
 	zenithColor: uniform(new Color())
 });
 //#endregion
@@ -108,6 +328,36 @@ const createSunLight = ({ cascadeCount, maxFar, shadowMapSize }) => {
 	};
 };
 //#endregion
+//#region src/random/createSeededRandom.ts
+const createSeededRandom = (seed) => {
+	let state = seed;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let mixed = Math.imul(state ^ state >>> 15, 1 | state);
+		mixed ^= mixed + Math.imul(mixed ^ mixed >>> 7, 61 | mixed);
+		return ((mixed ^ mixed >>> 14) >>> 0) / 2 ** 32;
+	};
+};
+//#endregion
+//#region src/atmosphere/placeCloudBand.ts
+const placeCloudBand = ({ count, distanceRange: [near, far], heightRange: [low, high], seed, widthRange: [narrow, wide] }, spriteCount) => {
+	const random = createSeededRandom(seed);
+	return Array.from({ length: count }, () => {
+		const angle = random() * Math.PI * 2;
+		const distance = Math.sqrt(near ** 2 + random() * (far ** 2 - near ** 2));
+		const height = low + random() * (high - low);
+		return {
+			position: [
+				Math.cos(angle) * distance,
+				height,
+				Math.sin(angle) * distance
+			],
+			spriteIndex: Math.floor(random() * spriteCount),
+			width: narrow + random() * (wide - narrow)
+		};
+	});
+};
+//#endregion
 //#region src/atmosphere/sampleSkyState.ts
 const lerp = (from, to, amount) => from + (to - from) * amount;
 const sampleSkyState = (skyKeyframes, minutes, tilt, skyState) => {
@@ -140,6 +390,28 @@ const advanceGameClock = (gameClock, deltaSeconds) => {
 	gameClock.minutes = (gameClock.minutes + deltaSeconds * gameClock.minutesPerSecond) % MINUTES_PER_DAY;
 };
 //#endregion
+//#region src/kits/architecture/createBoxesGeometry.ts
+const createBoxesGeometry = (boxes) => {
+	const parts = boxes.map(([minX = 0, minY = 0, minZ = 0, maxX = 0, maxY = 0, maxZ = 0]) => new BoxGeometry(maxX - minX, maxY - minY, maxZ - minZ).translate((minX + maxX) / 2, (minY + maxY) / 2, (minZ + maxZ) / 2));
+	const geometry = mergeGeometries(parts) ?? new BufferGeometry();
+	for (const part of parts) part.dispose();
+	return geometry;
+};
+//#endregion
+//#region src/kits/architecture/createLatheStackGeometry.ts
+const createLatheStackGeometry = ({ isFaceted, radialSegments, sections }) => {
+	let footHeight = 0;
+	const parts = sections.map(({ bottomRadius, height, topRadius }) => {
+		const part = new CylinderGeometry(topRadius, bottomRadius, height, radialSegments).translate(0, footHeight + height / 2, 0);
+		footHeight += height;
+		return isFaceted ? part.toNonIndexed() : part;
+	});
+	const stackGeometry = mergeGeometries(parts) ?? new BufferGeometry();
+	for (const part of parts) part.dispose();
+	if (isFaceted) stackGeometry.computeVertexNormals();
+	return stackGeometry;
+};
+//#endregion
 //#region src/kits/statue/createStatueGeometry.ts
 const PLINTH_SIDES = 8;
 const FIGURE_SEGMENTS = 24;
@@ -179,17 +451,6 @@ const createStatueGeometry = () => {
 	return statueGeometry;
 };
 //#endregion
-//#region src/random/createSeededRandom.ts
-const createSeededRandom = (seed) => {
-	let state = seed;
-	return () => {
-		state = state + 1831565813 >>> 0;
-		let mixed = Math.imul(state ^ state >>> 15, 1 | state);
-		mixed ^= mixed + Math.imul(mixed ^ mixed >>> 7, 61 | mixed);
-		return ((mixed ^ mixed >>> 14) >>> 0) / 2 ** 32;
-	};
-};
-//#endregion
 //#region src/kits/tree/computeLeafCards.ts
 const VERTICES_PER_CARD = 4;
 const INDICES_PER_CARD = 6;
@@ -379,14 +640,18 @@ const createCausticsNode = ({ lightColor }, { causticStrength, deepDepth, level
 	return lightColor.mul(veins.mul(fade).mul(causticStrength));
 };
 //#endregion
+//#region src/renderer/constants.ts
+const GENSHIN_TONE_MAPPING = NeutralToneMapping;
+//#endregion
 //#region src/nodes/createGenshinRenderer.ts
 const createGenshinRenderer = (canvas) => {
+	const isWindows = window.navigator.userAgent.includes("Windows");
 	const renderer = new WebGPURenderer({
 		antialias: false,
 		canvas,
-		powerPreference: "high-performance"
+		...isWindows ? {} : { powerPreference: "high-performance" }
 	});
-	renderer.toneMapping = NeutralToneMapping;
+	renderer.toneMapping = GENSHIN_TONE_MAPPING;
 	return renderer;
 };
 //#endregion
@@ -402,7 +667,7 @@ const createRimNode = ({ rimColor, rimStrength, sunDirection }) => {
 //#region src/nodes/createToonMaterial.ts
 const createToonMaterial = ({ color, isOutlined = true, isVertexColors = false, lightUniforms, rampTexture }) => {
 	const toonMaterial = new ToonNodeMaterial({
-		color,
+		...color === void 0 ? {} : { color },
 		gradientMap: rampTexture,
 		vertexColors: isVertexColors
 	}, isOutlined);
@@ -449,12 +714,37 @@ const createLightUniforms = () => ({
 	sunDirection: uniform(new Vector3(0, 1, 0))
 });
 //#endregion
+//#region src/nodes/createSkyColorNode.ts
+const LEAST_DIVISOR$1 = 1e-4;
+const HALO_TOWARD_START = .3;
+const HALO_TOWARD_SPAN = .7;
+const HALO_SUN_HEIGHT_START = .2;
+const HALO_SUN_HEIGHT_SPAN = .3;
+const SUN_HALO_MIDDLE_SPREAD = .1;
+const SUN_HALO_MIDDLE_WEIGHT = .12;
+const SUN_HALO_OUTER_SPREAD = .01;
+const SUN_HALO_OUTER_WEIGHT = .03;
+const createSkyColorNode = ({ frontBackBlend, haloColor, haloHeight, horizonBackColor, horizonBand, horizonColor, sunDirection, sunHaloColor, sunHaloSize, zenithBackColor, zenithColor }, gradient, direction) => {
+	const height = direction.y;
+	const elevation = abs(asin(clamp(height, -1, 1)).mul(2 / Math.PI));
+	const sunCosine = direction.dot(sunDirection);
+	const toward = pow(max(sunCosine.mul(frontBackBlend).add(float(1).sub(frontBackBlend)), 0), 3);
+	const top = mix(zenithBackColor, zenithColor, toward);
+	const bottom = mix(horizonBackColor, horizonColor, toward);
+	const bottomShare = texture(gradient, vec2(elevation.div(max(horizonBand, LEAST_DIVISOR$1)), .5)).r;
+	const haloShare = texture(gradient, vec2(elevation.div(max(haloHeight, LEAST_DIVISOR$1)), .5)).g;
+	const sunSide = saturate(sunCosine.mul(.5).add(.5));
+	const towardSun = smoothstep(0, 1, max(sunSide.sub(HALO_TOWARD_START).div(HALO_TOWARD_SPAN), 0));
+	const sunUp = smoothstep(0, 1, saturate(abs(sunDirection.y).sub(HALO_SUN_HEIGHT_START).div(HALO_SUN_HEIGHT_SPAN)));
+	const halo = haloColor.mul(haloShare).mul(sunUp.mul(float(1).sub(towardSun)).add(towardSun));
+	const spread = sunHaloSize.mul(abs(height));
+	const sunHalo = min(pow(sunSide, spread), 1).add(min(pow(sunSide, spread.mul(SUN_HALO_MIDDLE_SPREAD)), 1).mul(SUN_HALO_MIDDLE_WEIGHT)).add(min(pow(sunSide, spread.mul(SUN_HALO_OUTER_SPREAD)), 1).mul(SUN_HALO_OUTER_WEIGHT)).mul(smoothstep(0, 1, max(sunSide.sub(.5).mul(2), 0)));
+	return mix(top, bottom, bottomShare).add(halo).add(sunHaloColor.mul(sunHalo));
+};
+//#endregion
 //#region src/nodes/createSkyNode.ts
-const HORIZON_BAND = .45;
 const SUN_DISC_COSINE = Math.cos(.035);
 const MOON_DISC_COSINE = Math.cos(.05);
-const SUN_GLOW_POWER = 12;
-const HORIZON_GLOW_POWER = 3;
 const SUN_DISC_BRIGHTNESS = 6;
 const CLOUD_SCALE = 1.6;
 const CLOUD_MIN_HEIGHT = .04;
@@ -462,26 +752,46 @@ const CLOUD_EDGE = .04;
 const CLOUD_SHADE_DEPTH = .18;
 const STAR_SCALE = 420;
 const STAR_THRESHOLD = .9975;
-const createSkyNode = ({ cloudCoverage, cloudDrift, cloudLitColor, cloudShadeColor, horizonColor, lightColor, moonDirection, starIntensity, sunDirection, zenithColor }) => Fn(() => {
-	const direction = normalWorldGeometry.normalize();
-	const height = direction.y;
-	const gradient = mix(horizonColor, zenithColor, smoothstep(0, HORIZON_BAND, height));
-	const sunCosine = direction.dot(sunDirection);
-	const sunVisibility = smoothstep(-.1, .05, sunDirection.y);
-	const sunGlow = pow(max(sunCosine, 0), SUN_GLOW_POWER).mul(sunVisibility);
-	const horizonGlow = pow(max(sunCosine, 0), HORIZON_GLOW_POWER).mul(float(1).sub(smoothstep(0, .3, height.abs()))).mul(float(1).sub(smoothstep(0, .5, sunDirection.y))).mul(sunVisibility);
-	const sunDisc = smoothstep(SUN_DISC_COSINE - 5e-4, SUN_DISC_COSINE, sunCosine).mul(sunVisibility);
-	const moonDisc = smoothstep(MOON_DISC_COSINE - 5e-4, MOON_DISC_COSINE, direction.dot(moonDirection)).mul(smoothstep(-.05, .05, moonDirection.y));
-	const stars = smoothstep(STAR_THRESHOLD, 1, mx_cell_noise_float(direction.mul(STAR_SCALE))).mul(starIntensity).mul(smoothstep(0, .1, height));
-	const cloudPosition = direction.xz.div(max(height, CLOUD_MIN_HEIGHT)).mul(CLOUD_SCALE).add(cloudDrift);
-	const cloudNoise = mx_fractal_noise_float(vec3(cloudPosition, 0), 4, 2, .5).mul(.5).add(.5);
-	const cloudThreshold = float(1).sub(cloudCoverage);
-	const cloudDensity = smoothstep(cloudThreshold, cloudThreshold.add(CLOUD_EDGE), cloudNoise).mul(smoothstep(0, .12, height));
-	const cloudShade = smoothstep(cloudThreshold.add(CLOUD_SHADE_DEPTH), cloudThreshold.add(.22), cloudNoise);
-	const cloudColor = mix(cloudLitColor, cloudShadeColor, cloudShade).add(lightColor.mul(sunGlow.mul(.6)));
-	const sky = gradient.add(lightColor.mul(sunGlow.mul(.35).add(horizonGlow.mul(.45)))).add(vec3(stars)).add(vec3(.85, .88, 1).mul(moonDisc)).add(lightColor.mul(sunDisc.mul(SUN_DISC_BRIGHTNESS)));
-	return mix(sky, cloudColor, cloudDensity);
-})();
+const LEAST_DIVISOR = 1e-4;
+const MOON_GLOW_SPREAD = .1;
+const MOON_GLOW_POWER = 6;
+const createSkyNode = (uniforms, gradient) => {
+	const { cloudCoverage, cloudDrift, cloudLitColor, cloudShadeColor, lightColor, moonDirection, moonGlowColor, moonSize, starIntensity, sunDirection } = uniforms;
+	return Fn(() => {
+		const direction = normalWorldGeometry.normalize();
+		const height = direction.y;
+		const sunCosine = direction.dot(sunDirection);
+		const gradientColor = createSkyColorNode(uniforms, gradient, direction);
+		const moonCosine = saturate(direction.dot(moonDirection));
+		const moonGlow = pow(max(moonCosine.sub(1).div(max(moonSize.mul(MOON_GLOW_SPREAD), LEAST_DIVISOR)).add(1), 0), MOON_GLOW_POWER);
+		const sunVisibility = smoothstep(-.1, .05, sunDirection.y);
+		const sunDisc = smoothstep(SUN_DISC_COSINE - 5e-4, SUN_DISC_COSINE, sunCosine).mul(sunVisibility);
+		const moonDisc = smoothstep(MOON_DISC_COSINE - 5e-4, MOON_DISC_COSINE, direction.dot(moonDirection)).mul(smoothstep(-.05, .05, moonDirection.y));
+		const stars = smoothstep(STAR_THRESHOLD, 1, mx_cell_noise_float(direction.mul(STAR_SCALE))).mul(starIntensity).mul(smoothstep(0, .1, height));
+		const cloudPosition = direction.xz.div(max(height, CLOUD_MIN_HEIGHT)).mul(CLOUD_SCALE).add(cloudDrift);
+		const cloudNoise = mx_fractal_noise_float(vec3(cloudPosition, 0), 4, 2, .5).mul(.5).add(.5);
+		const cloudThreshold = float(1).sub(cloudCoverage);
+		const cloudDensity = smoothstep(cloudThreshold, cloudThreshold.add(CLOUD_EDGE), cloudNoise).mul(smoothstep(0, .12, height));
+		const cloudShade = smoothstep(cloudThreshold.add(CLOUD_SHADE_DEPTH), cloudThreshold.add(.22), cloudNoise);
+		const cloudColor = mix(cloudLitColor, cloudShadeColor, cloudShade);
+		const sky = gradientColor.add(moonGlowColor.mul(moonGlow)).add(vec3(stars)).add(vec3(.85, .88, 1).mul(moonDisc)).add(lightColor.mul(sunDisc.mul(SUN_DISC_BRIGHTNESS)));
+		return mix(sky, cloudColor, cloudDensity);
+	})();
+};
+//#endregion
+//#region src/nodes/createStoneMaterial.ts
+const createStoneMaterial = ({ albedo, rimColor, rimPower, rimStrength, smoothness, specularColor }, glowNode = vec3(0)) => {
+	const material = new MeshPhysicalNodeMaterial({
+		color: new Color(albedo),
+		metalness: 0,
+		roughness: 1 - smoothness,
+		specularColor: new Color().fromArray(specularColor),
+		specularIntensity: 1
+	});
+	const fresnel = float(1).sub(normalView.dot(positionViewDirection).saturate()).pow(rimPower);
+	material.emissiveNode = color(new Color().fromArray(rimColor)).mul(fresnel.mul(rimStrength)).add(glowNode);
+	return material;
+};
 //#endregion
 //#region src/nodes/createWaterMaterial.ts
 const RIPPLE_SCALE = .08;
@@ -616,6 +926,10 @@ const createFogUniforms = () => ({
 	color: uniform(new Color()),
 	density: uniform(0),
 	heightFalloff: uniform(0),
+	scatterColor: uniform(new Color()),
+	scatterDirection: uniform(new Vector3(0, 1, 0)),
+	scatterPower: uniform(1),
+	scatterStrength: uniform(0),
 	startDistance: uniform(0)
 });
 //#endregion
@@ -647,7 +961,7 @@ const createGradeLutTexture = (gradeOptions) => {
 //#endregion
 //#region src/post/createHeightFogNode.ts
 const MIN_RAY_CLIMB = 1e-6;
-const createHeightFogNode = (colorNode, depthNode, camera, { baseHeight, color, density, heightFalloff, startDistance }) => {
+const createHeightFogNode = (colorNode, depthNode, camera, { baseHeight, color, density, heightFalloff, scatterColor, scatterDirection, scatterPower, scatterStrength, startDistance }) => {
 	const cameraWorldMatrix = uniform(camera.matrixWorld);
 	const cameraProjectionMatrixInverse = uniform(camera.projectionMatrixInverse);
 	return Fn(() => {
@@ -668,7 +982,8 @@ const createHeightFogNode = (colorNode, depthNode, camera, { baseHeight, color,
 				opticalDepth.assign(densityAtStart.mul(float(1).sub(exp(fogLength.mul(climb).negate()))).div(climb));
 			});
 			const opacity = float(1).sub(exp(opticalDepth.negate()));
-			output.assign(vec4(mix(output.rgb, color, opacity), output.a));
+			const scatter = pow(max(ray.normalize().dot(scatterDirection), 0), scatterPower).mul(scatterStrength);
+			output.assign(vec4(mix(output.rgb, mix(color, scatterColor, scatter.min(1)), opacity), output.a));
 		});
 		return output;
 	})();
@@ -770,6 +1085,14 @@ const QualityTierSettingsMap = {
 	}
 };
 //#endregion
+//#region src/renderer/getScreenDirection.ts
+const X_AXIS = new Vector3(1, 0, 0);
+const Y_AXIS = new Vector3(0, 1, 0);
+const getScreenDirection = ({ aspect, fov, pitch, yaw }, [x, y]) => {
+	const halfHeight = Math.tan(MathUtils.degToRad(fov) / 2);
+	return new Vector3((x * 2 - 1) * halfHeight * aspect, (1 - y * 2) * halfHeight, -1).normalize().applyAxisAngle(X_AXIS, pitch).applyAxisAngle(Y_AXIS, yaw);
+};
+//#endregion
 //#region src/terrain/constants.ts
 const TILE_INDEX_OFFSET = 2 ** 19;
 const TILE_INDEX_SPAN = 2 ** 20;
@@ -1089,6 +1412,7 @@ const createGrassGeometry = (segmentCount, bladeCount) => {
 	const { indices, positions } = computeGrassBlade(segmentCount);
 	const grassGeometry = new InstancedBufferGeometry();
 	grassGeometry.setAttribute("position", new BufferAttribute(positions, 3));
+	grassGeometry.setAttribute("normal", new BufferAttribute(Float32Array.from({ length: positions.length }, (_, index) => index % 3 === 1 ? 1 : 0), 3));
 	grassGeometry.setIndex(new BufferAttribute(indices, 1));
 	grassGeometry.instanceCount = bladeCount;
 	return grassGeometry;
@@ -1255,4 +1579,4 @@ const computeOutlineDistance = (outline, x, z) => {
 	return isInside ? 0 : Math.sqrt(nearestSquared);
 };
 //#endregion
-export { AntialiasingMode, GAME_MINUTES_PER_SECOND, MINUTES_PER_DAY, QualityTier, QualityTierSettingsMap, TERRAIN_LAYER, TILE_INDEX_OFFSET, TILE_INDEX_SPAN, ToonNodeMaterial, advanceGameClock, applySkyState, computeGradeLut, computeGrassBlade, computeLeafCards, computeOriginShift, computeOutlineDistance, computeRampValues, computeSunDirection, computeTerrainIndices, computeTerrainTile, computeTreeSkeleton, createCausticsNode, createFogUniforms, createGenshinRenderer, createGodraysLight, createGradeLutTexture, createGrassGeometry, createGrassMaterial, createGroundCapture, createHeightFogNode, createLeafMaterial, createLightUniforms, createPostPipeline, createPostUniforms, createRampTexture, createRimNode, createSeededRandom, createSimplexNoise, createSkyNode, createSkyState, createSkyUniforms, createStatueGeometry, createSunLight, createTerrainMaterial, createTerrainSelection, createTerrainTileGeometry, createTileStreamer, createToonMaterial, createTreeGeometry, createUnderwaterFogState, createWaterMaterial, createWaterUniforms, createWindNode, createWindUniforms, getParentTerrainTileKey, getTerrainTileColumn, getTerrainTileKey, getTerrainTileLevel, getTerrainTileRow, renderGroundCapture, resolveTerrainDraws, sampleSkyState, selectTerrainTiles, updateUnderwaterFog };
+export { AntialiasingMode, DEFAULT_SKY_GRADIENT, DEFAULT_SKY_SHAPE, GAME_MINUTES_PER_SECOND, GENSHIN_TONE_MAPPING, MINUTES_PER_DAY, QualityTier, QualityTierSettingsMap, TERRAIN_LAYER, TILE_INDEX_OFFSET, TILE_INDEX_SPAN, ToonNodeMaterial, addSmoothLoop, advanceGameClock, applySkyState, computeGradeLut, computeGrassBlade, computeLeafCards, computeOriginShift, computeOutlineDistance, computeRampValues, computeSunDirection, computeTerrainIndices, computeTerrainTile, computeTreeSkeleton, createBoxesGeometry, createCausticsNode, createCloudAtlasTexture, createCloudBandSprite, createFogUniforms, createGenshinRenderer, createGodraysLight, createGradeLutTexture, createGrassGeometry, createGrassMaterial, createGroundCapture, createHeightFogNode, createLatheStackGeometry, createLeafMaterial, createLightUniforms, createPostPipeline, createPostUniforms, createRampTexture, createRimNode, createSeededRandom, createSimplexNoise, createSkyColorNode, createSkyGradientTexture, createSkyNode, createSkyState, createSkyUniforms, createStatueGeometry, createStoneMaterial, createSunLight, createTerrainMaterial, createTerrainSelection, createTerrainTileGeometry, createTileStreamer, createToonMaterial, createTreeGeometry, createUnderwaterFogState, createWaterMaterial, createWaterUniforms, createWindNode, createWindUniforms, getCloudAtlasColumns, getParentTerrainTileKey, getScreenDirection, getTerrainTileColumn, getTerrainTileKey, getTerrainTileLevel, getTerrainTileRow, orderByViewDepth, placeCloudBand, renderGroundCapture, resolveTerrainDraws, sampleSkyState, selectTerrainTiles, toSceneColor, toneMapNeutral, updateUnderwaterFog };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genshin-engine",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "An anime-style open-world engine for the browser on three.js WebGPU — toon materials, outlines, post-processing, streamed terrain and parametric world kits, as plain TypeScript and TSL modules.",
   "keywords": [
     "anime",
@@ -53,16 +53,16 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.5",
-    "@esposter/configuration": "3.7.0",
-    "@esposter/shared-node": "3.7.0",
-    "@types/node": "^26.6.3",
+    "@esposter/configuration": "3.9.0",
+    "@esposter/shared-node": "3.9.0",
+    "@types/node": "^26.6.4",
     "@types/three": "^0.186.0",
-    "publint": "^0.3.24",
+    "publint": "^0.3.25",
     "tsdown": "^0.23.0",
-    "vitest": "^5.0.2"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "three": "^0.186.1"
   },
-  "gitHead": "7fd06688d06adf6dafff4bd869cd7a33d8028688"
+  "gitHead": "f9f6208c35e6cff4ed33910623c798cd88f09301"
 }