diff --git a/app/src/lib/graph-interface/background/Background.frag b/app/src/lib/graph-interface/background/Background.frag index 3e5a680..b472f3f 100644 --- a/app/src/lib/graph-interface/background/Background.frag +++ b/app/src/lib/graph-interface/background/Background.frag @@ -11,6 +11,7 @@ uniform vec3 camPos; uniform vec2 zoomLimits; uniform vec3 backgroundColor; uniform vec3 lineColor; +uniform int gridType; // 0 = grid lines, 1 = dots // Anti-aliased step: threshold in the same units as `value` float aaStep(float threshold, float value, float deriv) { @@ -78,35 +79,51 @@ void main(void) { float ux = (vUv.x - 0.5) * width + cx * cz; float uy = (vUv.y - 0.5) * height - cy * cz; - // extra small grid - float m1 = grid(ux, uy, divisions * 4.0, thickness * 4.0) * 0.9; - float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5; - float xsmall = max(m1, m2); - - float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5; - xsmall = max(xsmall, s3); + if(gridType == 0) { + // extra small grid + float m1 = grid(ux, uy, divisions * 4.0, thickness * 4.0) * 0.9; + float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5; + float xsmall = max(m1, m2); + + float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5; + xsmall = max(xsmall, s3); - // small grid - float c1 = grid(ux, uy, divisions, thickness) * 0.6; - float c2 = grid(ux, uy, divisions * 2.0, thickness * 2.0) * 0.5; - float small = max(c1, c2); + // small grid + float c1 = grid(ux, uy, divisions, thickness) * 0.6; + float c2 = grid(ux, uy, divisions * 2.0, thickness * 2.0) * 0.5; + float small = max(c1, c2); - float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5; - small = max(small, s1); + float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5; + small = max(small, s1); - // large grid - float c3 = grid(ux, uy, divisions / 8.0, thickness / 8.0) * 0.5; - float c4 = grid(ux, uy, divisions / 2.0, thickness / 4.0) * 0.4; - float large = max(c3, c4); + // large grid + float c3 = grid(ux, uy, divisions / 8.0, thickness / 8.0) * 0.5; + float c4 = grid(ux, uy, divisions / 2.0, thickness / 4.0) * 0.4; + float large = max(c3, c4); - float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4; - large = max(large, s2); + float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4; + large = max(large, s2); - float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0)); - c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0)); + float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0)); + c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0)); - vec3 color = mix(backgroundColor, lineColor, c); + vec3 color = mix(backgroundColor, lineColor, c); + + gl_FragColor = vec4(color, 1.0); + } else { + float large = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4; + + float medium = circle_grid(ux, uy, cz * 10.0, 1.0) * 0.6; + + float small = circle_grid(ux, uy, cz * 2.5, 1.0) * 0.8; + + float c = mix(large, medium, min(nz * 2.0 + 0.05, 1.0)); + c = mix(c, small, clamp((nz - 0.3) / 0.7, 0.0, 1.0)); + + vec3 color = mix(backgroundColor, lineColor, c); + + gl_FragColor = vec4(color, 1.0); + } - gl_FragColor = vec4(color, 1.0); } diff --git a/app/src/lib/graph-interface/background/Background.svelte b/app/src/lib/graph-interface/background/Background.svelte index 6d7d210..c6a1334 100644 --- a/app/src/lib/graph-interface/background/Background.svelte +++ b/app/src/lib/graph-interface/background/Background.svelte @@ -6,11 +6,12 @@ import BackgroundVert from './Background.vert'; type Props = { - minZoom: number; - maxZoom: number; - cameraPosition: [number, number, number]; - width: number; - height: number; + minZoom?: number; + maxZoom?: number; + cameraPosition?: [number, number, number]; + width?: number; + height?: number; + type?: 'grid' | 'dots' | 'none'; }; let { @@ -18,9 +19,18 @@ maxZoom = 150, cameraPosition = [0, 1, 0], width = globalThis?.innerWidth || 100, - height = globalThis?.innerHeight || 100 + height = globalThis?.innerHeight || 100, + type = 'grid' }: Props = $props(); + const typeMap = new Map([ + ['grid', 0], + ['dots', 1], + ['none', 2] + ]); + + const gridType = $derived(typeMap.get(type) || 0); + let bw = $derived(width / cameraPosition[2]); let bh = $derived(height / cameraPosition[2]); @@ -51,6 +61,9 @@ }, dimensions: { value: [100, 100] + }, + gridType: { + value: 0 } }} uniforms.camPos.value={cameraPosition} @@ -59,6 +72,7 @@ uniforms.lineColor.value={appSettings.value.theme && colors['outline']} uniforms.zoomLimits.value={[minZoom, maxZoom]} uniforms.dimensions.value={[width, height]} + uniforms.gridType.value={gridType} /> diff --git a/app/src/lib/graph-interface/graph-state.svelte.ts b/app/src/lib/graph-interface/graph-state.svelte.ts index a989174..4419cad 100644 --- a/app/src/lib/graph-interface/graph-state.svelte.ts +++ b/app/src/lib/graph-interface/graph-state.svelte.ts @@ -83,7 +83,7 @@ export class GraphState { addMenuPosition = $state<[number, number] | null>(null); snapToGrid = $state(false); - showGrid = $state(true); + backgroundType = $state<'grid' | 'dots' | 'none'>('grid'); showHelp = $state(false); cameraDown = [0, 0]; diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte index bc36434..06fe2c5 100644 --- a/app/src/lib/graph-interface/graph/Graph.svelte +++ b/app/src/lib/graph-interface/graph/Graph.svelte @@ -132,8 +132,9 @@ position={graphState.cameraPosition} /> - {#if graphState.showGrid !== false} + {#if graphState.backgroundType !== 'none'} ; activeNode?: NodeInstance; - showGrid?: boolean; + backgroundType?: 'grid' | 'dots' | 'none'; snapToGrid?: boolean; showHelp?: boolean; settingTypes?: Record; @@ -27,7 +27,7 @@ registry, settings = $bindable(), activeNode = $bindable(), - showGrid = $bindable(true), + backgroundType = $bindable('grid'), snapToGrid = $bindable(true), showHelp = $bindable(false), settingTypes = $bindable(), @@ -43,7 +43,7 @@ const graphState = new GraphState(manager); $effect(() => { - graphState.showGrid = showGrid; + graphState.backgroundType = backgroundType; graphState.snapToGrid = snapToGrid; graphState.showHelp = showHelp; }); diff --git a/app/src/lib/settings/app-settings.svelte.ts b/app/src/lib/settings/app-settings.svelte.ts index 9a9409c..3c17bf4 100644 --- a/app/src/lib/settings/app-settings.svelte.ts +++ b/app/src/lib/settings/app-settings.svelte.ts @@ -30,10 +30,11 @@ export const AppSettingTypes = { }, nodeInterface: { title: 'Node Interface', - showNodeGrid: { - type: 'boolean', - label: 'Show Grid', - value: true + backgroundType: { + type: 'select', + label: 'Background', + options: ['grid', 'dots', 'none'], + value: 'grid' }, snapToGrid: { type: 'boolean', diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 9fcbbc4..3747db6 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -171,7 +171,7 @@ graph={pm.graph} bind:this={graphInterface} registry={nodeRegistry} - showGrid={appSettings.value.nodeInterface.showNodeGrid} + backgroundType={appSettings.value.nodeInterface.backgroundType} snapToGrid={appSettings.value.nodeInterface.snapToGrid} bind:activeNode bind:showHelp={appSettings.value.nodeInterface.showHelp}