genshin-engine 3.7.0 → 3.8.1

package/dist/index.d.ts

@@ -1,8 +1,23 @@
-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, 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 { 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 {
   cloudLitColor: Color;
@@ -20,6 +35,7 @@ export interface SkyKeyframe {
 //#endregion
 //#region src/atmosphere/SkyState.d.ts
 export interface SkyState extends Omit<SkyKeyframe, "minutes"> {
+  fogColor?: Color;
   lightDirection: Vector3;
   moonDirection: Vector3;
   sunDirection: Vector3;
@@ -31,6 +47,7 @@ export interface SkyUniforms {
   cloudDrift: UniformNode<"vec2", Vector2>;
   cloudLitColor: UniformNode<"color", Color>;
   cloudShadeColor: UniformNode<"color", Color>;
+  horizonBand: UniformNode<"float", number>;
   horizonColor: UniformNode<"color", Color>;
   lightColor: UniformNode<"color", Color>;
   moonDirection: UniformNode<"vec3", Vector3>;
@@ -53,6 +70,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 +117,16 @@ 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/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;
+  spriteCount: number;
+}, { cloudLitColor, cloudShadeColor }: Pick<SkyUniforms, "cloudLitColor" | "cloudShadeColor">) => SpriteNodeMaterial;
+//#endregion
 //#region src/atmosphere/createSkyState.d.ts
 export declare const createSkyState: () => SkyState;
 //#endregion
@@ -105,6 +136,13 @@ export declare const createSkyUniforms: () => SkyUniforms;
 //#region src/atmosphere/createSunLight.d.ts
 export declare const createSunLight: ({ cascadeCount, maxFar, shadowMapSize }: SunLightOptions) => SunLight;
 //#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 +159,32 @@ 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/SilhouetteOptions.d.ts
+export interface SilhouetteOptions {
+  contours: [number, number][][];
+  depth: [number, number];
+}
+//#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
@@ -240,7 +304,7 @@ export declare const createLightUniforms: () => LightUniforms;
 export declare const createRimNode: ({ rimColor, rimStrength, sunDirection }: LightUniforms) => 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: ({ cloudCoverage, cloudDrift, cloudLitColor, cloudShadeColor, horizonBand, horizonColor, lightColor, moonDirection, starIntensity, sunDirection, zenithColor }: SkyUniforms) => Node<"vec3">;
 //#endregion
 //#region src/nodes/createToonMaterial.d.ts
 export declare const createToonMaterial: ({ color, isOutlined, isVertexColors, lightUniforms, rampTexture }: ToonMaterialOptions) => ToonNodeMaterial;
@@ -312,7 +376,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 +384,9 @@ 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/random/createSeededRandom.d.ts
 export declare const createSeededRandom: (seed: number) => (() => number);
 //#endregion
@@ -333,6 +400,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 { 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 { 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,6 +11,49 @@ 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
+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 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);
+};
+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 = toneMap(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;
+			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();
@@ -25,16 +68,18 @@ 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.horizonColor.value.copy(toSceneColor(horizonColor));
 	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));
 	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 +97,58 @@ const computeSunDirection = (minutes, tilt, sunDirection) => {
 	return sunDirection.set(Math.sin(hourAngle), height * Math.cos(tilt), height * Math.sin(tilt));
 };
 //#endregion
+//#region src/atmosphere/createCloudAtlasTexture.ts
+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";
+		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();
+			}
+			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/createCloudSpriteMaterial.ts
+const createCloudSpriteMaterial = (atlas, { index, spriteCount }, { cloudLitColor, cloudShadeColor }) => {
+	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 material = new SpriteNodeMaterial({
+		depthWrite: false,
+		transparent: true
+	});
+	material.colorNode = mix(cloudShadeColor, cloudLitColor, mask.g);
+	material.opacityNode = mask.r;
+	material.alphaTest = .5;
+	return material;
+};
+//#endregion
 //#region src/atmosphere/createSkyState.ts
 const createSkyState = () => ({
 	cloudLitColor: new Color(),
@@ -75,6 +172,7 @@ const createSkyUniforms = () => ({
 	cloudDrift: uniform(new Vector2()),
 	cloudLitColor: uniform(new Color()),
 	cloudShadeColor: uniform(new Color()),
+	horizonBand: uniform(.45),
 	horizonColor: uniform(new Color()),
 	lightColor: uniform(new Color()),
 	moonDirection: uniform(new Vector3(0, -1, 0)),
@@ -108,6 +206,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 +268,34 @@ const advanceGameClock = (gameClock, deltaSeconds) => {
 	gameClock.minutes = (gameClock.minutes + deltaSeconds * gameClock.minutesPerSecond) % MINUTES_PER_DAY;
 };
 //#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/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;
@@ -179,17 +335,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 +524,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 +551,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);
@@ -450,7 +599,6 @@ const createLightUniforms = () => ({
 });
 //#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;
@@ -462,10 +610,10 @@ 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 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, HORIZON_BAND, height));
+	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);
@@ -616,6 +764,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 +799,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 +820,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 +923,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 +1250,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 +1417,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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genshin-engine",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "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",
+    "@esposter/configuration": "3.8.1",
+    "@esposter/shared-node": "3.8.1",
     "@types/node": "^26.6.3",
     "@types/three": "^0.186.0",
     "publint": "^0.3.24",
     "tsdown": "^0.23.0",
-    "vitest": "^5.0.2"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "three": "^0.186.1"
   },
-  "gitHead": "7fd06688d06adf6dafff4bd869cd7a33d8028688"
+  "gitHead": "1cc0b24081a5fd56ec0c57b784f978f1ad0df0f4"
 }