genshin-engine 3.8.1 → 3.9.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { BufferAttribute, BufferGeometry, Camera, CanvasTexture, Color, ColorRepresentation, Data3DTexture, DataTexture, DirectionalLight, ExtrudeGeometry, Frustum, HemisphereLight, InstancedBufferGeometry, OrthographicCamera, Scene, Texture, ToneMapping, Vector2, Vector3, Vector3Like } from "three";
-import { MeshBasicNodeMaterial, MeshToonNodeMaterial, MeshToonNodeMaterialParameters, Node, RenderPipeline, RenderTarget, Renderer, SpriteNodeMaterial, TextureNode, UniformNode, WebGPURenderer } from "three/webgpu";
+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 BloomNode from "three/examples/jsm/tsl/display/BloomNode.js";
 import GodraysNode from "three/examples/jsm/tsl/display/GodraysNode.js";
@@ -20,24 +20,41 @@ export interface CloudSprite {
 //#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
@@ -45,14 +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
@@ -117,15 +147,36 @@ 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/createCloudSpriteMaterial.d.ts
-export declare const createCloudSpriteMaterial: (atlas: Texture, { index, spriteCount }: {
-  index: number;
+//#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;
-}, { cloudLitColor, cloudShadeColor }: Pick<SkyUniforms, "cloudLitColor" | "cloudShadeColor">) => SpriteNodeMaterial;
+}, 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;
@@ -136,6 +187,9 @@ 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];
@@ -173,18 +227,12 @@ export interface LatheStackOptions {
   sections: LatheSection[];
 }
 //#endregion
-//#region src/kits/architecture/SilhouetteOptions.d.ts
-export interface SilhouetteOptions {
-  contours: [number, number][][];
-  depth: [number, number];
-}
+//#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/architecture/createSilhouetteGeometry.d.ts
-export declare const createSilhouetteGeometry: ({ contours, depth: [front, back] }: SilhouetteOptions) => ExtrudeGeometry;
-//#endregion
 //#region src/kits/statue/createStatueGeometry.d.ts
 export declare const createStatueGeometry: () => BufferGeometry;
 //#endregion
