Threelab

A generative art platform for creating, evolving, and sharing interactive 3D visualizations. Built with React, Three.js, and a visual node-graph editor that lets you inspect, fork, and modify any pattern's underlying logic.

Scenes can be exported as standalone HTML files, React components, or raw JSON for embedding in any website.

Try it free at threelab.metavert.io

Screenshots

Pattern Editor

Inspect and modify any pattern's node graph and GLSL shader code with a live preview.

Export

Export scenes as standalone HTML, React components, or JSON — ready to embed anywhere.

Evolution

Evolve new visuals by mutating and breeding scenes through a genetic algorithm.

Features

• 21 built-in patterns spanning mathematical curves, physics simulations, GPU shaders, and procedural geometry — all available immediately on first load
• Visual node-graph editor — every built-in pattern is implemented as a wirable node graph with viewable/editable source code
• Live code editing — fork any built-in pattern and modify its evaluate function with syntax-highlighted CodeMirror editor; changes hot-reload instantly
• Interactive camera controls — orbit, pan, and zoom the viewport by dragging; camera angle and position sliders sync bidirectionally with the viewport
• Multi-layer compositing — stack multiple patterns as layers with blend modes, opacity, and independent parameters
• Bloom and post-processing — configurable bloom strength, radius, and threshold
• Client-side evolution — mutate and crossover genomes to discover new visuals, no server round-trip needed
• Scene persistence — save, load, and share scenes via short codes
• Gallery — browse and rate community-created scenes
• Favorites — save patterns locally with camera state, export/import collections, slideshow mode
• MCP server — 13 tools for AI agents to create, evolve, and manage scenes
• REST API — full CRUD with JWT auth, anonymous cookie auth, and API keys
• Export — standalone HTML, React component, or JSON genome for embedding anywhere

Built-in Patterns

All 21 patterns ship as read-only node graphs. You can view their source code in the node editor, fork them to create editable copies, and use them as starting points for your own creations.

Line & Curve Patterns

| Pattern | Description | |---------|-------------| | Lissajous | Animated Lissajous and harmonograph curves with configurable frequencies, phase animation, damping, and 3D mode | | Strange Attractor | Lorenz, Rossler, Halvorsen, Thomas, Aizawa, and Dadras strange attractors with adjustable parameters and color-by-speed | | Spirograph | Hypotrochoid and epitrochoid curves with multi-layer support, petal modes, and evolving parameters | | Sphere Spirals | Parametric spiral lines wrapped around a sphere with wobble, noise distortion, and morphing | | Space-Filling Curve | Hilbert, Moore, and other space-filling curves with progressive draw animation and wave distortion | | L-Systems | Fractal trees and branching structures from Lindenmayer systems with wind simulation and 3D mode | | Flow Field | Particles following curl-noise vector fields with configurable noise type, speed, and trail rendering |

Networks & Packing

| Pattern | Description | |---------|-------------| | Network Graph | Force-directed graph with animated traveling particles, cluster detection, and configurable topology | | Circle Packing | Progressive circle packing algorithm with animated growth, multiple color modes, and 3D depth |

Mesh & Geometry Patterns

| Pattern | Description | |---------|-------------| | Cloth | Verlet-integrated soft-body cloth simulation with wind, gravity, pin modes, and stress-based coloring | | Voxel Landscape | Minecraft-style procedural terrain with trees, caves, water, snow, and camera rotation | | Voronoi | Animated Voronoi tessellation with multiple distance metrics, seed motion types, and border effects | | Wave Interference | Superposition of multiple wave sources with configurable wave types and interference visualization | | Truchet Tiling | Animated Truchet tile patterns with multiple tile types, wave distortion, and color cycling |

GPU Shader Patterns

