Visualizations for 1.18.2 and density functions

src/app/components/generator/PreviewPanel.tsx

@@ -4,9 +4,9 @@ import { useState } from 'preact/hooks'
 import { useModel } from '../../hooks'
 import type { VersionId } from '../../services'
 import { checkVersion } from '../../services'
-import { BiomeSourcePreview, DecoratorPreview, NoisePreview, NoiseSettingsPreview } from '../previews'
+import { BiomeSourcePreview, DecoratorPreview, DensityFunctionPreview, NoisePreview, NoiseSettingsPreview } from '../previews'
 
-export const HasPreview = ['dimension', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature']
+export const HasPreview = ['dimension', 'worldgen/density_function', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature']
 
 type PreviewPanelProps = {
 	model: DataModel | null,
@@ -29,6 +29,11 @@ export function PreviewPanel({ model, version, id, shown }: PreviewPanelProps) {
 		if (data) return <BiomeSourcePreview {...{ model, version, shown, data }} />
 	}
 
+	if (id === 'worldgen/density_function') {
+		const data = model.get(new Path([]))
+		if (data) return <DensityFunctionPreview {...{ model, version, shown, data }} />
+	}
+
 	if (id === 'worldgen/noise') {
 		const data = model.get(new Path([]))
 		if (data) return <NoisePreview {...{ model, version, shown, data }} />

src/app/components/previews/BiomeSourcePreview.tsx

@@ -1,6 +1,6 @@
 import { DataModel, Path } from '@mcschema/core'
 import type { NoiseParameters } from 'deepslate'
-import { NoiseGeneratorSettings, TerrainShaper } from 'deepslate'
+import { NoiseGeneratorSettings } from 'deepslate'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import type { PreviewProps } from '.'
 import { Btn, BtnMenu } from '..'
@@ -9,9 +9,7 @@ import { useCanvas } from '../../hooks'
 import { biomeMap, getBiome } from '../../previews'
 import { newSeed } from '../../Utils'
 
-const LAYERS = ['biomes', 'temperature', 'humidity', 'continentalness', 'erosion', 'weirdness', 'offset', 'factor', 'jaggedness'] as const
-
-const OverworldShaper = TerrainShaper.overworld()
+const LAYERS = ['biomes', 'temperature', 'humidity', 'continentalness', 'erosion', 'weirdness'] as const
 
 export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps) => {
 	const { locale } = useLocale()
@@ -24,8 +22,7 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 
 	const seed = BigInt(model.get(new Path(['generator', 'seed'])))
 	const octaves = getOctaves(model.get(new Path(['generator', 'settings'])))
-	const shaper = getShaper(model.get(new Path(['generator', 'settings'])))
-	const state = shown ? calculateState(data, octaves, shaper) : ''
+	const state = shown ? calculateState(data, octaves) : ''
 	const type: string = data.type?.replace(/^minecraft:/, '')
 
 	const { canvas, redraw } = useCanvas({
@@ -33,7 +30,7 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 			return [200 / res.current, 200 / res.current]
 		},
 		async draw(img) {
-			const options = { octaves, shaper, biomeColors: {}, layers, offset: offset.current, scale, seed, res: res.current, version }
+			const options = { octaves, biomeColors: {}, layers, offset: offset.current, scale, seed, res: res.current, version }
 			await biomeMap(data, img, options)
 			if (res.current === 4) {
 				clearTimeout(refineTimeout.current)
@@ -51,7 +48,7 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 			redraw()
 		},
 		async onHover(x, y) {
-			const options = { octaves, shaper, biomeColors: {}, layers, offset: offset.current, scale, seed, res: 1, version }
+			const options = { octaves, biomeColors: {}, layers, offset: offset.current, scale, seed, res: 1, version }
 			const biome = await getBiome(data, Math.floor(x * 200), Math.floor(y * 200), options)
 			setFocused(biome)
 		},
@@ -108,8 +105,8 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 	</>
 }
 
-function calculateState(data: any, octaves: Record<string, NoiseParameters>, shaper: TerrainShaper) {
-	return JSON.stringify([data, octaves, shaper.toJson()])
+function calculateState(data: any, octaves: Record<string, NoiseParameters>) {
+	return JSON.stringify([data, octaves])
 }
 
 export function getOctaves(obj: any): Record<string, NoiseParameters> {
@@ -149,16 +146,3 @@ export function getOctaves(obj: any): Record<string, NoiseParameters> {
 			}
 	}
 }
-
-export function getShaper(obj: any): TerrainShaper {
-	if (typeof obj === 'string') {
-		switch (obj.replace(/^minecraft:/, '')) {
-			case 'overworld':
-			case 'amplified':
-				return OverworldShaper
-			default:
-				return TerrainShaper.fromJson({ offset: 0, factor: 0, jaggedness: 0 })
-		}
-	}
-	return TerrainShaper.fromJson(DataModel.unwrapLists(obj?.noise?.terrain_shaper))
-}

src/app/components/previews/DensityFunctionPreview.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import type { PreviewProps } from '.'
+import { Btn, BtnMenu } from '..'
+import { useLocale } from '../../contexts'
+import { useCanvas } from '../../hooks'
+import { densityFunction } from '../../previews'
+import { CachedCollections } from '../../services'
+import { randomSeed } from '../../Utils'
+
+export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) => {
+	const { locale } = useLocale()
+	const [seed, setSeed] = useState(randomSeed())
+	const [autoScroll, setAutoScroll] = useState(false)
+	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const offset = useRef(0)
+	const scrollInterval = useRef<number | undefined>(undefined)
+	const state = JSON.stringify([data])
+
+	const size = data?.noise?.height ?? 256
+	const { canvas, redraw } = useCanvas({
+		size() {
+			return [size, size]
+		},
+		async draw(img) {
+			const options = { offset: offset.current, width: img.width, seed, version }
+			await densityFunction(data, img, options)
+		},
+		async onDrag(dx) {
+			offset.current += dx * size
+			redraw()
+		},
+		async onHover(x, y) {
+			const worldX = Math.floor(x * size - offset.current)
+			const worldY = size - Math.max(1, Math.ceil(y * size)) + (data?.noise?.min_y ?? 0)
+			setFocused(`X=${worldX} Y=${worldY}`)
+		},
+		onLeave() {
+			setFocused(undefined)
+		},
+	}, [state, seed])
+
+	useEffect(() => {
+		if (scrollInterval.current) {
+			clearInterval(scrollInterval.current)
+		}
+		if (shown) {
+			redraw()
+			if (autoScroll) {
+				scrollInterval.current = setInterval(() => {
+					offset.current -= 8
+					redraw()
+				}, 100) as any
+			}
+		}
+	}, [state, seed, shown, autoScroll])
+
+	const allBiomes = useMemo(() => CachedCollections?.get('worldgen/biome') ?? [], [version])
+
+	return <>
+		<div class="controls preview-controls">
+			{focused && <Btn label={focused} class="no-pointer" />}
+			<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
+				<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
+			</BtnMenu>
+			<Btn icon="sync" tooltip={locale('generate_new_seed')}
+				onClick={() => setSeed(randomSeed())} />
+		</div>
+		<canvas ref={canvas} width={size} height={size}></canvas>
+	</>
+}

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -26,7 +26,7 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 		},
 		async draw(img) {
 			const options = { biome, biomeDepth, biomeScale, offset: offset.current, width: img.width, seed, version }
-			noiseSettings(data, img, options)
+			await noiseSettings(data, img, options)
 		},
 		async onDrag(dx) {
 			offset.current += dx * size
@@ -36,7 +36,7 @@ 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().replace(/^minecraft:/, '')})` : `Y=${worldY}`)
+			setFocused(block ? `Y=${worldY} (${block.getName().path})` : `Y=${worldY}`)
 		},
 		onLeave() {
 			setFocused(undefined)

src/app/components/previews/index.ts

@@ -3,6 +3,7 @@ import type { VersionId } from '../../services'
 
 export * from './BiomeSourcePreview'
 export * from './DecoratorPreview'
+export * from './DensityFunctionPreview'
 export * from './NoisePreview'
 export * from './NoiseSettingsPreview'