mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 23:27:09 +00:00
Voxel rendering + refactor interactive canvas (#322)
* Add voxel rendering to density function preview * InteractiveCanvas component * Use interactive canvas for noise preview * Use interactive canvas for noise settings preview * Extract common iterateWorld2D logic * Use InteractiveCanvas2D for biome source preview * Display final density in noise settings preview hover * Move remaining preview code * Hide noise router info for checkerboard and fixed * Add higher resolution biome map * User interactive canvas for decorator preview
This commit is contained in:
Misode
GitHub
@@ -1,77 +1,132 @@
|
||||
import { useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { useLocale, useProject } from '../../contexts/index.js'
|
||||
import { useCanvas } from '../../hooks/index.js'
|
||||
import type { ColormapType } from '../../previews/Colormap.js'
|
||||
import { densityFunction, densityPoint } from '../../previews/index.js'
|
||||
import { DataModel } from '@mcschema/core'
|
||||
import type { Voxel } from 'deepslate/render'
|
||||
import { clampedMap, VoxelRenderer } from 'deepslate/render'
|
||||
import type { mat3, mat4 } from 'gl-matrix'
|
||||
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
|
||||
import { getProjectData, useLocale, useProject, useVersion } from '../../contexts/index.js'
|
||||
import { useAsync } from '../../hooks/useAsync.js'
|
||||
import { Store } from '../../Store.js'
|
||||
import { randomSeed } from '../../Utils.js'
|
||||
import { Btn, BtnMenu } from '../index.js'
|
||||
import { iterateWorld2D, randomSeed } from '../../Utils.js'
|
||||
import { Btn, BtnMenu, NumberInput } from '../index.js'
|
||||
import type { ColormapType } from './Colormap.js'
|
||||
import { getColormap } from './Colormap.js'
|
||||
import { ColormapSelector } from './ColormapSelector.jsx'
|
||||
import { DEEPSLATE } from './Deepslate.js'
|
||||
import type { PreviewProps } from './index.js'
|
||||
import { InteractiveCanvas2D } from './InteractiveCanvas2D.jsx'
|
||||
import { InteractiveCanvas3D } from './InteractiveCanvas3D.jsx'
|
||||
|
||||
export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) => {
|
||||
export const DensityFunctionPreview = ({ data, shown }: PreviewProps) => {
|
||||
const { locale } = useLocale()
|
||||
const { project } = useProject()
|
||||
const { version } = useVersion()
|
||||
const [voxelMode, setVoxelMode] = useState(false)
|
||||
const [seed, setSeed] = useState(randomSeed())
|
||||
const [minY] = useState(0)
|
||||
const [height] = useState(256)
|
||||
const [autoScroll, setAutoScroll] = useState(false)
|
||||
const serializedData = JSON.stringify(data)
|
||||
|
||||
const { value: df } = useAsync(async () => {
|
||||
await DEEPSLATE.loadVersion(version, getProjectData(project))
|
||||
const df = DEEPSLATE.loadDensityFunction(DataModel.unwrapLists(data), minY, height, seed)
|
||||
return df
|
||||
}, [version, project, minY, height, seed, serializedData])
|
||||
|
||||
// === 2D ===
|
||||
const imageData = useRef<ImageData>()
|
||||
const ctx = useRef<CanvasRenderingContext2D>()
|
||||
const [focused, setFocused] = useState<string[]>([])
|
||||
const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
|
||||
const offset = useRef(0)
|
||||
const scrollInterval = useRef<number | undefined>(undefined)
|
||||
const state = JSON.stringify([data])
|
||||
|
||||
const size = 256
|
||||
const { canvas, redraw } = useCanvas({
|
||||
size() {
|
||||
return [size, size]
|
||||
},
|
||||
async draw(img) {
|
||||
const options = { offset: offset.current, width: img.width, seed, version, project, minY, height, colormap }
|
||||
await densityFunction(data, img, options)
|
||||
},
|
||||
async onDrag(dx) {
|
||||
offset.current += dx * size
|
||||
redraw()
|
||||
},
|
||||
async onHover(x, y) {
|
||||
const worldX = Math.floor(x * size)
|
||||
const worldY = Math.floor(y * (height - minY))
|
||||
const options = { offset: offset.current, width: size, seed, version, project, minY, height, colormap }
|
||||
const density = await densityPoint(data, worldX, worldY, options)
|
||||
setFocused([density.toPrecision(3), `X=${Math.floor(worldX - offset.current)} Y=${(height - minY) - worldY}`])
|
||||
},
|
||||
onLeave() {
|
||||
const onSetup2D = useCallback((canvas: HTMLCanvasElement) => {
|
||||
const ctx2D = canvas.getContext('2d')
|
||||
if (!ctx2D) return
|
||||
ctx.current = ctx2D
|
||||
}, [voxelMode])
|
||||
const onResize2D = useCallback((width: number, height: number) => {
|
||||
if (!ctx.current) return
|
||||
imageData.current = ctx.current.getImageData(0, 0, width, height)
|
||||
}, [voxelMode])
|
||||
const onDraw2D = useCallback((transform: mat3) => {
|
||||
if (!ctx.current || !imageData.current || !df) return
|
||||
|
||||
const colormapFn = getColormap(colormap)
|
||||
const colorPicker = (t: number) => colormapFn(t <= 0.5 ? t - 0.08 : t + 0.08)
|
||||
let limit = 0.01
|
||||
iterateWorld2D(imageData.current, transform, (x, y) => {
|
||||
const density = df.compute({ x, y, z: 0 })
|
||||
limit = Math.max(limit, Math.min(1, Math.abs(density)))
|
||||
return density
|
||||
}, (density) => {
|
||||
const color = colorPicker(clampedMap(density, -limit, limit, 1, 0))
|
||||
return [color[0] * 256, color[1] * 256, color[2] * 256]
|
||||
})
|
||||
ctx.current.putImageData(imageData.current, 0, 0)
|
||||
}, [voxelMode, df, colormap])
|
||||
const onHover2D = useCallback((pos: [number, number] | undefined) => {
|
||||
if (!pos || !df) {
|
||||
setFocused([])
|
||||
},
|
||||
}, [version, state, seed, minY, height, colormap, project])
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollInterval.current) {
|
||||
clearInterval(scrollInterval.current)
|
||||
} else {
|
||||
const [x, y] = pos
|
||||
const output = df.compute({ x: x, y: -y, z: 0 })
|
||||
setFocused([output.toPrecision(3), `X=${x} Y=${-y}`])
|
||||
}
|
||||
if (shown) {
|
||||
redraw()
|
||||
if (autoScroll) {
|
||||
scrollInterval.current = setInterval(() => {
|
||||
offset.current -= 8
|
||||
redraw()
|
||||
}, 100) as any
|
||||
}, [voxelMode, df])
|
||||
|
||||
// === 3D ===
|
||||
const renderer = useRef<VoxelRenderer | undefined>(undefined)
|
||||
const [state, setState] = useState(0)
|
||||
const [cutoff, setCutoff] = useState(0)
|
||||
|
||||
const onSetup3D = useCallback((canvas: HTMLCanvasElement) => {
|
||||
const gl = canvas.getContext('webgl')
|
||||
if (!gl) return
|
||||
renderer.current = new VoxelRenderer(gl)
|
||||
}, [voxelMode])
|
||||
const onResize3D = useCallback((width: number, height: number) => {
|
||||
renderer.current?.setViewport(0, 0, width, height)
|
||||
}, [voxelMode])
|
||||
const onDraw3D = useCallback((transform: mat4) => {
|
||||
renderer.current?.draw(transform)
|
||||
}, [voxelMode])
|
||||
useEffect(() => {
|
||||
if (!renderer.current || !shown || !df || !voxelMode) return
|
||||
const voxels: Voxel[] = []
|
||||
const maxY = minY + height
|
||||
for (let x = 0; x < 16; x += 1) {
|
||||
for (let y = minY; y < maxY; y += 1) {
|
||||
for (let z = 0; z < 16; z += 1) {
|
||||
const density = df.compute({ x, y, z })
|
||||
if (density > cutoff) {
|
||||
voxels.push({ x, y, z, color: [200, 200, 200] })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [version, state, seed, minY, height, colormap, project, shown, autoScroll])
|
||||
renderer.current.setVoxels(voxels)
|
||||
setState(state => state + 1)
|
||||
}, [voxelMode, df, cutoff])
|
||||
|
||||
return <>
|
||||
<div class="controls preview-controls">
|
||||
{focused.map(s => <Btn label={s} class="no-pointer" /> )}
|
||||
<ColormapSelector value={colormap} onChange={setColormap} />
|
||||
<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
|
||||
<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
|
||||
</BtnMenu>
|
||||
{voxelMode ? <>
|
||||
<BtnMenu icon="gear">
|
||||
<div class="btn btn-input" onClick={e => e.stopPropagation()}>
|
||||
<span>{locale('cutoff')}</span>
|
||||
<NumberInput value={cutoff} onChange={setCutoff} />
|
||||
</div>
|
||||
</BtnMenu>
|
||||
</> : <>
|
||||
<ColormapSelector value={colormap} onChange={setColormap} />
|
||||
</>}
|
||||
<Btn label={voxelMode ? locale('3d') : locale('2d')} onClick={() => setVoxelMode(!voxelMode)} />
|
||||
<Btn icon="sync" tooltip={locale('generate_new_seed')}
|
||||
onClick={() => setSeed(randomSeed())} />
|
||||
</div>
|
||||
<canvas ref={canvas} width={size} height={size}></canvas>
|
||||
<div class="full-preview">{voxelMode
|
||||
? <InteractiveCanvas3D onSetup={onSetup3D} onDraw={onDraw3D} onResize={onResize3D} state={state} startDistance={100} startPosition={[8, 120, 8]} />
|
||||
: <InteractiveCanvas2D onSetup={onSetup2D} onDraw={onDraw2D} onHover={onHover2D} onResize={onResize2D} state={state} pixelSize={4} />
|
||||
}</div>
|
||||
</>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user