| Pattern | Description | |---------|-------------| | Physarum | Slime mold agent-based simulation with 4-pass GPU pipeline, 5 color modes, and emergent vein networks | | Reaction-Diffusion | Gray-Scott reaction-diffusion system producing organic spots, stripes, and labyrinthine patterns | | Fractal | Mandelbrot, Julia, Burning Ship, and Tricorn fractals with smooth coloring and orbit traps | | Domain Warping | Self-referential noise distortion creating marble, smoke, and alien textures with multi-octave fBm | | Cellular Automata | Conway's Life, Brian's Brain, and other rulesets on a GPU-accelerated grid with age-based coloring | | Magnetic Pendulum | Fractal basin boundaries of a magnetic pendulum system showing chaotic sensitivity to initial conditions | | Electric Field | Electric field visualization from point charges with contour lines, vector field overlay, and animated charges |

Creating Custom Patterns

Node Graph Editor

Open the Pattern Designer from the top bar to access the visual node editor:

1. Add nodes — right-click the canvas or click "+ Add Node" to open the node palette
2. Connect ports — drag from an output port to an input port (type-compatible connections only)
3. Configure parameters — add param_input nodes to expose sliders, toggles, and color pickers in the pattern UI
4. Choose an output — connect your data to a line_output, points_output, mesh_output, or shader_output node
5. Live preview — the right panel renders your graph in real time as you edit

Available Node Types

| Category | Nodes | |----------|-------| | Input | time (elapsed/delta), float_const, int_const, param_input (UI-exposed parameters) | | Math | sin, cos, add, multiply, divide, remap, negate — all vectorized for Float32Array | | Generator | range (evenly-spaced values), parametric_xy (2D curves), lissajous_generator (compound with 16 inputs) | | Transform | scale_positions, damping_envelope (exponential decay) | | Color | rainbow_gradient, solid_color, color_by_speed | | Animation | progressive_draw (animate point count), phase_animate (time-based phase) | | Output | line_output, lineSegments_output, points_output, mesh_output (indexed geometry), shader_output (multi-pass GLSL) | | Shader | glsl_fragment, glsl_vertex (inline GLSL code blocks) |

Code Editor

Click "View Code" in the node editor to see the evaluate function for any selected node. For editable (non-read-only) patterns, you can modify the code directly — changes recompile via new Function() and take effect immediately in the live preview.

The code editor supports JavaScript for generator nodes and GLSL for shader nodes, with syntax highlighting, bracket matching, and line numbers.

Forking Built-in Patterns

All 21 built-in patterns are available as read-only node graphs. To customize one:

1. Open Pattern Manager (grid icon in the top bar)
2. Find the built-in pattern and click Fork
3. The forked copy opens in the editor with full editing capabilities
4. Modify nodes, connections, or code — the live preview updates in real time
5. Your pattern appears in the pattern picker alongside built-ins

Output Modes

| Mode | Description | |------|-------------| | line | Float32Array positions rendered as THREE.Line with configurable thickness and opacity | | lineSegments | Disconnected line segments rendered as THREE.LineSegments | | points | Float32Array rendered as THREE.Points with configurable point size | | mesh | Indexed geometry with positions, normals, and per-vertex colors rendered as THREE.Mesh with lighting | | shader | Multi-pass WebGL shaders with render targets, ping-pong buffers, and custom deposit passes |

Exporting Scenes

Export any scene via the Export button in the top bar. Three formats are available:

HTML Export

Downloads a standalone .html file with the scene genome embedded and Three.js loaded from CDN. The file runs independently — just open it in a browser, no build step required.

<!-- The exported file includes: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
  const genome = { /* your scene data */ };
  // Three.js scene setup and render loop
</script>

React Component Export

Downloads a ThreelabScene.jsx file that renders the scene as a self-contained React component:

import ThreelabScene from './ThreelabScene'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ThreelabScene />
    </div>
  )
}

Requires three as a peer dependency (npm install three).

JSON Export

Downloads the raw genome as a .json file — the complete layer stack, parameters, and global settings needed to reconstruct the scene programmatically:

{
  "schemaVersion": 1,
  "layers": [
    {
      "patternType": "lissajous",
      "enabled": true,
      "blendMode": "normal",
      "opacity": 1,
      "params": { "freqX": 3, "freqY": 2, "points": 2000 }
    }
  ],
  "globalParams": {
    "backgroundColor": "#0a0a0f",
    "bloomStrength": 1.5,
    "bloomRadius": 0.4,
    "bloomThreshold": 0.2,
    "cameraDistance": 50