@@ -244,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;
@@ -303,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, horizonBand, 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;
@@ -387,6 +454,9 @@ export declare const createPostUniforms: () => PostUniforms;
 //#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

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Box3, BufferAttribute, BufferGeometry, CanvasTexture, Color, CylinderGeometry, Data3DTexture, DataTexture, DirectionalLight, DoubleSide, ExtrudeGeometry, HalfFloatType, InstancedBufferGeometry, LatheGeometry, LinearFilter, MathUtils, NeutralToneMapping, NoColorSpace, OrthographicCamera, Quaternion, RedFormat, ShapePath, 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 { MeshBasicNodeMaterial, MeshToonNodeMaterial, RenderPipeline, RenderTarget, SpriteNodeMaterial, ToonOutlinePassNode, WebGPURenderer } from "three/webgpu";
+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 { voronoi2d } from "three/examples/jsm/tsl/math/voronoiNoise.js";
@@ -11,15 +11,29 @@ 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/post/toSceneColor.ts
+//#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 INVERSE_STEP_COUNT = 16;
-const SLOPE_NUDGE = 1e-4;
-const SCENE_CHANNEL_LIMIT = 1.5;
-const toneMap = ([red, green, blue]) => {
+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 = [
@@ -34,6 +48,11 @@ const toneMap = ([red, green, blue]) => {
 	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,
@@ -43,11 +62,11 @@ const toSceneColor = (displayColor) => {
 	let input = [...target];
 	for (let step = 0; step < INVERSE_STEP_COUNT; step++) {
 		const current = input;
-		const output = toneMap(current);
+		const output = toneMapNeutral(current);
 		input = current.map((channel, index) => {
 			const nudged = [...current];
 			nudged[index] = channel + SLOPE_NUDGE;
-			const slope = ((toneMap(nudged)[index] ?? 0) - (output[index] ?? 0)) / 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);
 		});
 	}
@@ -57,6 +76,7 @@ const toSceneColor = (displayColor) => {
 //#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);
@@ -74,12 +94,24 @@ const applySkyState = (skyState, { fogUniforms, godraysLight, hemisphere, light,
 	postUniforms.godraysColor.value.copy(lightColor);
 	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(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);
@@ -97,7 +129,21 @@ 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);
@@ -105,15 +151,11 @@ const createCloudAtlasTexture = (sprites, 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();
-			for (const [first, ...rest] of loops) {
-				if (!first) continue;
-				const toCanvas = ([x, y]) => [(column + x) * cellSize, (row + 1 - y) * cellSize];
-				path.moveTo(...toCanvas(first));
-				for (const point of rest) path.lineTo(...toCanvas(point));
-				path.closePath();
-			}
+			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");
 		};
@@ -132,21 +174,88 @@ const createCloudAtlasTexture = (sprites, cellSize) => {
 	return texture;
 };
 //#endregion
-//#region src/atmosphere/createCloudSpriteMaterial.ts
-const createCloudSpriteMaterial = (atlas, { index, spriteCount }, { cloudLitColor, cloudShadeColor }) => {
+//#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 column = index % columns;
-	const row = Math.floor(index / columns);
-	const cellUv = uv().add(vec2(column, columns - 1 - row)).div(columns);
-	const mask = texture(atlas, cellUv);
+	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.colorNode = mix(cloudShadeColor, cloudLitColor, mask.g);
-	material.opacityNode = mask.r;
-	material.alphaTest = .5;
-	return material;
+	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
@@ -170,14 +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()),
-	horizonBand: uniform(.45),
+	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
@@ -268,6 +390,14 @@ 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;
@@ -282,20 +412,6 @@ const createLatheStackGeometry = ({ isFaceted, radialSegments, sections }) => {
 	return stackGeometry;
 };
 //#endregion
-//#region src/kits/architecture/createSilhouetteGeometry.ts
-const createSilhouetteGeometry = ({ contours, depth: [front, back] }) => {
-	const shapePath = new ShapePath();
-	for (const [first, ...rest] of contours) {
-		if (!first) continue;
-		shapePath.moveTo(...first);
-		for (const point of rest) shapePath.lineTo(...point);
-	}
-	return new ExtrudeGeometry(shapePath.toShapes(), {
-		bevelEnabled: false,
-		depth: back - front
-	}).translate(0, 0, front);
-};
-//#endregion
 //#region src/kits/statue/createStatueGeometry.ts
 const PLINTH_SIDES = 8;
 const FIGURE_SEGMENTS = 24;
@@ -598,11 +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 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;
@@ -610,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, horizonBand, horizonColor, lightColor, moonDirection, starIntensity, sunDirection, zenithColor }) => Fn(() => {
-	const direction = normalWorldGeometry.normalize();
-	const height = direction.y;
-	const gradient = mix(horizonColor, zenithColor, smoothstep(0, horizonBand, 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;
@@ -1417,4 +1579,4 @@ const computeOutlineDistance = (outline, x, z) => {
 	return isInside ? 0 : Math.sqrt(nearestSquared);
 };
 //#endregion
-export { AntialiasingMode, GAME_MINUTES_PER_SECOND, GENSHIN_TONE_MAPPING, 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, createCloudAtlasTexture, createCloudSpriteMaterial, createFogUniforms, createGenshinRenderer, createGodraysLight, createGradeLutTexture, createGrassGeometry, createGrassMaterial, createGroundCapture, createHeightFogNode, createLatheStackGeometry, createLeafMaterial, createLightUniforms, createPostPipeline, createPostUniforms, createRampTexture, createRimNode, createSeededRandom, createSilhouetteGeometry, createSimplexNoise, createSkyNode, createSkyState, createSkyUniforms, createStatueGeometry, createSunLight, createTerrainMaterial, createTerrainSelection, createTerrainTileGeometry, createTileStreamer, createToonMaterial, createTreeGeometry, createUnderwaterFogState, createWaterMaterial, createWaterUniforms, createWindNode, createWindUniforms, getCloudAtlasColumns, getParentTerrainTileKey, getScreenDirection, getTerrainTileColumn, getTerrainTileKey, getTerrainTileLevel, getTerrainTileRow, placeCloudBand, renderGroundCapture, resolveTerrainDraws, sampleSkyState, selectTerrainTiles, toSceneColor, 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.8.1",
+  "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.8.1",
-    "@esposter/shared-node": "3.8.1",
-    "@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.3"
   },
   "peerDependencies": {
     "three": "^0.186.1"
   },
-  "gitHead": "1cc0b24081a5fd56ec0c57b784f978f1ad0df0f4"
+  "gitHead": "f9f6208c35e6cff4ed33910623c798cd88f09301"
 }