Option to show final density visualization

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { useLocale, useProject } from '../../contexts/index.js'
 import { useCanvas } from '../../hooks/index.js'
-import { getNoiseBlock, noiseSettings } from '../../previews/index.js'
+import type { ColormapType } from '../../previews/Colormap.js'
+import { densityFunction, getNoiseBlock, noiseSettings } from '../../previews/index.js'
 import { CachedCollections, checkVersion } from '../../services/index.js'
+import { Store } from '../../Store.js'
 import { randomSeed } from '../../Utils.js'
 import { Btn, BtnInput, BtnMenu } from '../index.js'
+import { ColormapSelector } from './ColormapSelector.jsx'
 import type { PreviewProps } from './index.js'
 
 export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) => {
@@ -15,7 +18,9 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 	const [biomeScale, setBiomeScale] = useState(0.2)
 	const [biomeDepth, setBiomeDepth] = useState(0.1)
 	const [autoScroll, setAutoScroll] = useState(false)
-	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const [focused, setFocused] = useState<string[]>([])
+	const [layer, setLayer] = useState('terrain')
+	const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
 	const offset = useRef(0)
 	const scrollInterval = useRef<number | undefined>(undefined)
 	const state = JSON.stringify([data, biomeScale, biomeDepth])
@@ -26,8 +31,13 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 			return [size, size]
 		},
 		async draw(img) {
-			const options = { biome, biomeDepth, biomeScale, offset: offset.current, width: img.width, seed, version, project }
+			const options = { biome, biomeDepth, biomeScale, offset: offset.current, width: img.width, seed, version, project, colormap, minY: data?.noise?.min_y ?? 0, height: data?.noise?.height ?? 256, hardZero: true }
-			await noiseSettings(data, img, options)
+			if (layer === 'final_density') {
+				const df = data?.noise_router?.final_density ?? 0
+				await densityFunction(df, img, options)
+			} else {
+				await noiseSettings(data, img, options)
+			}
 		},
 		async onDrag(dx) {
 			offset.current += dx * size
@@ -37,12 +47,12 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 			const worldX = Math.floor(x * size - offset.current)
 			const worldY = size - Math.max(1, Math.ceil(y * size)) + (data?.noise?.min_y ?? 0)
 			const block = getNoiseBlock(worldX, worldY)
-			setFocused(block ? `Y=${worldY} (${block.getName().path})` : `Y=${worldY}`)
+			setFocused([block ? `Y=${worldY} (${block.getName().path})` : `Y=${worldY}`])
 		},
 		onLeave() {
-			setFocused(undefined)
+			setFocused([])
 		},
-	}, [state, seed, project])
+	}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, layer, colormap])
 
 	useEffect(() => {
 		if (scrollInterval.current) {
@@ -63,13 +73,14 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 				}
 			})()
 		}
-	}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, autoScroll])
+	}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, autoScroll, layer, colormap])
 
 	const allBiomes = useMemo(() => CachedCollections?.get('worldgen/biome') ?? [], [version])
 
 	return <>
 		<div class="controls preview-controls">
-			{focused && <Btn label={focused} class="no-pointer" />}
+			{focused.map(s => <Btn label={s} class="no-pointer" /> )}
+			{layer === 'final_density' && <ColormapSelector value={colormap} onChange={setColormap} />}
 			<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
 				{checkVersion(version, undefined, '1.17') ? <>
 					<BtnInput label={locale('preview.scale')} value={`${biomeScale}`} onChange={v => setBiomeScale(Number(v))} />
@@ -78,6 +89,7 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 					<BtnInput label={locale('preview.biome')} value={biome} onChange={setBiome} dataList={allBiomes} larger />
 				}
 				<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
+				<Btn icon={layer === 'final_density' ? 'square_fill' : 'square'} label={locale('preview.final_density')} onClick={() => setLayer(layer === 'final_density' ? 'terrain' : 'final_density')} />
 			</BtnMenu>
 			<Btn icon="sync" tooltip={locale('generate_new_seed')}
 				onClick={() => setSeed(randomSeed())} />

src/app/previews/NoiseSettings.ts

@@ -20,6 +20,7 @@ export type NoiseSettingsOptions = {
 	minY?: number,
 	height?: number,
 	colormap?: ColormapType,
+	hardZero?: boolean,
 }
 
 const colors: Record<string, [number, number, number]> = {
@@ -93,20 +94,21 @@ export async function densityFunction(state: any, img: ImageData, options: Noise
 	const arr = Array(options.width * noise.height)
 	let limit = 0.01
 	for (let x = 0; x < options.width; x += 1) {
-		for (let y = 0; y < noise.height - noise.minY; y += 1) {
+		for (let y = 0; y < noise.height; y += 1) {
 			const i = x + y * options.width
-			const density = fn.compute(DensityFunction.context(x - options.offset, noise.height - y - 1, 0))
+			const density = fn.compute(DensityFunction.context(x - options.offset, noise.height - y - 1 + noise.minY, 0))
 			limit = Math.max(limit, Math.min(1, Math.abs(density)))
 			arr[i] = density
 		}
 	}
 
 	const colormap = getColormap(options.colormap ?? 'viridis')
+	const colorPicker = options.hardZero ? (t: number) => colormap(t <= 0.5 ? t - 0.08 : t + 0.08) : colormap
 	const min = -limit
 	const max = limit
 	const data = img.data
 	for (let i = 0; i < options.width * noise.height; i += 1) {
-		const color = colormap(clampedMap(arr[i], min, max, 1, 0))
+		const color = colorPicker(clampedMap(arr[i], min, max, 1, 0))
 		data[4 * i] = color[0] * 256
 		data[4 * i + 1] = color[1] * 256
 		data[4 * i + 2] = color[2] * 256

src/locales/en.json

@@ -141,6 +141,7 @@
   "preview.width": "Width",
   "preview.height": "Height",
   "preview.min_y": "Min Y",
+  "preview.final_density": "Show final density",
   "project.new": "New project",
   "project.cancel": "Cancel",
   "project.create": "Create a new project",